​Node.js: использование веб-потоков

Веб-потоки (web streams) — это стандарт для потоков (streams), который поддерживается всеми основными веб-платформами. Потоки — это абстракция для чтения и записи данных последовательно, небольшими частями из любого вида источника — файлов, данных, находящихся на сервере, и т.д.

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

https://habr.com/ru/companies/timeweb/articles/675676/

#бэкенд #nodejs

Дайджест Tproger #3: Node.js 20, бот для торговли криптой, сторонние магазины в iOS17

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

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

https://tproger.ru/articles/dajdzhest-tproger-3-node-js-20-bot-dlya-torgovli-kriptoj-storonnie-magaziny-v-ios17/

#дайджесттп

Упрощаем отладку компонентов UI с помощью удобного расширения

Мы имеем в виду Preview.js — удобное расширение для VSCode или JetBrains IDEs, которое позволяет видеть превью вашего кода, не переходя в браузер. Работает плагин со многими популярным фреймворками: Preact, React, Svelte, Vue и SolidJS.

Здесь вы можете посмотреть все возможности плагина и установить его:

https://previewjs.com/

#инструмент #фронтенд

​Учимся бороться с ошибками CORS

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

В этой статье собраны наиболее частые ошибки и способы их устранения:

https://fatimamo.com/become-a-cors-wizard

​Несколько способов организовать удобную структуру проекта на Vue.js

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

В этой статье вы найдёте несколько полезных советов и способов, которые помогут вам правильно структурировать ваш проект на Vue.js:

https://medium.com/@nile.bits/good-ways-to-organize-large-vue-js-project-a38e557c9876

#vue #фронтенд

​Эволюция масштабируемого CSS

За время существования интернета CSS прошёл долгий путь и сильно изменился. И всегда были какие-то проблемы, к единому решению которых никто так и не пришёл.

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

https://frontendmastery.com/posts/the-evolution-of-scalable-css/

#css

​Милая и наглядная шпаргалка по CSS Flexbox

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

Мы подготовили для вас шпаргалку на русском языке с милыми иллюстрациями, а также оставили её видеоверсию:

https://tproger.ru/articles/css-flexbox-tutorial-with-flexbox-properties-cheat-sheet/

#фронтенд #шпаргалка #css

Морской бой на PostgreSQL

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

https://selectel.ru/blog/seabattle-postgresql/

А поиграть и посмотреть код можно здесь:

https://github.com/selectel/sql-battleships

#бд #postgresql

Интерактивный щенок на ванильном JS

Этот милый щенок будет следовать за вашим курсором и преданно смотреть на вас своими пиксельными глазками. Выполнен он без использования каких-либо библиотек.

Посмотреть код и поиграть с щенком можно тут:

https://codepen.io/Ma5a/pen/MWBGbOb

#codepen

​Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок

Дело в том, что ::before и ::after являются замещаемыми (replaced) элементами. Такие элементы замещаются содержанием, указанным в них. Например, на месте <img> появляется изображение из атрибута src. А вот ::before и ::after дословно означают before и after content. У замещаемых элементов нет контента, поэтому псевдоэлементы с ними не работают.

Подробнее об этом можно почитать тут: http://odinokun.com/2020-09-24-pochemu-psevdoelementy-before-i-after-ne-rabotayut-dlya-polej-vvoda-i-kartinok.html

#css #html #фронтенд

​Как работает CSS Position — объяснение с примерами кода

Мы на днях уже поделились полезной и красивой шпаргалкой по CSS Flexbox. Теперь же настала очередь свойства CSS Position. Здесь на наглядных примерах вы увидите в чём же разница между relative, fixed, sticky и другими значениями.

Забирайте шпаргалку тут:

https://tproger.ru/articles/kak-rabotaet-css-position-obyasnenie-s-primerami-koda/

#css #шпаргалка

​Новый семантический элемент появился в HTML — <search>

Он должен содержать элементы управления формой (например, ввод текста, выпадающие списки или кнопки). По сути, данный элемент представляет собой раздел документа, который используется для поиска или фильтрации. В этой статье рассматривается его реализация в HTML:

https://alvaromontoro.hashnode.dev/new-html-element-search

#html

​Используем SuperTokens вместе с Vue.js

Для начала небольшая справка. SuperTokens — это OpenSource-инструмент, который сильно облегчает добавление аутентификации в ваше приложение и предлагает даже несколько способов, например, OAuth или JWT.

В этой статье вы посмотрите не только как работает этот инструмент, но и как он взаимодействует с Vue.js:

https://blog.openreplay.com/using-supertokens-in-vue/

#vue

​Rust: выполнение HTTP-запросов и обработка ответов с помощью reqwest

C каждым днём Rust становится всё популярнее блягодаря сочетанию возможностей, которые он даёт и простоты синтаксиса. Поэтому предлагаем вам посмотреть, как легко его можно использовать в бэкенд-разработке на примере обработки запросов и ответов:

https://nuancesprog.ru/p/16874/

#rust #http

​Когда решили отказаться от тимлида:

​Асинхронный JavaScript: изучаем Async/Await, Callbacks и Promises

Сегодня мы попытаемся построить и запустить магазин мороженого, при этом одновременно изучить асинхронный JavaScript. В итоге вы узнаете, как использовать коллбэки, промисы и async/await.

Переходите по ссылке, где вас ждёт множество примеров кода и понятные объяснения его работы:

https://tproger.ru/articles/tutorial-po-javascript-async-x2f-await-izuchaem-callbacks-promises-i-async-x2f-await/

#javascript

​GRT Calculator — подбираем размер шрифта на основе золотого сечения

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

Подробнее:

https://grtcalculator.com/

#фронтенд #инструменты

Дайджест Python #8: обновления Django и обучение GPT-4

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

https://tproger.ru/articles/python-digest-8/

#python #дайджест

​Тестирование UI в JavaScript – наилучшие практики

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

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

https://habr.com/ru/companies/piter/articles/722004/

#qa #фронтенд

Оптимизация загрузки ресурсов с помощью Fetch Priority API

Fetch Priority API указывает приоритет ресурсов для браузера. Это позволяет обеспечить оптимальную загрузку данных для того, чтобы пользователь мог максимально быстро начать работу с сайтом.

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

https://web.dev/fetch-priority/

#api