​Проверяем свои знания по React: готовы ли мы к собеседованию или нет?

Техническое собеседование — это важный этап для работодателя, чтобы проверить ваши знания и навыки. Вдруг вы слукавили в резюме? Чтобы доказать свою компетентность, нужно быть готовым ко всему.

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

https://www.freecodecamp.org/news/prepare-for-react-technical-interviews/

#react #фронтенд

Визуальное руководство по рендерингу React. Часть 1

Хотите понять как работает рендеринг в React и своими глазами увидеть процесс? Что ж, эта статья для вас. Здесь вы узнаете, как работает повторный рендеринг и как его избежать:

https://alexsidorenko.com/blog/react-render-always-rerenders/

#react

​Курс молодого бойца: ускоряем проекты на Битрикс, повышаем их отказоустойчивость

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

Подробнее:

https://tproger.ru/articles/kurs-molodogo-bojca-uskorjaem-proekty-na-bitriks-povyshaem-ih-otkazoustojchivost/

#битрикс #php

Карточки цен на чистом CSS

Простые, но стильные карточки товаров, выполненные с применением анимации на чистом CSS. Для работы с CSS в этом проекте использовался препроцессор SCSS. Вы можете сделать аналогичные карточки для вашего сайта:

https://codepen.io/jcoulterdesign/pen/NxMoja

#codepen #css

​Бесплатный учебник по программированию: от вёрстки до Laravel

Держите сайт, где собрана теория по многим темам веб-разработки — вёрстка, JavaScript, PHP, TypeScript, NodeJS, SQL, Vue, React, Laravel. Всё бесплатно и понятно, а наличие заданий в конце темы поможет закрепить знания на практике.

https://code.mu/ru/

#обучение

Визуальное руководство по рендерингу React. Часть 2

Продолжаем серию статью о визуальном руководстве по рендерингу React. В первой части был показано и рассказано, как работает повторный рендеринг, а теперь речь пойдёт о пропсах.

Наглядная демонстрация работы пропсов тут:

https://alexsidorenko.com/blog/react-render-props/

#react

Как освоить фронтенд-разработку в 2022 году: дорожная карта

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

А ещё мы попросили сениор фронтенд-разработчика поделиться собственным опытом и рассказать о интересных новинках, которые мы включили в дорожную карту:

https://tproger.ru/articles/frontend-roadmap-2021/

#фронтенд #роадмап

Лучшие практики клиентов Cloud собраны в одном вебинаре

28 сентября эксперты Cloud на примере реальных кейсов Dodo Brands, «Уралхим», Росгеологии, Мариинского театра, lady & gentleman CITY расскажут:

— Как построить с нуля платформу для обработки и анализа данных.
— Для чего Kubernetes нужен интернет-магазину.
— Как безопасно мигрировать из зарубежного облака и масштабировать ИТ-инфраструктуру.
— В чём плюсы размещения «1С» в облаке.
— Как разработать стриминговую платформу в облаке и монетизировать контент.
— Почему будущее за Serverless.

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

Регистрируйтесь на вебинар здесь

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

​О пользе и вреде FullStack-фреймворков на примере Meteor.js

Концепция «всё и сразу» довольно интересна. Посудите сами, вы пишите код для фронтенда и бэкенда в едином стиле на одном языке и затем просто заставляете их работать вместе. Благодаря популярности такого решения сегодня существует несколько фуллстак-фреймворков.

Одним из них является Meteor.js. О плюсах и минусах его использования вы можете узнать у нас на сайте:

https://tproger.ru/articles/o-polze-i-vrede-fullstack-frejmvorkov-na-primere-meteor-js/

#meteorjs #фуллстак

Анимация рамок на CSS

Оказывается анимировать границы элемента достаточно просто. Но нужно знать некоторые хитрости, потому что просто так «в лоб» анимировать border не получится. Если хотите разобраться в этом вопросе, то скорее переходите по ссылке:

https://web.dev/css-border-animations/

#фронтенд #css

Делаем анимацию страницы, синхронизированную со скроллом, как у Apple

Зайдите на сайт Apple или Samsung и посмотрите, как круто анимированы страницы с их продуктами. Хотите научиться также? На самом деле это не так уж и сложно.

В этой статье вы научитесь создавать аналогичные анимации и затем оживлять с их помощью ваши веб-страницы:

https://css-tricks.com/scroll-triggered-animation-vanilla-javascript/

#css #фронтенд

Визуальное руководство по рендерингу React. Часть 3

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

Подробнее:

https://alexsidorenko.com/blog/react-render-usememo/

#react

YAWAS — Ещё одна структура веб-приложений

Правильная организация файловой структуры веб-приложений позволяет не только увеличить скорость разработки за счёт понятной ориентации в проекте, но и снижает порог входа в проект новых специалистов, которым только предстоит развивать и поддерживать его. Сегодня существует множество различных структур — MVC, MVVM, MVP и прочие.

В этой же статье речь пойдёт о структуре, которая имеет название YAWAS (Yet Another Web Application Structure) — еще одна структура веб приложений:

https://tproger.ru/articles/yawas-eshhjo-odna-struktura-veb-prilozhenij/

Можно ли играть в игры и при этом прокачиваться в программировании? И если да, то как это сделать?

Попробуйте CodinGame. Здесь вы можете поиграть в различные игры самых разных жанров, но вместо контроллера у вас будет код. Сервис поддерживает более 25 языков программирования, поэтому подойдёт абсолютно каждому разработчику?

Начать играть:

https://www.codingame.com/start

#игрыдляучёбы

​Реализация скелета загрузки в Angular

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

В этой статье автор показал, как реализовать такой скелет с помощью Angular:

https://netbasal.com/implementing-a-loading-skeleton-in-angular-7490ffdecc1b

#angular #фронтенд

Гуляем по мирам с помощью React

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

Вот тут вы можете изучить код проекта и его особенности:
https://github.com/sfatihk/react-world

А здесь совершить ту самую прогулку:
https://sfatihk.github.io/react-world/#

#веб #react

​Изучение React Suspense с помощью React Freeze

Слышали о новом компоненте React Suspense? Он позволяет корректно обрабатывать загрузку и визуализацию данных. Есть также React Freeze, который позволяет заморозить рендеринг компонентов и контролировать, что на самом деле обновляется в ваших приложениях React.

В этой статье подробно рассмотрен React Freeze и его возможности, а также показано, как его можно использовать в реальных проектах:

https://blog.logrocket.com/exploring-react-suspense-react-freeze/

#react

​Парсинг дат в JS — добавляем русский язык в библиотеку Chrono

Chrono — это JavaScript библиотека, которая парсит даты на естественном языке. То есть, вы можете написать что-то вроде 2 часа 5 минут назад и библиотека распознаёт в этом тексте нужно время, дату или период и преобразует в формат, понятный компьютеру. Она поддерживает 8 языков, включая русский.

Подробнее о том, как ей пользоваться и где она может пригодиться, тут:

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

#javascript #библиотека

Как легко управлять зависимостями в монорепозитории JS

Если верить прошлогоднему опросу State of JS, то управление зависимостями в JS — главная головная боль разработчиков. Вторая проблема в архитектуре кода.

Если речь идёт о монорепозитории, то разработчик может столкнуться с этими проблемами одновременно. В этой статье не будет очередного спора о выборе архитектуры. Вместо этого мы предлагаем вам рассмотреть проблему управления зависимостями и разобраться какие инструменты существуют сегодня и что лучше использовать:

https://nuancesprog.ru/p/16260/

#javascript