front_end_dev | Technologies

Telegram-канал front_end_dev - FrontEndDev

29695

🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu № 4850240725

Subscribe to a channel

FrontEndDev

2 CSS свойства, позволяющие обрезать лишнее пространство box-контейнера

Экспериментальные свойства text-box-trim и text-box-edge, позволяющие тонко настраивать размеры текстовых контейнеров.

https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/#aa-now-where-do-you-want-to-trim-from

Читать полностью…

FrontEndDev

Розыгрыш подарков от Linux Club 🐧

— Мини-ПК GenMachine 2023 AMD Ryzen 5 3550H
— Три больших коврика с командами для Linux
— Механическая клавиатура VOROTEX K680

Для участия подпишись на Linux Club и нажми кнопку Участвую!

1 октября бот выберет 5 победителей. Отправка по РФ за наш счёт. Удачи!

Читать полностью…

FrontEndDev

Обновление Chrome DevTools

Новые фичи для оценки перфоманса: какие показатели и как теперь можно измерить.

https://www.debugbear.com/blog/fix-web-performance-devtools

Читать полностью…

FrontEndDev

Ускоряем разметку - Emmet для React

Смотрим как встроенный помощник Emmet помогает быстрее писать разметку, будь то html или jsx в React.

https://www.youtube.com/watch?v=S_s4M5LVXAQ

Читать полностью…

FrontEndDev

Text Diff на JavaScript

Простой инструмент для определения различий между строками, реализованный на JS

Демо | Github

Читать полностью…

FrontEndDev

Отправляем данные из приложения прямо в Google Sheet

Простая интеграция веб-приложений с Google Sheet без дополнительных прослоек.

https://dev.to/miracool/submitting-form-data-to-a-google-sheet-from-a-react-app-3o83

Читать полностью…

FrontEndDev

Необычные приёмы отладки, которые браузер от вас скрывает

О не очень популярных, но от этого не менее полезных способах дебага веб-приложений.

https://habr.com/ru/companies/ruvds/articles/842428/

Читать полностью…

FrontEndDev

Работа с буфером обмена

Как web clipboard сохраняет различные типы контента и как можно этим управлять.

https://alexharri.com/blog/clipboard

Читать полностью…

FrontEndDev

Docker для начинающих

Быстрое введение за 1 час, для тех, кто еще не знаком с контейнеризацией.

https://www.youtube.com/watch?v=lr1rYnUubpQ

Читать полностью…

FrontEndDev

Улучшаем производительность в аспекте шрифтов

Большое руководство по оптимизации загрузки и использованию шрифтов в веб-приложениях.

https://www.debugbear.com/blog/website-font-performance

Читать полностью…

FrontEndDev

Даты в JS скоро будут исправлены

Что не так с Date и как новый Temporal API упростит работу с датами в JS.

https://docs.timetime.in/blog/js-dates-finally-fixed/

Читать полностью…

FrontEndDev

Создаем React с нуля

Большая статья с собственной реализацией основных фич React: рендер, эффективное обновление DOM, хуки.

https://www.rob.directory/blog/react-from-scratch

Читать полностью…

FrontEndDev

21 сентября в расслабленной обстановке на свежем воздухе пройдёт Код-пленэр от Яндекса!

Встретимся с коллегами из Яндекса, чтобы порисовать кодом в саду, послушать про творчество в IT, поделиться опытом решения рабочих и не только проектов и подышать свежим воздухом в одну прекрасную сентябрьскую субботу.

Главным событием станет воркшоп по p5.js. На нём ваши навыки программирования пригодятся неожиданным образом: с помощью кода вырастите дерево, которое станет частью общего диджитал-леса.

Вечером мы увидим получившийся лес на большом экране. А потом завершим день у костра под DJ-сеты.

Заполняйте форму как можно подробнее и регистрируйтесь!

До встречи на Код-пленэре! 🔥

Читать полностью…

FrontEndDev

Объясняем, как работают генераторы в JS (сложно)

Глубокое погружение в одну из малоиспользуемых фич JS — генераторы.

https://www.reactsquad.io/blog/understanding-generators-in-javascript

Читать полностью…

FrontEndDev

Как оптимизировать ваше приложение еще до того как оно загрузилось?

О сетевых взаимодействиях, которые происходят во время запросов — какие и как их можно ускорить.

https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/

Читать полностью…

FrontEndDev

Динамические лейауты с Vue jsx: руководство по созданию поддерживаемых компонентов

Посмотрите, как динамические лейауты c Vue jsx могут оптимизировать процесс разработки, сделав ваши компоненты более гибкими.

https://www.vuemastery.com/blog/dynamic-layouts-with-vue-jsx/

Читать полностью…

FrontEndDev

React и FormData

FormData один из старых стандартов для работы с формами. Посмотрим как работать с данными форм в React и какие трюки использовать для интеграции с TS.

https://reacttraining.com/blog/react-and-form-data

Читать полностью…

FrontEndDev

«Группа Астра» проводит первую бесплатную практическую конференцию для разработчиков Astra DevConf 2024.

Разработчики ИТ-компаний раскроют секреты эффективной и безопасной разработки, а также поделятся практическими кейсами.

На конференции мы:
— покажем как реализовать разработку, сборку и тестирование в облаке;
— расскажем как легко и просто опубликовать ваше приложение в RuStore;
— поведаем, как разрабатывалась Astra Linux восьмого поколения (новый визуальный стиль - Astra Proxima, современная пакетная база и пр.);
— развенчаем миф о том, что запустить современные игры на Astra Linux невозможно;
— и многое другое.

Для участников конференции будет доступен:
— личный кабинет разработчика, в котором можно бесплатно скачивать решения «Группа Астра» для целей изучения и разработки (в том числе ОС Astra Linux 1.8);
— портал с документацией, где можно найти различные инструменты для разработки, примеры кода и готовые стенды для тестирования.

Дата и время: 24 сентября, в 10:00
Формат: онлайн/офлайн

Регистрация доступна по ссылке. Поехали!

реклама. ООО «РусБИТех-Астра», ИНН: 7726388700, erid: 2Vtzqux9UpQ

Читать полностью…

FrontEndDev

MutationObserver для CSS

@bramus/style-observer позволяет повесить JS коллбек на изменение CSS свойств

https://www.bram.us/2024/08/31/introducing-bramus-style-observer-a-mutationobserver-for-css/

Читать полностью…

FrontEndDev

Многопоточное программирование на Node.js с использованием Atomics

Павел Романов делится нюансами использования памяти при работе с worker_threads и почему стоит использовать Atomics для более предсказуемых результатов.

https://pavel-romanov.com/multithreading-in-nodejs-using-atomics-for-safe-shared-memory-operations

Читать полностью…

FrontEndDev

❓Как прототипное наследование может улучшить ваши навыки разработки на JavaScript?

🗓 Ждем вас на открытом вебинаре 18 сентября в 20:00 мск, где мы разберем:

- что такое прототипное наследование в JavaScript и как оно работает;
- как прототипное наследование помогает при разработке программ;
- как лучше понять объектную модель JavaScript;
- как писать ООП код с экономией памяти.

Урок подходит для тех, кто знает основы JavaScript и хочет углубить свои знания в области разработки.

🔥 Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!

👉 Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cAHeZ6

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Читать полностью…

FrontEndDev

Next.js + Playwright. Как мы начали писать автотесты и что из этого вышло

Данила, фронедт-тимлид компании KTS, делится опытом внедрения автотестов на одном из боевых проектов с NextJs 12: почему выбрали Playwright, детали разработки, интеграция с CI.

https://habr.com/ru/companies/kts/articles/843054/

Читать полностью…

FrontEndDev

🏆 Хакатон «Код Согласия» – масштабное соревнование для опытных и начинающих ИТ-специалистов. Реши реальную бизнес-задачу и поборись за призовой фонд в 1 000 000 рублей!

Регистрируйся до 27 сентября: https://cnrlink.com/soglasiecodefrontendd

Приглашаем frontend и backend разработчиков, аналитиков, product менеджеров, дизайнеров, тестировщиков, студентов и выпускников технических вузов. 

Организатор хакатона – страховая компания «Согласие». Компания существует на рынке более 30 лет и входит в топ-10 страховщиков России.

🚀 На выбор участников хакатона — одна из задач, основанных на реальных бизнес-кейсах СК «Согласие»:
1️⃣ Web-сервис для проверки гипотез: разработайте инструмент для быстрого создания и тестирования новых страховых продуктов. Стек технологий — не ограничен.

2️⃣ Сервис для ведения проектов: разработайте систему для централизованного хранения, удобного отображения и мониторинга крупных проектов внутри компании.

Допустимые стеки в данной задаче: Vue JS, PHP, C#

Ключевые этапы хакатона «Код Согласия»:
🔹до 27 сентября — окончание регистрации
🔹 28 сентября — старт хакатона
🔹30 сентября, 3 октября, 5 октября — чек-поинты с экспертами
🔹 6 октября — оглашение победителей

Не пропусти масштабное соревнование — присоединяйся к хакатону «Код Согласия»: https://cnrlink.com/soglasiecodefrontendd

Реклама. ООО "СК"Согласие". ИНН: 7706196090. erid: LjN8KB8zm

Читать полностью…

FrontEndDev

CSS display: contents

Ахмад Шадид подробно рассказывает, что за новое свойство contents, как оно влияет на отображение содержимого и в каких случаях его удобно использовать.

https://ishadeed.com/article/display-contents/

Читать полностью…

FrontEndDev

🚀 Мок-собеседование в Авито!

Как правильно подготовиться к собеседованию на позицию технического руководителя в Авито? Ответ уже на канале AvitoTech по ссылке!

Команда Авито вместе с Андреем Смирновым, руководителем клиентской разработки в X5 Tech показывают, как проходит кейс-интервью для технических менеджеров, TeamLead, TechLead, TUL и CTO.

Узнайте о формате интервью, задачах, которые предлагаются кандидату, и ключевых ожиданиях от роли. Смотрите сейчас!

Читать полностью…

FrontEndDev

Разбираемся с Record Type в TS

Создание, использование и отличие от Tuple.

https://www.sitepoint.com/typescript-record-type-comprehensive-guide/

Читать полностью…

FrontEndDev

Sticky хедер + элементы на всю высоту: хитрая комбинация

Sticky-позиционирование не всегда надежное, и может быть нарушено многими факторами.
Вот небольшой разбор, как можно сделать его более стабильным, если вам нужно использовать разметку с заголовком и элементами на всю страницу.

https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/

Читать полностью…

FrontEndDev

Vue & Vite Updates

Доклад с VueConf US 2024

https://www.youtube.com/watch?v=A9MSFp9Fs8k

Читать полностью…

FrontEndDev

Диалоговое окно с анимацией на показ и скрытие

Простое демо с нативной поддержкой входных и выходных анимаций.

https://frontendmasters.com/blog/the-dialog-element-with-entry-and-exit-animations/

Читать полностью…

FrontEndDev

❗️Создайте свое приложение для прогноза погоды всего за 1 час

❓Хотите научиться создавать полезные приложения и работать со сторонними веб-сервисами?

⏰ Ждем вас на открытом вебинаре 4 сентября в 20:00 мск, где мы разберем:

- как работать с API сторонних веб-сервисов на примере создания приложения для прогноза погоды;
- основные принципы работы с API и их интеграции в проекты;
- как расширить функционал приложения и использовать больше браузерных инструментов.

🔥 Урок идеально подходит для тех, кто знает основы JavaScript (циклы, условия, функции, базовая работа с DOM).

Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!

👉Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cA5wlu

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Читать полностью…
Subscribe to a channel