FrontEndDev
28.9K subscribers
2.2K photos
23 videos
7.4K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
Создание SVG через код

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

https://svg-tutorial.com/
👍13🔥7
Вам не нужен JS для этого

Несколько примеров того, когда стоит применять правило использования более простых технологий:
▫️переключатель чекбокса
▫️ввод с подсказкой
▫️аккордеон
и еще несколько случаев, когда можно обойтись без JS.

https://www.htmhell.dev/adventcalendar/2023/2/

Статья кстати из HTML Hell адвент календаря, где каждый день декабря выходит новая статья о веб разработке.
👍311
Как работают JS Promise

Туториал для начинающих.

https://www.freecodecamp.org/news/javascript-promise-object-explained/
🔥9👍4
Eleventy vs NextJS

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

https://blog.logrocket.com/eleventy-vs-next-js-static-site-generation/
👍15🤣5👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем сложную анимацию на ThreeJS

Красивый эффект реагирующий на движение мыши.

Demo | Github

https://tympanus.net/codrops/2023/12/13/creating-an-interactive-mouse-effect-with-instancing-in-three-js/
👍28👎21
Пример реализации инпута для одноразовых паролей

https://chriscoyier.net/2023/12/04/html-css-for-a-one-time-password-input/
👍191
16 впечатляющих игр на чистом CSS

Демо и исходники прилагаются.

https://www.frontendplanet.com/css-game-examples/
👍16
10 советов по оптимизации производительности приложений

Краткие советы с ссылками на подробные ресурсы.

https://calendar.perfplanet.com/2023/ten-optimisation-tips-for-an-initial-web-performance-audit/
12👍5
Используем CSS Subgrid для создания продвинутой разметки

https://blog.logrocket.com/designing-advanced-layouts-with-css-subgrid/
👍131
Линтер Oxlint

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

https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html
🔥14👍2🤔21🤡1
Тестирование JavaScript c помощью Jest

Вводный курс за 1 час.

https://www.youtube.com/watch?v=IPiUDhwnZxA&ab_channel=freeCodeCamp.org
💩10👍5👎2
TypeScript фичи, которые повысят уровень вашей разработки

https://medium.com/@hamsterhomka/e40a3424fa50
16🤨1
HTML и CSS ошибки, влияющие на доступность

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

https://habr.com/ru/companies/ruvds/articles/776392/
👍134
Используем Github Pages для хостинга NextJs приложения

Простой туториал по конфигурации Github Pages и NextJs.

https://www.viget.com/articles/host-build-and-deploy-next-js-projects-on-github-pages/
10👍3
Веб компонент снежинок

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

https://www.zachleat.com/web/snow-fall/
👍191🥰1
Псевдоклассы :user-valid и :user-invalid

Улучшаем нативную валидацию полей при помощи селекторов псевдоклассов, которые применяются к полям, которые были изменены пользователем, в отличии от :valid и :invalid.

https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes?hl=ru
👍293🌭2🔥1
Пишем змейку на JS

Начинаем год с разработки браузерной змейки в ретро стиле на JS + CSS.

https://www.youtube.com/watch?v=uyhzCBEGaBY
25🔥9👍1
Архитектурный паттерн Dependency Injection в React-приложении

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

https://habr.com/ru/companies/tinkoff/articles/540662/
👍15💩73❤‍🔥1
11 best parctises для ваших форм логина и регистрации

Несколько советов о том, как сделать ваши формы более удобными, доступными и практичными.

https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
👍126🥱2