Верстальщик от бога
12.1K subscribers
1.29K photos
17 videos
1 file
1.56K links
Регистрация в перечне РКН:
https://knd.gov.ru/license?id=6757e1989d804a279b283165&registryType=bloggersPermission

Самый большой канал по верстке в телеграм.

Чат верстальщиков: @godinhtmlchat

По всем вопросам: @godinmedia
Download Telegram
HTML элемент details: Встроенный аккордеон, который вы не используете

#почитать

Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤬2🔥1
CSS content-visibility: Улучшение производительности веб-сайтов

#почитать

CSS свойство content-visibility откладывает рендеринг элемента, включая компоновку и отрисовку, до тех пор, пока он не понадобится

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍71
Ключевое слово stretch: лучшая альтернатива width: 100% в CSS

#почитать

Используйте margin, избегая переполнения и горизонтальных полос прокрутки с width: stretch

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1👏1
Лучшие курсы графического дизайна

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
5
Маленький треугольник во всплывающей подсказке

#почитать

Подсказки - это как домашняя еда: все ими пользуются, и у каждого есть свой рецепт их приготовления. Если вы не помните конкретный рецепт, вы ищете его, следуете ему и продолжаете свой день. Эта концепция "много способов сделать одно и то же" является общей для веб-разработки и программирования (и жизни!), но она особенно актуальна для всплывающих подсказок. Не существует специализированного способа их создания - и на данный момент он не нужен, - поэтому люди придумывают разные способы заполнить эти пробелы.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Ошибки при работе с tailwindcss

#почитать

Во первых, модификатор !important чтобы перебить другие классы (стили).

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
Как сделать один плагин сразу для всех сборщиков фронтенда

#почитать

Обсудим разработку плагинов для сборщиков, таких как: Webpack, Vite, esbuild и подобных. За основу мы возьмем Unplugin.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
4
🧑🏻‍💻 Хотите писать фронтенд быстрее, понятнее и без боли? Vue.js решает эту задачу. Фреймворк, который избавляет от лишнего кода и делает разработку удобной.

На открытом вебинаре 27 марта в 20:00 мск вы увидите разницу между обычным JS и Vue.js. Разберетесь, как директивы упрощают работу с DOM и делают код лаконичнее.

Vue.js уже используют крупнейшие компании, и спрос на разработчиков растет. Освойте фреймворк, который упростит вашу работу и ускорит рост в профессии.

⚡️ Регистрируйтесь на вебинар и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/Y3Kn/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2W5zFFuprWt
👍5🤬2
▫️Пишем Змейку на JS

#посмотреть

Видеотуториал freeCodeCamp (на английском).

Смотреть на YouTube ⏱️1 час 40 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🙈2
Академический минимум js-разработчика: базовые концепции

#почитать

Эти базовые концепции особенно важны для тех, кто только начинает свой путь в программировании и хочет стать настоящим разработчиком, а не просто освоить фреймворк по видео и начать фрилансить.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Все говорят, что работы в айти стало меньше...

На самом деле, работы полно. Мы подготовили 7 правильных каналов с вакансиями для тестировщиков, аналитиков, проджект-менеджеров и программистов.

В чем фишка этих каналов?

— зарплатная вилка🍴во всех вакансиях
— еженедельные подборки стажировок для начинающих — как здесь (для QA), здесь (для PM) и здесь (для BA&SA)
— быстрый телеграм/email контакт для прямой связи с рекрутером
— удобная навигация по уровням/условиям работы/направлениям тестирования

▪️QA Jobs — работа для тестировщика
▪️PM Jobs — работа для Project и Product менеджера
▪️BA & SA Jobs — работа для бизнес- и системых аналитиков
▪️C# & .NET Jobs — работа для C# инженеров
▪️DS&ML Jobs — работа для DS инженеров
▪️PHP Jobs — работа для PHP разработчиков
▪️JAVA Jobs — работа для Java разработчиков

Подписаться на все каналы сразу
😁5
От живых гайдлайнов к Documentation as Code. Как изменилась документация во фронтенд-разработке

#почитать

Помню, как ещё несколько лет назад в большинстве проектов документация существовала в виде PDF-файлов или, в лучшем случае, статичных веб-страниц в корпоративной wiki. Дизайнеры создавали подробные гайдлайны в Sketch или Figma (не всегда), которые команда разработки должна была воплотить в код. На практике это создавало множество проблем: документация быстро устаревала, реальные компоненты начинали отличаться от описанных в гайдлайнах, а новые разработчики тратили часы на то, чтобы разобраться, какая версия документации актуальна.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
▫️Vue.js. Полный курс

#посмотреть

В данном видео-курсе мы с вами рассмотрим работу с JavaScript фрэймовком Vue.js 2-й версии. А так же разберём все необходимые темы и понятия, которые нужны для того что бы начать разрабатывать на Vue.js.

Смотреть на YouTube ⏱️2 часа 30 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👎15👍4🙈2
▫️Сколько памяти ест ваша вкладка?

#посмотреть

При разработке веб-приложений не все задумываются о том, сколько ресурсов потребляет код. Разработчики привыкают к своим мощным макбукам, и им не всегда интересно «экономить на спичках». Разве может наш код на языке JavaScript требовать много памяти? И «много» — это вообще сколько? 100 мегабайт — это много?

Смотреть на YouTube ⏱️45 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
style.setProperty vs setAttribute

#почитать

Начнем с того, что немного освежим мат. часть. Мы знаем, что стили описываются с помощью языка CSS. Получив строковое описание стилей на языке CSS, браузер разбирает его и составляет объект CSSOM. Интерфейс этого объекта представлен спецификацией https://www.w3.org/TR/cssom-1.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
👑 Кто работает PM — тот в цирке не смеется 🤡

Наша сегодняшняя рекомендация — канал с PM юмором.

Мы работаем в тестировании и уже не смеемся. Но если вас можно рассмешить — welcome в PM Юмор
😁5
link rel='modulepreload': Оптимизация загрузки модулей JavaScript

#почитать

rel='modulepreload' указывает, что скрипт модуля должен быть получен, проанализирован и откомпилирован заранее, и сохранён для последующего выполнения.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61🔥1
История Electron

#почитать

Electron — это один из самых известных инструментов современного разработчика. Если присмотреться, то это родственник React Native, манящий лозунгом «пиши один раз, запускай везде!», но с гораздо меньшими издержками по сборке и релизу, чем в случае мобильной разработки. Его уникальное преимущество заключается в комбинации Node.js и Chromium, создающей мощную десктопную среду для веб-технологий. Официальный блог Electron не так давно отметил своё десятилетие, что весьма удивляет с учётом того, насколько глубоко этот инструмент успел проникнуть в культуру разработки.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
4
Кнопки с несколькими состояниями

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Практикум. Счётчик символов в поле ввода

#почитать

Нередко разработчик хочет знать число символов, которые пользователь вводит. Например, так можно сообщать количество доступных знаков. Создадим такой счётчик без лишней нагрузки браузера (и человека).

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
Позиционирование текста вокруг элементов с помощью смещения CSS

#почитать

Когда речь заходит о позиционировании элементов на странице, в том числе и текста, в CSS существует множество способов сделать это - буквальное свойство position с соответствующими свойствами inset-*, translate, margin, anchor() (на данный момент поддерживается несколькими браузерами) и так далее. Свойство offset - еще одно, которое входит в этот список.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1