29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Вырезаем фигуры с clip-path
Руководство по использованию свойства clip-path для получения фигур со сложной геометрией.
https://verpex.com/blog/website-tips/how-to-create-cut-out-shapes-using-the-clip-path-property
Валидируем формы React / React Native приложений
Руководство по валидации данных с Yup и Formik.
https://www.freecodecamp.org/news/react-how-to-validate-user-input/
🔥Тесты для подготовки к собеседованию🔥
Выбери своё направление:
1. Frontend
2. Python
3. Java
4. Тестировщик QA
5. Data Science
6. DevOps
7. C#
8. С/C++
9. Golang
10. PHP
11. Kotlin
12. Swift
Список open-source проектов на NextJs + App Router
Алексей Рябов собрал 15 проектов на NextJS, которые уже находятся в продакшн (а значит их можно пощупать) и имеют открытые исходники.
https://dev.to/datarockets/real-world-open-source-projects-built-with-nextjs-14-and-app-router-i1n
Работа с операторами RxJs, которые вы знаете, но, возможно, недостаточно хорошо
Сравнение операторов, похожих по функционалу, и различные тонкости работы с ними.
https://dev.to/krivanek06/advanced-rxjs-operators-you-know-but-not-well-enough-1ela
Что aria-hidden="true" на самом деле делает с интерактивными элементами
Небольшая заметка о нюансах использования aria-hidden="true" и почему лучше не применять данный атрибут.
https://cerovac.com/a11y/2024/06/what-does-aria-hiddentrue-actually-do-to-interactive-elements/
cap - малоизвестная единица измерения в CSS
Ахмад Шадид рассказывает и показывает на интерактивных примерах, как и для чего можно использовать cap.
https://ishadeed.com/article/css-cap-unit/
AvitoTech продолжает радовать крутым образовательным контентом. На этот раз инженеры подготовили открытый видеокурс по JavaScript.
Два первых урока уже на канале — самое время присоединиться к обучению или, как минимум, добавить в закладки.
На курсе рассмотрены и описаны простым и понятным языком ключевые аспекты JS: сам язык программирования, HTML и CSS. Из первого урока вы узнаете об устройстве современного веба, а из второго — про формирование языка JS. И даже сможете написать свой первый скрипт.
Курс для слушателей любого уровня, но с базовыми знаниями в программировании будет попроще.
Условные конструкции в CSS
Пока нативные условные конструкции еще не доступны, какие варианты есть сейчас, чтобы определять свойства по условию? Разберем несколько примеров со своими достоинствами, недостатками и областью применения.
https://lea.verou.me/blog/2024/css-conditionals-now/
☝️ Успейте записаться на бесплатный интенсив, чтобы прокачать свои скилы по frontend. Старт уже завтра!
Регистрация по ссылке.
Фронтенд задачки в картинках — просто, наглядно и понятно. Проверяй свои знания в интерактивном формате каждый день.
Присоединяйтесь: @Frontend_Task
Настраиваем и дотюниваем поля ввода
Обзор атрибутов для инпутов, помогающих браузеру и улучшающих UX.
https://garrettdimon.com/journal/posts/fine-tuning-text-inputs
Transition to auto
Как с помощью новых фич CSS практически побеждена одна из сложных задач стилизации.
https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/
Высокотехнологичная компания YADRO в поиске тех, кто программирует на C и С++ 🔍
Актуальные вакансии:
1️⃣ Software Engineer C/C++
2️⃣ Senior C++ developer/Старший инженер-программист С++
3️⃣ Старший/ведущий инженер-программист встраиваемых интерфейсов
4️⃣ Linux Kernel Developer (Linux/WebUI) /Инженер-разработчик C (risc-V)
Ты сможешь реализовывать себя и стать частью команды специалистов, которые создают технологические решения и инновации мирового уровня.
Что ещё тебя ждёт:
– достойная зарплата (размер обсуждается на собеседовании) и прозрачная система премий;
– обучение за счёт компании: учебный портал с курсами и лекциями от экспертов, дополнительное профессиональное обучение, изучение английского, участие в конференциях;
– возможность учиться у лучших специалистов индустрии, расти в рамках своей роли, а также участвовать во множестве различных проектов;
– личное участие в становлении процессов и продуктов, возможность увидеть результат своей работы;
– большое инженерное сообщество, которое постоянно развивается;
– гибридный или удалённый формат работы;
– ДМС со стоматологией с первого дня, консультации юристов, психологов, экспертов по ЗОЖ и управлению финансами;
– скидки для сотрудников, дополнительные day-off;
– комфортные офисы в Москве, Санкт-Петербурге, Нижнем Новгороде и Минске.
Откликайся по ссылкам и присоединяйся к YADRO!
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем уже завтра.
Реклама. ИП Чернова О. А., ИНН:771399721044
Scroll-driven анимации
Набор демо, а также различных вспомогательных инструментов для разработки эффектов завязанных на скролле.
https://scroll-driven-animations.style/
Новые методы JavaScript Set
О новых возможностях по работе с Set: создание новых множеств со специфичными свойствами, сравнение множеств и многое другое.
https://developer.mozilla.org/en-US/blog/javascript-set-methods/
Исследуем React Compiler
Подробное руководство по работе и использованию React Compiler в новых и существующих проектах.
https://blog.logrocket.com/exploring-react-compiler-detailed-introduction/
Простое руководство по Markdown
https://piccalil.li/blog/a-quick-and-easy-guide-to-markdown/
Девстанция - сайт для эффективной подготовки к собеседованиям
⚡️ Решение задач с запуском кода
⚡️ 800+ ответов на вопросы с собеседований
⚡️ 250+ решений для популярных задач
⚡️ Интерактивная тренировка по вопросам
⚡️ Викторины по вопросам со звёздочкой
⚡️ Треды для общения с сообществом
Совершенствуйся на Девстанции!
Заходите на https://dev-station.ru
Геймдев с Kaboom.js
Туториал по разработке игры на JavaScript с Kaboom.js в стиле Metroidvania. От настройки окружения и сборки до реализации сложной игровой механики.
https://www.youtube.com/watch?v=iM1iSvloMlo
Релиз новых математических функций в CSSround, nearest, to-zero и еще несколько полезных функций заехали в поддержку 3х браузеров. Подробнее в небольшой заметке по ссылке.
https://web.dev/blog/css-stepped-value-functions?hl=en
React Internals Explorer
Инструмент для визуализации работы React под капотом. Напишите код и смотрите как он работает.
https://jser.dev/2024-05-11-introducing-rie/
На чем разработать свой стартап или с чего начать хакатон в 2024?
Один из вариантов выбора стека для быстрой (и, возможно, долгосрочной) разработки нового проекта. Холивары и мнения прилагаются в комментах к статье 😊
https://habr.com/ru/articles/822001/
Анимация наведения для текста в стиле консоли
Очередной интересный эффект для анимации текста.
Демо | GitHub
https://tympanus.net/codrops/2024/06/19/hover-animations-for-terminal-like-typography/
Текст по кругу на чистом CSS
Как сделать текст по окружности без необходимости использования monospace шрифта - пошаговая инструкция.
https://frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/
Паттерны для веб-разработчиков
Ресурс по изучению различных видов паттернов (не только в классическом понимании) с упором на веб. Есть секции по общему проектированию + секции по фреймворкам, для того, чтобы вы могли создавать масштабируемые приложения с лучшим перформансом.
https://www.patterns.dev/
Змейка на ReactJS
Туториал по реализации классической игры
Github | Demo
https://blog.bibekkakati.me/how-to-build-a-classic-snake-game-using-reactjs
Web Push Notifications
Практическое руководство по реализации web push уведомлений.
https://www.bocoup.com/blog/full-stack-web-push-api-guide
Композиция функций
Создаем пайплайны из функций, каррируем и смотрим, где это удобно применять.
https://jrsinclair.com/articles/2024/how-to-compose-functions-that-take-multiple-parameters-epic-guide