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

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

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
3 крутых GitHub репы для фронта

Приветствую! Собрал для вас небольшую подборку GitHub реп которые скорее всего будут интересны всем.

👉 JavaScript Algorithms - ресурс для всех, кто хочет получить четкое представление об алгоритмах и структурах данных. Он содержит примеры многих популярных алгоритмов и структур данных, реализованных на JavaScript.

👉 Front End interview handbook - В этой репе вы найдете ответы на все распространенные вопросы, которые так любят задавать на собесах.

👉 30 seconds of code - этот ресурс содержит короткие фрагменты кода на JavaScript для всех рутинных манипуляций в разработке.

Есть нюанс с репой 30 seconds of code, у нее нет варианта на русском языке, но думаю что для большинства из нас это не будет огромной проблемой. Первые две - переведены. 

Как обычно удачи в изучении и экспериментах!
​​🎩Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

В этой статье вы узнаете, как сделать плавный анимированный переход на сайте без использования специальных библиотек.

Читать...
​​🎃4 способа добавить иконки на сайт из Figma — все плюсы и минусы

В этой статье поговорим о том, как добавить иконки на сайт из Figma.

Читать...
​​😍CSS @layer — полное руководство по каскадным слоям

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

Читать...
​​🧳Путешествие JavaScript-кода через движок V8

В этой статье автор расскажет о том, какие механизмы в движке V8 позволяют JavaScript выступать наравне с компилируемыми языками по производительности

Читать...
CSS media запрос any-hover

Приветствую товарищи фронты! Знаете ли вы про такой медиа запрос?

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

Пример применения:

@media(any-hover: hover) {
 .element: hover {
 // ваши стили
 }
}

Если верить ресурсу caniuse то у этого медиа запроса уже довольно высокий уровень поддержки и из основных браузеров его не поддерживает только IE так что в большинстве случаев юзайте на здоровье.
​​🗣Трудности перевода в разработке: как делать интернациональные проекты и говорить с пользователями на одном языке

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

Читать...
👍1
​​🎨Уроки рисования красных квадратов

В этой статье я покажу, как парсил dom элементы и создавал для них визуальную подсветку.

Читать...
​​😉Сравнение JavaScript операторов typeof и insanceof

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

Читать...
​​🎩JavaScript: примеры реализации некоторых математических выражений

В данной статье я хочу рассказать вам о некоторых основных математических концепциях и их обозначениях, а также показать примеры реализации этих концепций на JavaScript.

Читать...
​​🎩Как наложить макет на вёрстку через PerfectPixel

В этом материале я расскажу, как корректно экспортировать макет, установить PerfectPixel, управлять расширением и находить элементы страницы, которые стоит поправить на вёрстке.

Читать...
🔥1
​​📇Как вписать блоки в страницу или в контейнер? Используйте css grid

В этой статье я расскажу, о вписывании верстки в родительский контейнер.

Читать...
​​👍HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 3

В этой статье я расскажу, как мы незаметно потеряли пользу элементов <section> и <form>, а также вы узнаете почему визуально скрытые элементы — проблема современных интерфейсов.

Читать...
​​👤Мокинг API на JavaScript с Pactum

В этой статье мы рассмотрим некоторые важные функции, которые я ожидаю от любого инструмента для имитации API или библиотеки.

Читать...
​​🧐Tailwind vs BEM — 1 (сравнение производительности)

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

Читать...
​​😎Используйте zx.js вместо Shell

В этой статье мы изучим, что такое zx.js, какие возможности он предоставляет и как мы можем применить его для написания скриптов, а затем научимся использовать все его фичи, разработав инструмент, который можно запустить из командной строки.

Читать...
​​💰Сокровища HTML: 7 тегов, которые упростят вам жизнь

В этой статье я расскажу про 7 HTML-тегов, которые, возможно, вы еще не открыли для себя. Мы посмотрим, как они работают и насколько поддерживаются современными браузерами.

Читать...
​​🧐Tailwind vs BEM — 2 (архитектура)

В этой статье мы расмотрим возможные задачи верстки на разных проектах и как с ними справляются две разные архитектуры: Tailwind CSS и ванильный CSS + BEM.

Читать...
​​🦏Проверка JavaScript-движка Rhino, или как встретились единорог с носорогом

В данной статье мы проведём анализ исходного кода Rhino при помощи PVS-Studio.

Читать...
​​🤝Знакомство с ООП на примере JavaScript

В этой статье мы рассмотрим основные характеристики объектно-ориентированного программирования (ООП) на практических примерах JS-кода.

Читать...
​​🐾OKLCH в CSS: по­че­му мы ушли от RGB и HSL

В этой статье мы расскажем, почему нам больше всего нравится oklch().

Читать...