Создавайте приложения в Deno с помощью таких фреймворков, как React, Vue, Express и др.

https://deno.com/blog/frameworks-with-npm

👉 @frontend_1

Эффект карандашного наброска с помощью постобработки Three.js

В этом уроке вы узнаете, как создать эффект карандашного наброска с помощью постобработки Three.js. Мы рассмотрим шаги по созданию пользовательского прохода постобработки рендеринга, реализации обнаружения краев в WebGL, повторному рендерингу нормального буфера на цель рендеринга и настройке конечного результата с помощью сгенерированных и импортированных текстур.

Вот как выглядит конечный результат, так что давайте приступим!

https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/

👉 @frontend_1

Фронтендерская история

Прогресс в этой области действительно поражает. От галлюциногенных картинок DeepDream до шедевров от Stable Diffusion прошло каких-то 8 лет. И ведь это не единственный лидер сейчас. Здесь же мы имеем Midjorney, Imagen, Dalle, Kandinsky в конце концов. И знаете, мне это что-то напоминает.

https://habr.com/ru/articles/703780/

👉 @frontend_1

React: работа с 3D-графикой

В данном туториале я покажу вам самый простой и быстрый, хотя и не очень оптимальный с точки зрения размера сборки, способ рендеринга 3D-объектов и моделей в React.

Мы решим 3 интересные задачи:
- рендеринг самописного 3D-объекта;
- рендеринг готовой 3D-модели;
- совместный рендеринг объекта и модели.

https://habr.com/ru/companies/timeweb/articles/704024/

👉 @frontend_1

JavaScript для начинающих 2023. Полный курс за 6 часов. Уроки. Теория + практика

Что такое JavaScript, переменные, типы данных, числа, BigInt, функции, стрелочные функции, массивы, циклы, обход массивов, объекты, свойства и методы объектов, классы, асинхронность, setTimeout, setInterval, callback hell, Promise, async await, работа с DOM. 3 практических проекта. Курс 2023 года.

https://youtu.be/maPRR_jjyOE

👉 @frontend_1

Senior, для вас тут вакансия в Дзен на руководителя команды frontend-разработки

Нужно развивать форматы постов и статей, интерфейсы ленты рекомендаций и сайт Дзена, проектировать архитектуру приложений с помощью React, Redux, TypeScript, RxJS, server-side rendering на Node.js.

Что ещё важно: опыт фронтенд-разработки от пяти лет, желательно для большой внешней аудитории. Офис расположен на Павелецкой, внутри профессиональная команда, крутые вечеринки и все возможности для роста и развития. Откликнуться можно вот здесь.

👉 @frontend_1

Формы: костыли для библиотек или долгострой велосипедов

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

источник

👉 @frontend_1

Появился новый телеграм бот, который интегрирует популярные нейросети, включая ChatGPT.

Нейросеть упростит процесс программирования:
🔹Ускорит написание компонентов (TS, React, Vue и т.д.), предоставит детальный гайд по любому таску, проведет дебаг;
🔹Избавит от мучительного ресерча, ответит на все вопросы.

Кастомные фичи - форматированные сниппеты, экспорт и импорт контекста и другое.

Доступ без VPN, оплата российскими картами и криптой + 5 бонусных запросов по ссылке.

👉 @InsightBots_bot

Как преобразовать эскизы в HTML

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

https://www.htmhell.dev/adventcalendar/2022/1/

👉 @frontend_1

Геометрия объектной модели документа: исчерпывающее руководство

Знаете ли вы, что кроме интерфейсов, определенных спецификациями объектной модели документа (Document Object Model, DOM) и объектной модели каскадных таблиц стилей (Cascading Style Sheets (CSS) Object Model, CSSOM), существует также набор свойств и методов, определяемых в модуле отображения CSSOM (CSSOM View Module)? Этот интерфейс предназначен для определения и манипулирования геометрией элементов DOM.

Rus https://habr.com/ru/companies/timeweb/articles/705552/

Eng https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/

👉 @frontend_1

Что там в СберМаркет Tech?

Собрали дайджест полезных публикаций от технической команды СберМаркета за май:

👾 Практика техретро: что это такое и как помогает решать проблемы.

👾 Обзор 6 библиотек с анимациями для React Native.

👾 Записи трех докладов митапа Moscow CSS х SberMarket.

👾 Список открытых вакансий.

Ребята выпускают немало интересного. По темам – не только фронт, но и архитектура, продукт, UX-дизайн, редактура, менеджмент. И каждые две недели – подкаст, где обсуждают технологии и управленческие процессы IT-гигантов. Последний эпизод подкаста — про использование ChatGPT в управлении.

Заглядывайте и подписывайтесь :)

Краткий курс по TypeScript для React

Даже если вы еще не работали с TypeScript, вы наверняка слышали о нем. За последние годы он получил широкое распространение в мире React. На сегодняшний день почти все вакансии в React требуют знания TypeScript.

Поэтому многие разработчики React задаются вопросом: Действительно ли мне нужно изучать TypeScript?

Я понимаю, у вас и так много дел. И особенно если вы все еще пытаетесь прорваться в индустрию, вы, вероятно, перегружены всем тем, что нужно выучить.

https://profy.dev/article/react-typescript

👉 @frontend_1

Javascript testing best practices

Данное руководство гарантирует надежность JavaScript и Node.JS от A до Я. В качестве источника в данном руководстве используется обобщенная информация, взятая из самых надежных книг, статей и блогов, которые можно найти на рынке в данный момент.

https://github.com/goldbergyoni/javascript-testing-best-practices/blob/master/readme-ru.md

👉 @frontend_1

Хотите сократить время, затраченное на настройку бэкенда?
Xano - это ваш идеальный инструмент❗️

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

Использование Xano Frontend разработчиками позволит:

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

Присоединяйтесь к Русскоязычному сообществу Xano RU 🔥

В данном телеграмм канале Евгений Новиков, в прошлом технический директор в стартапе, а сейчас основатель студии Flutter разработки рассказывает о:

- примерах решения реальных кейсов с использование Xano;
- об отличиях от других ноукод платформ;
- преимуществах использования Xano для программистов, стартаперам и ноукодерам;
- проводит бесплатные демо вебинары о Xano, где рассказывает об этом инструменте.

Некоторые кросс-браузерные функции DevTools, о которых вы, возможно, не знаете

Я провожу много времени в DevTools, и я уверен, что вы тоже. Иногда я даже переключаюсь между ними, особенно при отладке кросс-браузерных проблем. DevTools во многом похож на сами браузеры - не все функции DevTools одного браузера будут такими же или поддерживаться в DevTools другого браузера.

https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/

👉 @frontend_1

JavaScript: The Comprehensive Guide to Learning Professional JavaScript Programming
Автор: Philip Ackermann (2022)

Вы узнаете все, что нужно знать о профессиональном программировании на JavaScript, от основных понятий языка до важнейших задач на стороне клиента. Создавайте динамические веб-приложения с помощью пошаговых инструкций и расширяйте свои знания, изучая разработку на стороне сервера и мобильную разработку. Работайте с расширенными возможностями языка, пишите чистый и эффективный код и многое другое!

Скачать книгу

@itmozg

Большой, маленький и динамический блоки видового экрана

https://web.dev/viewport-units/

👉 @frontend_1

React + TypeScript: необходимый минимум

Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо!

Преимущества изучения TS могут быть сведены к следующему:

ваши шансы получить более высокооплачиваемую работу сильно увеличатся;
в вашем коде будет намного меньше багов, его будет легче читать и поддерживать;
рефакторить код и обновлять зависимости станет гораздо проще.

Эта статья представляет собой минимальное введение по использованию TS в React.

Rus https://habr.com/ru/companies/timeweb/articles/707744/

Eng https://profy.dev/article/react-typescript

✍️ @React_lib

Интерактивное руководство по Flexbox

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

https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

👉 @frontend_1

Анонсируем дни любви к фронтенду 💛

С 10 по 17 июня в пятый раз пройдет наша большая конференция «Я 💛 Фронтенд» 2023, где мы обсудим новости веба и дизайна, поделимся опытом и посмотрим на хороший код.
Всю неделю вас ожидают онлайн-доклады, трансляции и воркшопы, а закончится всё большой офлайн-встречей сразу в нескольких локациях: в Москве и Ереване. Принять участие в ней можно будет и в онлайн-формате.

Кроме докладов, по традиции мы проводим CTF (Capture the Flag) — игровой фронтендерский турнир из нескольких заданий, который начнётся уже 10 июня. Смотрите, как это было в прошлом году.

Полную программу «Я 💛 Фронтенд» можно посмотреть на лендинге. Регистрируйтесь до 7 июня, чтобы попасть в офлайн и быть в курсе всех активностей.

А ещё приходите в наш чат — там будет много полезного.