12 важнейших сайтов для освоения CSS
Хотите войти в веб-разработку, но не знаете, с чего начать? Освоение CSS станет отличным стартом и, к счастью для вас, в сети существует огромное количество учебных ресурсов.
Мы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки.
Будь вы начинающий программист или опытный, на этих сайтах есть информация для всех уровней: от полноценных учебных пособий до памяток и фрагментов кода. Эти ресурсы предоставят вам инструменты и знания, необходимые для создания красивых, функциональных веб-страниц. К тому же большинство из них абсолютно бесплатны.
Так что пристегните ремни и приступайте к написанию кода!
Rushabr.com/ru/comp…s/719892Engmedium.muz.li/13-must…41a727e0
👉 @frontend_1
Эксперименты с сборщиком мусора JavaScript
Утечки памяти в веб-приложениях широко распространены и, как известно, трудны для отладки. Если мы хотим избежать их, необходимо понять, как сборщик мусора решает, какие объекты можно собирать, а какие нет. В этой статье мы рассмотрим несколько сценариев, в которых его поведение может вас удивить.
dev.to/codux/e…tor-2ae3
👉 @frontend_1
Три атрибута для создания лучших веб-форм
Формы в Интернете - это возможность значительно улучшить пользовательский опыт, приложив при этом совсем немного усилий. Эти усилия могут заключаться в добавлении небольшого количества скромных HTML-атрибутов. Но в результате пользователь может получить эффект ускорения, позволяющий ему быстрее справиться с поставленной задачей.
Это особенно актуально для мобильных устройств, где людям приходится заполнять формы с помощью виртуальной клавиатуры. Любое улучшение, которое можно внести в процесс заполнения, заслуживает внимания. Но не волнуйтесь: вам не нужно добавлять сложную библиотеку JavaScript или писать запутанный код. Хорошо написанный HTML поможет вам в этом.
https://adactio.com/journal/19842
👉 @frontend_1
Полное понимание асинхронности в браузере
Про асинхронность JavaScript написано много статей, документации и книг. Но вся информация сильно распределена по интернету, поэтому сложно быстро и полностью разобраться, что к чему, и составить цельную картину в голове. Не хватает одного исчерпывающего гайда. Именно эту потребность я и хочу закрыть своей статьёй.
habr.com/ru/comp…s/718084
👉 @frontend_1
Улучшаем производительность сайта с помощью CSS
Всем привет, я Кирилл, frontend разработчик компании Usetech. Сегодня я бы хотел поговорить о том, как можно улучшить производительность сайта с помощью обычных CSS свойств и на что стоит обращать внимание. Но прежде чем приступим к улучшению производительности сайта, давайте поговорим о том, какие проблемы возникают с CSS:
CSS блокирует рендеринг: каждый <link> и @ import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;
CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;
Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.
Следующие советы помогут вам оптимизировать ваш CSS код.
habr.com/ru/comp…s/718200
👉 @frontend_1
Знаете основы веб-разработки и хотите углубить свои знания? Присоединяйтесь к бесплатному мини-курсу, где вы получите практические советы и инсайты от опытного программиста, а также создадите 3 классных проекта — сайт, приложение и сервис — и добавите их в портфолио.
Зарегистрируйтесь прямо сейчас и получите гайд по веб-разработке. Он поможет вам узнать больше о профессии, востребованности, зарплатах и карьерных перспективах: https://epic.st/0kkp-
На мини-курсе вы:
— создадите веб-страницы, используя язык разметки HTML и технологию CSS;
— реализуете серверную часть (backend) веб-приложений на языке PHP;
— поработаете с базой данных MySQL и напишете запросы к ней на языке SQL;
— освоите основы JavaScript, чтобы делать веб-приложения интерактивными;
— научитесь автоматически получать информацию с других сайтов;
— разместите свой сайт в интернете.
Спикер мини-курса — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах. Автор 10 курсов по программированию и карьере программистов.
Все участники получат скидку 10 000 рублей на любой курс Skillbox и персональную карьерную консультацию с тестовым доступом к понравившейся профессии. А ещё — 5 полезных материалов и гайдов по веб-разработке. Всем, кто посмотрит первый урок, откроем годовой доступ к изучению английского языка.
Присоединяйтесь! Вас ждёт много интересного. Подробная программа — по ссылке: https://epic.st/0kkp-
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
CSS Diner
Игра для повторения и закрепления знаний о селекторах CSS. Даётся анимированная полка блюд, HTML форма и определённый элемент или элементы, которые надо выбрать.
https://flukeout.github.io/
👉 @frontend_1
Хранение токена доступа в сервис-воркере
В этой статье я покажу, как реализовать простой сервис аутентификации на основе JSONWebToken и HTTP Cookie с хранением токена доступа в сервис-воркере.
habr.com/ru/comp…s/718320
👉 @frontend_1
Быстрый практический обзор наиболее известных символьных примитивов в JavaScript.
Недавно я спрашивал на форумах, могут ли люди назвать хотя бы три общеизвестных символа в JavaScript, не заглядывая в поиск, и мало кто смог это сделать, что и породило эту заметку.
Symbol.iterator
Symbol.toStringTag
Symbol.toPrimitive
Symbol.asyncIterator
Symbol.hasInstance
Symbol.isConcatSpreadable
Symbol.species
Symbol.match
Symbol.matchall
Symbol.replace
Symbol.search
Symbol.split
Symbol.unscopables
Symbol.dispose
https://h3manth.com/posts/Well-known-symbols/
👉 @frontend_1
A?.Frotend уже через неделю 📆
C коллегами из Skillbox и Газпромнефть поговорим про обучение: стоит ли разработчику учиться на курсах и с чего начать, если вы решили создать образовательную программу.
Что обсудим:
🎓 Сколько времени занимает создание курса
🎓 Плюсы и минусы самостоятельного обучения
🎓 Почему нельзя учить всем дисциплинам по одной методике
🎓 Как использовать useSelector в Redux
Когда: 20 июля, 19:00
Где: онлайн и офлайн в Санкт-Петербурге
✔️ ЗарегистрироватьсяНа митапе проведём три тестовых собеседования, если хотите поучаствовать — заполните эту форму.
Javascript: базовые вопросы и понятия для самых маленьких
Javascript ― язык весьма оригинальный. Его можно любить, ненавидеть и даже бояться, но равнодушным он вас вряд ли оставит. Не знать или не понимать, с чем ты работаешь ― самая частая ошибка, допускаемая современными фронтенд‑разработчиками. Вам бы понравилось, если бы дантист, к которому вы пришли, не понимал, какой он инструмент использует и какие у него особенности работы? Очевидно, что нет. И рано или поздно, если вы действительно хотите стать профессионалами, вы разберётесь во всём, но как сделать так, чтоб это случилось раньше?
habr.com/ru/comp…s/718130
👉 @frontend_1
💻 БЕСПЛАТНЫЕ КУРСЫ ПРОГРАММИРОВАНИЯ ДЛЯ ШКОЛЬНИКОВ 8-11 КЛАССОВ
ДОСТУПНЫЕ ПРОГРАММЫ ОБУЧЕНИЯ:
⭐ Разработка на Python
⭐ Разработка на C++
⭐ Разработка на JavaScript
⭐ Разработка на Java
⭐ Разработка многостраничного сайта на PHP
⭐ Разработка мобильного приложения на Java
IT-разработка - точно то, что нужно, если:
✔️ Школьник увлекается играми
✔️ Школьнику интересно устройство гаджетов
✔️ Школьнику нравятся всевозможные роботы и конструкторы
Для получения подробной информации переходите по ссылке
Реклама. Университет «Синергия» ИНН 7729152149
Анимация пролета камеры при прокрутке с помощью Theatre.js и React Three Fiber
В этом уроке мы покажем, как с помощью Theatre.js и React Three Fiber анимировать камеру, пролетающую через 3D-сцену при прокрутке пользователем.
tympanus.net/codrops…ee-fiber
👉 @frontend_1
Как создавать иконки сайтов в 2023 году — всё о favicon
Пришло время переосмыслить, как готовить набор фавиконов для современных браузеров, и прекратить безумие генераторов иконок. В настоящее время разработчикам фронтенда приходится иметь дело с 20+ статичными PNG-файлами только для того, чтобы отобразить крошечный логотип сайта во вкладке браузера или на сенсорном экране. Читайте далее, чтобы узнать, как использовать более разумный подход и принять минимальный набор иконок, который соответствует большинству современных потребностей.
evilmartians.com/chronic…st-needs
👉 @frontend_1