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

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Читать на парковке: https://max.ru/front_end_dev

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Несколько анимаций с типографикой

4 интересных эффекта для вашего приложения.

https://tympanus.net/codrops/2023/06/16/4-exclusive-demos-slideshows-typographic-animations/
🔥7
Front-end. Вопросы на собеседовании

Разбор новой порции вопросов с собеседований Frontend разработчиков: REST, HTTP/2, OSI, SSL и виды аутентификации.

https://www.youtube.com/watch?v=-mWa7erZu64
18👍2🔥1
Проверка браузера на поддержку CSS фич

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

https://blog.logrocket.com/testing-browser-support-css-features-feature-queries/
👍17
Туториал по SQL для новичков

5 часовой курс + ответы на технические вопросы с собеседований

https://www.youtube.com/watch?v=-fW2X7fh7Yg
👍121
5 способов сделать полосатый фон с помощью CSS

И все они основаны на градиентах.

https://blog.logrocket.com/5-ways-implement-striped-background-css-only/
👍12
Подкаст Веб Стандарты - 374

В выпуске: сабгриды, JS-итераторы, тестирование с Chrome, CSS-нестинг.

https://web-standards.ru/podcast/374/
🔥10👍4
Работаем с CSP в React

Что такое Content Security Policy и как добавить нужные теги для настройки CSP с помощью React Helmet.

https://blog.openreplay.com/security--how-to-deal-with-csp-in-react/
👍8
Маленькие полезные сайты

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

https://blog.codepen.io/2023/06/19/chris-corner-little-useful-websites/
🔥103👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект нарезанной картинки

Реализация необычного эффекта при наведении на изображение.

Демо
Github

https://tympanus.net/codrops/2023/06/21/coding-the-sliced-image-hover-effect-from-quai-network/
🔥10👍3
Подробно о HTTP

От создания до HTTP/2. Основные аспекты и особенности работы, а также какие проблемы решил HTTP/2.

https://cs.fyi/guide/http-in-depth
👍10👨‍💻2
Руководство по использованию Bootstrap с React

https://deadsimplechat.com/blog/bootstrap-with-react/
👍9👎2🥴2
Оптимизация JS

В профайлере DevTools можно увидеть задачи с лейблом Script Evaluation, которые могут занимать много времени. Что это за задачи и как их можно оптимизировать?

https://web.dev/script-evaluation-and-long-tasks/
👍101🔥1
Создаем приложение на Svelte с SSR рендерингом при помощи SvelteKit

Пошаговый туториал по разработке приложения + деплой на Netlify.

https://www.smashingmagazine.com/2023/06/build-server-side-rendered-svelte-apps-sveltekit/
👍9🤔4❤‍🔥2👎2
Руководство по созданию Glassmorphism эффекта на CSS

https://dev.to/anuraggharat651/an-intuitive-guide-to-css-glassmorphism-4id9
👍18💩1
Как работать с несколькими обработчиками для одного события

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

https://gomakethings.com/how-to-more-performantly-listen-for-the-same-event-across-different-scripts-with-javascript/
🔥12👍2
Руководство по макетам и вложенным макетам Next.JS

https://blog.logrocket.com/guide-next-js-layouts-nested-layouts/
👍15
Подборка Web API's для добавления интересного функционала к вашему приложению

Web Speech, Accelerometer, Page Visibility и еще несколько.

https://dev.to/ruppysuppy/7-more-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-50bg
👍9🌭1
Сloudflare внедрили HTTP/3 приоритизацию запросов

Что такое приоритизация, и как она помогает грузить приложение еще быстрее.

https://blog.cloudflare.com/better-http-3-prioritization-for-a-faster-web/
👍11
This media is not supported in your browser
VIEW IN TELEGRAM
Git File History - расширение для VSCode для отображения истории изменений файла

Удобно отображает комиты в виде горизонтального списка + анимирует изменения в файле.

https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
👍37🐳2
Карманный справочник

Удобные подсказки по HTML, CSS и JS для начинающих и не только. Есть набор генераторов для CSS, компрессор для JS и еще много инструментов для разработчиков.

https://htmlcheatsheet.com/
🔥17🤡8🌚1