29611
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu № 4850240725
Создаем многошаговые формы на vanilla js
Кажется, мы стали забывать как сделать что-то сложнее логин-формы на чистом js 😁
Пример реализации многошаговой формы без использования фреймворков - хороший способ повторить основы.
https://css-tricks.com/how-to-create-multi-step-forms-with-vanilla-javascript-and-css/
Github Copilot in VSCode
Copilot теперь доступен бесплатно (с ограничениями) в плагине VSCode. Конечно нужен аккаунт не из РФ
https://github.blog/changelog/2024-12-18-announcing-github-copilot-free/
Делаем из простого ToDo App приложение уровня enterprise
Какие технологии можно использовать, чтобы сделать приложение с мониторингом, базой данных, кешированием, контернеризацией и прочим (и тратить на его поддержку $2000 в месяц). Утрированный пример.
https://www.youtube.com/watch?v=nYlv0I9Ips0
Нарулил для вас немного магии, чтобы скрасить суету и ожидание 😁
https://jem-space.ru/ball?q=j
Делитесь своими предсказаниями в коментах.
🧦Новогодний подгон — бесплатный курс по фулстек-разработке
Сергей Дмитриев — разработчик со стажем, потратил год, чтобы сделать курс, который включает весь процесс создания приложения с нуля до деплоя. Курс абсолютно бесплатный, и за это отдельный респект 😎
В курсе акцент на практику, реальные проекты и самые актуальные технологии.
Подробнее тут https://habr.com/ru/articles/866678/
Для тех, кто возьмется проходить, есть чат поддержки /channel/devPontChat
Плавный переход между страницами в пару строчек кода
Введение во View Transitions API с примерами.
https://htmhell.dev/adventcalendar/2024/3/
Введение в CSS Scroll-Driven анимации
10 лет с тех пор как scroll-driven появились в статусе proposal и вот они уже доступны. Простой пример на чистом CSS с реализацией таймлайн бара просмотра страницы в зависимости от скролла.
https://www.smashingmagazine.com/2024/12/introduction-css-scroll-driven-animations/
Создаем чистый API
Руководство с советами и практиками по созданию поддерживаемого и чистого RESTful API.
https://dev.to/geekvergil/stop-building-messy-apis-heres-your-clean-code-guide-4h95
🎁 Бесплатный урок курса «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
#png #стеганография
Как спрятать любые данные в PNG
А вы уже прятали что-то внутри PNG? Базовый способ надежно спрятать что-то внутри картинки. И все на вашем любимом JavaScript!
⭐️⭐️⭐️◽️◽️
📖 Читать
Работаем с датой и временем в JavaScript
Работа с датой в JS зачастую не так проста. Для облегчения и удобства многие использовали Moment.js/date-fns. Как новый Temporal API может упростить работу с датой?
https://blog.logrocket.com/master-javascript-date-time-moment-js-temporal/
В Ташкенте прошел финал международного чемпионата по программированию Yandex Cup 2024. Рекордный призовой фонд в размере 16 млн рублей разделили участники и России, Беларуси, Японии, США, Великобритании и Португалии.
Участвовать можно было в 6 направлениях, среди которых был и фронтенд.
Темой соревнования в этом году стала «цифровая цивилизация», объединяющая древнюю культуру и IT. Кодеры изучали быт древних цивилизаций через программирование — например, расшифровывали древние письмена и придумывали систему архивации табличек для династии Хань.
А участники, попавшие на офлайн-финал, могли посетить отдельное пространство в формате «Музея Айтичности», в котором можно было представить себя человеком из будущего и посмотреть, как будут выглядеть артефакты современной IT-культуры через тысячу лет.
3 наиболее необходимых CSS фич для таблиц
Дарин Сеннефф рассказывает о UX таблиц с точки зрения стилизации и тех фичах, которых ему не хватает в нативной реализации таблиц, предлагая свои решения для этого.
https://www.darins.page/articles/my-3-most-wanted-css-table-features
Preload, prefetch, preconnect...
Атрибуты загрузки ресурсов: как они работают и как влияют на скорость работы и загрузки приложений.
https://habr.com/ru/articles/445264/
Копаем глубже в Feature-Sliced Design
Александр Моргунов кратко разбирает FSD, делится опытом его использования и раскрывает некоторые моменты, не описанные в его документации. А также отвечает на главный вопрос: нужен вам FSD или нет?
https://www.youtube.com/watch?v=M84x3pzDYr0
💻 Новогодние праздники вместе с aeza.net!
Новый год - твой шанс воплотить смелые идеи и взять разгон для великих дел!
Начни год с мощного рывка и получи кэшбек 15% на пополнение баланса с aeza.net.
Aéza — надежный хостинг для проектов любого масштаба, и подойдет для тех, кто хочет:
🚀 запустить сайт мечты,
🚀 прокачать свой бизнес в сети,
🚀 или просто начать этот год с классной идеи!
И конечно, у них:
🖥 Высокая скорость до 25 Гбит/с.
🖥 24/7 поддержка, всегда на связи.
🖥 Мощные серверы на базе Ryzen 9 9950x.
Скорее переходи в телеграм-канал и не пропусти анонс скидок и крутых ивентов 🥰
Реклама. ИП Лобанов Леонид Константинович. erid: LjN8K4epn
State of JavaScript 2024
Состояние экосистемы JS: тренды, инструменты, библиотеки и многое другое. Аналитика за прошедший год
https://2024.stateofjs.com/en-US/
CSS Gradients
Для тех, кто решил начать год с создания чего-то нового, держите подборку красивых градиентов (для страницы логина например 😊)
https://cssgradient.io/gradient-backgrounds/
Ваш 2024 в GitHub
http://git-wrapped.com
Скидывайте свои итоги в коменты 🚀
Создание масштабируемых микро-фронтенд приложений с Next.js Multi Zones
Multi-Zones — это функциональность в Next.js, которая позволяет объединять несколько независимых приложений Next.js под одним доменом
https://techhub.iodigital.com/articles/building-scalable-micro-frontends-with-next-js-multi-zones
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»
https://habr.com/ru/companies/ruvds/articles/864762/
JavaScript Window Object
Погружаемся в понятия и работу с объектом Window. Полезная информация для начинающих.
https://www.sitepoint.com/javascript-window-object/
Отслеживание утечек памяти в приложениях на NodeJs
Интересный подход поиска и устранения утечек памяти в незнакомом приложении с большой кодовой базой.
https://dev.to/gkampitakis/tracking-down-high-memory-usage-in-nodejs-2lbn
Создаем физический движок в 2D с нуля на JS
Создание собственного движка довольно сложная задача, но если опустить перфоманс оптимизации и ограничиться основными функциями, то это задача на удивление окажется простой.
https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/
Практическое применение якорного позиционирования
Создаем онбординг (и не только) с помощью CSS Anchor position
https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/
Большой гайд по верстке с flexbox
Исчерпывающее руководство с демо и паттернами разработки на flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS content-visibility
Одна из оптимизаций производительности, которую вы, возможно, упустили.
https://www.trevorlasn.com/blog/css-content-visibility
От медленного к быстрому
Используем JS Performance API для анализа и оптимизации веб приложений.
https://www.trevorlasn.com/blog/performance-web-api-in-javascript
Импортируем JS библиотеки без сборщиков
Джулия Эванс рассказывает о том, как в современной экосистеме фронтенд разработки обойтись без сборщиков (если у вас небольшой проект/вам лень/вы любите трудности и не любите сон): 3 типа файлов, которые предлагают вам библиотеки и как с ними работать.
https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/
❓ Хотите создать свою первую веб-страницу с нуля? Без магии и кодерских заклинаний — только HTML, CSS и ваши идеи!
👉 На открытом вебинаре «Создаем свою первую страницу: HTML и CSS» вы узнаете, как работают основные элементы веб-разработки: от структуры HTML до современной стилизации с CSS.
Мы разберем шаги, которые помогают создать не просто страницу, а основу для вашего портфолио или будущего сайта!
💪 Это ваш шанс научиться веб-разработке, используя простой и мощный инструментарий. Уже на вебинаре вы создадите свою первую веб-страницу — с текстом, картинками и уникальным дизайном!
⏰ Регистрируйтесь на открытый урок 3 декабря в 19:00 мск! Урок проходит в преддверии старта курса «Fullstack Developer», участники вебинара получат скидку на обучение.
👉 Для участия зарегистрируйтесь: https://otus.pw/AhpD/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru