Веб-разработка *

Hello, world!

В этой небольшой заметке я хочу поделиться с вами двумя сниппетами, которые показались мне очень интересными. Первый сниппет представляет собой пример реализации простой реактивности (signal), второй — способ предотвращения несогласованности данных в результате состояния гонки (race condition). Первая конструкция используется в SolidJS (с некоторыми дополнительными оптимизациями), вторая — заимствована из одного рабочего проекта.

Интересно? Тогда прошу под кат.

Привет! В статье я расскажу про альтернативный способ создания веб-приложений с помощью nocode инструмента Bubble.io - опишу преимущества, недостатки этого подхода, а также постараюсь раскрыть возможности "симбиоза" Javascript и Bubble для реализации качественных проектов и увеличения размера оплаты за работу.

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

Хороший UI/UX помогает пользователю избежать большинства таких проблем. Инструментов контроля огромное количество, сегодня расскажу про один их них — создание маски для поля ввода силами Javascript.

Привет, Хабр! Про необходимость (или наоборот) тёмной темы для приложения или сайта написан уже не один десяток статей и даже научных работ. По какой‑то необъяснимой причине у дизайнеров интерфейсов и маркетологов по сей день возникает вопрос «так ли нужна тёмная тема», а возможность выбрать тёмную тему оформления до сих пор не является чем‑то самим собой разумеющимся. Настал момент досконально разобраться в вопросе, расставить все точки над Ӹ и отхлестать ленивых дизайнеров селёдкой по лицу.

Я прочёл несколько десятков исследований и сделал выводы, чтобы раз и навсегда развеять сомнения на сей счёт. Если вы из тех кто до сих пор считает, что тёмная тема не нужна — добро пожаловать под кат.

Пользователи часто спрашивали тёмную тему на Хабре. Насколько мне известно, команда разработчиков в курсе этой потребности, но пока не готова представить реализацию. Тем не менее, она есть.

Hello, world!

В этом туториале мы разработаем простое типобезопасное (typesafe) клиент-серверное (fullstack) приложение с помощью tRPC, React и Express.

tRPC позволяет разрабатывать полностью безопасные с точки зрения типов API для клиент-серверных приложений (предпочтительной является архитектура монорепозитория). Это посредник между сервером и клиентом, позволяющий им использовать один маршрутизатор (роутер) для обработки запросов HTTP. Использование одного роутера, в свою очередь, обуславливает возможность автоматического вывода типов (type inference) входящих и исходящих данных (input/output), что особенно актуально для клиента и позволяет избежать дублирования типов или использования общих (shared) типов.

Руководство по tRPC находится в процессе подготовки — следите за обновлениями ?

Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.

Интересно? Тогда прошу под кат.

Я решил попробовать использовать ChatGPT для создания игр и хотел выбрать что-то простое, что можно сделать за несколько вечеров. В итоге, в сотрудничестве с ChatGPT, мы пришли к идее пошагового рогалика, где основной механикой является бросок кубика. Финальный результат можно посмотреть здесь https://dicequest.vercel.app/

Процесс разработки под катом

Начнем цикл статей нашей компании легко и непринужденно, с темы из мира front-end. Надеюсь, что статья будет полезна тем, кто хоть как то связан с миром front-end. Предупреждаю, что backend разработчикам может быть скучновато из-за того, что у них давно все стандартизировано)

Когда я провожу собеседование на позицию React разработчика, обычно задаю общий вопрос об архитектуре - "как бы ты строил архитектуру своего приложения и почему?". После обсуждения, я начинаю рассказывать небольшую часть материала из этой статьи, 5% по содержанию, приводя тезисы, по которым можно будет собрать общую картину моего видения. И обычно получаю положительную обратку. Поэтому решил изложить этот материал более развернуто здесь. Буду отправлять ссылку тем, кому это может пригодиться.

Начало здесь.

Русский свет

https://rs24.ru/customer_person_register

1) Форма регистрации.

Нет возможности просмотра введённого пароля.

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

Что хорошо:

Есть кнопка повтора заказа.

1. Кнопка повтора упрощает процесс оформления заказа для пользователя, поскольку все данные, введенные при предыдущем оформлении заказа, будут автоматически заполнены. Таким образом, не нужно тратить время на повторное ввод данных.

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

Собственно говоря, в интернете присутствуют чек‑листы для тестирования личного кабинета, но мы(почему «мы»? я, ж один) здесь постараемся подойти к проблеме более комплексно. Посмотрим что получится.

Сразу без долгих подготовок определимся для чего нужОн этот самый личный кабинет(сокращенно ЛК).

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

Зачем сайту личный кабинет клиента

Личный кабинет пользователя на сайте решает три важных задачи.

Полностью обновили код и разработали дизайн сайта alta-profil.ru. Сделали его удобнее, быстрее и информативнее для пользователей. В этом кейсе расскажем об обновлении сайта: что делали, с какими проблемами столкнулись и как их решали.

Всем привет, меня зовут Хаджимурад, занимаюсь фронтенд разработкой уже 3,5 года и за это время успел поработать на многих проектах: интернет магазин, панели администрирования, проекты для университета. Сейчас работаю на проекте в банке и сегодня хочу поделится с вами своим опытом.

В статье на примере простого сайта, постараюсь описать три способа рендеринга приложений, раскрыть их плюсы и минусы, и на практических примерах провести сравнение производительности и размеров приложения. Материал больше подойдёт начинающим фронтенд-разработчикам, или тем, кто хочет познакомиться c CSR, SSG и SSR. Для лучшего понимания от вас потребуются начальные знания React, менеджеров пакетов npm или yarn.

Вы просили — мы сделали.

Доброго времени суток! Я самоучка, никогда не получал образования в сфере IT, не работал программистом и не проходил каких-либо специализированных курсов в этой сфере. Акцентирую внимание на этом в самом начале для того, чтобы было понимание, что данная статья не претендует на статус профессионального руководства “как надо работать с Elasticsearch (далее по тексту просто ES)”, это не панацея, если можно так выразиться. Все описанное, лишь основано на моем личном опыте и понимании схемы и структуры документов, ориентированной на использовании для построения фасетного поиска в интернет-магазине к которому я пришел при изучении и разработке. Т.е статья рассчитана больше на новичков без личного опыта и представления работы с NoSQL базами данных, коей и является ES.

По традиции делимся полезными переводными материалами во frontend-разработке. В этот раз frontend-специалист SimbirSoft Никита сделал выбор в пользу материалов Nwose Lotanna, опубликованных на сайте blog.logrocket.com. С разрешения автора мы перевели статью, в которой он рассказывать о способах использования пропсов для передачи данных дочерним компонентам в Vue 3.

Примечание автора: Данная статья последний раз была обновлена 15 декабря 2022, чтобы отразить обновления, добавленные в Vue 3.

Пропсы — это важная фича в Vue для управления родительскими и дочерними компонентами, однако взаимодействие с ними может быть довольно мудреным. В этой статье мы изучим, как передавать данные из родительского компонента в дочерний с использованием пропсов в Vue 3. Весь код из этой статьи вы можете найти на GitHub. Что ж, начнем!

Hello, world!

Представляю вашему вниманию перевод второй части этой замечательной статьи, посвященной возможностям JS и TS последних трех лет, которые вы могли пропустить.

В первой части мы говорили о возможностях JS, во второй поговорим о возможностях TS.

Это вторая часть.

Вот ссылка на первую часть.

Обратите внимание: названия многих возможностей — это также ссылки на соответствующие разделы документации TypeScript.

Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, а также Блог по веб-разработке.

Привет! На связи Олег Казаков из Spectr.  

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

Мы подготовили цикл статей, где поделимся своим опытом и наработками и расскажем, из чего состоит DevSecOps и как его внедрить в процесс разработки. 

В первой статье поговорим о теории DevSecOps и подробно рассмотрим Pre-commit Checks.

«Наши инструменты сборки веб-приложений от 10 до 100 раз медленнее, чем они могут быть» – считает Эван Уоллес, сооснователь Figma. По его мнению, прямо сейчас, а не в будущем, можно собирать фронтенд в 10–100 раз быстрее. Рассмотрим, как этого добиться, и причём тут webpack.

Поможет нам в этом Евгений Кувшинов, фронтендер и тренер по инженерным практикам с двенадцатилетним опытом в продуктовой разработке. Он расскажет про свой опыт работы с webpack и поможет поставить запятую в заголовке статьи.

Для разработки сайта по стоматологии использовали методику с упором на маркетинг: конверсия выросла на 147%, стоимость заявки снизилась на 55%. Рассказываю, какие 9 базовых инструментов помогают нам достигать таких результатов регулярно.