Какие инструменты изучить, чтобы перейти из джунов в миддлы?
Все знают про джунов, миддлов и сеньоров. Но эти трактовки довольно субъективны. В каждой компании оценивают по-своему. Где-то пытаются натянуть грейды на временные рамки: условно, 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
#фронтенд #карьера
❤17😁11👍3💩1
Четыре новые функции 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 #фронтенд
👍24❤4👎2💩2
А вот свежий путеводитель по фронтед-разработке от коммьюнити
Новичкам она будет полезна для уверенного старта, а опытным фронтенд-разработчикам подскажет, куда развиваться дальше.
В дорожной карте собраны все актуальные инструменты и технологии по мнению комьюнити. А у репозитория kamranahmedse/developer-roadmap, в котором публикуются обновления, уже больше 250 тысяч звёзд: https://github.com/kamranahmedse/developer-roadmap
#шпаргалка #фронтенд #веб
Новичкам она будет полезна для уверенного старта, а опытным фронтенд-разработчикам подскажет, куда развиваться дальше.
В дорожной карте собраны все актуальные инструменты и технологии по мнению комьюнити. А у репозитория kamranahmedse/developer-roadmap, в котором публикуются обновления, уже больше 250 тысяч звёзд: https://github.com/kamranahmedse/developer-roadmap
#шпаргалка #фронтенд #веб
👍26🔥8❤1
Вышла новая версия 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 #веб #фронтенд
😁16👍11🍾5❤1👎1💘1
Новые единицы измерения в вебе — 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, они поддерживаются во всех современных браузерах.
#веб #фронтенд
👍30❤🔥7❤3
Что изменилось в CSS за последние несколько лет
Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.
О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.
И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.
#веб #фронтенд #css
Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.
О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.
И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.
#веб #фронтенд #css
👍17🔥5☃3❤1
CSS в 2023 году: главные изменения
Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.
Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.
#веб #фронтенд #cs
Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.
Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.
#веб #фронтенд #cs
😁51👍10🎄4❤2🤣2👎1
Тренды и новинки в мире CSS и веб-дизайна
Рассказали о веяниях на 2024 год: что нужно знать, какие скиллы имеет смысл качать, какие инструменты использовать. Среди прочих — разбор ИИ-ассистентов дизайнера и их текущего потолка возможностей с примерами для каждой ниши, будь то вёрстка лэндинга или создание анимаций.
#фронтенд
Рассказали о веяниях на 2024 год: что нужно знать, какие скиллы имеет смысл качать, какие инструменты использовать. Среди прочих — разбор ИИ-ассистентов дизайнера и их текущего потолка возможностей с примерами для каждой ниши, будь то вёрстка лэндинга или создание анимаций.
#фронтенд
👏27❤🔥4
Что должен знать уважаемый фронтендер в 2024 году
Узнали у middle и senior-фронтендеров, что нужно изучать в 2024 году, чтобы оставаться востребованным специалистом:
— Что должен был уметь фронтендер в 2023 году?(идеальный стэк);
— Какие тренды во фронтенде в 2024 году? Что нужно изучить, чтобы прокачаться?
— Специалистов какого стека не хватает на рынке?
#фронтенд
Узнали у middle и senior-фронтендеров, что нужно изучать в 2024 году, чтобы оставаться востребованным специалистом:
— Что должен был уметь фронтендер в 2023 году?(идеальный стэк);
— Какие тренды во фронтенде в 2024 году? Что нужно изучить, чтобы прокачаться?
— Специалистов какого стека не хватает на рынке?
#фронтенд
👎13👍8❤5🎉2😁1💅1
Интерактивная карта на OpenLayers. Часть 2
Продолжение статьи об интерактивной карте с JS OpenLayers. Какую иконку лучше затягивать на геометку: растровую или векторную? Где OpenLayers справится лучше Leaflet?
#фронтенд
Продолжение статьи об интерактивной карте с JS OpenLayers. Какую иконку лучше затягивать на геометку: растровую или векторную? Где OpenLayers справится лучше Leaflet?
#фронтенд
👻11👍7
Полезный справочник для фронтенд-разработчика в 2024 году
Этот ресурс представляет собой исчерпывающий план для обучения фронтенду с полезными ссылками и рекомендациями, а также небольшими разборами каждого из этапов: от выбора направления до инструментов и стека.
Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/
#фронтенд #обучение
Этот ресурс представляет собой исчерпывающий план для обучения фронтенду с полезными ссылками и рекомендациями, а также небольшими разборами каждого из этапов: от выбора направления до инструментов и стека.
Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/
#фронтенд #обучение
🔥17👍4❤3❤🔥1
Что должен знать начинающий фронтендер?
Собрали советы для достижения успеха в профессии от опытного фронтенд-разработчика в одну статью. А также ответили на частые вопросы новичков: от зарплаты и стека до перспектив карьерного роста.
https://tproger.ru/articles/frontend-razrabotka--chem-zanimayutsya-i-skolko-zarabatyvayut-specialisty
#фронтенд #советы
Собрали советы для достижения успеха в профессии от опытного фронтенд-разработчика в одну статью. А также ответили на частые вопросы новичков: от зарплаты и стека до перспектив карьерного роста.
https://tproger.ru/articles/frontend-razrabotka--chem-zanimayutsya-i-skolko-zarabatyvayut-specialisty
#фронтенд #советы
🤣62👍8😁8👏2
6 полезных шпаргалок по CSS, которые сэкономят вам часы работы
Они идеально подходят как для новичков, так и для тех, кто уже неплохо разбирается.
Чит-листы охватывают такие аспекты как:
— CSS Flexbox.
— CSS Grid.
— CSS Positions.
— CSS Display Values.
— CSS Selectors.
— CSS :nth-child Selectors.
Сохраняйте, чтобы не потерять: https://github.com/WebdevShefali/CheatSheets/tree/main
#css #фронтенд
Они идеально подходят как для новичков, так и для тех, кто уже неплохо разбирается.
Чит-листы охватывают такие аспекты как:
— CSS Flexbox.
— CSS Grid.
— CSS Positions.
— CSS Display Values.
— CSS Selectors.
— CSS :nth-child Selectors.
Сохраняйте, чтобы не потерять: https://github.com/WebdevShefali/CheatSheets/tree/main
#css #фронтенд
👍25🆒4❤2
Фронтендеры и дизайнеры, я покушать принёс! Небольшая подборка сайтов с огромным количеством иконок для ваших проектов:
composeicons: Коллекция из 7000+ SVG-иконок, которые можно легко скопировать и вставить в Figma или интегрировать в Android-проекты с Jetpack Compose.
SVG Repo: Более 500.000 бесплатных SVG-иконок и других векторных графических элементов, большинство из которых оптимизировано для коммерческого использования и имеет открытую лицензию. К тому же можно редактировать прямо на сайте.
hugeicons: Библиотека с более чем 4.000 бесплатных SVG-иконок. Доступна установка через npm или yarn для удобной интеграции в проекты на React.
CSS GG: 700+ качественных иконок, отрисованных средствами CSS. Также здесь можно найти варианты, созданные в Figma и в формате SVG.
#фронтенд
composeicons: Коллекция из 7000+ SVG-иконок, которые можно легко скопировать и вставить в Figma или интегрировать в Android-проекты с Jetpack Compose.
SVG Repo: Более 500.000 бесплатных SVG-иконок и других векторных графических элементов, большинство из которых оптимизировано для коммерческого использования и имеет открытую лицензию. К тому же можно редактировать прямо на сайте.
hugeicons: Библиотека с более чем 4.000 бесплатных SVG-иконок. Доступна установка через npm или yarn для удобной интеграции в проекты на React.
CSS GG: 700+ качественных иконок, отрисованных средствами CSS. Также здесь можно найти варианты, созданные в Figma и в формате SVG.
#фронтенд
This media is not supported in your browser
VIEW IN TELEGRAM
3😁92👍12❤8💊3💯2⚡1
This media is not supported in your browser
VIEW IN TELEGRAM
Принёс вам полезного: 100 бесплатных заданий по фронтенду
Нашли крутой сайт для молодых (и не очень) фронтендеров, где вам предстоит воссоздавать дизайны с картинок разной степени сложности. Задания разнообразные и точно не дадут вам заскучать. Более того, они очень похожи на реальные, с которыми вы столкнётесь в работе. И всё совершенно бесплатно!
Вы можете использовать HTML и CSS, а если хочется — добавьте JavaScript и фреймворки.
#фронтенд
Нашли крутой сайт для молодых (и не очень) фронтендеров, где вам предстоит воссоздавать дизайны с картинок разной степени сложности. Задания разнообразные и точно не дадут вам заскучать. Более того, они очень похожи на реальные, с которыми вы столкнётесь в работе. И всё совершенно бесплатно!
Вы можете использовать HTML и CSS, а если хочется — добавьте JavaScript и фреймворки.
#фронтенд
😁46❤7👍5🤣2
Вопросы с собеседований по фронтенду для мидлов
В статье разобрали ключевые темы, которые часто спрашивают на собесах: typeof, Promise, CORS, PWA, особенности git commit и другое. Всё с примерами и понятными объяснениями.
Проверяем, насколько вы готовы к новой работе — тут.
#фронтенд #собес
В статье разобрали ключевые темы, которые часто спрашивают на собесах: typeof, Promise, CORS, PWA, особенности git commit и другое. Всё с примерами и понятными объяснениями.
Проверяем, насколько вы готовы к новой работе — тут.
#фронтенд #собес
😁42👍12❤🔥4😘1
This media is not supported in your browser
VIEW IN TELEGRAM
Uiverse: 6000+ готовых HTML/CSS компонентов для твоего проекта
Сайт предлагает более 6000 компонентов, которые можно сразу вставить в свой проект или адаптировать под себя. Каждый элемент идёт с готовым кодом — просто копируешь, вставляешь и наслаждаешься.
Сами компоненты аккуратно отсортированы по категориям, так что нужный элемент находится за пару кликов. И самое приятное — всё это бесплатно.
#фронтенд
Сайт предлагает более 6000 компонентов, которые можно сразу вставить в свой проект или адаптировать под себя. Каждый элемент идёт с готовым кодом — просто копируешь, вставляешь и наслаждаешься.
Сами компоненты аккуратно отсортированы по категориям, так что нужный элемент находится за пару кликов. И самое приятное — всё это бесплатно.
#фронтенд
👍64❤🔥9❤2🤣1💘1🙉1
Полезного в ленту: платформа для практики вёрстки на CSS
Нашёл прикольную соревновательную платформу — CSSBattle. Это онлайн-игра, в которой нужно максимально точно и кратко сверстать фигуру по изображению с помощью CSS.
Чем лаконичнее код, тем больше очков. А уровни разные — от лёгких задач на пару минут до таких, что над ними можно залипать вечерами.
Сохраняем👍
#фронтенд
Нашёл прикольную соревновательную платформу — CSSBattle. Это онлайн-игра, в которой нужно максимально точно и кратко сверстать фигуру по изображению с помощью CSS.
Чем лаконичнее код, тем больше очков. А уровни разные — от лёгких задач на пару минут до таких, что над ними можно залипать вечерами.
Сохраняем
#фронтенд
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤5❤🔥3✍2🤯1
Forwarded from Веб-страница
Большой сборник задач для фронтендеров
Тут собрано более 600 заданий по различным темам для проверки ваших знаний. А для удобства есть встроенный редактор, в котором можно проверить свой вариант решения, не переходя в другой редактор кода или IDE.
Проверить себя можно тут: https://bigfrontend.dev/
#фронтенд #инструменты
Тут собрано более 600 заданий по различным темам для проверки ваших знаний. А для удобства есть встроенный редактор, в котором можно проверить свой вариант решения, не переходя в другой редактор кода или IDE.
Проверить себя можно тут: https://bigfrontend.dev/
#фронтенд #инструменты
🔥14👍8❤5⚡1
Forwarded from Точка входа в программирование
Бэкенд без боли: что нужно знать фронтендеру
Вы начали разбираться во фронтенде, уже пишете интерфейсы и подключаете данные. Но тут появляется слово вроде «rate limiting» — и всё, паника.
На этом этапе многим не хватает простой вещи — базового словаря. Понять, что происходит «на той стороне», помогает даже знание пары ключевых терминов.
Этот материал — как мини-гид по миру бэкенда для тех, кто с ним только начинает сталкиваться. Без лишней теории, коротко, по делу, простыми словами. Чтобы не просто копировать чужие fetch-запросы, а понимать, как всё устроено.
#фронтенд #бэкенд
Вы начали разбираться во фронтенде, уже пишете интерфейсы и подключаете данные. Но тут появляется слово вроде «rate limiting» — и всё, паника.
На этом этапе многим не хватает простой вещи — базового словаря. Понять, что происходит «на той стороне», помогает даже знание пары ключевых терминов.
Этот материал — как мини-гид по миру бэкенда для тех, кто с ним только начинает сталкиваться. Без лишней теории, коротко, по делу, простыми словами. Чтобы не просто копировать чужие fetch-запросы, а понимать, как всё устроено.
#фронтенд #бэкенд
👍10❤6🔥6👎1