front_end_dev | Technologies

Telegram-канал front_end_dev - FrontEndDev

29611

🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu № 4850240725

Subscribe to a channel

FrontEndDev

Создание масштабируемых микро-фронтенд приложений с Next.js Multi Zones

Multi-Zones — это функциональность в Next.js, которая позволяет объединять несколько независимых приложений Next.js под одним доменом

https://techhub.iodigital.com/articles/building-scalable-micro-frontends-with-next-js-multi-zones

Читать полностью…

FrontEndDev

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»

https://habr.com/ru/companies/ruvds/articles/864762/

Читать полностью…

FrontEndDev

JavaScript Window Object

Погружаемся в понятия и работу с объектом Window. Полезная информация для начинающих.

https://www.sitepoint.com/javascript-window-object/

Читать полностью…

FrontEndDev

Отслеживание утечек памяти в приложениях на NodeJs

Интересный подход поиска и устранения утечек памяти в незнакомом приложении с большой кодовой базой.

https://dev.to/gkampitakis/tracking-down-high-memory-usage-in-nodejs-2lbn

Читать полностью…

FrontEndDev

Создаем физический движок в 2D с нуля на JS

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

https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/

Читать полностью…

FrontEndDev

Практическое применение якорного позиционирования

Создаем онбординг (и не только) с помощью CSS Anchor position

https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/

Читать полностью…

FrontEndDev

Большой гайд по верстке с flexbox

Исчерпывающее руководство с демо и паттернами разработки на flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Читать полностью…

FrontEndDev

CSS content-visibility

Одна из оптимизаций производительности, которую вы, возможно, упустили.

https://www.trevorlasn.com/blog/css-content-visibility

Читать полностью…

FrontEndDev

От медленного к быстрому

Используем JS Performance API для анализа и оптимизации веб приложений.

https://www.trevorlasn.com/blog/performance-web-api-in-javascript

Читать полностью…

FrontEndDev

Импортируем JS библиотеки без сборщиков

Джулия Эванс рассказывает о том, как в современной экосистеме фронтенд разработки обойтись без сборщиков (если у вас небольшой проект/вам лень/вы любите трудности и не любите сон): 3 типа файлов, которые предлагают вам библиотеки и как с ними работать.

https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/

Читать полностью…

FrontEndDev

❓ Хотите создать свою первую веб-страницу с нуля? Без магии и кодерских заклинаний — только HTML, CSS и ваши идеи!

👉 На открытом вебинаре «Создаем свою первую страницу: HTML и CSS» вы узнаете, как работают основные элементы веб-разработки: от структуры HTML до современной стилизации с CSS.

Мы разберем шаги, которые помогают создать не просто страницу, а основу для вашего портфолио или будущего сайта!

💪 Это ваш шанс научиться веб-разработке, используя простой и мощный инструментарий. Уже на вебинаре вы создадите свою первую веб-страницу — с текстом, картинками и уникальным дизайном!

⏰ Регистрируйтесь на открытый урок 3 декабря в 19:00 мск! Урок проходит в преддверии старта курса «Fullstack Developer», участники вебинара получат скидку на обучение.

👉 Для участия зарегистрируйтесь: https://otus.pw/AhpD/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Читать полностью…

FrontEndDev

Эксперимент: автоматический запуск View Transitions с помощью MutationObserver

Интересный подход и реализация переходов для создания более приятного и плавного интерфейса.

https://www.bram.us/2024/11/25/experiment-automatically-triggered-view-transitions-with-mutationobserver

Читать полностью…

FrontEndDev

Введение в TanStack Router

Посмотрим на что способен TanStack Router и его основные фичи. Простые примеры: объявление роутов, работа с параметрами url, вложенные лейауты.

https://frontendmasters.com/blog/introducing-tanstack-router/

Читать полностью…

FrontEndDev

Ищем перфоманс проблемы в React приложениях

Еще один инструмент для поиска слабых мест, не требующий внесения изменений в код проекта.

https://github.com/aidenybai/react-scan#readme

Читать полностью…

FrontEndDev

Генерируем моковые запросы/ответы

Mocky — онлайн сервис для создания моков. Настраиваете параметры ответа, в том числе и заголовки и получаете url по которому можно делать запросы. Удобно, если не настроены локальные моки и нужно быстро что-то проверить.

https://designer.mocky.io/

Читать полностью…

FrontEndDev

Плавный переход между страницами в пару строчек кода

Введение во View Transitions API с примерами.

https://htmhell.dev/adventcalendar/2024/3/

Читать полностью…

FrontEndDev

Введение в CSS Scroll-Driven анимации

10 лет с тех пор как scroll-driven появились в статусе proposal и вот они уже доступны. Простой пример на чистом CSS с реализацией таймлайн бара просмотра страницы в зависимости от скролла.

https://www.smashingmagazine.com/2024/12/introduction-css-scroll-driven-animations/

Читать полностью…

FrontEndDev

Создаем чистый API

Руководство с советами и практиками по созданию поддерживаемого и чистого RESTful API.

https://dev.to/geekvergil/stop-building-messy-apis-heres-your-clean-code-guide-4h95

Читать полностью…

FrontEndDev

🎁 Бесплатный урок курса «Fullstack Developer» на JS.
🚀 Тема: Манипуляции с HTML и CSS с помощью JavaScript — основы динамичного взаимодействия с элементами страницы
⏰ Дата и время: 18.12.2024 в 20:00

👉 Зарегистрироваться на урок: https://otus.pw/bgDV/

Что будет на вебинаре?
- Работа с DOM: освоим поиск, изменение и добавление HTML-элементов с помощью JavaScript, чтобы сделать страницы интерактивными.
- Реагирование на клики и события: как с помощью JavaScript управлять действиями пользователя, изменяя элементы страницы по щелчкам, вводам и другим событиям.
- Основы изменения стилей: научимся добавлять и убирать классы, менять стили CSS для динамического управления внешним видом элементов.

Что узнают участники?
- Как использовать JavaScript для взаимодействия с HTML и CSS, включая управление элементами страницы через простые клики и другие события.
- Основные методы изменения стилей и классов, чтобы делать интерфейсы более динамичными.
- Практические навыки для применения в небольших проектах, позволяя создавать страницы с интерактивными элементами, которые реагируют на действия пользователей.

Бонус для участников:
- Справочник по HTML
- Справочник по CSS

Урок пройдет в рамках курса «Fullstack Developer». Скидка на курс 15%.

👉 Зарегистрироваться на урок: https://otus.pw/bgDV/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Читать полностью…

FrontEndDev

#png #стеганография

Как спрятать любые данные в PNG

А вы уже прятали что-то внутри PNG? Базовый способ надежно спрятать что-то внутри картинки. И все на вашем любимом JavaScript!

⭐️⭐️⭐️◽️◽️

📖 Читать

Читать полностью…

FrontEndDev

Работаем с датой и временем в JavaScript

Работа с датой в JS зачастую не так проста. Для облегчения и удобства многие использовали Moment.js/date-fns. Как новый Temporal API может упростить работу с датой?

https://blog.logrocket.com/master-javascript-date-time-moment-js-temporal/

Читать полностью…

FrontEndDev

В Ташкенте прошел финал международного чемпионата по программированию Yandex Cup 2024. Рекордный призовой фонд в размере 16 млн рублей разделили участники и России, Беларуси, Японии, США, Великобритании и Португалии.

Участвовать можно было в 6 направлениях, среди которых был и фронтенд.
Темой соревнования в этом году стала «цифровая цивилизация», объединяющая древнюю культуру и IT. Кодеры изучали быт древних цивилизаций через программирование — например, расшифровывали древние письмена и придумывали систему архивации табличек для династии Хань.

А участники, попавшие на офлайн-финал, могли посетить отдельное пространство в формате «Музея Айтичности», в котором можно было представить себя человеком из будущего и посмотреть, как будут выглядеть артефакты современной IT-культуры через тысячу лет.

Читать полностью…

FrontEndDev

3 наиболее необходимых CSS фич для таблиц

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

https://www.darins.page/articles/my-3-most-wanted-css-table-features

Читать полностью…

FrontEndDev

Preload, prefetch, preconnect...

Атрибуты загрузки ресурсов: как они работают и как влияют на скорость работы и загрузки приложений.

https://habr.com/ru/articles/445264/

Читать полностью…

FrontEndDev

Копаем глубже в Feature-Sliced Design

Александр Моргунов кратко разбирает FSD, делится опытом его использования и раскрывает некоторые моменты, не описанные в его документации. А также отвечает на главный вопрос: нужен вам FSD или нет?

https://www.youtube.com/watch?v=M84x3pzDYr0

Читать полностью…

FrontEndDev

Адвент календарь по TS

25 задачек по TypeScript чтобы скрасить ваш декабрь 😁

https://adventofcode.com/2024

Читать полностью…

FrontEndDev

Стилизуем рамки элементов с background-clip: border-area

Как работает новое свойство background-clip: border-area, доступное пока только в Safari 18.2, и чем оно отличает от border-image.

https://webkit.org/blog/16214/background-clip-border-area/

Читать полностью…

FrontEndDev

IT-инженеры объединяйтесь! 🤝

Мы собрали огромную базу прикладной информации для IT-инженеров.

Выбирайте, что вам интересно:

Полупроводники

Высоконагруженные системы

Связь и космос

Промышленный дизайн

Нейроморфные технологии

Индустрия 4.0

Печатные платы

Технологии мира музыки

📌 Статьи, лекции, подкасты, кейсы из инженерной практики и тематические гайды в одном месте
@ultimate_engineer

Читать полностью…

FrontEndDev

Новый релиз кандидат - TypeScript 5.7

Улучшенная работа со Strict Null Checks, улучшения безопасности типов при работе с enum, добавлен утилитарный тип NoInfer и еще несколько улучшений новой версии TS

https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/

Читать полностью…

FrontEndDev

Почта на прокачку: как повысить защиту Microsoft Exchange и не слить чувствительные данные в сеть

⏰ Когда: 27 ноября, 11:00 по Москве
📍 Регистрируйтесь на вебинар!

SuperHardio time*! Чтобы узнать, как захардкорить самое ценное и построить настоящий лабиринт для хакера, присоединяйтесь к нашему новому образовательному проекту от ИТ-экспертов Positive Technologies.

В программе:

- Что не так с типовой настройкой Microsoft Exchange 2019

- Топ-3 сценария уязвимостей

- Как ИТ-специалисту справиться с бременем ответственности за корректную работу почтового сервиса.

- Поговорим про харденинг Microsoft Exchange 2019 и особенности подхода к повышению киберустойчивости

Вебинар будет полезен архитекторам, CIO, СТО, DevOps-экспертам и техническим специалистам разных профилей. Присоединяйтесь!

*Это как "Марио тайм", время героев-экспертов харденинга

Читать полностью…
Subscribe to a channel