Полный самоучитель по CSS Grid на примере единорога и со шпаргалкой
Рассказываем про свойства CSS Grid, которые помогут создавать адаптивные сайты и делимся шпаргалкой, которая охватывает все, что можно сделать с помощью Grid.
#css #шпаргалка #веб #фронтенд
Рассказываем про свойства CSS Grid, которые помогут создавать адаптивные сайты и делимся шпаргалкой, которая охватывает все, что можно сделать с помощью Grid.
#css #шпаргалка #веб #фронтенд
Готовимся к собеседованию по фронтенду: 30 вопросов на позицию джуна с разбором ответов
Казалось бы, что сложного в вопросах на собеседовании на джуна фронтенд-разработчика? Теория, немного личного опыта и знание основ решений стандартных задачек с IT-сайтов.
Но есть ощущение, что с каждым годом на интервью задают всё больше заковыристых вопросов, чтобы отсеять как можно больше неуверенных в себе кандидатов.
Разобрали несколько таких вопросов
#собеседование #фронтенд #веб
Казалось бы, что сложного в вопросах на собеседовании на джуна фронтенд-разработчика? Теория, немного личного опыта и знание основ решений стандартных задачек с IT-сайтов.
Но есть ощущение, что с каждым годом на интервью задают всё больше заковыристых вопросов, чтобы отсеять как можно больше неуверенных в себе кандидатов.
Разобрали несколько таких вопросов
#собеседование #фронтенд #веб
Как рендерятся сайты: объяснение рендеринга на стороне клиента/сервера и статических сайтов на примерах
Сегодня используется три способа рендеринга страницы: CSR — рендеринг на стороне клиента, SSG — генерация статического сайта и, наконец, SSR — рендеринг на стороне сервера. У каждого из них есть плюсы, минусы и важные особенности.
Вот отличная статья про их различия, кейсы использования и практические примеры
#фронтенд #веб
Сегодня используется три способа рендеринга страницы: CSR — рендеринг на стороне клиента, SSG — генерация статического сайта и, наконец, SSR — рендеринг на стороне сервера. У каждого из них есть плюсы, минусы и важные особенности.
Вот отличная статья про их различия, кейсы использования и практические примеры
#фронтенд #веб
Готовимся к собеседованию на фронтенд-разработчика: подборка лучших ресурсов
— Разбор 30 самых популярных вопросов с собеседованиий.
— Серия роликов, в которых разбираются вопросы с собеседований на должность Junior- или Middle-разработчика. Эдакая шпаргалка, которая поможет подтянуть знания и зарыть пробелы. Всего 28 видео в среднем по 15 минут.
— Вопросы по HTML и смежным темам с ответами. Оригинальный репозиторий на гитхабе с 35k+ звёзд и перевод на русский.
— Репозиторий с 43k+ звезд, который отлично подойдёт для проверки знаний по JavaScript и подготовки к собеседованию. В нём собрано огромное количество тестовых вопросов по JS с вариантами ответов и подробными объяснениями.
#фронтенд #собеседование #javascript #html #веб
— Разбор 30 самых популярных вопросов с собеседованиий.
— Серия роликов, в которых разбираются вопросы с собеседований на должность Junior- или Middle-разработчика. Эдакая шпаргалка, которая поможет подтянуть знания и зарыть пробелы. Всего 28 видео в среднем по 15 минут.
— Вопросы по HTML и смежным темам с ответами. Оригинальный репозиторий на гитхабе с 35k+ звёзд и перевод на русский.
— Репозиторий с 43k+ звезд, который отлично подойдёт для проверки знаний по JavaScript и подготовки к собеседованию. В нём собрано огромное количество тестовых вопросов по JS с вариантами ответов и подробными объяснениями.
#фронтенд #собеседование #javascript #html #веб
Годные инструменты для веб-разработки: движок для создания макетов Muuri
Принесли для вас инструмент, который помогает создавать адаптивные, сортируемые, фильтруемые и перетаскиваемые макеты.
Сложные макеты сегодня можно создавать без JavaScript. Но иногда CSS просто недостаточно. Вот здесь и поможет Muuri. По сути, Muuri — это движок для создания макетов, который ограничен только вашим воображением.
Кто пользовался? Как вам инструмент?
#инструменты #фронтенд
Принесли для вас инструмент, который помогает создавать адаптивные, сортируемые, фильтруемые и перетаскиваемые макеты.
Сложные макеты сегодня можно создавать без JavaScript. Но иногда CSS просто недостаточно. Вот здесь и поможет Muuri. По сути, Muuri — это движок для создания макетов, который ограничен только вашим воображением.
Кто пользовался? Как вам инструмент?
#инструменты #фронтенд
Фронтенд не всегда может знать, где находится его бэкенд
Такое бывает, когда они «живут» на разных URL. Например, web-приложение встраивается в другое. В таком случае программисту нужно разбираться, откуда будут брать данные и как получить к ним доступ.
Эксперт-разработчик из «Иннотеха» рассказывает несколько способов решения этой задачи: https://tprg.ru/wMo6
#фронтенд #бэкенд
Такое бывает, когда они «живут» на разных URL. Например, web-приложение встраивается в другое. В таком случае программисту нужно разбираться, откуда будут брать данные и как получить к ним доступ.
Эксперт-разработчик из «Иннотеха» рассказывает несколько способов решения этой задачи: https://tprg.ru/wMo6
#фронтенд #бэкенд
Фронтенд: Вопросы на собеседовании
Делимся серией видео, которая поможет подготовиться к собеседованиям на позицию джуниор- и мидл-разработчика. Это — шпаргалка по техническим вопросам, которые действительно можно получить на интервью: https://youtube.com/playlist?list=PLNkWIWHIRwMFSLI9wBuHxuGI5lAZ7QNUg
Бонусом — репозиторий, где можно найти:
— Ответы на вопросы по HTML.
— Ответы на вопросы по CSS.
— Ответы на вопросы по JavaScript.
— Ответы на вопросы по React.
#фронтенд #собеседование
Делимся серией видео, которая поможет подготовиться к собеседованиям на позицию джуниор- и мидл-разработчика. Это — шпаргалка по техническим вопросам, которые действительно можно получить на интервью: https://youtube.com/playlist?list=PLNkWIWHIRwMFSLI9wBuHxuGI5lAZ7QNUg
Бонусом — репозиторий, где можно найти:
— Ответы на вопросы по HTML.
— Ответы на вопросы по CSS.
— Ответы на вопросы по JavaScript.
— Ответы на вопросы по React.
#фронтенд #собеседование
Практикуемся в React, TypeScript и MobX
Небольшой гайд, как создать to-do лист с бесконечной вложенностью подзадач. Можно посмотреть код и попробовать результат в демо:
https://tproger.ru/articles/sozdanie-todo-list-beskonechnoj-vlozhennosti-react-typescript-mobx
#веб react #typescript #фронтенд
Небольшой гайд, как создать to-do лист с бесконечной вложенностью подзадач. Можно посмотреть код и попробовать результат в демо:
https://tproger.ru/articles/sozdanie-todo-list-beskonechnoj-vlozhennosti-react-typescript-mobx
#веб react #typescript #фронтенд
Какие инструменты изучить, чтобы перейти из джунов в миддлы?
Все знают про джунов, миддлов и сеньоров. Но эти трактовки довольно субъективны. В каждой компании оценивают по-своему. Где-то пытаются натянуть грейды на временные рамки: условно, junior до года, middle 1-3 года, senior — 3 и более лет. Но на деле все куда сложнее.
Рассказываем, как перейти из джуниора на позицию миддла, что для этого нужно знать и изучать, на примере фронтенда и NodeJS: https://tproger.ru/articles/kakie-instrumenty-izuchit-chtoby-perejti-iz-dzhunov-v-middly-na-primere-frontend-i-nodejs
#фронтенд #карьера
Все знают про джунов, миддлов и сеньоров. Но эти трактовки довольно субъективны. В каждой компании оценивают по-своему. Где-то пытаются натянуть грейды на временные рамки: условно, junior до года, middle 1-3 года, senior — 3 и более лет. Но на деле все куда сложнее.
Рассказываем, как перейти из джуниора на позицию миддла, что для этого нужно знать и изучать, на примере фронтенда и NodeJS: https://tproger.ru/articles/kakie-instrumenty-izuchit-chtoby-perejti-iz-dzhunov-v-middly-na-primere-frontend-i-nodejs
#фронтенд #карьера
Четыре новые функции CSS, которые обеспечивают плавную анимацию и переходы в новых версиях Chrome
Если у вас уже перестал дергаться глаз от времён, когда нужно было поддерживать IE, пришла пора обратить на новые фичи Chrome.
До них в CSS были пробелы в плавных анимациях. Это анимации для входа и выхода. И плавный переход на верхний уровень для закрываемых элементов, таких как диалоговые окна и всплывающие панели. В новых версиях 116 и 117 разработчики решили эти проблемы.
И вот как использовать новые фичи: https://tproger.ru/articles/chetyre-novye-funkcii-css-dlya-plavnoj-animacii-vhoda-i-vyhoda
#веб #chrome #фронтенд
Если у вас уже перестал дергаться глаз от времён, когда нужно было поддерживать IE, пришла пора обратить на новые фичи Chrome.
До них в CSS были пробелы в плавных анимациях. Это анимации для входа и выхода. И плавный переход на верхний уровень для закрываемых элементов, таких как диалоговые окна и всплывающие панели. В новых версиях 116 и 117 разработчики решили эти проблемы.
И вот как использовать новые фичи: https://tproger.ru/articles/chetyre-novye-funkcii-css-dlya-plavnoj-animacii-vhoda-i-vyhoda
#веб #chrome #фронтенд
А вот свежий путеводитель по фронтед-разработке от коммьюнити
Новичкам она будет полезна для уверенного старта, а опытным фронтенд-разработчикам подскажет, куда развиваться дальше.
В дорожной карте собраны все актуальные инструменты и технологии по мнению комьюнити. А у репозитория kamranahmedse/developer-roadmap, в котором публикуются обновления, уже больше 250 тысяч звёзд: https://github.com/kamranahmedse/developer-roadmap
#шпаргалка #фронтенд #веб
Новичкам она будет полезна для уверенного старта, а опытным фронтенд-разработчикам подскажет, куда развиваться дальше.
В дорожной карте собраны все актуальные инструменты и технологии по мнению комьюнити. А у репозитория kamranahmedse/developer-roadmap, в котором публикуются обновления, уже больше 250 тысяч звёзд: https://github.com/kamranahmedse/developer-roadmap
#шпаргалка #фронтенд #веб
Вышла новая версия React-фреймворка Next.js 14
26 октября разработчики выпустили новый релиз Next.js. Из основных нововведений: релиз ускоряет время сборки в 2 раза, а Server Actions позволяет выполнять код на сервере.
Что ещё нового в Next 14:
— Ускоренный компилятор: Rust-based компилятор Turbopack обеспечивает стабильность и производительность.
— Fast Refresh ускоряет обновление кода до 94,7%.
— Введены маршруты API для упрощения создания внутренних эндпоинтов.
— Серверные действия позволяют определить функции, выполняемые на сервере и вызываемые из React-компонентов.
— Частичная предварительная отрисовка (Prerendering) оптимизирует отрисовку динамического контента.
— Улучшена обработка метаданных для более плавного пользовательского опыта и предотвращения проблем.
— Запущен новый бесплатный курс Next.js Learn для обучения разработчиков.
Подробнее: https://github.com/vercel/next.js/releases/tag/v14.0.0
#react #веб #фронтенд
26 октября разработчики выпустили новый релиз Next.js. Из основных нововведений: релиз ускоряет время сборки в 2 раза, а Server Actions позволяет выполнять код на сервере.
Что ещё нового в Next 14:
— Ускоренный компилятор: Rust-based компилятор Turbopack обеспечивает стабильность и производительность.
— Fast Refresh ускоряет обновление кода до 94,7%.
— Введены маршруты API для упрощения создания внутренних эндпоинтов.
— Серверные действия позволяют определить функции, выполняемые на сервере и вызываемые из React-компонентов.
— Частичная предварительная отрисовка (Prerendering) оптимизирует отрисовку динамического контента.
— Улучшена обработка метаданных для более плавного пользовательского опыта и предотвращения проблем.
— Запущен новый бесплатный курс Next.js Learn для обучения разработчиков.
Подробнее: https://github.com/vercel/next.js/releases/tag/v14.0.0
#react #веб #фронтенд
Новые единицы измерения в вебе — svh, lvh и dvh: для чего нужны и как их использовать?
Веб-разработчики знают, что одна из самых распространенных проблем сайтов на мобильных устройствах с использованием vh — это то, что при расчете высоты не учитывается высота панели навигации, которая динамически появляется и исчезает.
Если вкратце, единицы измерения svh, lvh, dvh решают эту проблему, позволяя избавиться от ненужного скролла:
1. SVH (small viewport height) — единица измерения, которая задает самый маленький размер viewport, когда панель навигации отображается.
2. LVH (large viewport height) — задает размеры по самому большому размеру viewport, когда панель навигации скрыта.
3. DVH (Dynamic viewport height) динамически меняет значение высоты относительно того, открыта панель с навигацией или нет.
Их анонсировали несколько месяцев назад, они только начинают входить в обиход. Но эти единицы измерения можно использовать прямо сейчас. Согласно сайту can i use, они поддерживаются во всех современных браузерах.
#веб #фронтенд
Веб-разработчики знают, что одна из самых распространенных проблем сайтов на мобильных устройствах с использованием vh — это то, что при расчете высоты не учитывается высота панели навигации, которая динамически появляется и исчезает.
Если вкратце, единицы измерения svh, lvh, dvh решают эту проблему, позволяя избавиться от ненужного скролла:
1. SVH (small viewport height) — единица измерения, которая задает самый маленький размер viewport, когда панель навигации отображается.
2. LVH (large viewport height) — задает размеры по самому большому размеру viewport, когда панель навигации скрыта.
3. DVH (Dynamic viewport height) динамически меняет значение высоты относительно того, открыта панель с навигацией или нет.
Их анонсировали несколько месяцев назад, они только начинают входить в обиход. Но эти единицы измерения можно использовать прямо сейчас. Согласно сайту can i use, они поддерживаются во всех современных браузерах.
#веб #фронтенд
Что изменилось в CSS за последние несколько лет
Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.
О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.
И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.
#веб #фронтенд #css
Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.
О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.
И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.
#веб #фронтенд #css
CSS в 2023 году: главные изменения
Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.
Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.
#веб #фронтенд #cs
Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.
Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.
#веб #фронтенд #cs
Тренды и новинки в мире CSS и веб-дизайна
Рассказали о веяниях на 2024 год: что нужно знать, какие скиллы имеет смысл качать, какие инструменты использовать. Среди прочих — разбор ИИ-ассистентов дизайнера и их текущего потолка возможностей с примерами для каждой ниши, будь то вёрстка лэндинга или создание анимаций.
#фронтенд
Рассказали о веяниях на 2024 год: что нужно знать, какие скиллы имеет смысл качать, какие инструменты использовать. Среди прочих — разбор ИИ-ассистентов дизайнера и их текущего потолка возможностей с примерами для каждой ниши, будь то вёрстка лэндинга или создание анимаций.
#фронтенд
Что должен знать уважаемый фронтендер в 2024 году
Узнали у middle и senior-фронтендеров, что нужно изучать в 2024 году, чтобы оставаться востребованным специалистом:
— Что должен был уметь фронтендер в 2023 году?(идеальный стэк);
— Какие тренды во фронтенде в 2024 году? Что нужно изучить, чтобы прокачаться?
— Специалистов какого стека не хватает на рынке?
#фронтенд
Узнали у middle и senior-фронтендеров, что нужно изучать в 2024 году, чтобы оставаться востребованным специалистом:
— Что должен был уметь фронтендер в 2023 году?(идеальный стэк);
— Какие тренды во фронтенде в 2024 году? Что нужно изучить, чтобы прокачаться?
— Специалистов какого стека не хватает на рынке?
#фронтенд
Интерактивная карта на OpenLayers. Часть 2
Продолжение статьи об интерактивной карте с JS OpenLayers. Какую иконку лучше затягивать на геометку: растровую или векторную? Где OpenLayers справится лучше Leaflet?
#фронтенд
Продолжение статьи об интерактивной карте с JS OpenLayers. Какую иконку лучше затягивать на геометку: растровую или векторную? Где OpenLayers справится лучше Leaflet?
#фронтенд
Полезный справочник для фронтенд-разработчика в 2024 году
Этот ресурс представляет собой исчерпывающий план для обучения фронтенду с полезными ссылками и рекомендациями, а также небольшими разборами каждого из этапов: от выбора направления до инструментов и стека.
Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/
#фронтенд #обучение
Этот ресурс представляет собой исчерпывающий план для обучения фронтенду с полезными ссылками и рекомендациями, а также небольшими разборами каждого из этапов: от выбора направления до инструментов и стека.
Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/
#фронтенд #обучение