Этот снежный шар сделан с помощью Canvas. Логика прописана в JavaScript, а стили в CSS. Никаких сторонних библиотек, препроцессоров и прочего.

Можете убедиться сами, посмотрев код проекта на codepen: https://codepen.io/Calleb/pen/pvzgBpa

#codepen #canvas

Адаптивная вёрстка с учётом размера шрифта пользователя и брейкпоинты

Занимаясь адаптивной версткой вы вскоре обнаружите, что иногда простое использование медиазапросов не только не помогает, но и усложняет разработку фронтенда.

И действительно, для создания адаптивного сайта нужно использовать все возможности HTML/CSS, иногда даже не очевидные. В этой статье как раз рассматриваются такие возможности и решения.

#фронтенд

Что делает код трудным для чтения? Визуальные паттерны сложности

Сегодня мы погрузимся в исследование визуальных паттернов кода, которые заставляют мозг плавиться при попытке прочитать его. Вы узнаете о 8 визуально различимых свойствах, которые помогут программистам любого языка улучшить читаемость кода.

Подробнее: https://habr.com/ru/articles/893820/

#советы

Как найти устаревший HTML-код

Если вы работаете над старым проектом, то можете столкнуться с устаревшими атрибутами и элементами HTML. Чтобы не искать их вручную, можно воспользоваться ObsoHTML. Этот Node и CLI-инструмент просканирует файлы HTML, PHP, JavaScript и TypeScript на наличие устаревших элементов и обновит их.

Инструкция по установке и более подробная информация по ссылке.

#инструменты

Как устроен рендеринг в браузере

Что происходит между вводом URL-адреса в браузере и моментом отображения веб-страницы? Такой вопрос могут задать на собеседовании, да и просто это полезно знать.

Давайте интерактивно изучим сложный процесс рендеринга в браузере с помощью этой статьи.

Или разработчик, не умеющий кодить🤔

6 креативных идей для CSS эффектов при наведении на ссылку

Ссылки — это то, с чем нам приходится взаимодействовать наиболее часто при работе в интернете. Поэтому отличным решением сделать это взаимодействие красивым и запоминающимся, чтобы пользователю было приятно пользоваться вашим сайтом и возвращаться на него.

В этой статье собраны 6 креативных идей с подробной инструкцией по их реализации. Подробнее:

https://css-tricks.com/css-link-hover-effects/

#css

Стрелочные и обычные функции в JavaScript: в чём разница?

В JavaScript функции — это основа работы с кодом, и их можно писать разными способами: с помощью обычных и стрелочных функций. На первый взгляд, они решают одну задачу — выполняют код, — но различия между ними влияют на то, как и где их лучше применять.

Давайте разберёмся, в чём заключаются эти различия, посмотрим на пример и выясним, когда какую функцию стоит использовать.

Обычные функции пишутся с использованием ключевого слова function, а стрелочные — с помощью более компактного синтаксиса =>.

//Обычная функция
function greet(name) {
  return "Привет, " + name;
}

//Стрелочная функция
const greet = (name) => "Привет, " + name;

This. Одно из главных различий — как функции работают с контекстом this.

— В обычной функции this зависит от того, как её вызвали.
— В стрелочной функции this берётся из внешнего окружения и не меняется.
Это важно, когда вы работаете с объектами или обработчиками событий.

Аргументы. Обычные функции имеют встроенный объект arguments для доступа ко всем переданным параметрам, а стрелочные — нет (но можно использовать ...args).

Конструкторы. Обычную функцию можно использовать с new для создания объектов, стрелочную — нельзя.

Генераторы. Обычные функции поддерживают синтаксис function* для генераторов, стрелочные — нет.

Чтобы понять разницу работы с this на практике, рассмотрим пример с объектом:

const person = {
  name: "Алекс",
  sayHello: function() {
    console.log("Привет, я " + this.name);
  },
  sayHelloArrow: () => {
    console.log("Привет, я " + this.name);
  }
};

person.sayHello();       // Привет, я Алекс
person.sayHelloArrow();  // Привет, я undefined

— В методе sayHello (обычная функция) this указывает на объект person, и мы получаем доступ к свойству name.

— В методе sayHelloArrow (стрелочная функция) this берётся из внешнего контекста (например, window), где name не определён, поэтому результат — undefined.
Этот пример показывает, почему выбор типа функции важен в зависимости от задачи.

Стрелочные функции отлично подходят для коротких коллбэков (например, в map или setTimeout) и случаев, когда не нужен собственный`this`.

Обычные функции нужно использовать в методах объектов, где важен динамический this, или когда нужны конструкторы и объект arguments.

Стрелочные и обычные функции в JavaScript — это инструменты с разными сильными сторонами. Понимание их различий поможет вам выбрать правильный подход для каждой ситуации.

#простымисловами #javascript

Собеседование фронтендера с 30-летним опытом

Максим Demi Murych знает спецификацию JS лучше самих создателей языка, занимается реверс-инжиниргом и оптимизацией JS-кода уже более 30 лет. Но даже он не смог дать ответы на некоторые вопросы собеса. Почему?

Это видео — прекрасная демонстрация того, что даже опытный разработчик не может знать все. Особенно, когда просят объяснить неправильные или неэффективные методы работы с кодом. Подробнее в видео.

#видео #javascript

Сегодня отмечаем День Рунета!

7 апреля 1994 года был зарегистрирован национальный домен .ru, что ознаменовало рождение уникального пространства для всех пользователей русскоязычного интернета.

Сегодня домен .ru занимает 7-е место в мире по количеству зарегистрированных сайтов. Самые популярные домены — универсальный .com (156,3 млн сайтов), китайский .cn (19,7 млн) и немецкий .de (17,7 млн).

Желаем вам создать такой сайт, который войдет в историю Рунета и поможет домену .ru попасть в топ-3!

А с какого сайта началось ваше знакомство с Рунетом? Поделитесь в комментариях!

React vs Jmix: что выбрать для бизнес-приложений?

Разработка UI для бизнес-приложений — задача не из лёгких. React предлагает гибкость и широкую экосистему, но требует интеграции сторонних библиотек для полной функциональности. С другой стороны, Jmix предоставляет комплексное решение с готовыми инструментами для быстрой разработки, включая поддержку Kotlin и дизайн-тайм ролей. Однако выбор между ними зависит от специфики проекта и предпочтений команды. Подробнее о сравнении этих фреймворков читайте в статье.

#react #jmix

Проверяем безопасность собственного сайта с помощью web-check

Чтобы быть уверенными в том, что ваш сайт не взломают, нужно действовать на опережение. web-check — это OSINT-инструмент, который пользуются хакеры и можете воспользоваться вы сами. Он поможет вам проанизировать архитектуру проекта и выявить слабые места: IP-адреса, цепочку SSL, записи DNS, файлы cookie, заголовки страниц, информацию о домене, правила сканирования поисковых систем, карту сайта, местоположение сервера, реестр редиректов, открытые порты, расширения безопасности DNS, производительность сайта, трекеры, связанные имена хостов и даже углеродный след.

Кстати, абсолютно бесплатно.

#инструменты #osint #безопасность

Лучшие практики по работе с Context API в React приложении

Разбираемся как оптимизировать React приложение при работе с Context API: как лучше организовать код с добавлением кастомных хуков, и какую технику применить, чтобы избежать лишних рендеров там, где это не требуется.

Подробнее в видео: https://youtu.be/zmAL9revylc

#видео #react

Полное визуальное руководство по пониманию цикла событий Node.js

Node.js устроен не так просто, как кажется. Промисы, таймеры, очередь задач... В какой момент всё это вообще исполняется?

Эта наглядная статья — как экскурсия по закулисью: вы увидите, как работает event loop, в каком порядке выполняются колбэки и почему иногда setTimeout с 0 мс ждёт дольше, чем ожидалось. Визуально, чётко и с примерами. Если вы хотите разобраться в цикле событий раз и навсегда — must read.

#nodejs

Как оперативно устранять сбои в работе веб-сайтов

С помощью бесплатного сервиса Tracer можно отслеживать ошибки, зависания и сбои в работе в режиме реального времени. Кроме того, при возникновении проблем сервис предоставляет детальный отчет с указанием конкретных зависимостей, разделов и модулей, а ИИ-модель анализирует данные и определяет возможные причины ошибки.

Управляем содержимым веб-страницы жестами

В этом туториале вы рассмотрите 5 примеров:

— получение данных с видеокамеры и их отрисовка на холсте (canvas);
— обнаружение и отслеживание кисти руки;
— управление «курсором» с помощью указательного пальца;
— определение жеста «щипок» (pinch);
— нажатие кнопки с помощью щипка.

Подробнее:

https://habr.com/ru/company/timeweb/blog/698286/

#фронтенд #javascript

У Anime.js вышло крупное обновление

Библиотека для создания сложных анимаций в вебе на чистом JS получила обновление под номером 4.0. Кроме нового номера библиотека обзавелась поддежкой Web Animation API, новой модульной архитектурой, анимацией прокрутки и многим другим.

Все подробности на сайте проекта: https://animejs.com

#новости #библиотека #javascript #animejs