​​Что такое Webpack и как с ним работать: полный курс по Webpack

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт. Но в процессе можно забыть какой-нибудь скрипт или расположить их в неправильном порядке — и приложение «посыпется».

Webpack — это сборщик модулей, которые решает эти проблемы. Он создает граф зависимостей и собирает модули приложения в бандл, на который может ссылаться файл «index.html». А ещё Webpack может преобразовать модули перед их добавлением в бандл, например: SASS/LESS в обычный CSS, или JavaScript в ES5 для старых браузеров.

Нашли подробный ролик длиной 3,5 часа, в котором вы:
— Изучите основы и реализуете полную конфигурацию Webpack.
— Настроите TypeScript, React, Babel.
— Научитесь работать со стилями и CSS modules.
— Рассмотрите большую часть возможностей Webpack 5.
— Реализуете монорепозиторий с микрофронтендом на основе workspaces и Module federation.

Делимся с вами: https://youtu.be/acAH2_YT6bs

#курс #webpack

​Когда бэкенд ещё не готов, но клиенту уже нужно что-то показать:

​​Как это 2023 подходит к концу, а холивара про PHP ещё не было? Исправляемся

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

И вот интересная статья, которая доказывает, что старый добрый PHP не только не сдаёт свои позиции под напором всё большего числа новых технологий, но и остаётся лучшим помощником разработчиков для создания огромного множества веб-проектов любой сложности: https://tproger.ru/articles/pochemu-php-sohranit-svoi-pozicii-kak-klyuchevoj-yazyk-dlya-bekenda-veb-prilozhenij-v-2024-godu

#php

​​Вышел Comentario 3.0.0: сервер комментариев с открытым исходным кодом

С помощью Comentario можно добавлять возможность комментирования к любым статическим страницам, вставив лишь пару HTML-тегов. Comentario написан на Go и Angular и использует БД PostgreSQL для хранения комментариев.

Подробнее: https://habr.com/ru/news/779012/
Исходники: https://gitlab.com/comentario/comentario

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

​Интервьюер: Насколько хорошо вы владеете SQL?

Я:

Почему разрабатывать продукты без тестировщика — плохая идея?

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

Эта статья показывает ключевые преимущества наличия специалиста по тестированию в команде и его влияние на конечное качество продукта.

#тестирование

​​Вопросы с собеседований: что такое специфичность CSS-селекторов и как она работает?

Типы селекторов расположены по возрастанию специфичности:
— Селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
— Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover)
— Селекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. Но селекторы, объявленные внутри :not(), влияют.

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности:
— тег и псевдоэлемент имеют специфичность 0001;
— класс, псевдокласс, атрибут — 0010;
— id имеет специфичность 0100;
— инлайновый стиль имеет приоритет 1000.

#основы #собеседование #css

​​Личный опыт: как дойти от пет-проекта до своего департамента

Сервис Доски — российская интерактивная онлайн-доски для совместной работы, которая входит в экосистему МТС Линк. Создатели в материале рассказали, как найти идею для проекта и выйти на рынок.

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

#карьера #петпроект

​​В PHP действительно очень много $.

Жаль, что это не про деньги.

​Google опубликовала итоги 2023 для CSS

Получился интересный обзор уникальных и долгожданных фич, появившихся в CSS в этом году. Там про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое: https://developer.chrome.com/blog/css-wrapped-2023

#тренды #css

​Такого ужасного интерфейса вы ещё не видели

Вы же встречали неудобные формы для ввода данных на сайте? Тут в одной месте собрали целую коллекцию UX-адовых форм для ввода номера.

Забирайте к себе в проекты: https://fun.mishasaidov.com/badux/

#дизайн #ux

​​Видео, в котором обсуждают пачку популярных вопросов на собеседовании по фронтенду

HTML теги и атрибуты, prefers-reduced-motion, реализация отложенной загрузки изображений, объект Proxy и еще несколько тем: https://www.youtube.com/watch?v=zcF-CVtXSBI

Вообще неплохой канал по веб-разработке, а это уже 53 выпуск с разбором вопросов с собеседований. Из минусов — большинство из них доступны за донат. Но конкретно это видео и первые 6 выпусков — нет. Так что приятного просмотра :) 

#основы #собеседование

​​Если не знали, у нас в самом разгаре батл языков программирования. И так вышло, что сейчас соревнуются PHP, JS и Ruby.

Дело за малым — проголосовать за лучший из них: https://tproger.ru/articles/chetvyortyj-raund-bitvy-yazykov-programmirovaniya-v-2023-godu

#javascript #php #ruby

​Коротко о PHP:

​​Какой браузер вы посоветуете использовать в 2024 году? Что лучше Edge или Opera? Firefox ещё жив? За каким проектом будущее, а какой окончательно умер?

#обсуждение

​​Создаем чат в реальном времени с помощью React, Node, Socket.io и HarperDB

Фронтенд: React (фронтенд-фреймворк JavaScript для создания интерактивных приложений).

Бэкенд: Node и Express (Express — очень популярный фреймворк NodeJS, который помогает легко создавать API и бэкенды).

БД: HarperDB (платформа для работы с данными и приложениями, которая позволяет запрашивать данные с помощью SQL или NoSQL. HarperDB также имеет встроенный API, что избавляет нас от необходимости писать много кода для бэкенда).

Коммуникация в реальном времени: Socket.io.

Исходники: https://github.com/DoableDanny/Realtime-chat-app-with-rooms

Гайд с пояснениями: https://habr.com/ru/companies/otus/articles/778594/

#nodejs #react

​Пожалуй, лучшее расширение для VSCode

Само расширение: https://marketplace.visualstudio.com/items?itemName=VirejDasani.incredibly-in-your-face

Исходники: https://github.com/virejdasani/Incredibly-InYourFace

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

​​Ничего необычного, просто 3 языка для веба в полуфинале батла языков: Python и Golang, JavaScript и C#.

Вы знаете, что делать: https://tproger.ru/articles/polufinal-bitvy-yazykov-programmirovaniya-v-2023-godu

#javascript #python #go