​Эволюция масштабируемого 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

​Закат фронтенд-разработки

С каждым днём возникает всё больше разговоров о том, что нейросети уничтожат ту или иную профессию. Не обошли стороной и фронтенд-разработку.

В этой статье Джош Комо поделился своим мнением о том, куда движется профессия фронтенд-разработчика, какое у неё будущее и какое влияние на неё окажут нейросети:

https://www.joshwcomeau.com/blog/the-end-of-frontend-development/

Поделитесь своим мнением и вы в комментариях к этому посту!

​Тестируйте свои React-компоненты с помощью Nightwatch и Testing Library

Nightwatch и Testing Library — два крайне полезных инструмента для тестирования компонентов. Первая библиотека написана на Node.js и позволяет проводить полноценное сквозное тестирование веб-приложений и сайтов, написанных на JS. В свою очередь Testing Library более минималистичный инструмент, созданный специально для тестирования React-компонентов.

В этой статье вы научитесь:

— устанавливать новый проект React с помощью Vite, который также используется внутри Nightwatch для компонентного тестирования;
— подключать и конфигурировать Nightwatch и Testing Library;
— имитировать API запросы с помощью плагина @nightwatch/api-testing;
— писать комплексные React-компонентные тесты, используя Nightwatch и Testing Library.

https://habr.com/ru/companies/otus/articles/719266/

#react #qa

Основатель «Типичного программиста» в авторском канале рассказывает с чего начинался Tproger (спойлер: с мемов): @nostoppers

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

Несколько примеров постов:

— Есть идея по стартапу. Что дальше?

— Как быть с задачами, которые не делаются?

— Неочевидные правила Daily standup

— Пробежки как способ развития бизнеса

— Правила проведения демо разработки

​PHP жив и будет жить: почему его хоронят больше 10 лет, а он всё никак не умрёт

Шутки о том, что php умер не устаревают уже лет 10 (а то и все 20). Но как показала практика — php все ещё жив.

О том, почему всё так активно хоронят php и почему он всё ещё жив, а также какое будущее его ждёт, — рассказал Кирилл Мокевнин, CEO образовательной платформы Хекслет.

https://tproger.ru/articles/php-zhiv-i-budet-zhit-pochemu-ego-horonyat-bolwe-10-let-a-on-vsyo-nikak-ne-umryot/

#php

​Как использовать многопоточность в Node.js

Node.js запускает код JavaScript в одном потоке, что означает, что ваш код может выполнять только одну задачу одновременно. Хотя сам по себе Node.js является многопоточным. Чтобы сделать его многопоточным существует модуль worker-threads, который позволяет создавать потоки и выполнять несколько задач JavaScript параллельно.

В этом руководстве вы создадите Node.js приложение с ресурсоемкой задачей, которая блокирует основной поток. А затем посмотрите, как worker-threads помогает разделить задачу, ускоряя её выполнение и снижая нагрузку на процессор:

https://www.digitalocean.com/community/tutorials/how-to-use-multithreading-in-node-js

#nodejs