​Как инженеру не умереть со скуки во фронтенде?

В новом выпуске подкаста Frontend Weekend Андрей Смирнов пообщался с Полиной Гуртовой, фронтенд-разработчиком компании «Злые Марсиане» и обсудил, сложный ли фронтенд или его просто усложняют ради веселья разрабов, а также остановился ли он в своём развитии и имеет ли ещё место быть Hype Driven Development.

Смотрим:

https://youtu.be/5e2Pma2b2yQ

#видео #подкаст

​NoJS — делаем калькулятор с использованием только чистого HTML и CSS

Самый логичный способ создания калькулятора, работающего на веб-странице — JavaScript, верно? Но автор этой статьи явно не ищет легких путей, поэтому сделал калькулятор с помощью чистых HTML и CSS (даже без препроцессоров), используя радио-кнопки, хитрость и немного магии.

Что в итоге получилось, можно узнать тут:

https://blog.scottlogic.com/2022/01/20/noJS-making-a-calculator-in-pure-css-html.html

#html #css

​Мой типичный рабочий день:

​Является ли Bun следующим значительным достижением после WebPack?

Недавно был представлен новый игрок экосистемы инструментов JavaScript  —  bun. Он призван сделать разработку JavaScript еще быстрее. Этот инструмент можно назвать всеобъемлющим: он не просто ускоряет компиляцию и синтаксический анализ, но и предоставляет собственный менеджер зависимостей и пакетирование.

Обзор этого многообещающего инструмента тут:

https://nuancesprog.ru/p/15623/

#bun #javascript

Так вот как с таблицами в Excel работают

Programmer memes

​3 способа стилизации эффектов CSS с помощью box-shadow

В настоящее время недостаточно того, чтобы веб-сайт выполнял свою работу — он должен отправлять пользователя в путешествие, эстетически приятное путешествие по оттенкам, шрифтам и всему остальному. И тени играют в этом важную роль! В этой статье вы познакомитесь с возможностями свойства box-shadow и научитесь создавать слоистые, неоновые и неоморфные тени:

https://blog.logrocket.com/three-ways-style-css-box-shadow-effects/

#css #фронтенд

​Ещё один полезный инструмент вам в копилку: проект, на котором собрали больше 100 опенсорс клонов популярных сервисов.

Там есть и Instaclone, и Fakebooker, и даже Amazonna. А ещё в таблице можно глянуть стек, который использовался для создания каждого приложения:

https://gourav.io/clone-wars

#opensource #инструменты

​​Улучшение Visual Studio Code для новичков

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

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

Подробнее обо всём в статье:

https://habr.com/ru/post/653465/

#vscode

10 антипаттернов React, которых следует избегать

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

В этом руководстве вы рассмотрите 10 антипаттернов в React, а также советы и рекомендации по улучшению вышего кода.

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

#видео #react

Как создавать потрясающие 3D-сцены с помощью React Three Fiber

В этой статье показано, как создавать потрясающие 3D-анимации с помощью React Three Fiber (R3F). Вы рассмотрите настройку сцены, создание геометрии, добавление освещения и включение эффектов постобработки. Более того, вы научитесь воссоздавать приведенную выше анимацию с нуля.

https://varun.ca/modular-webgl/

#фронтенд #библиотека #r3f

​25 мест, где можно найти бесплатные компоненты Tailwind CSS

Работаете с Tailwind? Тогда вы могли столкнуться с такой проблемой, что нужного компонента не было, а где искать вы не знали. Но мы попробуем решить вашу проблему, предложив статью, где собраны аж 25 источников компонентов на любой вкус. Вот она:

https://techrocks.ru/2022/01/24/25-components-libraries-for-tailwind-css/

#tailwind #css

​​Я: повторяю инструкцию из интернета

Мой код:

​Добавьте в свой арсенал самую популярную NoSQL-базу данных — MongoDB

Пройдите полный тест на сайте и узнайте, подойдёт ли вам программа онлайн-курса по MongoDB:

https://tprg.ru/PoUC

Это #партнёрский пост

hello в стиле Apple

Сложный с точки зрения количества строк, но простой по сути codepen-проект, повторяющий приветственное окно различной яблочной продукции, выполнен с использованием SVG и библиотеки GSAP:

https://codepen.io/tripti1410/details/pordWpZ

#codepen

Илон Маск Twitter'ни сотиб олишдан бош тортмоқда — Bloomberg

Илон Маск Twitter ижтимоий тармоғидаги сохта саҳифалари сонини аниқламасдан туриб уни сотиб олишни истамаслигини айтди, деб хабар бермоқда Bloomberg.

Манбанинг хабарига кўра, миллиардер Twitter'ни сотиб олиш бўйича келишув нархини пасайтиришни режалаштирмоқда. Маскнинг фикрича, ижтимоий тармоқдаги ботларнинг 20 фоизи, аккаунтларнинг эса 90 фоизи сохта бўлиши мумкин.

"Кеча Twitter бош директори ижтимоий тармоқдаги сохта аккаунтлар 5 фоиздан ошмаслигини исботлашдан очиқчасига бош тортди. Директор буни исботламагунга қадар бизнинг келишувимиз амалга ошмайди", — дея Илон Маскнинг Twitter'даги постидан иқтибос келтирмоқда Bloomberg.

@Militsiya_Uzb👈🏽

Создание радиального меню для сайта

Интересная реализация меню, выполненная в форме кольца. Автор пошагово продемонстрировал, как можно сделать аналогичное меню.

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

https://www.youtube.com/watch?v=9li7UcMuwKI

#видео

​Как узнать, насколько вы хороши в React.js

Для этого нужно ответить всего на 19 вопросов! Сможете сдать — пройдёте на продвинутый курс по React.js со скидкой.

Пройти тест по React: https://tprg.ru/tYFP

А если хотите начать полноценное обучение, регистрируйтесь на бесплатные демо-занятия Otus и протестируйте учебный процесс заранее:
1. «Тестирование в React.js»: https://tprg.ru/aGxD
2. «Обзор нововведений в React 18»: https://tprg.ru/Yze9

Это #партнёрский пост

​Шахматы на React и TypeScript

Всего за час вы сможете изучить способ создания шахмат с использованием React и TypeScript. Для этого вам понадобятся общие знания ООП и щепотка энтузиазма:

https://youtu.be/mUvYGUYMvKo

#видео #react #typescript

​Как довести фронтендера до инфаркта:

​Навигация с горизонтальной прокруткой

Цель этой статьи — научить вас создавать отзывчивую горизонтальную навигацию с помощью прокрутки переполнения. Весь код уже тут вместе с объяснениями:

https://markdotto.com/2022/03/10/horizontal-scrolling-nav/

#фронтенд

Как Discord реализовал навигацию клавиатурой по всему приложению

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

Перевод статьи можно прочитать здесь:

https://habr.com/ru/post/659731/

#javascript