Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»
#почитать
⏱ Читать статью
#почитать
Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Display:none по таймауту
#почитать
Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).
⏱ Читать статью
#почитать
Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
HTML элемент details: Встроенный аккордеон, который вы не используете
#почитать
Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.
⏱ Читать статью
#почитать
Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤬2🔥1
CSS content-visibility: Улучшение производительности веб-сайтов
#почитать
CSS свойство content-visibility откладывает рендеринг элемента, включая компоновку и отрисовку, до тех пор, пока он не понадобится
⏱ Читать статью
#почитать
CSS свойство content-visibility откладывает рендеринг элемента, включая компоновку и отрисовку, до тех пор, пока он не понадобится
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤1
Ключевое слово stretch: лучшая альтернатива width: 100% в CSS
#почитать
Используйте margin, избегая переполнения и горизонтальных полос прокрутки с width: stretch
⏱ Читать статью
#почитать
Используйте margin, избегая переполнения и горизонтальных полос прокрутки с width: stretch
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥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 чтобы перебить другие классы (стили).
⏱ Читать статью
#почитать
Во первых, модификатор !important чтобы перебить другие классы (стили).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥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/
На открытом вебинаре 27 марта в 20:00 мск вы увидите разницу между обычным JS и Vue.js. Разберетесь, как директивы упрощают работу с DOM и делают код лаконичнее.
Vue.js уже используют крупнейшие компании, и спрос на разработчиков растет. Освойте фреймворк, который упростит вашу работу и ускорит рост в профессии.
⚡️ Регистрируйтесь на вебинар и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/Y3Kn/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2W5zFFuprWt👍5🤬2
#посмотреть
Видеотуториал freeCodeCamp (на английском).
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 разработчиков
Подписаться на все каналы сразу
На самом деле, работы полно. Мы подготовили 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 (не всегда), которые команда разработки должна была воплотить в код. На практике это создавало множество проблем: документация быстро устаревала, реальные компоненты начинали отличаться от описанных в гайдлайнах, а новые разработчики тратили часы на то, чтобы разобраться, какая версия документации актуальна.
⏱ Читать статью
#почитать
Помню, как ещё несколько лет назад в большинстве проектов документация существовала в виде PDF-файлов или, в лучшем случае, статичных веб-страниц в корпоративной wiki. Дизайнеры создавали подробные гайдлайны в Sketch или Figma (не всегда), которые команда разработки должна была воплотить в код. На практике это создавало множество проблем: документация быстро устаревала, реальные компоненты начинали отличаться от описанных в гайдлайнах, а новые разработчики тратили часы на то, чтобы разобраться, какая версия документации актуальна.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
#посмотреть
В данном видео-курсе мы с вами рассмотрим работу с JavaScript фрэймовком Vue.js 2-й версии. А так же разберём все необходимые темы и понятия, которые нужны для того что бы начать разрабатывать на Vue.js.
Please open Telegram to view this post
VIEW IN TELEGRAM
👎15👍4🙈2
#посмотреть
При разработке веб-приложений не все задумываются о том, сколько ресурсов потребляет код. Разработчики привыкают к своим мощным макбукам, и им не всегда интересно «экономить на спичках». Разве может наш код на языке JavaScript требовать много памяти? И «много» — это вообще сколько? 100 мегабайт — это много?
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.
⏱ Читать статью
#почитать
Начнем с того, что немного освежим мат. часть. Мы знаем, что стили описываются с помощью языка CSS. Получив строковое описание стилей на языке CSS, браузер разбирает его и составляет объект CSSOM. Интерфейс этого объекта представлен спецификацией https://www.w3.org/TR/cssom-1.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
👑 Кто работает PM — тот в цирке не смеется 🤡
Наша сегодняшняя рекомендация — канал с PM юмором.
Мы работаем в тестировании и уже не смеемся. Но если вас можно рассмешить — welcome в PM Юмор
Наша сегодняшняя рекомендация — канал с PM юмором.
Мы работаем в тестировании и уже не смеемся. Но если вас можно рассмешить — welcome в PM Юмор
😁5
link rel='modulepreload': Оптимизация загрузки модулей JavaScript
#почитать
rel='modulepreload' указывает, что скрипт модуля должен быть получен, проанализирован и откомпилирован заранее, и сохранён для последующего выполнения.
⏱ Читать статью
#почитать
rel='modulepreload' указывает, что скрипт модуля должен быть получен, проанализирован и откомпилирован заранее, и сохранён для последующего выполнения.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤1🔥1
История Electron
#почитать
Electron — это один из самых известных инструментов современного разработчика. Если присмотреться, то это родственник React Native, манящий лозунгом «пиши один раз, запускай везде!», но с гораздо меньшими издержками по сборке и релизу, чем в случае мобильной разработки. Его уникальное преимущество заключается в комбинации Node.js и Chromium, создающей мощную десктопную среду для веб-технологий. Официальный блог Electron не так давно отметил своё десятилетие, что весьма удивляет с учётом того, насколько глубоко этот инструмент успел проникнуть в культуру разработки.
⏱ Читать статью
#почитать
Electron — это один из самых известных инструментов современного разработчика. Если присмотреться, то это родственник React Native, манящий лозунгом «пиши один раз, запускай везде!», но с гораздо меньшими издержками по сборке и релизу, чем в случае мобильной разработки. Его уникальное преимущество заключается в комбинации Node.js и Chromium, создающей мощную десктопную среду для веб-технологий. Официальный блог Electron не так давно отметил своё десятилетие, что весьма удивляет с учётом того, насколько глубоко этот инструмент успел проникнуть в культуру разработки.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
Кнопки с несколькими состояниями
#почитать
Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.
⏱ Читать статью
#почитать
Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1