Логово верстальщика – Telegram
Логово верстальщика
8.05K subscribers
996 photos
48 videos
4 files
1.75K links
Канал для верстальщиков с инфой о HTML и CSS, а так же JavaScript на уровне верстальщиков.

Канал на бирже - https://telega.in/c/webdevlair

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
​​​​Node.js: работа с файловой системой

Данная статья включает в себя:

👉 обзор основных частей интерфейса Node.js для работы с файловой системой (далее — ФС);
👉 рецепты (сниппеты кода) для выполнения задач с помощью названного интерфейса.

Читать перевод...
Читать оригинал...

#longread #node_js
​​​​Как использовать Docker в приложениях Node.js и React

В этой статье поговорим о том, как разработать и запустить бэкэнд на Node.js-Express и фронтенд на React в контейнере Docker.

Читать...
​​Проблема с использованием тега img и picture в Safari

Данная статья описывает баг и его решения в контексте ReactJS + Server-Side Rendering, но это также актуально для всех фреймворков большой тройки так и для чистого JS.

Читать...
​​Заметка о полезных возможностях современного CSS

В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.

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

Читать...
​​Sass: разрабатываем дизайн-систему

В данной статье мы разработаем простую, но относительно полноценную дизайн-систему для веб-приложения средствами Sass.

Почему Sass? Потому что, кроме полной поддержки CSSSass предоставляет несколько интересных инструментов, позволяющих существенно сократить шаблонный код, в чем вы сами скоро убедитесь. На мой взгляд, несмотря на стремительное развитие CSS в последние годы, Sass продолжает оставаться актуальным, по крайней мере, при работе над серьезными проектами.

При разработке дизайн-системы в части терминологии, названий, значений переменных и т.п. я буду ориентироваться, в основном, на Bootstrap и немного на Tailwind.

Читать...
​​HTML, CSS: какие символы можно использовать в названиях классов CSS

При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? И вот собственно эта статью об этом.

Читать...
Полезный инструмент для HTML-верстки

WinLess — это бесплатная Windows-программа для работы с препроцессором LESS.

Она представляет из себя надстройку над CSS с дополнительными динамическими свойствами. WinLess поможет конвертировать LESS в CSS.

Также программа автоматически сканирует выбранную папку и выбирает файлы, которые содержат нужный код.
Самое лучше приложение для работы с HTML

CSS3 Generator — это инструмент для генерации css-кода для некоторых небольших, но трудоемких задач.

CSS3 Generator может трансформировать цвет из одного формата в другой, создать css-код для тени, градиента, фильтра картинки.

С его помощью можно написать код трансформации блока и сделать простую анимацию.
​​10 фишек из JavaScript, которые помогут писать более качественный код на React

React построен на основе чистого JavaScript, если не считать некоторых особенностей. В этой статье собраны 10 основных концепций JavaScript, с которыми вы столкнётесь практически в любом серьёзном приложении на React. Их понимание позволит увереннее работать с библиотекой пользовательских интерфейсов.

Читать...
Скрытые возможности CSS: 10 полезных советов

Даже если вы точно знаете, что изучили все возможности CSS, взгляните на эту статью: некоторые секреты CSS могут стать для вас открытием.

Читать...
​​Лучший инструмент для работы с Node.js 

Yeoman — универсальный инструмент, который может использоваться с почти любым языком программирования. Эта базовая система кодогенерации с богатой программной экосистемой служит для разработки веб-приложений.
​​8 полезных плагинов VS Code для вёрстки HTML

Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.

Читать...