Хотите влиться в разработку, с чего начать?

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

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

Аналог питоновского input() в Node.js

Как в Node.js получить данные, вводимые в консоль?
Для этого существует втроенный модуль readline.

Сначала подключаем модуль и создаём интерфейс ввода-вывода:

var readline = require('readline')
var rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
})

Теперь можно получить данные, например, попросить ввести ответ на пример 2 + 2:

rl.question('2 + 2 = ', (answer) => {
  console.log((parseInt(answer) == 4)
    ? 'Правильно!'
    : 'Неправильно!'
  )
  rl.close()
})

JS | Отличный вводный курс по JavaScript от Microsoft

Серия из 51 видеоурока, живым языком с примерами рассказывает об основах языка. Короткие ролики, не распыляя внимание, раскрывают конкретные темы.

Видео на английском языке, субтитры присутствуют.

CSS | Counters, как стилизовать нумерацию блоков

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

ul{
counter-reset: listNumber;
}
li:before {
counter-increment: listNumber;
content: "№ " counter(listNumber);
}

JS | Slick Slider - пожалуй лучший слайдер в мире

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

Как в PHP сделать редирект? Для чего нужна функция header()?

Если ввести в яндексе фразу "PHP Как сделать", то одним из популярных продолжений будет редирект.
Для создания редиректа в PHP есть несколько путей, но правильным будет - использование функции header().
header('Locaton: '. $url);
Эта строчка кода выполнит переадресацию на $url.

Что ещё можно сделать с помощью функции header()?
На самом деле, header() - весьма полезна.
Можно, например, указать тип контента (допустим, страница будет генерировать PDF файл):
header('Content-Type: application/pdf');
И заставить браузер показать диалог загрузки:
header('Content-Disposition: attachment');

CSS | Не бойтесь использовать псевдоэлементы!

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

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

Обязательным свойством таких элементов является content, отвечающий за выводимый текст, так же не стоит забывать что эти элементы по умолчанию инлайновые.

Как в Node.js автоматически перезапустить приложение?

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

На помощь приходит PM2 - менеджер процессов. Установить его можно прямо из NPM (ставить нужно с флагом -g).
Теперь достаточно запустить приложение командой
pm2 start app.js

Всё! Приложение будет автоматически перезапускаться при падениях. Стоит сказать, что при закрытии терминала приложение не остановит работу, PM2 демонизирует процесс.

Для перезапуска приложения стоит воспользоваться командой
pm2 restart app.js

Кстати, если запустить приложение с флагом --watch, то оно будет перезапуска и при изменении кода.

CSS | CssBattle - увлекательное соревнование для верстальщиков

Задача — воспроизвести несложные геометрические рисунки только с помощью html и css. Кроссбраузерность, адаптивность и тем более валидность не нужны: только Хром, только фиксированный размер 400×300.

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

Почему надо учить React?

Все просто - это самый популярный фреймворк, а React разработчики - самые востребованные, на нем написаны такие гиганты как Facebook, Instagram, Netflix

Ребята из Skillbox за 3 месяца сделают из вас React разработчика и вы сможете смело добавить заветный навык в резюме

Вы научитесь:

- Создавать приложения с нуля
- Работать с публичными API
- Познакомитесь с Flux, Redux, Mobx
- Профилировать свое приложение
- Тестировать свое приложение
- Создавать SPA и RIA приложения с нуля

Ознакомиться с программой и записаться можно по ссылке👇

JS | Alpine.js - реактивность на минималках

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

Вы сможете использовать обычный DOM, при этом изменяя поведение по своему усмотрению.

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

Всё, что вам нужно знать о технике Pomodoro

Метод «Помидора» — техника управления временем, предполагающая разбиение задач на 25-минутные периоды, называемые «помидоры», сопровождаемые короткими перерывами.

Главный минус техники — все задачи, должны быть задачами из категории “сделать”. То есть: отправить письмо, проверить у исполнителей статус задач, передать материалы дизайнеру. Во время работы таймера чувствуется некоторый адреналин и готовность быстро переключаться с задачи на задачу. В таком режиме страдает “думательная” концентрация. Потому, лучше сначала подумать, а потом все сделать под “помидором” — механически.