Создаём полноценное приложение для книжного магазина с React, Node и MongoDB

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

Видео на английском, но в браузере можно посмотреть с субтитрами или нейропереводом, для этого ловите ссылку: https://youtu.be/pgw2KPfgK1E

#видео #курс #фуллстэк #react #nodejs

Как провести скриншотное тестирование с помощью Testplane 

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

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

О том, как работает скриншотное тестирование и как его настроить, читайте в статье.

25 готовых программ на JavaScript для Middle-разработчиков

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

В этой статье собрано 25 готовых программ на JavaScript для Middle-разработчиков, которые помогут улучшить навыки и продемонстрировать вам, как эффективно решать различные задачи, как с помощью ванильного JS, так и с использованием популярных фреймворков.

#javascript

Работаем с текстовыми файлами, как с БД

TextQL позволяет нам выполнять SQL-запросы над структурированным текстом, например, CSV или TSV. Такой инструмент поможет вам удобнее работать с текстовыми файлами, выбирая из них только то, что нужно.

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

Кто дзен познал, ставит лайк

Создаем стильный заполняющийся индикатор загрузки

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

https://www.freecodecamp.org/news/filling-css-loaders/

#туториал #css

Как HTML и CSS влияют на доступность

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

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

#html #css #accessibility

Путь веб-разработчика с полного нуля

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

#видео #roadmap

Какой фреймворк выбрать новичку для бэкенда на JavaScript

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

Node.js — база для фреймворков

Прежде всего, стоит упомянуть, что бэкенд на JavaScript чаще всего строится на базе Node.js. Это среда выполнения, которая позволяет запускать JavaScript на сервере. Она быстро обрабатывает запросы и легко масштабируется, что делает её идеальным выбором для новичков.

Express.js — проще некуда

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

Вот пример простого сервера на Express.js:

const express = require('express');
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
    res.send('Hello, World!');
});
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

С помощью этого кода вы создадите простой сервер, который отвечает на запросы по адресу "/".

Koa.js — больше гибкости

Если вы хотите большей гибкости и современного подхода, посмотрите на Koa.js. Этот фреймворк был создан создателями Express и предлагает более чистый и современный подход к написанию middleware. Если вас интересует асинхронное программирование с использованием async/await, Koa очень подойдет.

Пример применения Koa:

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', async (ctx) => {
    ctx.body = 'Hello, Koa!';
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
    console.log('Koa server running on http://localhost:3000');
});

NestJS — для тех, кто хочет быть на острие технологий

Если вы хотите изучать что-то более продвинутое и готовы погрузиться в сложные концепции, обратите внимание на NestJS. Этот фреймворк основан на TypeScript и предлагает архитектурный подход, который подходит для больших приложений. Он внедряет концепции модульности и инверсию управления, что может сильно упростить разработку сложных проектов.

Выбор фреймворка зависит от ваших целей и уровня подготовки. Если вы только начинаете, рекомендуем начать с Express.js — он прост в освоении и отлично подходит для небольших проектов. Если уже есть опыт или вы хотите изучить что-то новое, Koa.js или NestJS могут стать отличным выбором. Удачи в изучении бэкенда на JavaScript!

Есть что-то ещё, что мы упустили? Поделитесь своим вариантов в комментариях.

#простымисловами #бэкенд

Бэкендер пытается центрировать <div>

Event loop для чайников: простыми словами о сложном механизме браузера

Event Loop — механизм, который управляет асинхронными операциями в JavaScript. Он позволяет обрабатывать задачи, не блокируя основной поток выполнения программы.

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

Верстка адаптивного сайта с HTML, CSS и JS

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

Можно смотреть прямо тут, либо перейти на страницу автора.

#урок #фронтенд

Анимация глича для текста при наведении cоздана на чистом CSS. Посмотреть код и попробовать проект можно по ссылке:

https://codepen.io/oscar-jite/pen/yLwoeLE

#codepen

Современный Drag and Drop в React с помощью dndkit: создаем перетаскиваемое меню

DnD Kit — это удобная библиотека для создания функциональности drag-n-drop в React-приложениях. У нас на сайте появилась статья, в которой на понятных примерах показаны ключевые возможности библиотеки.

#react #dragndrop

Поэтому мы собрали их для вас! Разумеется, с ответами и пояснениями

Проверьте готовы ли вы к позиции мидла вместе с TeamLead Frontend Developer: https://tprg.ru/4tpo

#собеседвоание #js #json #css

Интерактивный гайд по CRDT

Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.

В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.

https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

#typescript #crdt

Чистая архитектура фронтенд приложений

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

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

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

#фронтенд

Бедолага фронтендер(

@ithumor

Что такое AJAX и как он работает?

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

Здесь вы сможете узнать, как работают её основные компоненты, и какие преимущества она предоставляет разработчикам и пользователям.

#ajax

Сохраняем шпаргалку по HTTP-ответам