Логово верстальщика – 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» и с помощью поиска найти нужный плагин.

Читать...
​​20 впечатляющих CSS3 примеров, техник и библиотек

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

Читать...
Самые полезные советы CSS

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

Читать...
​​Самое простое приложение для работы с HTML 

PerfectPixel — Расширение для Google Chrome, которое накладывает на верстаемый сайт полупрозрачный макет. 

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

Поддерживает несколько слоев и их гибкую настройку, а также функцию блокировки, при которой все элементы на странице становятся кликабельными.
​​20 впечатляющих CSS3 примеров, техник и библиотек

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

Читать...
​​Советы по правильной работы с CSS

После прочтения этой статьи вы узнаете о 20 простых советах для правильной работы с CSS.

Читать...