Frontend Hash

Голограммы, пленочные засветки и шейдеры на чистом CSS Как вы обычно делаете визуальные эффекты для веб-страницы? Наверное, используете какую-нибудь JS-библиотеку, которая может прокачать сцену, добавив освещение, 3D, шейдеры и прочее, например threejs. Верно? Но на самом деле в некоторых кейсах уже можно смело отказывать от JS в пользу CSS, ведь браузеры наконец поддерживают mix-blend-mode. Например, вы можете добавить эффект засветки при скролле страницы, как на этой картинке выше (как это работает можно увидеть по ссылке). В этой статье вы узнаете, как добавить крутые эффекты для ваших изображений только благодаря CSS и заодно увидите, как они работают в жизни: https://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html #css #фронтенд

​Одностраничные приложения: полное руководство Одностраничники уже плотно вошли в нашу жизнь и значительно её облегчили как с точки зрения разработчиков, так и пользователей. Если вы ещё не работали с SPA, то самое время познакомиться поближе с этой технологией и начать внедрять её в свои проекты: https://www.keycdn.com/blog/single-page-application #spa

Eleventy — простенький генератор статических сайтов Инструмент требует Node.js, но за счёт этого вся первичная «магия» генерации сайтов происходит непосредственно в Терминале У Eleventy очень большое коммьюнити, а также крайне понятная документация Из интересного стоит отметить, что именно с помощью этого инструмента созданы такие популярные сайты, как Chrome Developers, Netlify, Forsquare и многие другие Стоимость: #бесплатно #web #node #сайты

Dot Loader - CSS Анимация загрузки. Написана на чистом CSS. #анимация #карточка #css

💡 JavaScript человеческим языком. Канал будет полезен:  ✓  начинающим верстальщикам,  ✓  фронтенд-разработчикам, ✓  людям, которые изучают JavaScript.

Decryption Effect with Pseudo Elements Эффект расшифровки с псевдоэлементами. Реализован с помощью CSS и JavaScript. #анимация #css #js

Neumorphism.io — онлайн-инструмент для генерации CSS-кода в стиле неоморфизма Работает сервис максимально просто: вы выбираете цвет элемента, его размеры, радиус, дистанцию тени и т.д На выходе получаете готовый CSS-код, который можно вставить в ваш проект. И уже по необходимости самостоятельно «доработать» Стоимость: #бесплатно #css #web #open_source

👉 Изучайте Frontend и прокачивайте свой hard skill вместе с профессионалами. Присоединитесь к @frontend_mind 👉 @frontendquiz - задачи с собеседований по фронтенду. Задачи, тесты и теоретические вопросы по Frontend. Можно быстро проверить себя и обсудить решение с другими разработчиками.

Speed lines Можно задействовать как загрузку или переход между страницами сайта. #js #css #html #coden https://codepen.io/gvissing/pen/vYRoERY @hashdev

​github1s – полезный инструмент, который позволяет открывать любой github-репозиторий в браузерной версии VSCode Это не плагин, а онлайн-ресурс который не связан с вашей локальной VSCode ⤷ Ссылка на проект GitHub | #Interesting #Code #Useful

​Code Thesaurus — пожалуй, самая необычная шпаргалка по языкам программирования С её помощью можно сравнивать структуры языков программирования. Сервис по сути позволяет легче перейти с одного языка программирования на другой. А вместо многословных документаций, там реализована быстрая система быстрых ответов на конкретные вопросы: https://codethesaur.us/ #инструменты #шпаргалки

Must Have для разработчиков! Итак, хотим поделится подборкой каналов. 👉 Переходите в каналы 📚 Предлагаю твоему вниманию популярный Мега Архив для программистов BZD • Книги для программистов. 🪱 Присоединитесь к Python Community RU - СНГ сообщество Python-разработчиков. 🥷 Сделай паузу ИТ Юмор и мемчики. 💻 frontend_mind — ребята делятся опытом разработки и фрагменты кода! 📖 Задачи, тесты и теоретические вопросы с собеседований по JavaScript.

Полезные советы при вёрстке сайта на HTML и CSS В этом небольшом видео вы узнаете некоторые неочевидные, но важные нюансы, которые помогут улучшить вам качество ваше страницы, повысить скорость её загрузки и сделать разработку немного проще: https://www.youtube.com/watch?v=41kjGvSPaEw #видео #html #css

Необычный datepicker на GSAP Этот datepicker позволяет выбрать вам нужную дату, при этом обладая привлекательным внешним видом и нестандартной анимацией. Создан с помощью библиотеки GSAP, подробный код можно изучить здесь: https://codepen.io/aaroniker/pen/MWQjxro #codepen

CodeAbbey — огромная коллекция задач по программированию Здесь вы сможете и попрактиковаться в решении, лучше прокачать свой скилл разработчика, а также выигрывать сертификаты, подтверждающие ваш уровень Из интересного: девиз проекта звучит как «Мы верим, что три вещи ведут к успеху — практика, практика и практика!» Стоимость: #бесплатно #программирование #соревнование

​Document-This – VSCode расширение, которое автоматически генерирует детализированные JSDoc комментарии для TypeScript и JavaScript файлов ⤷ Ссылка на проект @hashdev | #Interesting #JavaScript #TypeScript

Mitosys Canvas — фоновая анимация в виде деления клеток, реализованная с помощью JavaScript. #анимация #javascript

Learn frontend tips - telegram-канал в котором вы найдёте подсказки для frontend разработчиков по: ✓ HTML ✓ CSS ✓ JavaScript ✓ UX/UI

Coolors — сервис для генерации и просмотра цветовых комбинаций Итоговый результат можно использовать где угодно: в веб- и мобильных приложениях, в презентациях и документах. У Coolors есть iOS- и Android-приложения, а также плагин для Figma и Chrome-расширение. Стоимость: #бесплатно (но есть платный тариф) #web #цвета