​Пет-проект на React, или как озвучить интернет

Многие пет-проекты так и остаются пет-проектами без дальнейшего продолжения. Так произошло и с этим проектом. Но несмотря на это оно было доступно в AppStore и в целом выполняло свою задачу. Это было что-то вроде сервиса подкастов, но вместо подкастов там были озвученные сайты и другой текстовый контент.

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

https://tproger.ru/articles/pet-proekt-na-react-kak-my-ozvuchivali-internet/

#react #фронтенд #бэкенд

​ReSvelte — инструмент разработчика Svelte и визуализатор дерева компонентов

Svelte — крайне удобный инструмент для создания сайтов. Однако он имеет две важные проблемы, а именно трудно выявляемый повторный рендеринг компонентов и их некорректное размещение в дереве. Чтобы избавиться от этих проблем команда Hoon Park создала инструмент, включающий визуализатор дерева компонентов и решающий проблему повторного рендеринга ReSvelte.

В этой статье вы найдёте подробный обзор библиотеки:

https://nuancesprog.ru/p/15780/

#svelte #resvelte #фронтенд

​Микрофронтенды: достоинства, недостатки и нюансы

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

Подробнее:

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

#микрофронтенд

Как разработчику заработать на продаже грибов, или создаём генератор 3D-грибов для NFT-коллекции

NFT-коллекции пережили бум своей популярности и сейчас они говорят не так много. Однако, они всё ещё пользуются спросом и стоят уйму денег. Так почему бы не подзаработать на этом, потратив минимум времени?

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

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

#threejs #nft

​Адаптивная вёрстка: что это и как использовать

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

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

https://tproger.ru/translations/responsive-web-design-tips/

#фронтенд #адаптивнаявёрстка

​Строим взаимодействие систем на PHP с помощью GraphQL

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

Но как быть, если таких серверов десятки, а интерфейсов и вовсе больше сотни? Здесь нужен особый подход и выбор инструментов для их взаимодействия. Вот, например, автор этой статьи рассказал, как в его компании пришли к использованию GraphQL.

Почему, зачем и как:

https://tproger.ru/articles/stroim-vzaimodejstvie-sistem-na-php-s-pomoshhju-graphql/

#php #graphql #бэкенд

​Рисуем QR-коды, которые не только роботу понятны, но и приятны человеческому глазу

QR-коды сегодня всё плотнее входят в нашу жизнь — спасибо пандемии и отключению популярных способов оплаты. Но все они скучны и однообразны (не для компьютера, разумеется). Вот было бы здорово, если бы QR-код привлекал внимание и развлекал, а не просто данные предоставлял, правда?

Что ж, раз есть запрос, найдётся и решение. Кстати, вот оно:

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

#javascript #react

Отладчик? Какой отладчик?

​Превращаем сайт на Django в PWA-приложение

Верстать веб-страницы не так уж сложно, разместить сайт на сервере тоже не самая сложная задача. Но давайте пойдём дальше и, несколько усложнив себе задачу, сделаем не просто сайт, а полноценное приложение на примере Django-проекта! Фронт есть, бэк — тоже. Так что дело за малым, добавляем необходимый код к тому, что уже имеется и всё готово.

Подробнее:

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

#django #pwa

​«Мой CSS круче твоего CSS». Проверяем навыки вёрстки с помощью CSSBattle

Думаете, что знаете CSS? Может и так. Но чтобы убедиться в этом, недостаточно уметь работать с flexbox и grid. Проверьте свои силы в стилизации в увлекательной игре CSSBattle. Правила простые: вам необходимо сверстать определённую фигуру с наименьшим количеством кода. Справитесь?

Попробовать можно тут:

https://cssbattle.dev/

​Проверяем свои знания по 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