Этот снежный шар сделан с помощью 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

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

В этом туториале вы рассмотрите 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

Stacked Cards

Видеоурок по созданию стопки карточек с анимацией на чистом CSS. Просто смотрим и повторяем.

#видео #фронтенд

А какой сегодня ты?

🤯 — объясняющий стажеру

🗿 — г*внокодящий

Небольшая шпаргалка по производительности баз данных

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

#шпаргалка #бд

Учим английский во время разработки

Как известно, без английского в программировании никуда. Конечно, если вы не пишите на 1С. Этот инструмент поможет вам подтянуть язык прямо во время кодинга.

Harper будет исправлять вам грамматические ошибки, которые вы совершаете во время написания кода в VS Code, либо текст в Obsidian. Для этого у него есть фирменные плагины. А ещё у него есть своя JS-библиотека для встраивания инструмента в ваши проекты.

Подробнее о возможностях и фишках: https://writewithharper.com

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