React — это самая популярная в мире JavaScript-библиотека. Но эта библиотека не потому хороша, что популярна, а потому популярна, что хороша. Большинство существующих вводных руководств по React начинается с примеров того, как пользоваться этой библиотекой. Но эти руководства ничего не говорят о том, почему стоит выбрать именно React.

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



Этот материал (вот, если интересно, его видеоверсия) написан для тех, кто хочет найти ответ на следующие вопросы: «Почему React? Почему React работает именно так? С какой целью API React устроены так, как устроены?».

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

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

Для начала установим webpack, делается это с помощью команд:

yarn add webpack webpack-cli -D, если используете менеджер пакетов yarn
npm i webpack webpack-cli --save-dev, для менеджера пакетов npm

Настраивается Webpack с помощью конфигурационного файла webpack.config.js, который хранится в корневой директории проекта.

Пример конфигурационного файла:

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

Начальная конфигурация представляет собой следующее:

• watch — заставляет webpack отслеживать изменения в файлах и заново выполнять сборку;
• entry — Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта;
• output — Указывает путь, где будет располагаться создаваемый файл и как он будет называться;

Так же необходимо установить webpack-dev-server, который понадобится для разработки и отладки приложения.

yarn add webpack-dev-server для менеджера пакетов yarn или
npm i webpack-dev-server если используется npm

Для настройки webpack-dev-server добавим devServer в нашем конфигурационном файле.

Параметры для webpack-dev-server:

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

Также нам нужно добавить/заменить в нашем package.json файле скрипт запуска проекта:

"start": "webpack-dev-server --mode development",

и скрипт для сборки билда:

"build": "webpack --mode production"

Загрузчики

Загрузчики (loaders) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».

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

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



В этом материале я собираюсь разобрать некоторые весьма полезные (и иногда выглядящие достаточно таинственными) компактные конструкции, которые могут попасться вам в JavaScript и TypeScript. Изучив их, вы сможете пользоваться ими сами или, как минимум, сможете понять код тех программистов, которые их применяют.

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

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

В итоге было задумано сделать собственное простое решение.

Вместо эпиграфа

Когда в 2004 году я окончил университет, в нашем городе почти не было команд разработчиков. Где работать, у кого набираться практического опыта?

Выбор был прост: “админом” или “в Москву”. Или уйти из профессии.

Сейчас я преподаю веб-разработку в местных ВУЗах, руковожу большим коллективом и мне важно, чтобы в моем городе хотели жить толковые молодые ребята, чтобы наш город не считался “тухлым местом”.

Суть статьи коротко

Мы с коллегами умеем «растить» веб-программистов с “почти нуля” до уровня уверенного профессионала (Senior / Архитектор).

Хотим рассказать как все работает и поделиться с сообществом материалами и методикой.

Статья написана для студентов, начинающих и растущих веб-разработчиков.

Всем привет!

Меня зовут Саша Зубарчук. Я пришла в компанию Solid три года назад как Junior Manual QA. С того времени я стала автоматизатором, выпустила студентов первой QA School, с которой мы сотрудничали, и перешла на позицию Product Manager.

В этой статье расскажу об особенностях тестирования платежных систем и поделюсь опытом нашей команды: что мы тестируем, как, с какими вызовами сталкиваемся и как на них реагируем. Этот опыт будет полезен тем, кто выстраивает процесс тестирования на проекте — как QA-инженерам, так и Product/Project-менеджерам.

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…

В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.

Перевод статьи подготовлен в преддверии старта курса «Python QA Engineer».

---

Прежде чем спрашивать: «Что автоматизировать?», нужно ответить на такой вопрос: «Рационально ли вообще автоматизировать что-либо в рамках текущего проекта?». Если ответ положительный (что означает, что у вас есть все необходимые ресурсы для обеспечения автоматизации, такие как квалифицированные QA-специалисты, достаточно времени, денег и т.д.) необходимо создать план, основываясь на требованиях тестируемого объекта, для которого и будут разрабатываться автоматизированные тесты. При создании такого документа должно быть четкое понимание того, что именно вы хотите автоматизировать, как и какие средства автоматизации выбрать. Сейчас мы не будем вдаваться в подробности того, как именно тестировать ту или иную функцию, поскольку нас интересует, где, по нашему мнению, должна быть реализована автоматизация.

Доброго времени суток, друзья!

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

В этой статье я постараюсь простыми словами объяснить, что такое область видимости в JavaScript.

…Даже простейшие инструменты могут давать людям возможность делать великие дела.
Биз Стоун, «Решайся! Заряд на создание великого от основателя Twitter»

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



Многие программисты используют в наши дни Visual Studio Code. Этот редактор кода поддерживает установку расширений. Существует столько подобных расширений, что можно говорить о том, что возможности настройки VS Code практически безграничны.

Но на Visual Studio Marketplace, на площадке, где публикуются расширения для VS Code, опубликовано просто невероятное количество расширений. А это значит, что программистам сложно находить именно то, что им действительно пригодится. Если некое расширение показалось кому-то полезным, то оно, вполне возможно, принесёт пользу и другим людям. Поэтому я расскажу здесь о 7 расширениях для VS Code, которые способны значительно облегчить работу программиста. Всё это — бесплатные расширения. Любой может свободно их загружать и использовать.

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

Можно найти статьи, датированные 2017...2018 годом, ориентированные на использование сравнительно низкоуровневых средств для отправки и получения веб-пуш сообщений, например, при помощи библиотеки web-push-libs/web-push. Эта библиотека по-прежнему развивается, однако в настоящее время гораздо проще работать с библиотеками от firebase.

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

Вы тоже задаетесь вопросами:

1. С чего начать тестирование?
2. Как ничего не забыть?
3. Как не запутаться в сложном функционале?

Ответом может стать подход декомпозиции продукта путем составления Mind Map.

Что это?

Mind Map или интеллект карта — это инструмент для визуального отображения информации, который помогает эффективно ее структурировать.

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

Преимущества Mind Map

1. Наглядность и визуализация.

Главным достоинством Mind Map для тестировщика является наглядное видение тестируемого продукта, его функций и зависимостей между собой.

2. Отличная альтернатива документации.

Такую карту очень хорошо демонстрировать новым сотрудникам как альтернативу или дополнение к документации.

3. Легко поддерживать.

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

Что можно изобразить с помощью Mind Map?

• функционал приложения на разных уровнях.
• приоритет функционала.
• зависимости в приложении.
• практически что угодно:)

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

Предисловие

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

Без лишних слов

Мы разберем как простые, так и сложные примеры — так что всем будет интересно.

Вам когда-нибудь было интересно узнать о том, как работает сокращённое CSS-свойство flex? Оно позволяет задавать значения свойств flex-grow, flex-shrink и flex-basis. Я обратил внимание на то, что данное свойство чаще всего используют в виде flex: 1, что позволяет flex-элементу растягиваться, занимая доступное пространство.



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

Введение

Как это часто бывает, архитектору БД нужно разработать базу данных под конкретное решение.
Однажды в пятницу вечером, возвращаясь на электричке домой с работы, я подумал о том, как бы я создал сервис по найму сотрудников в разные компании. Ведь ни один из существующих сервисов не позволяет быстро понять насколько подходит тебе кандидат. Нет возможности создать сложные фильтры, включающие или исключающие совокупность определенных навыков, проектов или позиций. Максимум, что обычно предлагают сервисы — фильтры по компаниям и частично по навыкам.

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

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

Этот материал можно перенести и на другую СУБД такую как MySQL или PostgreSQL.

5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. content-visibility заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.


В этой демке content-visibility: auto, применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз

Fenix by Takeda11

Многие путаются в обновлении записей DNS, когда изменяют IP-адрес своего сайта. Почему эти записи медленно обновляются? Неужели действительно нужно ждать два дня, чтобы всё обновилось? Почему одни посетители видят новый IP, а другие — старый?

Команда Mail.ru Cloud Solutions перевела статью разработчика и автора статей Джулии Эванс, где она отвечает на эти вопросы и популярно рассказывает, что происходит во время обновления DNS с точки зрения фронтендера.