Присоединяйтесь к нам
css
Маркетинг, веб-дизайн и JavaScript: топ-33 самоучителя, которые помогут быстро освоить профессию
30 марта 2022 года российские оккупанты отключили интернет и мобильную связь в Херсонской и Запорожской областях.
Бесплатные IT-курсы и воркшопы: PowerCode Academy открыла доступ к своей библиотеке
Онлайн IT-школа PowerCode Academy, которая является обособленным подразделением IT-компании PowerCode, открыла всем желающим доступ к своей библиотеке курсов. Об этом Highload рассказали представители образовательного учреждения. Их цель — помочь тем, кто планировал войти в IT, но из-за войны потерял такую возможность, добиться поставленной цели.
Стилизация флажков (чекбоксов) в CSS
Несмотря на то, что в последних версиях браузеров (как минимум самого популярного — Google Chrome) чекбоксы стали выглядеть симпатичнее, получили цвет и даже некоторую визуальную объемность, все равно для уникального дизайна их требуется кастомизировать. В этой статье мы научимся изменять внешний вид флажков с помощью обычного CSS.
Разработчик решил опровергнуть мем и подключился к базе данных через CSS — вот его инструкция
Шутка, смысл которой приходится объяснять, — плохая шутка. А еще хуже, когда она не шутка вообще. Расхожую шутку о том, что к базе данных невозможно подключиться с помощью CSS, решил проверить разработчик Ли Мейчин. И в итоге перевел ее в разряд несмешных.
CSS Flexbox: легкий старт для новичков
CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), проще говоря Flexbox («флексбокс») — это технология, упрощающая верстку отдельных элементов HTML-страницы. Этот модуль предоставляет возможность при помощи CSS3 быстро и удобно позиционировать блоки на странице, подстраиваясь под разные варианты разрешения экрана. В этой статье мы узнаем, как быстро и легко верстать современные веб-страницы на основе этой техники.
Фреймворк, который ускорит работу: как установить Tailwind в Laravel-проект
Tailwind — интересный css-фреймворк, позволяющий быстро создавать нестандартные блоки без ручной борьбы с настройкой стилей. Он оправдывает свое название (в переводе с англ. «попутный ветер»), не требуя от разработчика долгих часов на свое изучение.
Все о CSS за 2021 год: проблем все еще хватает, но технологию ждут кардинальные перемены
В сети появились результаты масштабного опроса разработчиков State of CSS за 2021-й. Его цель — выявить будущие тенденции в экосистеме веб-разработки, чтобы помочь айтишникам сделать выбор в сторону той или иной технологии или инструмента. Исследование проводится третий года подряд, что позволяет сравнить результаты с итогами предыдущих лет, но обо всем по порядку.
Лучшие друзья фронтендера: 18 ресурсов, которые должны быть в арсенале каждого веб-разработчика
Много инструментов не бывает, особенно если они помогают быстро и качественно справляться с повседневными задачами. В очередной подборке расскажем о веб-сайтах, которые помогут вам повысить продуктивность и решать задачи, с которыми сталкивается каждый фронтенд-разработчик.
Списывать можно: 8 шпаргалок с примерами кода для веб-разработчика
Запомнить все свойства и функции для веб-разработки невозможно, а поиск нужной информации в Google отнимает массу времени, уверен фронтенд-разработчик и технический писатель Махеш Патидар. Чтобы облегчить себе работу, он использует шпаргалки, которые способны значительно сэкономить время разработки.
Основы CSS-верстки: как с помощью Flexbox компоновать элементы на странице
Если простыми словами, то Flexbox — это такая структура CSS, которую мы используем для отображения и упорядочивания элементов внутри другого элемента или контейнера.
Сделать сайт интереснее: учимся создавать анимацию в CSS3
Цель анимации — обратить на себя внимание. Человек замечает любые движения на уровне инстинктов. Если анимация сделана на высоком уровне и гармонично вписывается в дизайн сайта, то она значительно увеличит уровень обратной связи. В нашей статье мы разберем, что такое CSS3-анимация и как ее использовать.
Верстаем на Grid в CSS: гайд по основным понятиям с примерами
CSS Grid Layout — это модуль CSS, который разделяет веб-страницу на колонки и строки. В получившейся двумерной сетке могут размещаться разные элементы. Управлять их размером и положением можно с помощью свойств CSS Grid. Они помогают отображать элементы на экране по горизонтали и вертикали без внесения изменений в структуру кода.
Как я разгоняю интернет-магазины до сверхзвуковой скорости и вывожу в топ Google: 19 советов бэкендера
Не нам вам объяснять, что оптимизация сайта — это очень важно. От того, насколько качественно она настроена, зависит, понравится ли пользователю взаимодействовать с сайтом. Интернет-магазины с низкой производительностью и медленными страницами получат низкие коэффициенты конверсии в поисковой выдаче. В результате бизнес обгонят конкуренты.
Как использовать медиа-запросы в CSS?
Медиа-запросы — это особые правила применения CSS, с помощью которых можно менять стиль элементов, отталкиваясь от устройств, на которых будут просматривать веб-страницу.
Как ускорить работу сайта на этапе разработки: пошаговая инструкция
В прошлой статье мы рассмотрели три основные показателя нового критерия ранжирования Google — Core Web Vitals, предназначенных для измерения пользовательского опыта работы с сайтом. В этой статье я расскажу, что мы делаем для улучшения веб-производительности во время разработки.
Flex-grow в CSS: как это работает
Flex-grow является CSS-свойством модуля Flexbox, который отвечает за построение гибких макетов. Модель Flexbox (с англ. «гибкая коробка») довольно популярна, отчасти на ее основе создавался когда-то Bootstrap — фреймворк для создания адаптивных дизайнов. В модуле содержится набор свойств. Они назначаются родительским и дочерним элементам для их распределения по всем правилам современной CSS-верстки.
Выполнить код в браузере: 12 онлайн-компиляторов, которые упростят вашу жизнь
Онлайн-компиляторы созданы для того, чтобы упростить проверку кода. Вам не нужно скачивать и устанавливать разные приложения на ноутбук: чтобы использовать компилятор, нужно только подключение к интернету. Вы можете проверить код на работоспособность, увидеть ошибки и результат выполнения программы.
Есть не только Google и Microsoft: топ-14 инструментов для разработчика мобильных приложений
Процесс создания качественного приложения предполагает использование большого спектра инструментов.
Angular обходится всем в миллиарды долларов: почему пора от него избавиться
Бо Бошамп — senior-разработчик и фулстек-архитектор веб-приложений с 20-летним стажем, активный участник опенсорс-проектов и Stack Overflow. А еще — блогер, текст которого о фреймворке Angular практически завирусился. Highload перевел его для вас.
Культ «Корпорации добра»: как я строю бесплатную систему кол-трекинга на Google Apps Script
Идея моего проекта возникла случайно. Я вел диалог с центром бизнес-тренингов о внедрении новой CRM. По итогу стал пытаться реализовать решение на базе горячо любимых Google-табличек. В свое оправдание могу сказать, что причина не только во вполне распространенном случае регресса или карго-культа в отношении «Корпорации добра». Дело в том, что мне представилась счастливая возможность побывать контрактором Google в Барселоне и Лиссабоне, о чем рассказал MC.Today.
Обфускация JavaScript-кода: способы и отличия от минимизации
В большинстве случаев код JavaScript является общедоступным. Это означает, что исходный код всегда будет подвержен некоторым угрозам:
«Не стоит сажать профессионала писать то, что уже миллионы раз написано»: как мы пришли из аутсорсинга в No Code
Украинский стартап Shop-Express помогает предпринимателям и компаниям продавать товары онлайн, создавая функциональные магазины без привлечения разработчиков и дизайнеров. Как это работает, Highload рассказал СEO Shop-Express Алексей Петриченко. Далее — прямая речь.
Подкасты, книги и WTF-примеры кода: 26 полезных репозиториев GitHub
Разработчики из команды Dev Write Ups опубликовали в блоге на dev.to список из 26 полезных репозиториев GitHub. Вот они.
Знак Бэтмена, спиннеры и маятники: 100 CSS-загрузчиков на любой вкус
Разработчик Тимани Афиф поделился в блоге на dev.to коллекцией из 100 анимированных CSS-загрузчиков, выполненных всего из одного элемента div. Вот они.
Повышение квалификации: где пройти продвинутые курсы для разработчиков?
Highload собрал несколько IT-школ, где обучают не только всех подряд с нуля, но и уже вполне профессиональных айтишников. Платные онлайн-курсы, тренинги и марафоны помогут глубже изучить возможности JavaScript, Java, C#, PHP и других языков программирования, а также научат пользоваться фреймворками, в том числе Spring и Laravel. Стоимость курсов варьируется от 2,8 тыс. грн в месяц до 15 тыс. грн за девять дней.
Инструменты сборки нового поколения
Фронтенд-разработчик Хью Хауорт сравнил в блоге на css-tricks.com инструменты сборки нового поколения. Автор постарался в общих чертах описать зачем они нужны и варианты их использования.
SvelteKit: Next.js для Svelte уже в бете
Svelte делает стремительные шаги для того, чтобы покорить всю фронтенд-разработку. Теперь к экосистеме «не-фреймворка» добавилась возможность создавать приложения с рендерингом на стороне сервера.
React-JSS — альтернативный способ стилизации компонентов
JSS — это относительно новый инструмент для стилизации компонентов. Вследствие этого JSS еще не так сильно распространен . Но его репозиторий на сайте GitHub собрал уже 6.3k звезд на момент написания статьи. Он использует JavaScript для декларативного способа описания правил CSS, помогает в их переиспользовании и избежании конфликтов. Он может компилироваться в браузере, на стороне сервера или во время сборки в Node.js. Он легко интегрируется в другие JS-фреймворки. React-JSS это его адаптация для библиотеки React.js.
9 бесплатных генераторов CSS
Инженер-программист Марко Денич поделился коллекцией лучших, по его мнению, генераторов CSS.
5 бесплатных инструментов для фронтенд-разработчиков
Frontend-разработчик из Индии под ником Gaurav поделился на dev.to пятью бесплатными и, на его взгляд, недооцененными инструментами и ресурсами для ежедневной работы.
Turbo: CSS-фреймворк, претендующий на звание языка программирования
Разработчик Тайбор Холтер написал фреймворк Turbo CSS, который сам же называет и языком программирования. Это utility-first фреймворк, но он не содержит готовую огромную библиотеку классов для стилизации, а компилирует на лету только те, что нужны. По словам создателя, в новом фреймворке имена классов CSS создается путем вызова функций и передачи им аргументов.
Tailwind CSS: за и против
По данным опроса The State of CSS 2020, больше всего разработчиков в мире, использующих CSS-фреймворки, сейчас заинтересованы в изучении и применении Tailwind CSS. Он опережает конкурентов в этом рейтинге уже второй год подряд. Команда Tailwind предлагает альтернативный подход для поддержки и стилизации HTML-разметки, но у него есть и свои противники. Проштудировав статьи и комментарии на таких ресурсах, как Dev.to, Product Hunt и Codeburst, мы собрали наиболее популярные доводы за и против использования этого фреймворка.
Асинхронная загрузка CSS
Асинхронная загрузка CSS позволит быстрее показать Вашу страницу посетителю. Это критично для мобильных устройств, когда канал может быть медленным.
Клиентская оптимизация
Клиентская оптимизация — это набор методик, которые сделают сайт быстрее для пользователя без существенных изменений на серверной стороне. Прирост в скорости может достигать десятикратного улучшения. При этом техники довольно простые.
Минификация js/css/html
Минификация (minify) — это простой подход для уменьшения размеров файлов css, js и html. В процессе сжатия все комментарии к коду, переносы строк, лишние табы и пробельные символы удаляются. Это позволяет сэкономить 10…20% от оригинального размера файла.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: