Frontend Hash

Vimium — лучший способ познать боль при веб-браузинге

Если шутки про «как выйти из Vim?» для вас вовсе не шутки, то это расширение для Chrome сделает вашу жизнь ещё сложнее

Установив его, вы сможете управлять процессом браузинга исключительно при помощи клавиатуры — о существовании мыши можно будет забыть навсегда

Те, кто использовал текстовый редактор Vim, поймут принцип работы этого инструмента

Из интересного — есть версия и для Firefox

Стоимость: #бесплатно

#web #расширение

Голограммы, пленочные засветки и шейдеры на чистом 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

https://codepen.io/josetxu/pen/MWXbbeW

Decryption Effect with Pseudo Elements

Эффект расшифровки с псевдоэлементами. Реализован с помощью CSS и JavaScript.

#анимация #css #js

https://codepen.io/georgehastings/pen/YNMEbe

Neumorphism.io — онлайн-инструмент для генерации CSS-кода в стиле неоморфизма

Работает сервис максимально просто: вы выбираете цвет элемента, его размеры, радиус, дистанцию тени и т.д

На выходе получаете готовый CSS-код, который можно вставить в ваш проект. И уже по необходимости самостоятельно «доработать»

Стоимость: #бесплатно

#css #web #open_source

Speed lines

Можно задействовать как загрузку или переход между страницами сайта.

#js #css #html #coden

https://codepen.io/gvissing/pen/vYRoERY

@hashdev

​github1s – полезный инструмент, который позволяет открывать любой github-репозиторий в браузерной версии VSCode

Это не плагин, а онлайн-ресурс который не связан с вашей локальной VSCode

⤷ Ссылка на проект

| #Interesting #Code #Useful

​Code Thesaurus — пожалуй, самая необычная шпаргалка по языкам программирования

С её помощью можно сравнивать структуры языков программирования. Сервис по сути позволяет легче перейти с одного языка программирования на другой.

А вместо многословных документаций, там реализована быстрая система быстрых ответов на конкретные вопросы: https://codethesaur.us/

#инструменты #шпаргалки

Полезные советы при вёрстке сайта на HTML и CSS

В этом небольшом видео вы узнаете некоторые неочевидные, но важные нюансы, которые помогут улучшить вам качество ваше страницы, повысить скорость её загрузки и сделать разработку немного проще:

https://www.youtube.com/watch?v=41kjGvSPaEw

#видео #html #css

@hashdev

Необычный datepicker на GSAP

Этот datepicker позволяет выбрать вам нужную дату, при этом обладая привлекательным внешним видом и нестандартной анимацией. Создан с помощью библиотеки GSAP, подробный код можно изучить здесь:

https://codepen.io/aaroniker/pen/MWQjxro

#codepen

@hashdev

⭐️ termdash – инструмент для отрисовки дашбордов прямо в терминале

Сам проект кроссплатформенный, а также имеет открытое API для создания плагинов

🖥 Github

#Go #Terminal

@hashdev

CodeAbbey — огромная коллекция задач по программированию

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

Из интересного: девиз проекта звучит как «Мы верим, что три вещи ведут к успеху — практика, практика и практика!»

Стоимость: #бесплатно

#программирование #соревнование

@hashdev

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

⤷ Ссылка на проект

@hashdev | #Interesting #JavaScript #TypeScript

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

#анимация #javascript

https://codepen.io/supah/pen/BqREob

Coolors — сервис для генерации и просмотра цветовых комбинаций

Итоговый результат можно использовать где угодно: в веб- и мобильных приложениях, в презентациях и документах.

У Coolors есть iOS- и Android-приложения, а также плагин для Figma и Chrome-расширение.

Стоимость: #бесплатно (но есть платный тариф)

#web #цвета

@hashdev

Контейнерные CSS-запросы наконец-то здесь

С выходом Google Chrome (105) и Safari 16 появилась поддержка контейнерных запросов в CSS. Это даёт гораздо больше возможностей вёрстки. В этой статье вы узнаете, как работают контейнерные запросы, как мы можем их использовать и как выглядит синтаксис, а также увидите несколько реальных примеров и вариантов использования:

https://ishadeed.com/article/container-queries-are-finally-here/

#css #фронтенд

@hashdev

📌 Шпаргалка-справочник по HTML

#html #cheatsheet

@hashdev