Frontend разработчик
11.7K subscribers
1.76K photos
489 videos
44 files
2.7K links
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.

По всем вопросам @evgenycarter

РКН clck.ru/3KoFrk
加入频道
Назначение HTML-тегов в верстке

№1. Базовые теги
№2. Теги форматирования
№3. Семантические теги
№4. Теги форм
№5. Теги картинок, ссылок, списков и интерактива

источник

👉 @frontend_1
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Создавайте приложения в Deno с помощью таких фреймворков, как React, Vue, Express и др.

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

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

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

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

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

👉 @frontend_1
👍2
Фронтендерская история

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

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

👉 @frontend_1
👍4
React: работа с 3D-графикой

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

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

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

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

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

https://youtu.be/maPRR_jjyOE

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

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

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

👉 @frontend_1
👍1
Media is too big
VIEW IN TELEGRAM
Формы: костыли для библиотек или долгострой велосипедов

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

источник

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

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

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

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

👉 @InsightBots_bot
4👎3👍1🔥1
Как преобразовать эскизы в HTML

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

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

👉 @frontend_1
👍2👎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
👍52
Что там в СберМаркет 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
👍1
Javascript testing best practices

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

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

👉 @frontend_1
👍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
👍4