FrontEndDev
28.8K subscribers
2.2K photos
23 videos
7.41K 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
Друзья!

Тут ребята из vc.ru запилили бинго в стиле "Узнай свой психологический возраст" или "Как бы тебя звали на проекте, если б ты не положил прод".

Короткое бинго для программистов, которое по выбранным ачивкам выдает инфу о том, кто ты есть на самом деле. Я собрал 15 из 25 и перед вами в итоге страдающий сеньор с соответствующим гимном (жиза) 😅

Поиграться можно тут.
🔥11👎4💩21👍1
Почему кэширование важно для API

Причины, почему стоит использовать кэширование при запросах к API, а также способы его реализации и ситуации, когда лучше обойтись без него.

https://thenewstack.io/why-http-caching-matters-for-apis/
👍11
WebAssembly: короткий обзор ассемблера для фронтенда

Как начать разработку с WebAssembly: практический пример с реализацией простого веб приложения с использованием фреймворка Yew, позволяющего использовать Rust.

https://habr.com/ru/companies/vk/articles/775852/
👍152👎1
Signals - альтернатива React Hooks

В чем проблема React Hooks и каким образом можно решить ее и улучшить перфоманс вашего приложения с помощью Signals.

https://www.youtube.com/watch?v=SO8lBVWF2Y8
20👍8🔥4👎2
FrontEndDev
Структура проекта для NestJS Если вы задавались вопросом, как организовать проект для своего API или сервера на NodeJs, то вот хороший пример. Причем в проекте уже реализована простая бизнес логика, аутентификация и другие аспекты проектов на NestJS. ht…
Чистая архитектура на NodeJS

Реализация подхода чистой архитектуры для backend, с помощью которого можно создавать гибкие, модульные и легко поддерживаемые приложения. Пример проекта на NestJS.

https://github.com/royib/clean-architecture-nestJS
🔥91👍1🥱1😐1
Вложенность CSS

Ахмад Шадид рассказывает и показывает на примерах, как с помощью нативной вложенности решать повседневные задачи стилизации.

https://ishadeed.com/article/css-nesting/
👍17🥴5
Интерактивное руководство по CSS Grid

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

https://www.joshwcomeau.com/css/interactive-guide-to-grid/
🔥17👏2👍1
Неочевидные моменты Typescript и способы их решения

Примеры ситуаций, с которыми можно столкнуться при работе с Typescript.

https://habr.com/ru/articles/775330/
👍15🔥3🤔1
Server-side rendering и практики работы с запросами

Нюансы работы с запросами, отличающие клиентскую разработку от серверной.

https://habr.com/ru/companies/domclick/articles/776714/
👍14
Полный курс по HTTP Networking

https://www.youtube.com/watch?v=2JYT5f2isg4
👍15🔥1
Создание 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