29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Создаем сложное расширение для google chrome
Туториал по созданию расширения на примере Image Saver - приложения для сохранения картинок.
https://evilmartians.com/chronicles/how-to-make-complex-chrome-plugins-a-zero-gravity-guide
Использование селектора :has
Небольшие примеры от Энди Белла, в которых отлично вписывается применение селектора :has
https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world/
Местоположение пользователя - это ложь
Почему нет 100% гарантии верного определения локации пользователя и какие есть способы ее определения. А также что стоит брать во внимание при решении задач, связанных с геолокацией.
https://austingil.com/user-location-is-a-lie/
Разработчик ПО из Казани? Познакомься со специалистами ТехноХаба Сбера и прокачай свои скиллы! 👨💻👩💻
ИТ-академия ИТ-парка запустила курс для разработчиков «Cross-platform developer on JavaScript» совместно с Андреем Власовым — лидером компетенций, руководителем технологического Хаба Сбера в Казани с опытом в разработке 16 лет.
Для кого? 💻
— разработчики ПО с опытом работы frontend 1-2 года
По окончании курса ты получишь знания и навыки, соответствующие уровню Middle Javascript Developer, а именно:
✅ Продуктовое мышление
✅ UX/UI проектирования в figma
✅ Разработка web-приложений на React
✅ Разработка серверных приложений на Nodejs + Express + Mongo
✅ Написание эффективных тестов для приложений
✅ Глубокое понимание micro-frontend архитектуры на больших проектах
Запишись на собеседование прямо сейчас: записаться и получить бонусом офлайн-консультацию с наставником, защиту выпускной работы перед экспертами и удостоверение о повышении квалификации. 🔥
▪️Набор открыт до 15 августа
▪️Объем курса: 124 акад/ч (продолжительностью 5 месяцев)
▪️Формат: офлайн, в ИТ-парке им .Б. Рамеева
📲 Номер телефона для связи: +7 937 594 2209Реклама: ТЕХНОПАРК В СФЕРЕ ВЫСОКИХ ТЕХНОЛОГИЙ "ИТ-ПАРК", ГАУ "ИТ-ПАРК", ИНН: 1655191213, ERID: 2VtzqwGw4hR
React Conf 2024
Все доклады с прошедшей конференции по React. Enjoy.
https://conf.react.dev/talks
Свойство CSS font-size-adjust теперь часть стандарта
Свойство может помочь предотвратить сдвиги контента при загрузке fallback шрифтов.
Подробнее — в небольшой заметке.
https://web.dev/blog/font-size-adjust?hl=en
Popover API 101
Нативный Popover с недавнего времени доступен в браузерах. Посмотрите как использовать его API и как можно его стилизовать и анимировать.
https://www.amitmerchant.com/popover-api-101/
Динамический Github профиль с Bun и Typescript
О том, как сделать свой профиль на GitHub динамическим используя Bun, TS и Github Actions.
https://tduyng.github.io/blog/dynamic-github-profile-with-bun-typescript/
🚀 Ищете ментора? Нужна помощь от опытного разработчика или технического лидера?
В Авито запустили программу менторства, доступную для каждого, кто стремится к развитию и росту 💚
Стас Процкий, руководитель технического подразделения, определит вместе с вами направление развития карьеры, проведет собеседование для разного уровня специалистов: от мидлов до менеджеров.
Это только один из примеров — в Авито много наставников, готовых делиться знаниями.
🔍Ребята из Авито:
• проведут тестовые собеседования с разбором ответов
• помогут в направлении развития и улучшения знаний: frontend / backend-разработка, system design
• направят, если есть проблемы в команде и помогут наладить операционные процессы
Найдите своего ментора из Авито здесь: Getmentor.
Есть разные форматы работы: платные встречи или сессии за взнос на благотворительность 💚
JavaScript console.log
Способы логирования в консоль — улучшаем читабельность логов.
https://www.youtube.com/watch?v=eSGcBJIfAAU
Мидлы и сеньоры тут?
Если вы не понимаете, как и куда расти дальше, но очень хотите, пора познакомиться с IT_One! Это аккредитованная IT-компания, разрабатывающая ПО на заказ. IT_One организует и проводит митапы, хакатоны, участвует в профессиональных мероприятиях, объединяя специалистов по всей стране.
Все сотрудники IT_One имеют возможность работать удалённо и свободно развиваться за счёт компании. Для каждого действует программа ротации — всегда можно сменить направление деятельности на более интересное для себя.
👉🏻 Переходите в профиль IT_One — прямо сейчас у вас есть возможность забрать бесплатный гайд для мидлов, желающих скорее дорасти до сеньоров, а также для сеньоров, которые упёрлись в потолок и не знают, как развиваться дальше!
Реклама. ИП Пчелинцева В.В. ИНН: 701752778729, erid: 2Vtzqwrsoop
TypeScript. Что такое branded types?
https://www.youtube.com/watch?app=desktop&v=OCJX7L0VN7M
Анимация повторения текста при скроле
Очередной необычный эффект для вашего приложения.
Демо | Github
https://tympanus.net/codrops/2022/04/13/on-scroll-text-repetition-animation/
Стилизуем таблицы современным способом
https://piccalil.li/blog/styling-tables-the-modern-css-way/
В CSS появился условный оператор
Подробнее о синтаксисе и примеры использования читайте в статье.
https://css-tricks.com/if-css-gets-inline-conditionals/
Офер в Яндекс для опытных фронтендеров за два дня
24–25 августа приглашаем фронтендеров с опытом работы от четырёх лет получить офер в Яндекс через multitrack за 2 дня. Достаточно решить задачи онлайн до 20 августа и пройти несколько технических секций 24 августа, чтобы уже 25-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться.
Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать.
Узнать подробности и зарегистрироваться.
Разбираемся с Cookies и Tokens
Как работают Cookies, какие существую типы и параметры, а также что такое токены. Объединяем эти понятия и разбираемся с работой JWT.
https://tommihovi.com/2024/05/demystifying-cookies-and-tokens/
The Front-End Checklist
Чек-лист для вашего проекта, покрывающий все аспекты и практики разработки. Позволяет вам понять, не упустили ли вы чего-нибудь при разработке.
https://frontendchecklist.io/
NodeJS добавил экспериментальную поддержку TS
С использованием флага --experimental-strip-types можно запустить TS код без транспиляции.
https://socket.dev/blog/node-js-adds-experimental-support-for-typescript
Как использовать container query сейчас
Сontainer queries уже поддерживаются всеми браузерами, но разработчики не спешат их использовать. Вот несколько простых шагов, которые помогут начать.
https://web.dev/blog/how-to-use-container-queries-now?hl=en
Нужно развернуть приложения быстрее? С Облаком Рег.ру это возможно!
Мы предлагаем мгновенный запуск сервисов, линейку процессоров от мощных до очень мощных ( включая AMD EPYC и высокочастотные E2388), управление через панель или API. С нашими готовыми образами для Docker и GitLab вы сможете начать работу в несколько кликов.
Присоединяйтесь к нашему каналу, чтобы узнать, как облако Рег.ру помогает в разработке, и быть в курсе актуальных IT-новостей.
Реклама. ООО «Регистратор доменных имен РЕГ.РУ». ИНН 7733568767 erid: 2VtzquX6u22Читать полностью…
Выбираем рендер-стратегию для вашего приложения
Оптимизация на уровне доставки: о способах рендера приложения и о том, как выбрать лучший для вашего.
https://vercel.com/blog/how-to-choose-the-best-rendering-strategy-for-your-app
Добавляем определения типов для CSS
Как свойство @property поможет вам избежать ошибок при использовании кастомных свойств.
https://moderncss.dev/providing-type-definitions-for-css-with-at-property/
Для чего нужна библиотека tRPC?
Объяснение на практическом примере.
https://www.freecodecamp.org/news/what-is-trpc/
Почему page.goto() замедляет ваши тесты на Playwright?
Разбираемся с оптимизацией e2e тестов на Playwright.
https://www.checklyhq.com/blog/why-page-goto-is-slowing-down-your-playwright-test/
24 CSS проекта, которые сделают из вас мастера CSS
Анимации загрузки, прогресс бары, переворачивающиеся карты — во многом стандартные эффекты, которые иногда не так просты как кажется. Раскроем все секреты реализации в 2х часовом курсе от freeCodeCamp.
https://www.youtube.com/watch?v=TzuWIHGFKCQ
В CSS в скором времени появятся нативные mixin
Подробнее о том как это будет — в черновиках CSSWG
https://drafts.csswg.org/css-mixins/
AvitoTech выпустили бесплатный видеокурс по JavaScript, и четвёртый эпизод уже доступен к просмотру.
В новом выпуске вы узнаете про устройство и размер памяти программы, стек и кучу, Oddball и иммутабельные примитивы. Это поможет создавать эффективные программы, которые оптимально используют память.
Не забудьте подписаться на канал, чтобы не пропустить следующие выпуски.
Создаем npm пакет с поддержкой CommonJS и ESM
Пошаговое руководство по созданию и оформлению npm пакета на TypeScript
https://blog.mastykarz.nl/create-npm-package-commonjs-esm-typescript/
Разрезаем изображение на кусочки (и соединяем при наведении)
Интересный и простой эффект без использования JS.
https://codepen.io/thebabydino/pen/VwOGJQx