Category: Web

22
Янв
2021

🕸 Что ждет профессию веб-разработчика в 2021 году: мнения экспертов

Технологии играют важную роль в повседневной жизни и применяются везде – от простых решений до инновационных продуктов. На основе мнений экспертов мы рассмотрим перспективы индустрии веб-разработки в наступившем 2021 году.

20
Янв
2021

⚛️ 12 советов по внедрению TypeScript в React-приложениях

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

Зачем использовать TypeScript в React?

React – это JavaScript-библиотека с открытым исходным кодом для создания пользовательских интерфейсов, а TypeScript – типизированное надмножество JavaScript. Объединяя их, мы создаем пользовательские интерфейсы, используя типизированную версию JavaScript. Это означает большую безопасность и меньшее количество ошибок, отправляемых во внешний интерфейс.

Не существует единственного правильного способа написания кода React с использованием TypeScript. Как и в случае с другими технологиями, если ваш код компилируется и работает, вы, вероятно, что-то сделали правильно.

Подготовка компонентов к совместному использованию с помощью TypeScript

<span>просмотр общих компонентов React в bit.dev</span>
просмотр общих компонентов React в bit.dev

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

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

Настройка проекта и tsconfig.json

Самый быстрый способ запустить приложение React/TypeScript – использовать create-react-app с шаблоном TypeScript:

        npx create-react-app my-app --template typescript
    

tsconfig.json это файл конфигурации TypeScript. Файл содержит первоначальные настройки, ниже приведем несколько параметров с пояснениями:

tsconfig.json
        {

  "compilerOptions": {

    "target": "es5", // Укажите целевую версию ECMAScript

    "lib": [

      "dom",

      "dom.iterable",

      "esnext"

    ], // Список файлов библиотеки для включения в компиляцию

    "allowJs": true, // Разрешить компиляцию файлов JavaScript

    "skipLibCheck": true, // Пропустить проверку типов всех файлов объявлений

    "esModuleInterop": true, // Отключает импорт пространства имен (импорт * как fs из "fs") и включает импорт в стиле CJS / AMD / UMD (импорт fs из "fs")

    "allowSyntheticDefaultImports": true, // Разрешить импорт по умолчанию из модулей без экспорта по умолчанию

    "strict": true, // Включить все параметры строгой проверки типов

    "forceConsistentCasingInFileNames": true, // Запрещаем ссылки с несогласованным регистром на один и тот же файл.

    "module": "esnext", // Указываем генерацию кода модуля

    "moduleResolution": "node", // Разрешить модули в стиле Node.js

    "isolatedModules": true, // Безоговорочно генерировать импорт для неразрешенных файлов

    "resolveJsonModule": true, // Включить модули, импортированные с расширением .json

    "noEmit": true, // Не выводить вывод (то есть не компилировать код, а только выполнять проверку типа)

    "jsx": "react", // Поддержка JSX в файлах .tsx

    "sourceMap": true, // Создание соответствующего файла .map

    "declaration": true, // Создаем соответствующий файл .d.ts

    "noUnusedLocals": true, // Сообщать об ошибках на неиспользуемых локальных объектах

    "noUnusedParameters": true, // Сообщаем об ошибках неиспользуемых параметров

    "incremental": true, // Включить инкрементную компиляцию путем чтения/записи информации из предыдущих компиляций в файл на диске

    "noFallthroughCasesInSwitch": true // Сообщать об ошибках для случаев падения в инструкции switch

  },

  "include": [

    "src/**/*" // *** Файлы TypeScript должны ввести проверку ***

  ],

  "exclude": ["node_modules", "build"] //  *** Файлы, которые не нужно вводить, проверять ***

}
    

Дополнительные рекомендации исходят от сообщества response-typescript-cheatsheet, а объяснения взяты из документации по параметрам компилятора в официальном справочнике TypeScript.

Enums

Enums определяет набор связанных констант как часть единой сущности.

        //...

/** A set of groupped constants */

enum SelectableButtonTypes {

    Important = "important",

    Optional = "optional",

    Irrelevant = "irrelevant"

}

interface IButtonProps {

    text: string,

    /** The type of button, pulled from the Enum SelectableButtonTypes */

    type: SelectableButtonTypes,

    action: (selected: boolean) => void

}

const ExtendedSelectableButton = ({text, type, action}: IButtonProps) => {

    let [selected, setSelected]  = useState(false)

    return (<button className={"extendedSelectableButton " + type + (selected? " selected" : "")} onClick={ _ => {

        setSelected(!selected)

        action(selected)

    }}>{text}</button>)

}

/** Exporting the component AND the Enum */

export { ExtendedSelectableButton, SelectableButtonTypes}
    

Использование Enums:

        import React from 'react';

import './App.css';

import {ExtendedSelectableButton, SelectableButtonTypes} from './components/ExtendedSelectableButton/ExtendedSelectableButton'

const App = () => {

  return (

    <div className="App">

      <header className="App-header">

        <ExtendedSelectableButton type={SelectableButtonTypes.Important} text="Select me!!" action={ (selected) => {

          console.log(selected) 

        }} />       

      </header>

    </div>

  );

}

export default App;
    

Интерфейсы и типы

Что следует использовать – интерфейсы или псевдонимы типов? Хотя эти сущности концептуально различны, на деле они очень похожи:

  • обе могут быть продлены;
        //расширение интерфейсов

interface PartialPointX { x: number; }

interface Point extends PartialPointX { y: number; }

//расширение типов

type PartialPointX = { x: number; };

type Point = PartialPointX & { y: number; };

// Интерфейс расширяет тип 

type PartialPointX = { x: number; };

interface Point extends PartialPointX { y: number; }

//Псевдоним типа расширяет интерфейсы

interface PartialPointX { x: number; }

type Point = PartialPointX & { y: number; };
    
  • обе могут использоваться для определения формы объектов;
        //определяем интерфейс для объектов

interface Point {

  x: number;

  y: number;

}

//также используем типы

type Point2 = {

  x: number;

  y: number;

};
    
  • обе они могут быть реализованы одинаково;
        //реализация интерфейса

class SomePoint implements Point {

  x: 1;

  y: 2;

}

//Реализация псевдонима типа

class SomePoint2 implements Point2 {

  x: 1;

  y: 2;

}

type PartialPoint = { x: number; } | { y: number; };

// Единственное, что вы не можете сделать: реализовать тип объединения

class SomePartialPoint implements PartialPoint {

  x: 1;

  y: 2;

}
    

Единственная функция интерфейсов, которую не делают псевдонимы типов – это объединение деклараций.

Расширение элементов HTML

Иногда ваши компоненты работают как собственные HTML-элементы. В таких случаях лучше определить тип компонента как собственный элемент HTML или его расширение.

        function eventHandler(event: React.MouseEvent<HTMLAnchorElement>) {

    console.log("TEST!")

}

const ExtendedSelectableButton = ({text, type, action}: IButtonProps) => {

    let [selected, setSelected]  = useState(false)

    return (<button className={"extendedSelectableButton " + type + (selected? " selected" : "")} onClick={eventHandler}>{text}</button>)

}
    

Типы событий

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

        import React, { Component, MouseEvent } from 'react';
    

Мы также можем использовать для ограничения элементов Generics с конкретным обработчиком событий.

Также можно применять объединения, чтобы разрешить повторное использование обработчика несколькими компонентами:

        / ** Это позволит вам использовать этот обработчик событий как для якорей, так и для элементов кнопок * /

function eventHandler(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {

    console.log("TEST!")

}
    

Определение интегрированного типа

Стоит упомянуть файлы index.d.ts и global.d.ts в React. Оба они устанавливаются, когда вы добавляете React в свой проект. Эти файлы содержат определения типов и интерфейсов: чтобы понять свойства или доступность конкретного типа, вы можете открыть эти файлы и просмотреть их содержимое.

<span> index.d.ts</span>
index.d.ts

Там вы увидете небольшой раздел файла index.d.ts, показывающий подписи для функции createElement.

ESLint/Prettier

Чтобы гарантировать, что ваш код соответствует правилам проекта, а стиль согласован, рекомендуется настроить ESLint и Prettier:

  • Установите необходимые зависимости для разработчиков:
        yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
    
  • Создайте файл .eslintrc.js в корне и добавьте следующее:
.eslintrc.js
        module.exports =  {

  parser:  '@typescript-eslint/parser',  // Указывает парсер ESLint

  extends:  [

    'plugin:react/recommended',  // Использует рекомендуемые правила из @eslint-plugin-react

    'plugin:@typescript-eslint/recommended',  // Использует рекомендуемые правила из @typescript-eslint/eslint-plugin

  ],

  parserOptions:  {

  ecmaVersion:  2018,  //Позволяет анализировать современные функции ECMAScript

  sourceType:  'module',  //Разрешает использование импорта

  ecmaFeatures:  {

    jsx:  true,  // Разрешает анализ JSX

  },

  },

  rules:  {

    // Место для указания правил ESLint. Может использоваться для перезаписи правил, указанных в расширенных конфигах

    // например "@ typescript-eslint / явный-возвращаемый-тип-функции": "выкл.",

  },

  settings:  {

    react:  {

      version:  'detect',  // Указывает eslint-plugin-react автоматически определять версию React для использования

    },

  },

};
    
  • Добавьте зависимости Prettier:
        yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
    
  • Создайте файл .prettierrc.js в корне и добавьте в него следующий код:
.prettierrc.js
        module.exports =  {

  semi:  true,

  trailingComma:  'all',

  singleQuote:  true,

  printWidth:  120,

  tabWidth:  4,

};
    
  • Обновите файл .eslintrc.js:
.eslintrc.js
        module.exports =  {

  parser:  '@typescript-eslint/parser',  // Задает парсер ESLint

  extends:  [

    'plugin:react/recommended',  // Использует рекомендуемые правила из @ eslint-plugin-react

    'plugin:@typescript-eslint/recommended',  // Использует рекомендуемые правила из @typescript-eslint/eslint-plugin

+   'prettier/@typescript-eslint',  // Использует eslint-config-prettier для отключения правил ESLint из @typescript-eslint/eslint-plugin, которые будут конфликтовать с prettier

+   'plugin:prettier/recommended',  // Включает eslint-plugin-prettier и отображает более красивые ошибки как ошибки ESLint. Убедитесь, что это всегда последняя конфигурация в массиве extends.

  ],

  parserOptions:  {

  ecmaVersion:  2018,  // Позволяет анализировать современные функции ECMAScript

  sourceType:  'module',  // Разрешает использование импорта

  ecmaFeatures:  {

    jsx:  true,  //Разрешает анализ JSX

  },

  },

  rules:  {

     // Место для указания правил ESLint. Может использоваться для перезаписи правил, указанных в расширенных конфигах

    // например "@typescript-eslint/явный-тип-возврата-функции": "выкл.",

  },

  settings:  {

    react:  {

      version:  'detect',  // Указывает eslint-plugin-react автоматически определять версию React для использования

    },

  },

};
    

Расширения и настройки кода VS

Следующий шаг по улучшению – автоматическое исправление и предварительная настройка кода при сохранении.

Установите ESLint и Prettier для VS Code. Это позволит ESLint легко интегрироваться с вашим редактором.

Затем обновите настройки, добавив следующий код в свой .vscode/settings.json:

.vscode/settings.json
        {

    "editor.formatOnSave": true

}
    

Хуки

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

Вы можете принудительно установить тип или интерфейс начального значения состояния, например, так:

        const [user, setUser] = React.useState<IUser>(user);
    

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

        const [user, setUser] = React.useState<IUser | null>(null);

// later...

setUser(newUser);
    

Обработка событий формы

Один из наиболее распространенных случаев – это правильный ввод using в поле ввода onChange. Вот пример:

        import React from 'react'

const MyInput = () => {

  const [value, setValue] = React.useState('')

  // The event type is a "ChangeEvent"

  // We pass in "HTMLInputElement" to the input

  function onChange(e: React.ChangeEvent<HTMLInputElement>) {

    setValue(e.target.value)

  }

  return <input value={value} onChange={onChange} id="input-example"/>

}
    

Расширение свойств компонентов

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

        import React from 'react';

type ButtonProps = {

    /** the background color of the button */

    color: string;

    /** the text to show inside the button */

    text: string;

}

type ContainerProps = ButtonProps & {

    /** the height of the container (value used with 'px') */

    height: number;

}

const Container: React.FC<ContainerProps> = ({ color, height, width, text }) => {

  return <div style={{ backgroundColor: color, height: `${height}px` }}>{text}</div>

}
    

Если вы использовали interface, то можно применить extends, чтобы расширить его, но придется внести пару изменений:

        import React from 'react';

interface ButtonProps {

    /** the background color of the button */

    color: string;

    /** the text to show inside the button */

    text: string;

}

interface ContainerProps extends ButtonProps {

    /** the height of the container (value used with 'px') */

    height: number;

}

const Container: React.FC<ContainerProps> = ({ color, height, width, text }) => {

  return <div style={{ backgroundColor: color, height: `${height}px` }}>{text}</div>

}
    

Сторонние библиотеки

Мы часто включаем сторонние библиотеки в проекты React и TypeScript. В таких случаях стоит посмотреть, есть ли пакет @types с определениями типов:

        #yarn

yarn add @types/<package-name>

#npm

npm install @types/<package-name>
    

Пространство имен @types зарезервировано для определений типов пакетов. Они живут в репозитории под названием DefinitherTyped, который частично поддерживается командой TypeScript, а частично – сообществом.

Итоги

Совместное использование React и TypeScript требует некоторого обучения из-за объема информации, но в долгосрочной перспективе затраты времени окупаются. В своей публикации мы опирались на лучшие практики из статей Джо Превайта, Фернандо Дольо и Мартина Хохеля. Мы постарались осветить самые полезные приемы и моменты, которые помогут использовать TypeScript как часть инструментальной цепочки React. Больше информации вы найдете в официальном справочнике к TypeScript или в публикациях «Библиотеки программиста».

14
Янв
2021

🕸 Что не так с веб-сборкой?

Ее потенциал и перспективы огромны. Что же пошло не так? Почему не все используют WASM? Попробуем ответить на эти вопросы.

Перевод публикуется с сокращениями, автор оригинальной ст…

09
Янв
2021

🕸 Обучение веб-разработке: именование классов и идентификаторов, методология БЭМ

Существует множество методологий веб-разработки, направленных на уменьшение нагрузки на CSS, организацию сотрудничества в команде и поддержку большой кодовой базы. В этой статье речь пойдет о наиболее популярной из них – БЭМ.

29
Дек
2020

🕸 Обучение веб-разработке: как быстро и успешно пройти собеседование

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

Типичное техническое интервью включает введение, дискуссию о проектах, а также углубленные вопросы о ваших знаниях, умениях и навыках. Успех на собеседовании зависит от уровня подготовки и способности понимать интервьюера, превосходя его ожидания. Изучите компанию-работодателя. Узнайте, какие технологии и фреймворки там используют. Каковы перспективы компании-работодателя на следующую пятилетку? С какими фирмами она сотрудничает? Это исследование даст вам не только общие темы для разговора, но и покажет интерес к бизнесу. Найдите своего интервьюера в LinkedIn. Узнав его, вы сможете адаптировать ответы: например, директор по персоналу может не знать технического жаргона, а ведущему инженеру-программисту термины будут по душе.

Давайте разберем вопросы, которые обычно задают веб-разработчику средней руки на собеседованиях и дадим на них правильные ответы:

1) Объясните, каковы основные обязанности веб-разработчика?

· Программа тестирования и отладки веб-приложений;

· Проектирование, разработка и развертывание веб-приложений;

· Загрузка сайтов на сервер и регистрация его в различных поисковых системах;

· Координация действия с другими специалистами (дизайнерами и программистами);

· Исправление ошибок, устранение неполадок и решение проблем;

· Разработка структур кода для решения конкретных задач;

· Поддержка и помощь в содержании и обслуживании веб-сайтов;

· Ответственность за код на всех этапах подготовки, разработки, тестирования и производства.


2) Что должен знать веб-разработчик?

Хороший веб-разработчик должен знать:

· HTML;

· CSS;

· SQL;

· PHP / Ruby / Python;

· JavaScript и фреймворки.

3) Перечислите преимущества HTTP / 2 по сравнению с HTTP / 1.1?

Список преимуществ HTTP / 2 по сравнению с HTTP / 1.1:

· Сжатие данных заголовков HTTP;

· Серверные push-технологии;

· Параллельная загрузка элементов страницы через одно соединение TCP;

· Приоритезация запросов.

4) Объясните, что такое длинный опрос?

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

5) Объясните, как можно изменить цвет фона элемента формы в CSS, когда пользователь вводит текст? Это работает во всех браузерах?

Да, вы можете изменить внешний вид элементов формы по умолчанию, стилизовав теги HTML: input, select и textarea, но это не будет работать во всех браузерах.

6) Какой тег нужно использовать в HTML для управления вводом многострочного текста?

Для управления вводом многострочного текста вы можете использовать тег «textarea».

7) Объясните, как можно ссылаться на файл CSS на веб-странице?

Вы можете обратиться к файлу .CSS на веб-странице с помощью тега <link>. Он должен находиться между тегом <head> </head>.

8) Перечислите несколько способов уменьшить время загрузки страницы?

Вы можете сделать следующее, чтобы сократить время загрузки страницы:

· Уменьшить размер изображения;

· Удалить ненужные виджеты;

· Использовать сжатие HTTP;

· Разместить CSS вверху, а ссылки на скрипт внизу или во внешних файлах;

· Уменьшить поиск;

· Минимизировать перенаправления;

· Использовать кеширование;


9) Чем XHTML отличается от HTML?

· XHTML требует, чтобы все теги были в нижнем регистре;

· XHTML требует, чтобы все теги были правильно закрыты;

· XHTML требует, чтобы все атрибуты были заключены в двойные кавычки;

· XHTML запрещает встроенным элементам содержать элементы уровня блока.

10) Перечислите новые API, предоставляемые стандартом HTML 5?

HTML 5 поставляется с рядом новых API:

· Медиа API;

· API текстовой дорожки;

· API кэша приложений;

· API передачи данных;

· Взаимодействие с пользователем;

· Командный API;

· API проверки ограничений;

· API истории.

11. Как вы организуете код JavaScript?

· Систематизируем свой код;

· Разделяем JavaScript и HTML;

· Разбиваем JS на логические блоки и храним его в отдельных файлах;

· Используем скрипт для объединения отдельных файлов в один пакет;

· Используем правильное пространство имён в JavaScript, чтобы не захламлять глобальное пространство имён.

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

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

13.Учитываете ли вы SEO, UX и безопасность при создании приложения?

Вы должны понимать и сочетать эти факторы в работе. Из ответа будет ясно, чему вы отдаёте приоритет. Если, к примеру, речь про интернет-издание, важнее будет производительность сайта и SEO, а если нужно разрабатывать сайт крупной финансовой компании – превыше всего окажется безопасность.

***

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

22
Дек
2020

🕸 Обучение веб-разработке: 20 репозиториев GitHub, о которых должен знать каждый

Любой программист со временем обрастает набором инструментов, но если вы только начинаете обучение на веб-разработчика, их придется искать. Мы собрали список наиболее интересных репозиториев GitHub, который будет полезен не только новичкам.

Веб-разработчикам приходится использовать разные технологии, а значит им нужно знать более одного языка программирования и владеть множеством инструментов. GitHub – это огромное пространство ресурсов для решения любых задач.

Какие бывают репозитории Github

В январе 2020 года на GitHub было более 40 млн. пользователей и более 190 млн. репозиториев. Кроме различных версий ПО репозитории GitHub содержат и другую полезную информацию для разработчиков. Там можно найти самые разные ресурсы:

  • инструменты тестирования;
  • фрагменты кода;
  • советы;
  • концепции программирования;
  • базы знаний;
  • примеры;
  • справочники;
  • руководства;
  • шаблоны;
  • демонстрации;
  • книги;
  • среды разработки;
  • чеклисты;
  • библиотеки.

Наиболее интересные для веб-разработчиков мы собрали в этой статье.

Если вам нужно систематизировать и обслуживать собственный репозиторий Git, читайте статью «Спаси щеночка – держи свои git-репозитории в чистоте».

Big List of Naughty String

Пример, когда вы пытаетесь твитнуть пространство нулевой ширины (U + 200B) в Twitter.
Пример, когда вы пытаетесь твитнуть пространство нулевой ширины (U + 200B) в Twitter.

«Большой список непослушных строк» – это постоянно развивающийся набор примеров, которые с высокой вероятностью вызовут проблемы при пользовательском вводе. Репозиторий полезен как для ручных, так и для автоматизированных тестов веб-приложений.

Назначение: автоматизированное и ручное тестирование, QA.

Содержание: список проблемных строк пользовательского ввода.

30 Seconds of Code

Код JS, который позволяет копировать текст в буфер обмена одним нажатием кнопки
Код JS, который позволяет копировать текст в буфер обмена одним нажатием кнопки

Этот репозиторий содержит короткие фрагменты кода JavaScript на все случаи жизни: от конвертации из градусов Фаренгейта в градусы Цельсия, до подсчета дней недели между двумя датами.

Назначение: программирование на JavaScript.

Содержание: фрагменты кода.

CSS Protips

Сброс CSS помогает обеспечить согласованность стилей между различными браузерами и начать оформление элементов с чистого листа.
Сброс CSS помогает обеспечить согласованность стилей между различными браузерами и начать оформление элементов с чистого листа.

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

Назначение: оформление и дизайн.

Содержание: советы по работе с CSS.

33 JS Concepts

33 JS Concept содержит концепции, которые должен знать каждый программист на JavaScript. В репозитории есть видео и статьи материал будет полезен как начинающим, так и опытным разработчикам. Репозиторий переведен на двадцать языков, включая русский.

Назначение: изучение JavaScript.

Содержание: статьи и видео.

A List of Useful Resources for Front-End Developers


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

Назначение: изучение Frontend.

Содержание: список обучающих материалов, статей и ресурсов.

WTFJS

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

Например, когда true это false: 
        !!"false" == !!"true"; // -> true
!!"false" === !!"true"; // -> true

// истина – это «true» и представлена ​​значением 1 (число), «истина» в строковой форме – это NaN.
true == "true"; // -> false
false == "false"; // -> false

//false – это не пустая строка, поэтому это истинное значение
!!"false"; // -> true
!!"true"; // -> true
    

Первоначальная идея WTFJS принадлежит Брайану Леру. Проект вдохновлен его докладом “WTFJS” на dotJS 2012.

Назначение: изучение тонкостей JS.

Содержание: список WTF-примеров JavaScript.

Awesome


Awesome, один из самых популярных репозиториев по всем темам от разработки программного обеспечения до железа и бизнеса. У него более 123000 звезд на GitHub.

Назначение: изучение веб-программирования и не только.

Содержание: обширная база знаний.

JavaScript Algorithms and Data Structures

Пример красно-черного дерева
Пример красно-черного дерева

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

Назначение: изучение алгоритмов.

Содержание: справочник с примерами.

Clean Code JavaScript


Репозиторий вдохновлен книгой Роберта Мартина «Чистый код». Если вам не нравятся книги, этот репо для вас! Он содержит руководство по созданию читаемого, тиражируемого и рефакторизируемого программного обеспечения на JavaScript.

Назначение: обучение способов написания чистого, читаемого и тиражируемого кода.

Содержание: руководство с примерами.

Free-for.dev


Репозиторий GitHub, в котором перечислены ресурсы с бесплатными уровнями для разработчиков. Тут есть сервисы электронной почты, CI/CD, мониторинга, DNS, хостинга и т. д. Список предназначен только для предложений «как услуга», а не для программного обеспечения.

Назначение: поиск бесплатных сервисов.

Содержание: список бесплатных для разработчиков сервисов.

HTML5 Boilerplate


Профессиональный шаблон для веб-разработчиков. Некоторые из его функций объединены в упорядоченный предустановленный код. Разработчики обычно загружают этот шаблон в виде файла .zip.

После загрузки HTML5 Boilerplate скопируйте его в папку проекта и настройте в соответствии с вашими требованиями. Это защитит вас от беспорядка при запуске проекта и сэкономит время.

Назначение: создание сайта.

Содержание: шаблон HTML5.

RealWorld


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

Назначение: выбор инструмента.

Содержание: примеры полнофункциональных блоговых приложений на базе различных фреймворков.

You Don’t Know JS Yet


В этой серии бесплатных книг подробно рассматриваются основные элементы языка JavaScript:

  • объекты и классы;
  • типы и грамматика;
  • синхронизация и асинхронность;
  • ES.Next & Beyond.

Назначение: изучение JS.

Содержание: серия книг для бесплатного чтения и скачивания.

Storybook


Storybook – среда разработки компонентов пользовательского интерфейса. Поддерживает React, Vue, Angular, React Native, Ember и т. д.

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

Назначение: разработка и тестирование компонентов.

Содержание: среда разработки пользовательского интерфейса.

NW.js


NW.js – это среда выполнения приложений на основе node.js и Chromium. Ранее она была известна как проект «node-webkit».

Назначение: разработка и тестирование HTML и JavaScript.

Содержание: среда выполнения приложений.

Front-End Checklist


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

Назначение: проверка перед запуском сайта.

Содержание: чеклист.

Airbnb JavaScript Style Guide

пример из документации относительно использования const вместо var
пример из документации относительно использования const вместо var

Руководство по стилю JavaScript от Airbnb помогает писать лучший код. Оно особенно полезно в командах, а также в сочетании с ESLint.

Назначение: обучение созданию хорошего JS-кода.

Содержание: руководство.

fullPage.js


fullPage.js – это библиотека для создания полноэкранных веб-сайтов с прокруткой. Она поддерживает CSS3 и все современные браузеры, включая мобильные, а также некоторые старые, вроде Internet Explorer 9 и Opera 12.

Если вы создаете приложение с открытым исходным кодом под совместимой с GNU GPL v3 лицензией, использовать fullPage можно в соответствии с условиями GPLv3. Для коммерческих разработок лицензию нужно покупать.

Назначение: создание веб-сайтов с полноэкранной прокруткой.

Содержание: библиотека.

Node.js Best Practices


Подборка контента по практикам Node.js. В репозитории представлен передовой опыт разработчиков и способы интеграции Node.js с другими инструментами, вроде Docker и Kubernetes. Он содержит более 80 лучших практик, руководств по стилю и архитектурных советов.

Назначение: изучение Node.js.

Содержание: подборка руководств.

App Ideas Collection


У разработчиков тоже иногда бывает «писательский блок». App Ideas Collection решит проблему раз и навсегда. Это не просто список проектов, а сборник с подробными описаниями, на основе которых можно создать собственную разработку с нуля.

Назначение: поиск идей для проекта.

Содержание: сборник проектов.

Не только версии

Все перечисленные репозитории можно разделить на несколько групп:

Учебные материалы, справочники, базы знаний:

Сервисы и инструменты:

Шаблоны и среды разработки/тестирования:

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

***

Если вы только осваиваете профессию, стоит обратить внимание на курс по веб-разработке от Geek Brains и Mail.ru. Начав с основ, здесь можно получить необходимые для старта карьеры знания. Актуальная программа, 2 – 3 вебинара в неделю и 2 месяца стажировки. Под руководством опытных преподавателей студенты наработают необходимую для дальнейшего развития в сфере IT базу и получат помощь в трудоустройстве.

17
Дек
2020

👶👨 Обучение от junior до senior: как стать востребованным веб-разработчиком

Осваивающие популярную ИТ-профессию новички стремятся стать веб-разработчиками минимум уровня middle, а самые амбициозные планируют дорасти до позиции senior. Рассказываем об этапах обучения и знаниях, которые потребуются для перехода с уровня на уровень этого квеста.

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


Начало карьеры в веб-разработке и обучение

Что нужно знать?

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

Начинающему frontend-разработчику обязательно понадобятся следующие знания, умения и навыки:

  1. Хорошие познания в HTML;
  2. Знание CSS, а также опыт работы с CSS-фреймворками (Twitter Bootstrap/Foundation) и CSS препроцессорами (Sass, Less, Stylus и т. д.);
  3. Владение графическими редакторами (Photoshop, Illustrator);
  4. Базовый опыт программирования на JavaScript (анимация, валидация, pop-ups);
  5. Понимание основных принципов работы хотя бы с одним фреймворком JS (ReactJS, AngularJS, Backbone, Vue.js);
  6. Практические навыки работы с системой контроля версий GIT;
  7. Знание популярных CMS (WordPress, Drupal, Joomla и т. д.);
  8. Владение инструментами дебаггинга (Chrome Dev Tools, Firebug).

Как нужно учиться?

Во время испытательного срока постарайтесь наладить контакт с более опытными разработчиками и перенимайте их опыт. Уже прошедшие этот этап коллеги могут рассказать много интересного о программировании, тестировании и отладке. От них вы узнаете, что еще ничего не знаете, но не пытайтесь объять необъятное. Определите наиболее критичные технологии, в которых вы разбираетесь слабо и изучайте их постепенно. Не ждите идеальных заданий – их не будет. Работайте с тем, что вам дают, и старайтесь предлагать улучшения функциональности продукта сверх заказанных. Помните, что под лежачий камень вода не течет – для роста нужна инициативность. Чтобы понять, какие изменения необходимы, мыслите категориями ценности продукта для пользователей.

Сколько времени потребуется?

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

Какого результата ожидать от обучения?

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


Переход на позицию middle

Что нужно знать?

Хотя в сфере ИТ есть общепринятая шкала для оценки разработчиков (trainee, junior, middle, senior, lead), точное определением круга обязанностей для каждого уровня меняется в зависимости от работодателя.

Тем не менее существует основной набор знаний, умений и навыков, обязательный для фронтенд-разработчика уровня middle:

  1. Доскональное знание синтаксиса используемого языка(JavaScript), опыт работы и уверенные теоретические познания в программировании;
  2. Владение ООП (наследование, полиморфизм и инкапсуляция);
  3. Хорошее знание одной из популярных библиотек JS (React, Angular, Vue и т. д.),;
  4. Умение самостоятельно настроить систему сборки проекта (Gulp/Grunt/Webpack), работая с нативным JS (ES5, ES6, ES7);
  5. Знание и понимание интерфейсов RESTful;
  6. Опыт работы со средствами совместного использования кода (Git + GitFlow);
  7. Уровень английского не ниже Upper-Intermediate.

Также есть дополнительные навыки, связанные с серверной стороной они будут большим плюсом при трудоустройстве:

  1. Опыт разработки серверного кода под Node.js и TypeScript;
  2. Базовые знания PHP;
  3. Опыт работы с PostgreSQL/MySQL.

Как нужно учиться?

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

Сколько времени потребуется?

Четких временных рамок для завершения мидл-этапа нет – все зависит от таланта и усилий. Гений способен проскочить его экспрессом за пару лет, а кто-то застревает в одной позиции навсегда. На прохождение обычно требуется 2 – 5 лет трудового стажа.

Что в итоге?

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


Эволюция веб-разработчика уровня senior

Что нужно знать?

Достигнув верхнего (с точки зрения начинающего обучение с нуля джуниора) этажа пищевой цепочки, нельзя почивать на лаврах. Иначе вас быстро подвинут более молодые и голодные коллеги. Стратегия продвижения на уровне senior та же самая, меняется лишь объем и сложность усваиваемого материала. Прокачивать скилы новоиспеченный сеньор может до бесконечности, но есть и обязательный набор знаний, умений и навыков.

На этом этапе обучения потребуются следующие позиции:

  1. Умение писать грамотный, расширяемый код: JavaScript + TypeScript/CoffeeScript/Babel + ES6/ES7CSS (Flexbox) + Less/Sass/Scss/Stylus/PostCSS + BEM/SMACSS/OOCSS/MCSSHTML (Canvas/SVG) + Jade/HAML/Handlebars/Slim/Mustache;
  2. Знание и умение использовать паттернов проектирования(MVC/MVVM), умение составлять грамотную архитектуру проекта;
  3. Понимание и применение принципов SOLID, DRY, DIE, KISS, YAGNI;
  4. Знание и понимание принципов работы Backend – RestAPI, GraphQL, серверных языков программирования и фреймворков;
  5. Понимание взаимодействия браузера с клиентом, отличные познания в HTTP, WS;
  6. Умение грамотно и быстро оценивать проект по времени и по сложности;
  7. Опыт работы с тест-фреймворками (Mocha, Should, Chai, Jest);
  8. Знание Docker, а также Kubernetes/Docker Swarm.

Как нужно учиться?

На позиции senior открывается несколько путей развития. Вы можете прокачивать технические навыки, чтобы вырасти до уровня Technical Leader. Этот уровень предполагает больше общения с людьми, а также активное взаимодействие с подчиненными. Второй путь заключается в построении процессов и менеджменте. Третье направление – Team Lead, Head of Development или CTO (технический директор). В этом деле нужны очень хорошие организаторские навыки, а также умение строить процессы и взаимодействовать с бизнесом. По сути от ориентации на ценность продукта для пользователя нужно перестроиться на бизнес-ценности. При этом придется подтянуть менеджерские навыки или даже получить второе высшее образование.

Что в итоге?

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

Выводы

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

***

Если вы только начинаете путь в ИТ, стоит обратить внимание на учебные курсы по веб-разработке онлайн-академии GeekBrains. Под руководством опытных преподавателей вы сможете получить необходимые для старта карьеры знания и существенно сократить путь от неофита до джуниора. Актуальная программа предполагает 2 – 3 вебинара в неделю и 2 месяца стажировки, а успешно окончившим курс студентам академия помогает с трудоустройством.

17
Дек
2020

👶👨 Обучение от junior до senior: как стать востребованным веб-разработчиком

Осваивающий популярную ИТ-профессию новичок стремится вырасти до сильного веб-разработчика уровня middle/senior. Рассказываем об этапах обучения и знаниях, которые потребуются для перехода с уровня на уровень этого квеста.

Профессионалы пользуются спросом на рынке труда за способность управлять проектами, определять приоритеты задач и давать советы младшим веб-разработчикам. Работодатели обычно соревнуются за таких специалистов, используя для их привлечения всевозможные бонусы и высокие зарплаты ($3000 – $4000). Перейти на последний уровень нелегко, но награда того стоит. Важно спланировать продвижение по карьерной лестнице с упором на рост и обучение –на примере профессии frontend-разработчика мы сделали пошаговое руководство, которое поможет вам пройти этот нелегкий путь.


Начало карьеры в веб-разработке и обучение

Что нужно знать?

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

Начинающему frontend-разработчику обязательно понадобятся следующие знания, умения и навыки:

  1. Хорошие познания в HTML;
  2. Знание CSS, а также опыт работы с CSS-фреймворками (Twitter Bootstrap/Foundation) и CSS препроцессорами (Sass, Less, Stylus и т. д.);
  3. Владение графическими редакторами (Photoshop, Illustrator);
  4. Базовый опыт программирования на JavaScript (анимация, валидация, pop-ups);
  5. Понимание основных принципов работы хотя бы с одним фреймворком JS (ReactJS, AngularJS, Backbone, Vue.js);
  6. Практические навыки работы с системой контроля версий GIT;
  7. Знание популярных CMS (WordPress, Drupal, Joomla и т. д.);
  8. Владение инструментами дебаггинга (Chrome Dev Tools, Firebug).

Как нужно учиться?

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

Сколько времени потребуется?

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

Какого результата ожидать от обучения?

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


Переход на позицию middle

Что нужно знать?

Хотя в сфере ИТ есть общепринятая шкала для оценки разработчиков (trainee, junior, middle, senior, lead), точное определением круга обязанностей для каждого уровня меняется в зависимости от работодателя.

Тем не менее существует основной набор знаний, умений и навыков, обязательный для фронтенд-разработчика уровня middle:

  1. Доскональное знание синтаксиса используемого языка(JavaScript), опыт работы и уверенные теоретические познания в программировании;
  2. Владение ООП (наследование, полиморфизм и инкапсуляция);
  3. Хорошее знание одной из популярных библиотек JS (React, Angular, Vue и т. д.),;
  4. Умение самостоятельно настроить систему сборки проекта (Gulp/Grunt/Webpack), работая с нативным JS (ES5, ES6, ES7);
  5. Знание и понимание интерфейсов RESTful;
  6. Опыт работы со средствами совместного использования кода (Git + GitFlow);
  7. Уровень английского не ниже Upper-Intermediate.

Также есть дополнительные навыки, связанные с серверной стороной они будут большим плюсом при трудоустройстве:

  1. Опыт разработки серверного кода под Node.js и TypeScript;
  2. Базовые знания PHP;
  3. Опыт работы с PostgreSQL/MySQL.

Как нужно учиться?

Многие компании проводят личные встречи и следят за ростом своих сотрудников. Однако очень часто они исходят из принципа достаточности: работает человек, вот и славно. Зачем ему больше платить? Если начальник не говорит с вами на тему профессионального роста, необходимо активно продвигать свои навыки. Проанализируйте проделанную работу. Сколько задач вы довели до Production? Какова их ценность и сколько ошибок было сделано? Сколько задач релизят старшие коллеги? Если будете честны с собой, получите адекватное сравнение своего уровня с другими разработчиками. Это поможет вам заполнить пробелы в знаниях и продолжить путь к повышению по карьерной лестнице.

Сколько времени потребуется?

Четких временных рамок для перехода от мидла к сеньору нет – все зависит от таланта и усилий. Гений способен проскочить этот этап экспрессом за пару лет, а кто-то застревает в одной позиции на десятилетия. Обычно на переход требуется 4 – 5 лет трудового стажа.

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

Что в итоге?

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


Эволюция веб-разработчика уровня middle

Что нужно знать?

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

На этом этапе обучения потребуются следующие позиции:

  1. Умение писать грамотный, расширяемый код: JavaScript + TypeScript/CoffeeScript/Babel + ES6/ES7CSS (Flexbox) + Less/Sass/Scss/Stylus/PostCSS + BEM/SMACSS/OOCSS/MCSSHTML (Canvas/SVG) + Jade/HAML/Handlebars/Slim/Mustache;
  2. Знание и умение использовать паттернов проектирования(MVC/MVVM), умение составлять грамотную архитектуру проекта;
  3. Понимание и применение принципов SOLID, DRY, DIE, KISS, YAGNI;
  4. Знание и понимание принципов работы Backend – RestAPI, GraphQL, серверных языков программирования и фреймворков;
  5. Понимание взаимодействия браузера с клиентом, отличные познания в HTTP, WS;
  6. Умение грамотно и быстро оценивать проект по времени и по сложности;
  7. Опыт работы с тест-фреймворками (Mocha, Should, Chai, Jest);
  8. Знание Docker, а также Kubernetes/Docker Swarm.

Как нужно учиться?

На позиции senior открывается несколько путей развития. Вы можете прокачивать технические навыки (hard skills), чтобы вырасти до уровня Technical Leader. Этот уровень предполагает больше общения с людьми, а также активное взаимодействие с подчиненными. Второй путь заключается в построении процессов и менеджменте. Так, например, крайне востребованы scrum-мастера и agile-коучи, которых довольно мало на рынке. Третье направление – Team Lead, Head of Development, технический директор. В этом деле нужны очень хорошие организаторские навыки, умение строить процессы и не бояться общения с деловыми партнерами.

Что в итоге?

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

Выводы

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

***

Если вы только начинаете путь в ИТ, стоит обратить внимание на учебные курсы по веб-разработке онлайн-академии GeekBrains. Под руководством опытных преподавателей вы сможете получить необходимые для старта карьеры знания и существенно сократить путь от неофита до джуниора. Актуальная программа предполагает 2 – 3 вебинара в неделю и 2 месяца стажировки, а успешно окончившим курс студентам академия помогает с трудоустройством.

14
Дек
2020

🕸 Обучение веб-разработке: сайты, блоги и комьюнити

Посвященные веб-разработке ресурсы – огромный стог сена, в котором вам нужно найти маленькую иголку. Обойтись без них нельзя: сайты, каналы, блоги и сообщества помогают в обучении и поиске работы. Рассказываем о самых интересных источниках.

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

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

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

Telegram-каналы

Frontender’s notes – Фронтендер собирает материалы, которые показались ему полезными: статьи, видео и подкасты. Большинство ресурсов на русском. Материалы не только технические, но и, например, посвященные карьере.

Вместе с коллегами он также админит несколько чатов (есть ссылки в описании к каналу) по JS, CSS, фронтенду в целом.

Frontend Info – ссылки на заинтересовавшие автора статьи англоязычного веба.

TelegaDevIT – много полезных инструментов, иногда мемы.

JavaScript – релизы новых технологий из мира JS, ссылки на англоязычные статьи.

Веб-стандарты – новости фронтенда, инструменты, туториалы. Есть прилагающийся чат. А еще – подкасты на youtube, в которых админы канала обсуждают новости приглашенными гостями.

Smart Dev – отбор англоязычных материалов с короткими комментариями автора, переводы статей. В отличие от предыдущего ресурса, спектр материалов здесь шире: веб-разработка в целом и дизайн.

Defront – ведет канал бывший разработчик Яндекса. Здесь публикуются подробные комментарии с мнением автора о найденных материалах. В описании можно найти рекомендации еще одного канала – Вебня.

Сайты

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

Josh W. Comeau – блог ведет преподаватель CSS. Пишет он про React, Next.js, анимацию, Gatsby, карьеру. Здесь же можно подсмотреть интересные веб-решения не только в его статьях, подборках и сниппетах, но и на самом сайте (кнопки со звуком, ночной режим и т. д.).

MDN Web Docs – в большей степени образовательная платформа. Она будет полезна не только начинающим: здесь регулярно мелькают новые технологии и инструменты. Чтобы получать эти блага, нужно зарегистрироваться. К тому же на сайте есть открытое сообщество, где можно делиться знаниями, помогая коллегам совершенствовать контент.

Frontend Front – комьюнити, где можно размещать свои проекты и статьи, а также задавать вопросы и голосовать за чужие материалы. Посты, которые набрали больше всего голосов, высылаются по подписчикам по почте.

Scotch.io – туториалы, новости и курсы. Можно подписаться на ежемесячные челленджи по разработке. Задания вы получаете на почту, а потом и решения для самопроверки. Смотрите предыдущие челленджи и их разборы. Во время решения задач и прочтения туториалов на сайте доступен словарь JavaScript. Есть одноименный чат в Slack, но он не очень оживленный.


Личные блоги веб-разработчиков

Firt dev – блог независимого разработчика мобильных и веб-приложений из Буэнос-Айреса, Максимильяно Фиртмана автора 12 книг о программировании и множества технических статей, ментора и преподавателя. Материалы делятся на короткие заметки (notes) и лонгриды (articles). Есть раздел learn, где собраны курсы, семинары, книги и выступления автора.

John Papa – Developer Advocate в Microsoft, когда-то работал в Disney. Даем ссылку на его твиттер, потому что он гораздо более оживленный, но сайт со старыми материалами тоже можно посмотреть.

Rebecca Murphey – главный инженер в Stripe, работала в Indeed. Она пишет о фронтенде и не технических темах, связанных с карьерой и работой. Ее твиттер.

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

Angus Croll – JS-разработчик из Netflix написал книгу «Если бы Хемингуэй написал JavaScript». Доступен также блог на медиуме и сайт.

Jen Simmons – дизайнер и разработчик в Mozilla, член рабочей группы CSS. Одно из ее основных направлений – CSS Grid. На сайте не так много текста, но можно словить вдохновение. Всякие фишки стоит смотреть на ютуб-канале автора.

Chris Coyier – один из создателей Codepen ведет подкаст ShopTalk о фронтенде, веб-дизайне и UX. У него очень популярный Твиттер.

André Staltz – основатель фреймворка cycle.js сделал значительный вклад в ReactiveX. Он также создал бесплатную социальную сеть Manyverse, где ваши данные не нужно загружать на сервера компании. В блоге автор пишет о JavaScript, интерфейсах, реактивном программировании, React Native и одноранговых сетях. Последний пост в блоге за 2019 год, более свежее мнение автора можно читать в Твиттере.

Meyerweb – эксперт по веб-стандартам (HTMLи CSS). Он написал множество популярных книг по CSS и не только, а также является создателем ряда инструментов и организатором мероприятий для дизайнеров и фронтендеров – An Event Apart.

Swizec – блог о JavaScript преподавателя Swizec Teller с опытом разработки в 13 лет. Автор рассказывает не только о технических нюансах, но и о софт–скилах, а также о карьере. Кроме сайта Swizec он активно ведет свой Твиттер и написал несколько книг (есть на сайте).

Addy Osmani – главный инженер в Google Chrome, специализирующийся на ускорении веба. Его команда работает над такими инструментами, как Lighthouse, PageSpeed Insights, Chrome User Experience Report.

Infrequently Noted – блог Алекса Рассела, который тоже из Chrome, но возглавляет работу с веб-стандартами. Один из его проектов – Blink.

2ality – блог ведет разработчик с опытом в 25 лет, преподаватель, писатель. Основное направление – JavaScript. Кроме личного блога, у него есть ресурс ESnextNews с новостям о JS и еженедельной рассылкой.

Чаты и форумы

Огромное количество локальных русскоязычных чатов и сообществ вы найдете в этой подборке на GitHub. Там представлены Россия, Беларусь, Украина, Казахстан и Молдова. Такие комьюнити особенно полезны, потому что они дают участникам возможность знакомиться и общаться, помогая друг другу на местности.

Кстати, на сайте можно добавлять чаты через pull request, чтобы найти единомышленников из своих регионов, которые не представлены в списке.

DEV – здесь любой может опубликовать свой материал и прокомментировать чужие. Также на форуме собираются видео и подкасты. Еще есть раздел с объявлениями: вакансии, поиск и предложения менторства, курсы, мероприятия, приглашения в другие сообщества разработчиков. По тегам слева выбирается интересующая читателя тематика.

Hashnode – местами похож на предыдущий ресурс, но есть интересная опция: можно создавать свои Q&A-сессии или задавать вопросы запустившим сессию экспертам. Например, расспросить о чем-нибудь разработчиков Google и Amazon, а также разных фаундеров из мира программирования. Можно искать интересующие топики по тегам. Комментарии и посты при необходимости публикуются анонимно.

The Odin Project – образовательная платформа с чатом в Дискорде. Основные направления обучения – JavaScript и Ruby. Еще у них есть блог на медиуме.

SitePoint – достаточно активный форум для веб-разработчиков и веб-дизайнеров. Ищите обсуждения по категориям: например, только PHP.

Product Hunt – здесь вы найдете последние веб- (и не только) проекты. Можно комментировать их, задавать вопросы создателю, подсматривать интересные решения.

WebDeveloper – минималистичный форум по веб-разработке. В отличие от некоторых других, он разделен на секции: часто задаваемые вопросы, клиент сайта, сервер сайта, управление сайтом.

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

В целом, на Reddit есть и более узкие сабреддиты, вроде: Bootstrap, JavaScript и т. д.

Заключение

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

***

Если вы только осваиваете профессию веб-разработчика и не готовы тратить слишком много времени на самообучение, стоит обратить внимание на курс по веб-разработке от Geek Brains и Mail.ru. Начав с основ, вы получите необходимые для начала карьеры знания. Актуальная программа состоит из 2 – 3 вебинаров в неделю и 2 месяцев стажировки. Под руководством опытных преподавателей студенты наработают необходимую для дальнейшего развития базу и получат помощь в трудоустройстве.

14
Дек
2020

🕸 Будущее разработки или что ждет веб-индустрию в ближайшие 5 лет

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

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

Искусственный интеллект

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

  1. Автоматический подбор контента в зависимости от поисковых запросов, а также исходя из интересов пользователя, определенных на основе данных из различных каналов;
  2. Оптимизация голосового и текстового поиска в браузере;
  3. Автоматический подбор цветовой гаммы сайта и изменение формы кнопок, исходя из предпочтений пользователя;
  4. Анализ настроения пользователя на основе его комментариев.

В современном мире, потребность в искусственном интеллекте очень велика.


ИИ – главная тенденция развития веб-пространства. Google, Microsoft и другие ведущие компании делают общедоступными технологии, с помощью которых вы можете создавать собственные веб-проекты. Одна из последних разработок – AI – позволяет просто и без особых навыков создавать достойные приложения. Для этого требуется загрузить контент и дать необходимые инструкции роботу, чтобы система сделала все за вас.

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

Интернет вещей (IoT)

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

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

Если в вашем багаже присутствует перечисленное, в ближайшие 5 лет вы будете востребованным и высокооплачиваемым специалистом.

Виртуальная реальность

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

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

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


Видео в режиме 360°

Такой формат применяется, чтобы значительно улучшить пользовательский интерфейс. Чтобы создать изображение с обзором в 360°, камера захватывает вид под всеми возможными углами для беспрепятственного просмотра в будущем. Если использовать такие видеоролики при создании сайта, ваша разработка гарантированно привлечет больше внимания и увеличит количество просмотров.

Создавать видео с обзором в 360° станет проще, если у вас есть достаточный опыт работы с технологией VR, а также хорошие знания в области веб-разработки. В ближайшие 5 лет такие навыки станут более востребованными.

Управление голосом

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

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

Motion User Interface

Motion UI – SaaS-библиотека для обеспечения уникальных переходов и анимации, способствующих улучшению внешнего вида сайта и вызывающих интерес у пользователей. Динамический дизайн помогает сделать интерфейс привлекательным и интуитивно понятным. Чтобы повысить ценность и улучшить аспекты взаимодействия с сайтом на клиентской стороне, вы можете согласовать анимацию с предпочтениями пользователей.

Одной из интересных особенностей Motion User Interface является простота восприятия. Умеющие применять такой подход при разработке сайтов и приложений специалисты всегда востребованы на рынке.

***

Веб-разработка постоянно развивается, и для карьеры в этой отрасли необходимо изучать последние тенденции. Важно понимать, что ее будущее полностью зависит от желаний пользователей, а технологии для их удовлетворения непрерывно совершенствуются. Если вы только осваиваете профессию, стоит обратить внимание на курс по веб-разработке от Geek Brains и Mail.ru. Начав с основ, здесь можно получить необходимые для начала карьеры знания. Актуальная программа состоит из 2 – 3 вебинаров в неделю и 2 месяцев стажировки. Под руководством опытных преподавателей студенты наработают необходимую для дальнейшего развития базу и получат помощь в трудоустройстве.

06
Дек
2020

🕸 Обучение веб-разработке: руководство по оформлению кода HTML/CSS

Код HTML/CSS нужно оформлять красиво, а значит особенности верстки – обязательная часть программы обучения веб-разработке. Рассказываем, как освоить нужные знания с нуля.

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

Делайте отступы

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

Тег div является вложенным элементом относительно section.

        <section>
    <div>
    </div>
</section>

    

В свою очередь теги h1 и p выравниваются относительно тега div, не создавая «лесенки».

        <section>
    <div>
        <h1>Заголовок</h1>
        <p>Текст</p>
    </div>
</section>
    

Это правило не распространяется на строчные теги (i, u, a, b, span) внутри абзаца. Например, тег span не нужно начинать с новой строки и делать от него отступы.

Выравнивайте теги по одной вертикальной линии

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

Так писать не надо:

        <section>
    <div>
        <h1>Заголовок</h1>
        <p>Текст</p>
 </div>
      </section>
    

Комментируйте код

Когда в разметке идет подряд много закрывающих тегов, ставьте комментарий (название класса) рядом с ним. Тогда вам не придется гадать, какой именно класс закрывается.

        <div class="wraper">
    <div class="header">
        <div class="title">
          .....
        </div><!-- .title -->
    </div><!-- .header -->
</div><!-- .wraper -->
    

Начало каждого блока желательно начинать с короткого комментария с названием секции. Это очень удобно и позволит вам легко ориентироваться в структуре документа.

        <!-- Footer -->
<footer>
    <div class="page-footer"></div>
</footer>
    

Всегда пишите в нижнем регистре

Весь код должен быть написан в нижнем регистре. Это относится к названиям элементов и атрибутов, значениям атрибутов, селекторам, свойствам и их значениям (кроме текста). Текст внутри тегов можно писать с заглавной буквы в начале предложений, а для остального существует свойство text-transform: uppercase;.


Используйте кодировку UTF-8

UTF-8 – один из самых распространенных стандартов кодирования, который позволяет наиболее компактно хранить и передавать символы Юникода. Убедитесь, что ваш редактор использует UTF-8. Всегда указывайте кодировку в шаблонах и документах HTML с помощью <meta charset="utf-8">. Опускайте кодировку для файлов CSS, поскольку для них UTF-8 задана по умолчанию.

Используйте валидный HTML

Валидная разметка – это код, который написан в соответствии с определенными стандартами. Их разработал Консорциум Всемирной Паутины – World Wide Web Consortium (W3C). При помощи таких инструментов, как W3С HTML Validator, можно проверить качество кода HTML и CSS. Написание валидного HTML оттачивает знание ограничений языка разметки и понимание технических требований.

Используйте семантическую разметку

Семантическая верстка (разметка) – это подход к созданию веб-страниц, основанный на расстановке тегов HTML в соответствии с их семантикой. Проще говоря, используйте теги по назначению: <hX> для заголовков, <p> для абзацев, <a> для ссылок и т.д. Это поможет поисковому роботу проанализировать страницу сайта и подготовить ее описание для пользователей, а также повысит приоритет выдачи.

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

Не указывайте протокол при добавлении внешних ресурсов

Опускайте название протокола (http:// или https://) в ссылках на картинки и другие внешние ресурсы, файлы стилей или скрипты. Это делает ссылку относительной и предотвращает, например, использование незащищенного контента на защищенном сайте, а также незначительно уменьшает размер файлов.

Не используйте необязательные теги и лишние обертки

Для уменьшения размера файлов и лучшей читаемости старайтесь избегать использования необязательных тегов и лишних оберток (wrapper). В спецификации HTML5 есть их список.


Изучите правила оформления CSS

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

Изучите нюансы синтаксиса CSS

Ставьте точку с запятой после каждого объявления. Это необходимо для беспрепятственного добавления новых свойств и уменьшения путаницы. Используйте пробелы после двоеточий в объявлениях. Это поможет вам лучше ориентироваться в документе CSS. Начинайте каждый селектор или объявление с новой строки. По возможности объединяйте свойства отдельных блоков в группы и обозначайте их комментариями, разделяя переносом строки. Не указывайте единицы измерения для нулевых значений, если на это нет причины. Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места (color: #ааа;).


Используйте препроцессоры

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

Используйте автопрефиксер

Префиксы нужны, чтобы «подружить» свойства CSS c различными браузерами. Изначально они были придуманы, чтобы помочь разработчикам браузеров адаптировать спецификацию под свои нужды. Чтобы не заниматься этим самостоятельно, используйте утилиту нового поколения autoprefixer для добавления префиксов к экспериментальным свойствам из CSS-3.

Будьте последовательны!

Следует придерживаться определенного стиля написания кода. Чистый и красивый код говорит об уровне профессионализма верстальщика и его отношении к работе.

***

Если вы только осваиваете профессию, стоит обратить внимание на курс по веб-разработке от Geek Brains и Mail.ru. Начав с основ, здесь можно получить необходимые для начала карьеры знания. Актуальная программа состоит из 2 – 3 вебинаров в неделю и 2 месяцев стажировки. Под руководством опытных преподавателей студенты наработают необходимую для дальнейшего развития базу и получат помощь в трудоустройстве.

03
Дек
2020

🎨 5 лучших инструментов веб-разработчика: учимся делать сайты без погружения в код

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

Для чего нужны инструменты веб-разработки?

Веб-разработчики давно отказались от индивидуального кодирования страниц в HTML/CSS, JavaScript, PHP или другом языке, с использованием только текстового редактора. В наши дни доступны платформы, которые помогают во всех этапах процесса вплоть до дизайна.

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

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


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

Sketch – набор инструментов для цифрового дизайна


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

демонстрация работы в Sketch
демонстрация работы в Sketch

Доступен также называемый библиотеками облачный компонент для совместной работы, поскольку символы могут быть общими. С помощью инструмента Font Rapid создаются собственные шрифты, чтобы придать сайту действительно индивидуальный вид. Потом они экспортируются в файл шрифта OpenType.

Sketch поддерживает только OS X, к тому же это коммерческое приложение — ценовая политика предполагает единовременную оплату лицензии на одного пользователя, либо ежемесячную или годовую подписку.

Преимущества:

  • создает простые анимации;
  • есть интерактивные прототипы;
  • поддерживается совместная работа в облаке.

Недостатки:

  • только под OS X.

InVision Cloud – платформа для дизайна цифровых продуктов

принцип работы Prototype
принцип работы Prototype

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

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

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

Преимущества:

  • есть бесплатная версия;
  • есть набор полезных инструментов;
  • возможность создания прототипа веб-сайта.

Sublime Text – редактор кода, упрощающий продвинутый дизайн сайтов

демонстрация Sublime Text
демонстрация Sublime Text

Sublime Text – популярный редактор кода, который является полезным инструментом для веб-дизайна и доступен для загрузки под Windows, OS X и Linux. К полезным функциям относятся команда GoTo Anything для поиска фрагмента кода, команда Multiple Selections, которая вносит изменения в повторяющиеся разделы кода, и Split Editing для максимизации отображения кода на широкоэкранном мониторе или даже на нескольких мониторах.

Sublime Text можно бесплатно загрузить и оценить, а затем приобрести неограниченную по времени лицензию для всех систем.

Преимущества:

  • есть версии для Windows, OS X и Linux;
  • поддерживаются расширенные команды;
  • доступна бесплатная пробная версия.

Недостатки:

  • нет версии для мобильных платформ.

Foundation

установка и работа в Foundation

Что-либо спроектировать проще, когда заложены основы. Foundation использует этот подход, предлагая «семейство гибких интерфейсных фреймворков», которые можно применять для дизайна веб-сайтов и электронной почты. Каждый из них нетрудно настроить для получения нужного вида. В списке использующих этот инструмент сайтов есть несколько серьезных «тяжеловесов», включая Disney, HP и Adobe.

Foundation предлагает серию шаблонов HTML, каждый из которых оптимизирован для конкретного приложения, например, для блога или сайта о недвижимости. Они могут быть добавлено к веб-сайту с помощью «строительных блоков», например, в виде полноэкранной страницы, формы подписки, блока рейтинга или закругленных кнопок социальных сетей. Варианты обширны. Для освоения инструмента пользователям предлагается серия вебинаров под названием «Базовые классы». Цена непрозрачная, но есть бесплатная демка. Опытные пользователи предупреждают, что начинающим предстоит крутая кривая обучения.

Преимущества:

  • фреймворк для упрощения дизайна;
  • настраиваемые строительные блоки;

Недостатки:

  • непрозрачное ценообразование;
  • крутая кривая обучения

Chrome DevTools – инструмент для веб-разработчиков


Chrome по-прежнему остается популярным выбором для пользователей Интернета: он также включает инструменты разработчика прямо в браузере. Они предназначены для отладки JavaScript, применения стилей к элементам HTML, вывода сообщений о работе страницы, а также оптимизации скорости веб-сайта.

В одной из предыдущих статей мы уже рассмотрели 14 наиболее полезных особенностей Chrome DevTools.

К сожалению этот бесценный набор инструментов ограничен одним браузером – он не всегда подходит для прочих, даже основанных на Chromium.

Использование инструментов разработчика Chrome бесплатно, а поддержка предоставляется через активное сообщество DevTools.

Преимущества:

  • бесплатность;
  • доступность.

Недостатки:

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

Кому и для чего пригодится

Sketch будет полезен использующим компьютеры Apple разработчиком для создания дизайна и верстки сайтов. InVision Cloud подойдет для дизайна, прототипирования и модульного создания сайтов. Sublime Text облегчит работу с кодом сайта или веб-приложения. Foundation поможет подобрать и кастомизировать шаблон HTML. Chrome DevTools хороши тестирования и отладки сайта в браузере Chrome.

***

Автоматизированные помощники хороши, но это именно помощники – знания матчасти они не заменят. Если вы только осваиваете профессию, стоит обратить внимание на курс по веб-разработке от Geek Brains и Mail.ru. Начав с основ, здесь можно получить необходимые для старта карьеры знания. Актуальная программа, 2 – 3 вебинара в неделю и 2 месяца стажировки. Под руководством опытных преподавателей студенты наработают необходимую для дальнейшего развития в сфере IT базу и получат помощь в трудоустройстве.

29
Ноя
2020

☕ 25 полезных сниппетов JavaScript для вашей коллекции

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

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

1. Проверка типа

JavaScript не имеет сильной системы типов, что многие считают серьезным недостатком. Поклонники строгости по достоинству оценят TypeScript, но и в самом JS есть некоторые полезные возможности. Например, провести простую проверку типа можно с помощью ключевого слова typeof.

Однако его возможности ограничены. С примитивами и функциями все работает как надо, но массивы от простых объектов вы отличить не сможете – они все имеют тип object. И не будем забывать про null, который тоже object, о чем часто забывают.

Давайте соберем все возможные проверки в одну полезную функцию:

isOfType.js
        const isOfType = (() => {
  // создаем пустую коллекцию без прототипа
  const type = Object.create(null);

  // проверка на null
  type.null = x => x === null;
  // проверка на undefined
  type.undefined = x => x === undefined;
  // проверка на nil - сюда относятся и null, и undefined
  type.nil = x => type.null(x) || type.undefined(x);

  // проверка на строку и литерал String: 
  // 's', "S", new String()
  type.string = x => !type.nil(x) 
       && (typeof x === 'string' || x instanceof String);

  // проверка на число и литерал числа: 12, 30.5, new Number()
  // для NaN и Infinity оператор typeof также возвращает 'number',
  // поэтому их нужно исключить
  type.number = x => !type.nil(x) && ( 
    (!isNaN(x) && isFinite(x) && typeof x === 'number')
    || x instanceof Number);

  // проверка на булево значение и литерал Boolean: 
  // true, false, new Boolean()
  type.boolean = x => !type.nil(x) && 
    (typeof x === 'boolean' || x instanceof Boolean);

  // проверка на массив
  type.array = x => !type.nil(x) && Array.isArray(x);

  // проверка на объект и литерал объекта: 
  // {}, new Object(), Object.create(null)
  type.object = x => ({}).toString.call(x) === '[object Object]';

  // проверка на конкретный тип
  type.type = (x, X) => !type.nil(x) && x instanceof X;

  // проверка на Set
  type.set = x => type.type(x, Set);
  // проверка на Map
  type.map = x => type.type(x, Map);
  // проверка на Date
  type.date = x => type.type(x, Date);

  return type;
})();
    

Код функции на GitHub

2. Проверка на пустое значение

Часто требуется определить, является ли значение пустым. Однако само понятие пустоты разное для разных типов данных. Например, в пустой строке нет символов, а в пустом объекте – ключей. Соответственно, нужно использовать разные методы:

isEmpty.js
        function isEmpty(x) {
  if (Array.isArray(x) 
     || typeof x === 'string'
     || x instanceof String
  ) {
    return x.length === 0;
  }

  if (x instanceof Map || x instanceof Set) {
    return x.size === 0;
  }

  if (({}).toString.call(x) === '[object Object]') {
    return Object.keys(x).length === 0;
  }

  return false;
}
    

Код функции на Github

3. Получение последнего элемента

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

Главное не забыть об особенностях разных типов списков:

lastIem.js
        function lastItem(list) {
  if (Array.isArray(list)) {
    return list.slice(-1)[0];
  }
  
  if (list instanceof Set) {
    return Array.from(list).slice(-1)[0];
  }

  if (list instanceof Map) {
    return Array.from(list.values()).slice(-1)[0];
  }
}
    

Код функции на Github

4. Генератор случайного числа в заданном диапазоне

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

randomNumber.js
        function randomNumber(max = 1, min = 0) {
  if (min >= max) { return max; }
  return Math.floor(Math.random() * (max - min) + min);
{
  
    

Код функции на GitHub

5. Генератор случайного id

Если вам просто нужен уникальный идентификатор (а не что-то сложное вроде UUID), то вы вполне можете обойтись без специальных библиотек. Используйте текущее время, инкремент или символы алфавита:

unique-id.js
        // использование текущего времени в миллисекундах в качестве основы
// увеличение при каждом запросе с помощью функции-генератора
const uniqueId = (() => {
  const id = (function*() {
    let mil = new Date().getTime();
    while (true) 
      yield mil += 1;
  })();
  
  return () => id.next().value;
})();

// создание уникального id заданной длины
// на основе полученного значения (или нуля)
// увеличение при каждом запросе
const uniqueIncrementingId = ((lastId = 0) => {
  const id = (function*() {
    let numb = lastId;
    while (true)
      yield numb += 1;
  })();

  return (length = 12) => 
      `${id.next().value}`.padStart(length, '0');
})();

// создание уникального id из букв и цифр
const uniqueAlphaNumericId = (() => {
  const heyStack = '0123456789abcdefghijklmnopqrstuvwxyz';
  const randomInt = () => 
    Math.floor(Math.random() * Math.floor(heyStack.length));
  return (length = 24) => 
    Array.from({ length }, () => heyStack[randomInt()]).join('');
})();
    

Код функции на Github

6. Создание диапазона чисел

В JavaScript очень не хватает функции для генерации последовательности чисел – вроде range в Python. Она была бы очень полезна для циклов for…of и других ситуаций, когда нужен определенный диапазон значений.

range.js
        function range(maxOrStart, end = null, step = null) {
  if (!end) {
    return Array.from({length: maxOrStart}, (_, i) => i);
  }

  if (end <= maxOrStart) {
    return [];
  }

  if (step !== null) {
    return Array.from(
      {length: Math.ceil(((end - maxOrStart) / step))},
      (_, i) => (i * step) + maxOrStart
    );
  }

  return Array.from(
    {length: Math.ceil((end - maxOrStart))},
    (_, i) => i + maxOrStart
  );
}
    

Код функции на Github

7. Форматирование JSON и сериализация данных

Наверняка во время разработки вы активно пользуетесь консолью для тестирования и вывода данных. Для этого удобно применять метод JSON.stringify. Его третий параметр определяет количество пробелов для форматирования отступов. Кроме того есть второй параметр, который может быть полезен для обработки непримитивных типов данных – функций, символов и т.п., которые обычно игнорируются при сериализации.

stringifier.js
        const obj = {
  name: 'John Doe',
  family: [
    {
      name: 'Jane Doe',
    }
  ],
  something: [12, 3, 45],
  method() {
    return 'i am ignored';
  },
  set: new Set([1, 4, 5]),
  map: new Map([1, 4], [5, 10]]),
  symb: Symbol('test')
};

const replacer = (key, val) => {
  if (typeof val === 'symbol') {
    return val.toString();
  }

  if (val instanceof Set) {
    return Array.from(val);
  }

  if (val instanceof Map) {
    return Array.from(val.entries());
  }

  if (typeof val === 'function') {
    return val.toString();
  }

  return val;
};

console.log(JSON.stringify(obj));
console.log(JSON.stringify(obj, null, 4));
console.log(JSON.stringify(obj, replacer));
    

Код функции на Github

8. Последовательное выполнение промисов

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

async-sequentializer.js
        const asyncSequentializer = (() => {
  const toPromise = (x) => {
    // если это промис, просто вернуть его
    if (x instanceof Promise) { 
      return x;
    }

    if (typeof x === 'function') {
      // если не асинхронная функция
      // то преобразовать в асинхронную,
      // выполнить и вернуть промис
      return (async () => await x())();
    }

    return Promise.resolve(x);
  }

  // принимает список функций, асинхронных функций или промисов
  return (list) => {
    const results = [];

    return list
      .reduce((lastPromise, currentPromise) => {
        return lastPromise.then(res => {
          results.push(res); // собрать результаты
          return toPromise(currentPromise);
        });
      }, toPromise(list.shift()))
      // собрать результаты последнего промиса
      // вернуть массив результатов
      .then(res => Promise.resolve([...results, res]));
  }
})();
    

Код функции на GitHub

9. Постоянный опрос (polling)

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

polling.js
        async function poll(fn, validate, interval = 2500) {
  const resolver = async (resolve, reject) => {
    // отлов ошибок, выбрасываемых функцией fn
    try { 
      const result = await fn(); // fn необязательно должна возвращть промис
      // вызов валидатора для проверки полученного результата
      const valid = validate(result);

      if (valid === true) {
        resolve(result);
      } else if (valid === false) {
        setTimeout(resolver, interval, resolve, reject);
      } 
      // если валидатор возвращает что-то кроме true/false,
      // опрос прекращается
    } catch (e) {
      reject(e);
    }
  };

  return new Promise(resolver);
}
    

Код функции на GitHub

10. Работа с наборами промисов

Раньше не существовало нативных функций для работы с наборами промисов, поэтому приходилось изобретать собственные решения. Но Promise API постоянно развивается, и теперь у нас есть замечательные методы allSettled, race and any, с которыми стоит познакомиться каждому разработчику.

Promise.all

Ожидает, когда выполнятся (resolve) все промисы в списке или хотя бы один из них будет отклонен (reject). Если не было ошибок, метод вернет массив с результатами выполнения промисов, сохранив их исходный порядок.

Promise.allSettled

Ожидает завершения всех промисов, независимо от их статуса выполнения. Возвращает массив с результатами. Каждый объект в этом массиве имеет поле status, которое может быть равно fullfilled или rejected. Если промис выполнился, то результат будет в поле value. Если же он был отклонен, то причина будет в поле reason.

Promise.any

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

Promise.rase

Ожидает самого первого завершения любого промиса из списка независимо от его статуса.

        const prom1 = Promise.reject(12);
const prom2 = Promise.resolve(24);
const prom3 = Promise.resolve(48);
const prom4 = Promise.resolve('error');

Promise.all([prom1, prom2, prom3, prom4])
  .then(res => console.log('all', res))
  .catch(err => console.log('all failed', err));

Promise.allSettled([prom1, prom2, prom3, prom4])
  .then(res => console.log('allSettled', res))
  .catch(err => console.log('allSettled failed, err));

Promise.any([prom1, prom2, prom3, prom4])
  .then(res => console.log('any', res))
  .catch(err => console.log('any failed, err));

Promise.race([prom1, prom2, prom3, prom4])
  .then(res => console.log('race', res))
  .catch(err => console.log('race failed, err));
    

11. Перестановка элементов массива

Не то чтобы это была очень трудная задача, однако полезно знать, что в ES6 существует удобный способ ее решения.

swap.js
        const array = [12, 24, 48];

// старый способ
const swapOldWay = (arr, i, j) => {
  const arrayCopy = [...arr];
  let temp = arrayCopy[i];
  arrayCopy[i] = arrayCopy[j];
  arrayCopy[j] = temp;
  return arrayCopy;
};

// новый способ
const swapNewWay = (arr, i, j) => {
  const arrayCopy = [...arr];
  [arrayCopy[0], arrayCopy[2]] = [arrayCopy[2], arrayCopy[0]];
  return arrayCopy;
}

console.log(swapOldWay(array, 0, 2));
// [48, 24, 12]
console.log(swapNewWay(array, 0, 2));
// [48, 24, 12]
    

12. Добавление ключа в объект по условию

Этот трюк очень полезен при работе с состояниями в React. Ключ добавляется (или не добавляется) в объект в зависимости от некоторого условия с помощью spread-оператора.

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

        let condition = true;

const man = {
  someProperty: 'some value',
  // условие
  ...(condition === true ? { newProperty: 'value' } : {})
}
  
  
    

13. Использование переменных в качестве ключей объекта

Современный JavaScript также позволяет указывать строковые переменные в качестве ключей объекта. Для этого потребуются квадратные скобки:

        let property = 'newValidProp';

const man = {
  someProperty: 'some value',

  [`${property}`]: 'value',
}
    

Шаблонный литерал используется для явной интерполяции строкового значения, но можно обойтись и без него:

        let property = 'newValidProp';

const man = {
  someProperty: 'some value',

  [property]: 'value',
}
    

14. Проверка наличия ключа в объекте

Обычно для такой проверки нужен оператор in. Однако он учитывает не только собственные свойства объекта, но также и свойства всех его прототипов (как и цикл for...in). Это обычно не является желательным поведением. Лучше всего использовать проверку методом hasOwnProperty.

        const sample = {
    prop: 'value'
}

console.log('prop' in sample); // true
console.log('toString' in sample); // true

console.log(sample.hasOwnProperty('prop')); // true
console.log(sample.hasOwnProperty('toString')); // false
    

15. Удаление дублирующихся элементов массива

Избавиться от повторяющихся элементов массива очень просто – потребуется структура Set. Она отлично работает с разными типами данных и использует специфический алгоритм сравнения значений.

        const numberArrays = [
  undefined, Infinity,
  12, NaN, false, 5, 7, 
  null, 12, false, 5,
  undefined, 89, 9, null,
  Infinity, 5, NaN];

console.log(Array.from(new Set(numberArrays));
// [undefined, Infinity, 12, NaN, false, 5, 7, null, 89, 9]



    

С объектами это, конечно, работать не будет, так как каждый объект уникален. Поэтому нужно вводить дополнительный фильтр:

        const objArrays = [{id: 1}, {id: 4}, {id: 1}, {id: 5}, {id: 4}];

// Set воспринимает каждый объект как уникальное значение
console.log(Array.from(new Set(objArrays));
// [{id: 1}, {id: 4}, {id: 1}, {id: 5}, {id: 4}]

// фильтрация по id
const idSet = new Set();
console.log(
  objArrays.filter(obj => {
    const existingId = idSet.has(obj.id); 
    idSet.add(obj.id);

    return !existingId;
  })
);
// [{id: 1}, {id: 4}, {id: 5}]


    

16. break и continue в цикле forEach

Метод Array.forEach – очень удобная функциональная альтернатива обычному циклу for. Однако у него есть недостатки, например, отсутствие возможности прервать цикл в любой момент – по аналогии с оператором break.

Чтобы эмулировать это поведение, сохранив все преимущества, можно вызвать другой метод – Array.some. Он прекращает перебор элементов, если функция возвращает true. Используем этот трюк вместо break:

        const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const number of numbers) {
  if (number % 2 === 0) {
    continue; // переход к следующему элементу
  }
  if (number > 5) {
    break;
  }

  console.log(number);
}
// 1, 3, 5

numbers.some(number => {
  if (number % 2 === 0) {
    return false; // переход к следующему элементу
  } 

  if (number > 5) {
    return true; // остановка перебора
  }

  console.log(number);
});
    

17. Деструктуризация с псевдонимами и дефолтными значениями

Деструктуризация – одна из самых мощных и удобных функций JavaScript, но синтаксис у нее довольно запутанный и сложный для запоминания. Поэтому повторяем еще раз, как задавать псевдонимы для названий полей и устанавливать значения по умолчанию:

        function demo1({ dt: data }) {
  // переименование dt в data
  console.log(data);  
}

function demo2({ dt: {name, id = 10}}) {
  // глубокая деструктуризация поля dt
  // для параметра id установлено значение по умолчанию - 10
  console.log(name, id);  
}

demo1({ dt: { name: 'sample', id: 50 } });
//{ name: 'sample', id: 50 }

demo2({ dt: { name: 'sample' } });
// 'sample', 10
    

18. Опциональные последовательности и нулевое слияние

Еще две новых фичи JavaScript, которые существенно облегчают труд разработчика – optional chaining и nullish coalescing.

Нулевое слияние

Очень полезно при работе с неопределенными значениями. Оператор ?? возвращает правое значение только в том случае, если левое равно null или undefined. То есть он сохраняет все остальные falsy-значения, например, 0 или пустую строку.

        const obj = {
  data: {
    container: {
      name: {
        value: 'sample'
      },
      int: {
        value: 0
      }
    }
  }
};

// #1
console.log(obj.data.container.int.value || 'no int value');
// no int value

// #2
console.log(obj.data.container.int.value ?? 'no int value');
// будет выведено: 0
    

В первом примере указанное поле существует, но его значение равно 0, что интерпретируется как falsy. Поэтому оператор || вернет правую часть – дефолтную строку.

Опциональные последовательности

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

        const obj = {
  data: {}
};

console.log(obj.data.wrapper.name.value);
// Cannot read property 'name' of undefined
    

В этом фрагменте кода происходит обращение к несуществующему полю объекта, поэтому выбрасывается ошибка. Чтобы избежать этого, приходится проверять проверку на каждом уровне вложенности:

        console.log(
  (obj && obj.data && obj.data.wrapper && obj.data.wrapper.name) || 'no name'
);
// 'no name'
    

Чем глубже структура объекта, тем сложнее становится конструкция и тем проще в ней ошибиться.

Оператор опциональных последовательностей ? позволяет существенно сократить это выражение:

        console.log((obj?.data?.wrapper?.name) || 'no name');
// no name
    

19. Классы – это синтаксический сахар

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

Этот сниппет является более «натуральным» и компиляторы лучше преобразуют и сжимают его.

        function Parent() {
  const privateProp = 12;
  const privateMethod = () => privateProp + 10;

  this.publicMethod = (x = 0) => privateMethod() + x;
  this.publicProp = 10;
}

class Child extends Parent {
  myProp = 20;
}

const child = new Child();

console.log(
  child.myProp, // 20
  child.publicProp, // 10
  child.publicMethod(40), // 62
  child.privateProp, // undefined
  child.privateMethod(), // ошибка "child.privateMethod is not a function"
);
    

20. Сложный конструктор

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

Всю эту логику можно поместить прямо в функцию-конструктор. Для расширения родительских классов используйте методы apply или call.

        function Employee() {
  this.profession = 'Software Engineer';
  this.salary = '$150000';
}

function DeveloperFreelancer() {
  this.programmingLanguages = ['JavaScript', 'Python', 'Swift'];
  this.avgPerHour = '$100';
}

function Engineer(name) {
  this.name = name;
  this.freelancer = {};

  Employee.apply(this);
  DeveloperFreelancer.apply(this.freelancer);
}

const john = new Enginerr('John Doe');

console.log(
  john.name, // 'John Doe'
  john.profession, // 'Software Engineer'
  john.salary, // '$150000'
  john.freelancer, 
  // { programmingLanguages: ['JavaScript', 'Python', 'Swift'], avgPerHour: '$100' }
);
    

21. Итерирование всего

Для перебора элементов разных коллекций (Object, Array, Set, String и т. д.) приходится использовать разные методы. Было бы удобно объединить всю эту функциональность в один абстрактный метод.

Второй аргумент – callback – это функция для обработки элементов. Если она вернет true, цикл будет прерван (по аналогии с оператором break).

iterables.js
        function forEach(list, callback) {
  const entries = Object.entries(list);
  let i = 0;
  const len = entries.length;
  
  for(;i < len; i++) {
    const res = callback(entries[i][1], entries[i][0], list);
    
    if(res === true) break;
  }
}

forEach([1, 2, 3], console.log);
forEach(new Set([1, 2, 3]), console.log);
forEach(new Map([[1, 1], [2, 2], [3, 3]]), console.log);
forEach('123', console.log);
forEach({ a: 1, b: 2, c: 3 }, console.log);
    

Код функции на Github

22. Обязательные аргументы функций

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

required-arguments.js
        function required(argName = 'param') {
  throw new Error(`"${argName}" is required`)
}

function iHaveRequiredOptions(arg1 = required('arg1'), arg2 = 10) {
  console.log(arg1, arg2)
}

iHaveRequiredOptions(); // "arg1" is required
iHaveRequiredOptions(12); // 12, 10
iHaveRequiredOptions(12, 24); // 12, 24
iHaveRequiredOptions(undefined, 24); // "arg1" is required
    

Код функции на Github

23. Создание модулей и синглтонов

Иногда вам требуется какой-то глобальный для всей программу объект – синглтон. Можно долго спорить о том, насколько эта практика хороша, но полезно знать, как сделать это на JavaScript.

Используйте IIFE-выражение. Это функция, которая вызывается сразу же после создания. Внутри нее создается новый контекст выполнения, а значит, там можно легко изолировать все, что должно быть изолированным.

singletone.js
        class Service {
  name = 'service'
}

const service = (function(S) {
  // здесь может быть подготовка данных
  // или любые другие действия для инициализации сервиса
  const service = new S();
  return () => service;
})(Service);

const element = (function(S) {
  const element = document.createElement('DIV');
  // здесь могут быть любые действия с DOM
  // например, инициализация js-плагинов
  return () => element;
})();
    

24. Глубокое копирование объектов

Для многоуровневого копирования объектов часто подключаются сторонние библиотеки (например, lodash). Однако эту задачу легко решить в JavaScript с помощью несложной рекурсивной функции. На каждом уровне она клонирует объекты с помощью их конструктора и копирует все поля.

deep-clone.js
        const deepClone = obj => {
  let clone = obj;
  if (obj && typeof obj === "object") {
    clone = new obj.constructor();
    
    Object.getOwnPropertyNames(obj).forEach(
      prop => (clone[prop] = deepClone(obj[prop]))
    );
  }

  return clone;
};
    

Код функции на Github

25. Глубокая заморозка объектов

Неизменяемость данных – важная часть функциональной парадигмы программирования. В JavaScript есть метод freeze, позволяющий “заморозить” объект, однако он действует лишь на один уровень в глубину. Для глубокой заморозки нужна рекурсия:

deep-freeze.js
        const deepFreeze = obj => {
  if (obj && typeof obj === "object") {
    if(!Object.isFrozen(obj)) {
      Object.freeze(obj);
    }
    
    Object.getOwnPropertyNames(obj).forEach(prop => deepFreeze(obj[prop]));
  }

  return obj;
};
    

Код функции на Github

Репозиторий со всеми сниппетами

16
Ноя
2020

👨‍💻 Самые востребованные в России ИТ-профессии

Разбираемся по вакансиям на HH.ru, какие специалисты в сфере ИТ нужны работодателям в 2020 году. Выделим четыре наиболее популярных профессии и определим требующийся для резюме технологический стек.

В этом году количество предложений о работе в сфере информационных технологий значительно увеличилось. По итогам первых трех кварталов отрасль занимает 2 место по размещенным вакансиям (на первом традиционно – «Продажи»). Рынок труда в ИТ развивается быстрее общего рынка труда. Декрет о цифровой экономике, развитие технологий, популярность стартапов – все это положительно влияет на индустрию.


Пандемия не обошла стороной ИТ. Впервые за долгое время конкуренция установилась на уровне 4-х резюме на 1 вакансию. По этой причине соискателю необходимо определиться с наиболее востребованными профессиями и необходимым для резюме технологическим стеком, чтобы работодатели захотели с ним сотрудничать.

Перед вами наиболее востребованные специализации, предоставленные сайтом HH.ru в 2020 году.


Разберем первые четыре позиции из этого списка, которые перевалили барьер в 4%.


1. Quality Assurance engineer

QA engineer – это специалист по обеспечению качества, деятельность которого направлена на улучшение процесса разработки ПО и выявление ошибок в работе продукта.

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

В нашей стране различия между должностями QA и тестировщика смазаны, и на практике это одно и то же лицо.

Какие задачи решает QA?

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

Какие навыки требуются QA?

Чтобы стать QA, нужно понимать цикл разработки ПО, изучить теорию и основные инструменты тестирования, иметь хороший уровень английского. Желательно изучить HTML, SQL, CSS – на базовом уровне. Также необходимо иметь широкий ИТ-кругозор, быть внимательным к деталям, обладать аналитическими способностями, уметь моделировать и работать с абстракциями.

Каков самый важный навык?

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


2. Java-разработчик

Java – универсальный объектно-ориентированный язык программирования, который используется в создании веб-приложений (серверной части), мобильных приложений под Android, облачных хранилищ данных, компьютерных игр и т. д.

Что нужно знать?

Java-разработчик должен знать базовые вещи: машинная математика, переменные и типы данных, условные конструкции, логические операции, циклы, методы и т.п. Далее идут более продвинутые темы: коллекции, карты (Map), основы вывода (IO, NIO), методы работы со строками (StringBuilder, StringBuffer), регулярные выражения, Date API, рефлексия и многое другое.Помимо теоретических знаний, у вас должны быть сформированы необходимые навыки написания кода.

Как стать Java-разработчиком?

Совокупность вышеперечисленных разделов Java + ООП в среде джавистов называется Java Core (от англ. “core” – ядро). Если вы хотите освоить эту профессию, начинать нужно именно с ядра.

Также стоит изучить одну из систем управления базами данных (СУБД). Это может быть MySQL или PostgreSQL. Часто работодатели ищут людей со знаниями Hibernate (фреймворк, для работы с ООП и БД) и MVC(Model-View-Controller – паттерн для ускорения разработки проектов)


3. PHP developer

PHP (Hypertext Preprocessor) – скриптовый язык, активно используемый для создания серверной части интернет-ресурсов.

Что нужно знать?

Если вы твёрдо намерены устроиться на должность PHP-разработчика, то первое, что нужно будет изучить – принципы работы протокола HTTP и сервера DNS. Далее пойдут основы языка и знакомство с возможностями последних его версий. Надо будет уметь настраивать веб-серверы Nginx и Apache, а также знать MySQL. PHP и HTML очень тесно связаны, так что знание языка разметки – обязательно.

Каковы дополнительные скилы?

Часто компании требуют от соискателя следующие знания и навыки:

– понимание паттерна MVC;

– владение английским на уровне чтения;

– умение работать с менеджером зависимостей Composer;

– знание Docker и Vagrant

– опыт работы с системой контроля версий Git

– опыт проектирования REST API

– опыт работы с веб-фреймворками (Yii, Laravel, Symfony).


4. Frontend-developer

Фронтенд-программист создаёт клиентскую (пользовательскую) часть интернет-ресурса в тестом сотрудничестве с дизайнерами.

Что нужно знать?

Фундаментальными технологиями для фронтенд-разработки являются HTML (для создания структуры страницы), CSS (для стилизации) и JavaScript (для динамики). Также следует разбираться с инструментами, повышающими продуктивность разработки клиентской части:

– CSS препроцессоры Less, Sass, Stylus;

– HTML постпроцессоры Pug, Blade;

– сборщики Webpack, Gulp, Grunt;

– система контроля версий Git

– графические редакторы Photoshop, Figma;

– использование сетки Bootstrap.

Каковы дополнительные скилы?

Очень часто от соискателей требуют опыта работы с популярными СMS(Wordpress, Joomla, Bitrix).

Отдельно хочется сказать про библиотеки JS: Angular, Backbone, Ember и React. Они предоставляют готовую структуру вашего JavaScript кода. Существуют различные типы фреймворков под разнообразные нужды, однако четыре вышеупомянутых являются самыми популярными в списке требований при приеме на работу в 2020 году.

Заключение

Если говорить о конкретной профессии, больше всего сейчас требуется инженеров QA, но в списке направлений лидирует веб-разработка (если посчитать суммарно вакансии по фронтенду и бэкенду на PHP, Java, JavaScript и т. д.). Порой работодатели пишут в требованиях все известные им стеки технологий от А до Я. Посмотрев на запросы компании, люди начинают сомневаются в своих способностях, не владея и половиной умений из списка. Никогда не теряйте самообладание и пробуйте продвигать свою кандидатуру в понравившиеся компании. Обязательно найдётся фирма, которая оценит ваш профессиональный уровень по достоинству.

***

Если вы только начинаете путь в ИТ, стоит присмотреться к учебным курсам по веб-разработке онлайн-академии GeekBrains. Начав с основ, здесь можно получить необходимые для старта карьеры знания. Актуальная программа, 2 – 3 вебинара в неделю и 2 месяца стажировки. Под руководством опытных преподавателей студенты наработают необходимую для дальнейшего развития базу и получат помощь в трудоустройстве.

11
Ноя
2020

👶 🌍 10 советов начинающему веб-разработчику

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

Называющие веб-разработку нетяжелым трудом, имеют в виду, что вам не придется таскать тяжести. Однако если вы только начинаете этим заниматься, возникает множество сложностей. Что стоит изучить в первую очередь? Что надо знать и уметь на старте? Какие инструменты использовать? Давайте разберем все по порядку.

Итак, мои 10 советов новичку: сначала теоретических

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

1. Ставьте конкретные цели

Один из самых распространенных запросов в поисковике: «Какой язык программирования выучить?» Вопрос понятный, но неправильный. Первый вопрос, который действительно должен быть задан: «Для чего мне учиться кодить?» Хотите ли вы разрабатывать мобильные приложения или создавать сайты для малого бизнеса, нужно четко понимать конечную цель. Так вам будет легче изучать материал и не потратить время впустую.

2. Не торопитесь: это марафон, а не спринт

Многообещающая реклама дает людям очень оптимистичную картину того, как легко попасть в IT-индустрию. Нужно всего пару месяцев, чтобы стать востребованным специалистом. Да, возможно вам быстро удастся постичь азы веб-разработки, но опыт и понимание всех нюансов профессии придут нескоро. Будьте готовы к тому, что вам понадобится год и более времени, чтобы добраться туда, куда вы хотите.

3. Двигайтесь медленно, но уверенно

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

4. Умейте быстро находить решения

Умение самостоятельно решать проблемы – один из самых важных навыков разработчика. Вы можете подумать, что опытные программисты знают ответы на все вопросы. Это совсем не так! Они могут знать некоторые вещи наизусть, но есть многое все-таки ищут в Google. Если вначале на поиск ответов вам может понадобиться 3 часа, то в следующий раз на это уйдет гораздо меньше времени. Научившись исправлять наиболее часто встречающиеся проблемы вы станете более быстрым и эффективным.

5. Подкрепляйте теорию практикой

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

6. Будьте готовы к неудачам

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

7. Никогда не прекращайте учиться

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

Перейдем к практическим советам

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

8. Изучите верстку и программирование

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

Для управления элементами сайта и контроля взаимодействия с интерфейсом необходим Javascript. Он отвечает за динамическую часть страницы: анимации, отображение данных, обработку действий пользователя и много чего еще. К примеру, встроенные в браузер API тоже построены на основе языка JavaScript.

Процесс становления веб-разработчика не заканчивается изучением только нативного JS, поскольку фреймворки и библиотеки ускоряют процесс программирования. Новичку не стоит сразу же стремиться к такому ускорению. Лучше всего начинать в вакууме, избегая всех дополнительных ресурсов до тех пор, пока вам не станет удобно со стандартным языком. Хотя некоторые специалисты считают использование фреймворков жульничеством, не обращайте внимания на эти нелепые обвинения. Стоит изучить хотя бы самые популярные из них: react.js, vue.js и angular.js.

Если же вы решили заняться бэкэндом, придется выучить PHP, Python, Ruby, C# или NodeJS (JavaScript). Здесь тоже сложно обойтись без облегчающих взаимодействие с сервером фреймворков и библиотек.

9. Используйте внешние ресурсы

Используйте веб-песочницы Codepen или Jsfiddle. Там можно протестировать куски проекта, а также посмотреть готовые решения с открытым кодом. Также есть хорошая статья о бесплатных ресурсах для создания веб-интерфейсов. Там все технологии собраны в один список для вашего удобства. Посмотрите – не пожалеете.

10. Придерживайтесь методологии и комментируйте

Используйте одну методологию и обязательно комментируйте код. Постарайтесь выработать собственный стиль его написания – так и вам будет легче и после вас люди смогут разобраться с программой. Можете быть уверены – за грамотные комментарии вас впоследствии никто не проклянет.

***

Прокачайте уровень

Если вы только начинаете осваивать профессию, стоит обратить внимание на курс по веб-разработке от Geek Brains и Mail.ru. Начав с основ, здесь можно получить необходимые для старта карьеры знания. Актуальная программа, 2 – 3 вебинара в неделю и 2 месяца стажировки. Под руководством опытным преподавателей студенты наработают необходимую для дальнейшего развития в сфере IT базу и получат помощь в трудоустройстве.

09
Ноя
2020

🎨 22 тенденции веб-дизайна в 2020 году, о которых нужно знать

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

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

В конце концов, быть в курсе возникающих или развивающихся тенденций жизненно важно, если хочешь оставаться на вершине горы. Так какие же эти новые тренды? Что сработает лучше всего в 2020?

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

1. Hero Images и Headers

Давайте начнем с самого простого. Использование Hero Images является популярным направлением в веб-разработке. Hero Images – это большие баннеры, расположенные в верхней части главной страницы сайта (или любой другой, но обычно размещают именно на главной), которые могут быть как динамическими, так и статичными.

Ниже приведен пример с официального сайта Samsung с одним из последних трендов веб-дизайна 2020 года:


Hero Images – это отличный способ привлечь потенциальных покупателей, фон в таком случае становится объектом внимания и перестает быть серым.

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

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

2. Пустое пространство и минималистичный дизайн

Минимализм сейчас в моде, и это касается не только веб-сайтов, но и остального мира в целом. Чем меньше контента, тем лучше, и чем его больше, тем более беспорядочным он становится.

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

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

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

Если хотите применить этот подход в веб-дизайне на практике, взгляните на пример от Squarespace:


Несмотря на наличие на главной странице пустого пространства, она по-прежнему смотрится элегантно и привлекательно.

3. Эмоциональный дизайн

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

Новым трендом стало построение эмоциональной связи с пользователем через веб-дизайн. Для этого примеряются вызывающие яркие эмоции изображения (прямо как эмодзи).

Люди часто называют их “связующими”, и в результате даже не замечают, как втянулись:


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

Интересные идеи дизайна главной страницы и веб-интерфейса в целом применяются везде, где только можно, это касается обратной связи, отзывов, параметров страницы и т.д.

4. Динамический скроллинг

Динамическая прокрутка набирает обороты, и все крупные компании движутся в этом направлении. Причина проста: чем привлекательнее смотрится веб-сайт, тем красивее продукт. С запуском Note 20 в августе этого года, я решил зайти на сайт Samsung, чтобы посмотреть спецификации смартфонов и Galaxy Watch 3.

Я был удивлен тем, как они презентовали свой продукт с использованием динамического скроллинга. То же самое наблюдалось на презентации Apple в сентябре. Взгляните:


5. Градиент 2.0

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

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

Пользователи по всему миру тепло приняли нововведение. Оно позволяет сделать веб-сайт менее скучным и более привлекательным:


6. Темный интерфейс

Темная тема стала трендом практически в каждом приложении. Она есть в WhatsApp и Skype, Gmail, Facebook, YouTube и во многих других приложениях.

Это стало настолько обыденным, что некоторые компании начали добавлять dark mode в свои последние обновления. Темная тема даже глазам дает отдохнуть! Так почему не применить ее в веб-дизайне?

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

Для максимального эффекта нужны контрастирующие цвета с оттенком: к примеру, #000000 идеально сочетается с #FFFFFF или желтым и так далее.

Представленный на скриншоте веб-сайт пояснит, что я имею в виду:


7. Scroll-generated веб-сайты

Scroll-generated веб-сайты (прим. переводчика – “основанные на скроллинге”) – один из последних трендов, подхваченных веб-дизайнерами.

Название может показаться схожим с динамическим скроллингом (англ. Dynamic scrolling) и сбить вас с толку, но на деле это разные понятия. Scroll-generated веб-сайт работает следующим образом: элементы сайта зависят от прокрутки и появляются во время скроллинга.

Когда же мы говорим о динамическом скроллинге, то в данном случае весь контент изначально присутствует на странице, и все, что нам нужно, это прокрутить до него.

Чтобы стало более понятно, взгляните на представленный ниже скриншот веб-сайта:


8. Интерактивные курсоры

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

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

Для лучшего понимания взгляните на веб-сайт ниже:


9. 3D-дизайн

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

Так как в последнее время люди стали использовать более высокоскоростное интернет-соединение, веб-разработчики начали запускать трехмерные веб-сайты. При правильном использовании 3D-дизайн будет смотреться привлекательно и реалистично.

Прекрасный пример веб-сайта на скриншоте ниже:


10. Оптимизированная навигация

Навигационный контент может располагаться не только в области специальной панели, но и по всей странице. Обеспечение упрощенной навигации с другими тенденциями веб-дизайна 2020 года делает сайт привлекательным и позволяет пользователю исследовать его целиком, поскольку навигация – уже не просто текст в заголовке.

Для вдохновения взгляните на скриншот сайта Bikebear:


11. Фокус на улучшении UI и UX

Разработка новых фреймворков и улучшение существующих привело к появлению оснащенных UI/UX красочных веб-сайтов. На фоне таких сайтов, другие стали отставать.

В 2018 году интернет охватила волна модернизации UI и UX. Люди сфокусировались на дизайне настолько, что кто-то построил на этом карьеру. Причина проста: UI отвечает за привлекательность сайта, UX – за удобство для пользователя.

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

Ниже представлен скриншот с LambdaTest:


12. Большие жирные шрифты

Крупные и жирные шрифты на Hero Image ворвались в тренды с прошлого года. Они привлекают внимание и передают вложенный вами посыл. Такие шрифты легко разместить, а чтобы они лучше смотрелись, поработайте над цветовым контрастом и тенью.

Пример того, как применить это на практике, представлен ниже:


13. Художественные иллюстрации

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

Это один из наиболее популярных трендов 2020 года в веб-дизайне. Такие иллюстрации можно часто наблюдать в различных видео типа TED, музыкальных клипах и т.д. Можно сказать, что они твердо и уверенно идут вперед.

Ниже представлена демонстрация от Lisa Glanz:


14. Сеточный дизайн

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

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

Лучший пример – Pinterest:


15. Слияние фотографии с графикой

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

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

В качестве примера для демонстрации я выбрал Wix:


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

16. Анимация, запускаемая пользователем

Часто анимация отображается на сайте через @keyframes и другие фреймворки, вроде anime.js. Суть тренда заключается в использовании анимации через взаимодействие с пользователем.

Такой подход завлекает посетителя и в целом улучшает user experience.

Этот сайт показывает удачный пример запускаемой пользователем анимации:


17. Плавающие элементы

Плавающие элементы можно рассматривать как дополнение трехмерных компонентов, о которых мы говорили ранее. Элемент “парит в воздухе” – таким образом создаются увлекательные изображения и шаблоны в веб-дизайне.

99designs используем в качестве демонстрации:


18. Истории с графикой

Отзывы всегда были неотъемлемой частью покупок, и все мы зачастую прочитаем пару-тройку, выбирая товар. А вы знали, что отзыв клиента о товаре может рассказать целую историю?

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

Истории с графикой могут вывести завлечение читателей на новый уровень.

Сайт, используемый в качестве демонстрации, – Apple:


19. Графики данных на веб-сайтах

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

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

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

Для демонстрации использован сайт Uber:


20. Черное и белое

Сочетание черного с белым – неизменно актуальная комбинация. И это касается не только веб-сайтов, но и фотографий, эскизов, настенных росписей, наручных часов и т.д. Черно-белые комбинации очень приятны для глаз. Возможно из-за контрастирующих элементов, о которых мы говорили выше. Использование черно-белой цветовой гаммы на сайте (с оттенками черного) – новый тренд в веб-дизайне 2020 года, и похоже, он будет популярным и в будущем.

В качестве примера сайта я использовал Dribbble:


21. Геометрические фигуры и узоры

Геометрические формы помогают веб-дизайнерам создавать что-то захватывающее и мощное из обычного изображения.

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

Используемый для демонстрации сайт отражает истинную красоту геометрических фигур и паттернов:


22. Эксперименты с иллюстрациями

Вы скорее всего понимали, что иллюстрации становятся горячей темой в тенденциях веб-дизайна 2020 года и экспериментировании.

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

Прекрасным примером служит приведенный ниже веб-сайт:


Заключение

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

Статья публикуется в переводе. Автор оригинального текста Harish Rajora.

***

Дизайн и веб-разработка – близнецы-братья. Многие талантливые frontend-программисты начинали свой путь в профессии как дизайнеры. Если вы планируете сменить специализацию или задумываетесь о дополнительных навыках, обратите внимание на курс онлайн-академии GeekBrains. Начав с основ, вы пройдете стажировку в реальной команде и удачно обновите резюме.

30
Окт
2020

💰 Сколько получает веб-разработчик после обучения

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

Более 14 000 вакансий на HH.RU и почти 17 000 заказов для фрилансеров на Upwork – таков спрос на веб-разработчиков в ноябре 2020 г. Выбрав эту профессию, вы можете не сомневаться в своей востребованности, но денежный вопрос – один из главных в начале карьеры. Чтобы ответить на него, мы написали эту статью.

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

Если вы только знакомитесь с веб-разработкой, вначале прочитайте гайд по профессии.

Откуда цифры

Данные о зарплате веб-разработчиков взяты с карьерных сайтов:

  1. HeadHunter – крупнейший ресурс, который может служить ориентиром для всех профессий;
  2. Superjob – вторая площадка по количеству айтишников;
  3. Хабр Карьера – доска с предложениями только в IT.

Ставки для фрилансеров смотрели на Upwork – известной международной базе заказов. Там часто указывают оплату за час работы, а не за весь проект: проще сравнивать с окладом в офисе. Если вы сидите на другой площадке и получаете меньше – знайте, где еще стоит зарегистрироваться =)

Статистика актуальна по состоянию на начало ноября 2020 г.

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

Уровни специалистов

Как во многих других специальностях, вакансии в веб-разработке делятся на три уровня: Junior, Middle, Senior. Чтобы было понятнее, к какому уровню себя отнести, опишем их особенности.

Junior

Знает языки программирования и пишет несложный рабочий код, который проверяют старшие коллеги. Опыта мало – 0-1,5 года. Пока не представляет процесс разработки целиком, выполняет полученные задания.

Middle

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

Senior

Стаж от 4 лет, но важнее богатый реальный опыт. Видит разработку с точки зрения всех участников: от менеджеров до младших коллег. Способен предлагать глобальные решения – например, смену набора (стека) технологий. Часто занимает руководящую должность.

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

Доход веб-разработчиков, окончивших обучение

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

PHP

Язык, на котором работает 79% всего интернета. Разрабатывался специально для создания сайтов, поэтому легко изучается и хорошо подходит именно для этой цели. Совместим со всеми основными платформами и языками, включая HTML, SQL и JavaScript. На PHP часто пишут готовые «движки» сайтов – ему всегда есть применение.

Подробнее…

В офисе:

Junior – 15 000 руб. – 100 000 руб.

Middle – 30 000 руб. – 230 000 руб.

Senior – 65 000 руб. – 315 000 руб.

На фрилансе:

Junior – $3/час – $25/час

Middle – $12/час –$75/час

Senior – $16/час –$100/час

***

JavaScript

Язык для создания динамического контента. Все, что меняется на сайте без перезагрузки страницы – обычно пишется на JavaScript. Всплывающие подсказки, «живой» поиск, выпадающие меню, слайдеры, анимация и т.п.

Позволяет разработать клиентскую (внешнюю) и серверную (внутреннюю) часть сайта. А с помощью платформы Node.js – даже писать десктопные приложения. Входит в «большую тройку» языков, которые должны знать все веб-разработчики – HTML, CSS, JavaScript.

Подробнее…

В офисе:

Junior – 15 000 руб. – 120 000 руб.

Middle – 40 000 руб. – 340 000 руб.

Senior – 100 000 руб. – 460 000 руб.

На фрилансе:

Junior – $3/час – $25/час

Middle – $13/час –$40/час

Senior – $20/час –$100/час

***

Python

Пожалуй, простейший для изучения незнакомыми с программированием людьми язык. Создан для написания короткого кода. На нем реализовано множество программ: он использовался в редакторе изображений GIMP и игре World of Tanks.

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

Подробнее…

В офисе:

Junior – 25 000 руб. – 170 000 руб.

Middle – 40 000 руб. – 280 000 руб.

Senior – 120 000 руб. – 306 000 руб.

На фрилансе:

Junior – $5/час – $35/час

Middle – $15/час –$50/час

Senior – $15/час –$100/час

***

Go

Go, он же Golang – быстро набирающий популярность язык программирования, нацеленный на производительность. Хороший компромисс между читаемостью и эффективностью для компьютеров.

Многопоточный, на нем можно быстро запустить сайт, и для многих стандартных функций существуют готовые пакеты. Go несложно освоить, но он отличается от других объектно-ориентированных языков вроде C++ или Python. Чаще используется в крупных дорогих проектах.

Подробнее…

В офисе:

Junior – 30 000 руб. – 80 000 руб.

Middle – 55 000 руб. – 260 000 руб.

Senior – 90 000 руб. – 697 000 руб.

На фрилансе:

Junior – $7/час – $35/час

Middle – $20/час –$100/час

Senior – $20/час –$125/час

***

Java

Самый известный язык программирования в мире. Две основные сферы применения – веб-разработка и приложения под Android. По популярности конкурирует с Python; тоже кросс-платформенный, но с более строгим синтаксисом. Поэтому с Java комфортнее опытным кодерам, чем начинающим. Также используется в больших бизнес-проектах – например, в информационных системах банков.

Подробнее…

В офисе:

Junior – 28 000 руб. – 140 000 руб.

Middle – 50 000 руб. – 290 000 руб.

Senior – 50 000 руб. – 351 000 руб.

На фрилансе:

Junior – $3/час – $25/час

Middle – $5/час –$30/час

Senior – $27/час –$70/час

***

Ruby

Благодаря фреймворку Rails язык общего назначения Ruby стал применяться в веб-девелопменте. Создавался, чтобы «сделать программистов счастливыми»: лаконичен и прост для понимания, если разобраться.

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

Подробнее…

В офисе:

Junior – 20 000 руб. – 140 000 руб.

Middle – 50 000 руб. – 275 000 руб.

Senior – 100 000 руб. – 510 000 руб.

На фрилансе:

Junior – $5/час – $20/час

Middle – $12/час –$60/час

Senior – $20/час –$100/час

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

Вывод

Веб-разработчик – высокооплачиваемая специальность. При этом стартовый доход и скорость карьерного роста сильно зависят от выбранного языка программирования.

Так, в одних языках Junior получает больше, но на уровне Senior «потолок» ниже. Некоторые специалисты чаще востребованы на фрилансе, в то время как других хантят крупные компании.

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

А если уже выбрали свой путь веб-разработчика и готовы начать обучение – записывайтесь на курс Веб-разработчик онлайн-академии GeekBrains! Начав с основ, вы пройдете стажировку в реальной команде и удачно дополните резюме.

29
Окт
2020

👨🏼‍💻 История одного разработчика: талантливый джун или как научиться программировать без наставника

У каждого возникает желание кардинально изменить жизнь. Перестать ходить на нелюбимую работу и заняться чем-то действительно стоящим. Однажды я проснулся и решил: «Буду веб-разработчиком и начну получать хорошие деньги».

Сказано – сделано! Прочитал пару умных статей, выбрал язык программирования (спойлер: это оказался JavaScript) и решил выучить его за неделю. Обложившись кучей книжек и открыв в браузере спецификацию, я пытался осмыслить написанное. Поначалу все казалось очень интересным и простым, и мне уже виделось безоблачное будущее на берегу моря с ноутбуком на коленях и коктейлем в руке. С каждой новой темой грезы улетучивались, а в голове оставалась только неструктурированная информация. Если я пытался проявить силу воли, собрать внутренние резервы организма и вызубрить несколько глав, серые клеточки наотрез отказывались что-либо воспринимать.

Фото с сайта pixabay.com
Фото с сайта pixabay.com

Через несколько недель усиленной закачки новых знаний мозг перестал справляться с обилием информации. Оказалось, что самостоятельно я освоил только вывод «Hello world». Почему так произошло? Причина банальна: никто не рассказал мне, как правильно самому изучить сложный материал.

Учимся сами

Профессия разработчика не так проста, как о ней пишут продавцы курсов «JavaScript за 24 часа» или «Освой прибыльную профессию за три дня». Обывателю кажется, будто можно почитать книжку и пойти в программисты, если не повезет устроиться на завод. Это не так. Для самостоятельного освоения языка программирования нужно штудировать теорию и решать примеры по пройденным темам, или разрабатывать какой-нибудь проект, изучая теорию попутно.

В первом случае стоит вести конспект. Даже выполнив действие несколько раз, вы скорее всего его забудете при изучении следующей темы. Бумага запомнит пройденное навсегда, к тому же она стимулирует выработку нужных нейросвязей в головном мозге. Конечно под рукой есть поисковики, но основы все-таки стоит знать назубок.

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

Иллюстрация с сайта pixabay.com
Иллюстрация с сайта pixabay.com

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

Ищем ментора

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

На форумах программистов часто обсуждают поиск наставника. Многим начинающим разработчикам нужен духовный гуру, и некоторым прямо на форуме предлагают помощь. Иногда прошедшие личиночную стадию товарищи дают контакты готовых к менторству людей. Проверенных рецептов нет: найти хорошего тренера по ИТ довольно сложно – это требует много сил, терпения и везения. Разумеется все в ваших руках, а мы лучше поговорим о ситуации, когда ментор уже есть.

Иллюстрация с сайта pixabay.com
Иллюстрация с сайта pixabay.com

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

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

Идем на курсы

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

Иллюстрация с сайта pixabay.com
Иллюстрация с сайта pixabay.com

Альтернатива разрозненным образовательным проектам – платное обучение в онлайн-академии. Занимающихся профессиональной подготовкой через сеть заведений много, но не все они одинаково полезны. Если вам предлагают освоить востребованную профессию в кратчайшие сроки, бегите от таких учителей как можно дальше. Скажем, вводный курс по веб-разработке для новичков не может длиться меньше нескольких месяцев, если заниматься 2 – 4 раза в неделю.

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

Иллюстрация с сайта pixabay.com
Иллюстрация с сайта pixabay.com

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

***

Если вы только начинаете осваивать профессию, стоит обратить внимание на факультет веб-разработки онлайн-университета GeekBrains. Он предлагает студентам один из самых объемных и содержательных учебных курсов для начинающих программистов. На занятиях вы сделаете 4 серьезных работы для портфолио, а также получите возможность стажировки в открытом проекте или стартапе. У популярного образовательного портала есть мощный преподавательский состав и компании-партнеры, которые охотно помогают выпускникам с трудоустройством.

24
Окт
2020

🌐 Собираем портфолио начинающему веб-разработчику

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

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

***

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

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

Что нужно учесть приступая к работе

  1. Проект должен отражать востребованные навыки и быть действительно нужным для клиента или компании. Решайте реальные проблемы через свои проекты. Объясняйте и показывайте – какие.
  2. Показывайте, чем вы хотели бы заниматься в дальнейшем.
  3. Постарайтесь, чтобы ваши работы выглядели оригинально, добавьте что-то необычное.
  4. 5-7 проектов для начала – это неплохо, но если вы делали что-то объемное, может хватить и 3.

Где брать работы для портфолио

1. Вы наверняка делали какие-то проекты в процессе или после обучения. Бесплатные курсы иногда включают их в программу. Такое практикуется, например, в сертификации Free Code Camp или в недорогом курсе Bootcamp от Udemy. Он пропитан практикой, предоставляет возможность общаться с другими студентами и получать фидбек.

2. Сделайте сайт-визитку и реализуйте там интересные фичи:

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

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

4. Загляните в генераторы челленджей. Например, на Sharpen или Briefz. Просто замените design на develop и пробуйте создавать то, что там предлагается.

5. Стажировки. Если вас не возьмут на работу, вы все равно успеете «прикоснуться к великому» и пополнить портфолио проектом, над которым работали в компании. Даже если не попадете на саму стажировку, скорее всего останется сделанное вами тестовое задание. Его можно доработать и тоже приложить к портфолио (о некоторых других вариантах мы уже писали). Также можно посмотреть вакансии для начинающих на форуме DOU и стажировки в их дайджестах.

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

7. Создайте сайт по бартеру. Можно, например, помочь начинающему дизайнеру с разработкой, чтобы он помог вам с дизайном. Если таких знакомых на примете нет, предлагайте свои услуги на разных платформах: ищите людей, которые предлагают что-то в обмен на разработку. Вот несколько вариантов:

  • группа ВК «По бартеру»;
  • Simbi;
  • Trade Made (приложение, правда только под Android);
  • Swap Right (сразу из объявления понятно, что нужно человеку и что он может дать взамен).

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

  • IT-волонтер – здесь некоммерческие организации публикуют «вакансии» по IT-профессиям.
  • Social Coder пишут, что опыт не важен (но начинающие участники проекта будут помогать более опытным) и ищут именно ИТ-специалистов. Списка задач на выбор здесь нет: для участия нужно зарегистрироваться, рассказать о своем опыте и чем хотите заниматься. После этого вас соединяют с некоммерческой организацией, которая ищет как раз такого человека. В среднем проекты длятся 2 месяца, но бывает по-разному.
  • Volunteermatch – программа, которая специализируется на волонтерских вакансиях.
  • Волонтерские программы ООН для разработчиков.
  • В Free UK Genealogy можно присоединиться к команде разработчиков открытых проектов. Найти совпадающий с вашими интересами несложно.

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

9. Можно помогать и проектам на краудфандинговых платформах. Для этого выбираем любую из них и ищем в Google: создание сайта site:(адрес выбранной вами платформы). Находим какой-нибудь интересный проект, которому требуется разработка сайта, и предлагаем помощь ее создателю. Несколько примеров: на Kickstarter, а также на Mola Mola – раз и два.

10. Копируйте несложные сайты, что-нибудь добавляя, изменяя и улучшая. Попробуйте решить некую проблему или сделать какой-то элемент более удобным. Для вдохновения: Jake Dow-Smith Studio, MCA, TRA, Jonty Davies, Глущенкоиздат, The Storytellers.

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

12. Поработайте над уже существующим открытым проектом. Свое участие в виде скриншотов тоже можно добавлять в портфолио.

На Code Triage собраны проекты c GitHub, которые нуждаются в помощи. Лучше отсортировать их по языку программирования.

Кроме этого подписывайтесь на интересующие вас проекты и получайте уведомления о новых issues на почту: на сайте есть подробная инструкция по взаимодействию с основанными на открытом коде разработками.

На First Timers Only можно посмотреть и другие ресурсы по open source.

Показываем, как выглядят портфолио начинающих веб-разработчиков

  1. Fatma Sümer
  2. Pritika Roy
  3. Ronald, например, добавляет свои работы с курсов.
  4. Ritika Soni
  5. Портфолио Chigbogu на GitHub

Проекты есть. Что дальше?

1. Регулярно пополняйте портфолио свежими работами.

2. Включайте в описание проекта ссылку на репозиторий GitHub, где клиент или работодатель смогут посмотреть ваше решение задачи через код, а не только красивую картинку. Давайте ссылки на Link to your CodePen projects.

3. Опишите, когда и для кого вы делали этот проект (даже если для мамы или в качестве эксперимента), и какие требования предъявлялись к продукту. Читателю нужно понимать, в каком контексте реализовывалось решение.

4. Самые удачные проекты ставьте в начало портфолио.

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

***

Для портфолио стоит искать оригинальные решения реальных проблем, что может оказаться непростым делом. Если вы только начинаете свой путь в профессии, стоит пройти курс факультета веб-разработки онлайн-университета GeekBrains. За время обучения вы сделаете 4 достаточно серьезных работы для портфолио, а также получите возможность стажировки в открытом проекте или стартапе. К тому же у популярного онлайн-университета есть компании-партнеры, которые охотно помогают выпускникам с трудоустройством.

12
Окт
2020

Устали искать подходящие инструменты? Больше это не нужно: мы собрали 50 лучших библиотек для языка программирования PHP!

Если вы хорошо знаете основы ООП, или только пробуете себя…

28
Сен
2020

Расширения браузера Chrome для управления свойствами элементов страницы, необходимые каждому веб-разработчику.

OctoTree

15
Сен
2020

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

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

Базовые технологии

Веб-разработку разделяют на frontend и backend. Frontend отвечает за работу на стороне клиента, корректное отображение веб-страниц на разных типах устройств. Backend всё, что происходит на стороне сервера: вычисления, работа с базами данных, взаимодействие с другими сервисами.

Под Web Developer обычно понимают программиста, который умеет работать и на стороне клиента, и на стороне сервера. Универсального программиста, который может сделать проект с нуля, разбирается в базах данных, конфигурировании сервера, безопасности, называют Full Stack Web Developer. Более узких специалистов – Backend Web Developer и Frontend Web Developer.

Базовые технологии Frontend

HTML – язык разметки страниц, костяк веб-страницы. С помощью HTML мы подключаем JS-скрипты и CSS-стили и определяем элементы страницы: текст, заголовки, поля ввода информации, переключатели и кнопки.

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

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

Базовые технологии Backend

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

PHP. 4500 вакансий по России. Самый популярный язык программирования на стороне сервера: 80% сайтов и сервисов в Интернете написаны на PHP. Язык обладает большим сообществом, огромным количеством готовых библиотек, фреймворков, учебных материалов и руководств. Если вы делаете первые шаги в профессии веб-разработчика, рекомендуем начать с PHP. Язык легок в освоении, используется не только в любительских, но и больших профессиональных проектах: Facebook, VK, Wikipedia, BlaBlaCar. Средняя зарплата 200 000 руб. (здесь и далее зарплаты указаны до вычета НДФЛ).

Java. 2200 вакансий по России. Популярный язык программирования, но с высоким порогом входа. Применяется в средних и крупных проектах. С помощью Java-фреймворка Spring создаются высокопроизводительные, масштабируемые и безопасные приложения. Средняя зарплата 250 000 руб.

Python. 1800 вакансий по России. Язык с низким порогом входа. Дружелюбное комьюнити и развитая документация, пошаговые руководства и видеоуроки позволят быстро прояснить любой вопрос. Наиболее зрелая и популярная технология – фреймворк Django. Python применяют в проектах любого размера, на нем частично написаны такие сервисы, как YouTube, Google Search, Instagram и Spotify. Средняя зарплата 160 000 руб.

Node.js. 1500 вакансий по России. Технология Node.js позволяет строить высоконагруженные, легко масштабируемые решения при помощи языка JavaScript. Если вы уже имеете опыт во фронтенд-разработке, то сможете быстро начать программировать на Node.js. Технологию применяют в проектах, где важна одновременная обработка большого количества запросов. Активно используется компаниями Paypal, Yahoo! и eBay. Средняя зарплата 205 000 руб.

ASP.NET. 1300 вакансий по России. Если вы уже знаете язык C#, то вам подойдет фреймворк ASP.NET. Свои преимущества фреймворк полностью раскрывает только при работе в инфраструктуре Microsoft. Технологию используют Starbucks и StackOverflow. Средняя зарплата 160 000 руб.

Язык/технология Зарплата, тыс. руб Количество вакансий (на 15.09.20) Популярность на GitHub (среди перечисленных технологий) Популярность на StackOverflow, %
PHP 200 4500 3 26.2
Java 250 2200 2 40.2
Python 160 1808 1 44.1
Node.JS 205 1456 4 24.5
ASP.NET 160 1314 5 18.7

Источник статистики по StackOverflow, источник статистики GitHub, статистика по вакансиям взята с hh.ru, статистика по зарплатам предоставлена компанией Hays

Общие технологии продвинутого уровня

Развертывание инфраструктуры

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

  • веб-сервер (например, Nginx или Apache);
  • серверная операционная система: веб-приложения редко работают на Windows или MacOS, отраслевым стандартом является Linux;
  • интерпретатор языка нужной версии – в зависимости от того, какие новые функции языка необходимо использовать или какую версию требует фреймворк;
  • база данных (например, MySQL или PostgreSQL).

Книги по теме:

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

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

Книги по теме:

Наши статьи по теме:

Системы контроля версий

Сложное веб-приложение невозможно за приемлемое время написать одному человеку: для этого необходима команда специалистов, которые разделяют между собой обязанности и ведут распределенную кодовую базу. Для этого используются системы контроля версий, самой распространенной из которых является Git. Знание GIt гарантированно потребуется при трудоустройстве веб-девелопером.

Наши статьи по теме:

Пакетные менеджеры

Вокруг каждого языка программирования и фреймворка сформировалась инфраструктура: библиотеки, расширения, пакеты. Зачем писать собственный http-клиент, если существует хорошо отлаженный пакет с нужным функционалом? Так, в PHP используется composer, в Java – Gradle, в JavaScript и Node.Js – npm, в Python – pip.

Продвинутый Frontend

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

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

Фреймворк Количество вакансий Репозиториев на GitHub Популярность StackOverflow, % Уровень сложности Зависимостей в npm
React 4 280 73 458 35.9 ⭐⭐ 48 718
Angular 2 364 20 142 25.1 ⭐⭐⭐ 13 579
Vue 2 021 21 776 17.3 21 575

Источник статистики по StackOverflow, источник статистики GitHub, статистика по вакансиям взята с hh.ru

Продвинутый Backend

Backend-фреймворки менее разнообразны – обычно есть 1-2 лидера, которые занимают существенную часть рынка, а остальные либо узко специализированы, либо технологически отстают от лидеров. Для PHP такими фреймворками являются Symfony и Laravel, для Java – Spring и JSF, для Python – Django, Pyramid и Flask, для Node.JS – Express.JS, Meteor.JS и Koa.JS.

Ниже представлена сравнительная таблица оценки популярности PHP-фреймворков.

Фреймворк Установок через composer Зависимых проектов Популярность на GitHub Количество вакансий
Laravel 104 726 623 9 548 22 048 1 085
Symfony 52 561 771 3 971 23 880 819
Phalcon 29 504 2 10 232 47
CodeIgniter 773 857 65 18 071 52
Yii 10 393 997 11 540 217 890
CakePHP 6 027 870 1 649 8 234 10
Slim Framework 13 410 045 1 329 10 723 19
Lumen 535 795 53 6 900 45

Данные по количеству вакансий указаны по данным сервиса hh.ru, остальные данные взяты с сервиса packagist.org.

Продвинутый Web Developer: паттерны проектирования

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

Книги по паттернам:

Наши публикации о паттернах:

Практическое освоение технологий

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

Домашние проекты

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

Ресурсы с задачами для программистов

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

Присоединяйтесь к проектам на GitHub

Выберите интересный проект и вносите в него полезные правки, исправляйте ошибки, пишите дополнения к интересующим вас библиотекам или фреймворкам. Это поможет не только развить технические навыки, но и даст понимание практики командной разработки и знакомств в сфере IT. Активный аккаунт на GitHub выгодно выделит вас среди других кандидатов на роль веб-программиста. Вы всегда можете показать, в какие проекты вы отправляли код, и сами примеры кода.

Заключение

Веб-программирование – сложная, но интересная область. Безусловно, можно стать веб-разработчиком и своими силами, но есть и более легкие решения. Например, вы можете пройти курс факультета веб-разработки онлайн-университета GeekBrains. Информация в курсе хорошо структурирована, с вами будет работать личный наставник, а портфолио пополнится 4 актуальными проектами.

Вы узнаете, как профессионально верстать, используя HTML и CSS, научитесь программировать на JavaScript (в том числе используя React). На стороне сервера вы освоите PHP (Laravel) и Node.js (фреймворк Express). Не будут обойдены вниманием базы данных (MySQL) и операционная система Linux. Всё сразу в одном месте. Отличный вариант, чтобы стать настоящим веб-разработчиком за приемлемое время.

21
Авг
2020

Объясняем простым языком, что собой представляют прокси-серверы, какие они бывают и в чем разница между прокси и VPN.

Что такое прокси-сервер

24
Июл
2020

⌨️ Инструкция: как создать форму в React

Показываем на примерах JS-кода, как создать форму с помощью контролируемых или неконтролируемых компонентов React и обработать состояние с помощью React хуков.

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

Вот пример простой HTML-формы:

        <form>  
  <label for="name">Name:</label><br>  
  <input type="text" id="name" name="name" value="John"><br>  
  <input type="submit" value="Submit">  
</form>
    

Давайте рассмотрим, как создаются формы в React.

Как создать форму в React с помощью контролируемых компонентов

Мы знаем, что такие HTML-элементы, как input, запоминают то, что мы вводим. Таким же образом можно использовать состояние компонента React для хранения данных элементов формы. Когда
данные обрабатываются компонентом React, он называется
контролируемым, а функционирование в нем завязано на состоянии компонента, а не
на элементе DOM.

Давайте реализуем форму с помощью контролируемых компонентов, используя следующие элементы HTML: input, radio button, select dropdown.

Создадим компонент с
тегом формы и один input:

        import React, { Component } from "react";  
  
class ControlledFormComponent extends Component {  
  render() {  
    return (  
      <div>  
        <h3>Controlled Component</h3>  
        <br />  
        <form>  
          <label>Student Name: </label>  
          <input type="text" placeholder="enter student name" />  
        </form>  
      </div>  
    );  
  }  
}  
  
export default ControlledFormComponent; 
    

Выглядеть это будет
так:

Контролируемый компонент формы
Контролируемый компонент формы

Создадим состояние в компоненте и повесим событие onChange на input, чтобы изменить
состояние компонента при изменении значения input.

        import React, { Component } from "react";  
  
class ControlledFormComponent extends Component {  
  
  constructor(props) {  
    super(props);  
    this.state = {  
      studentName: ""  
    };  
    this.onNameChangeHandler = this.onNameChangeHandler.bind(this);  
  }  
  
  onNameChangeHandler(e){  
    this.setState({  
      studentName: e.target.value  
    })  
  }  
  
  render() {  
    return (  
      <div>  
        <h3>Controlled Component</h3>  
        <br />  
        <form>  
          <label>Student Name: </label>  
          <input   
              type="text"   
              placeholder="enter student name"  
              onChange={this.onNameChangeHandler} />  
        </form>   
        <hr/>  
        <p>State of Component</p>        
          <pre>{JSON.stringify(this.state, null, 2) }</pre>       
      </div>  
    );  
  }  
}  
  
export default ControlledFormComponent;  
    

Мы создали состояние и
добавили studentName в качестве свойства. После этого добавили обработчик
onChange, который изменит состояние и забиндит его с событием onChange у input.

Таким же образом можно
добавить еще один HTML-элемент и привязать его к состоянию компонента.

Добавим на нашу форму radio button и два новых свойства: пол и штат.

        <label>Gender: </label>  
          <label>Male</label>  
          <input  
            type="radio"  
            name="gender"  
            value="male"  
            checked={this.state.gender === "male"}  
            onChange={this.onChangeHandler}  
          />  
          <label>Female</label>  
          <input  
            type="radio"  
            name="gender"  
            value="female"  
            checked={this.state.gender === "female"}  
            onChange={this.onChangeHandler}  
          />  
          <br />  
          <br />  
          <label>State: </label>  
          <select  
            name="state"  
            value={this.state.state}  
            onChange={this.onChangeHandler}  
          >  
            <option value="Maharashtra">Maharashtra</option>  
            <option value="Madhya Pradesh">Madhya Pradesh</option>  
            <option value="Karnataka">Karnataka</option>  
            <option value="West Bengal">West Bengal</option>  
          </select>  
    

Добавление отдельной
функции обработки событий для каждого элемента – неправильный подход. Создадим для всех событий одну
функцию:

        onChangeHandler(e){  
    this.setState({  
      [e.target.name]: e.target.value  
    })  
  } 
    

Вот так выглядит
готовый компонент:

        import React, { Component } from "react";  
  
class ControlledFormComponent extends Component {  
  constructor(props) {  
    super(props);  
    this.state = {  
      studentName: "",  
      gender: "",  
      state: "Maharashtra"  
    };  
    this.onChangeHandler = this.onChangeHandler.bind(this);  
  }  
  onChangeHandler(e) {  
    this.setState({  
      [e.target.name]: e.target.value  
    });  
  }  
  render() {  
    return (  
      <div>  
        <h3>Controlled Component</h3>  
        <br />  
        <form>  
          <label>Student Name: </label>  
          <input  
            type="text"  
            name="studentName"  
            placeholder="enter student name"  
            onChange={this.onChangeHandler}  
          />  
          <br />  
          <br />  
          <label>Gender: </label>  
          <label>Male</label>  
          <input  
            type="radio"  
            name="gender"  
            value="male"  
            checked={this.state.gender === "male"}  
            onChange={this.onChangeHandler}  
          />  
          <label>Female</label>  
          <input  
            type="radio"  
            name="gender"  
            value="female"  
            checked={this.state.gender === "female"}  
            onChange={this.onChangeHandler}  
          />  
          <br />  
          <br />  
          <label>State: </label>  
          <select  
            name="state"  
            value={this.state.state}  
            onChange={this.onChangeHandler}  
          >  
            <option value="Maharashtra">Maharashtra</option>  
            <option value="Madhya Pradesh">Madhya Pradesh</option>  
            <option value="Karnataka">Karnataka</option>  
            <option value="West Bengal">West Bengal</option>  
          </select>  
        </form>  
        <br />  
        <hr />  
        <p>State of Component</p>  
        <pre>{JSON.stringify(this.state, null, 2)}</pre>  
      </div>  
    );  
  }  
}  
  
export default ControlledFormComponent;  
    
Компонент в действии
Компонент в действии

Использование хуков React

Состояние формы можно
обрабатывать и с помощью хуков. Чтобы хранить состояние в компоненте, существует useState(). Создадим простую форму
с одним инпутом и обработаем ее с помощью хука:

        import React, { useState } from 'react';  
  
export default function ControlledFormWithHook() {  
  const [name, setName] = useState('');  
  
  return (  
    <div>  
      <form>  
        <label>Name:</label>  
        <input type="text" onChange={(e) => setName(e.target.value)} />  
      </form>  
      <br />  
      Name is: {name}  
    </div>  
  );  
}  
    
Форма с использованием хуков
Форма с использованием хуков

Как создать форму в React с помощью неконтролируемых компонентов

Мы знаем, что
HTML-элементы сохраняют собственное состояние и обновляют его при изменении
входного значения. То есть мы можем получить прямой доступ к значению
HTML-элемента без сохранения состояния компонента. Когда данные обрабатываются
элементами DOM, это можно назвать неконтролируемым компонентом. React позволяет напрямую получить ссылку на элемент DOM и хранить в нем состояние компонента.

В некоторых случаях мы
должны использовать неконтролируемый компонент, например, когда хотим добавить выбор файла: <input type="file"/>.

Возьмем тот
же пример и немного
переделаем с помощью React.createRef() API.

        import React, { Component } from "react";  
  
export default function UncontrolledFormComponent() {  
  let inputRef = React.createRef();  
  let name = "";  
  const handleClick = e => {  
    e.preventDefault();  
    alert("Name is: " + inputRef.current.value);  
  };  
  
  return (  
    <div>  
      <h3>Uncontrolled Form Component</h3>  
      <form>  
        <input type="text" ref={inputRef} />  
        <button style={{ margin: "8px" }} onClick={handleClick}>  
          Submit  
        </button>  
      </form>  
    </div>  
  );  
} 
    

Когда вы нажимаете на Submit, открывается alert со значением, которое было
введено в текстовом поле.

Работа с неконтролируемым компонентом
Работа с неконтролируемым компонентом
***

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

В качестве фронтенда на курсе используется React, для бэкенда – PHP и фреймворк Laravel. То есть самые популярные технологии в своих нишах. Курс поможет освоить профессию с нуля, получить диплом и создать портфолио с рабочими проектами, а в случае успешного прохождения команда университета поможет с трудоустройством.

24
Июн
2020

Держим руку на пульсе производительного веба. В этой статье учимся измерять утечки памяти страницы Google Chrome с помощью нового интерфейса performance.measureMemory().

Когда веб-…

16
Июн
2020

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

Puppeteer: не просто
очередная библиотека для парсинга

Puppeteer – это библиотека Node.js, поддерживаемая
командой Chrome
Devtools
.
Библиотека запускает экземпляр Chrome/Chromium и предоставляет набор
высокоуровневых API.

Puppeteer используется для выполнения множества различных задач:

  • автоматизация сбора данных с веб-сайтов;
  • создание скриншотов и PDF-файлов;
  • тестирование расширений Chrome;
  • автоматизация тестирования веб-интерфейсов;
  • диагностика проблем производительности с помощью таких методов, как захват временной шкалы трассировки веб-сайта.

В сравнении с Selenium библиотека Puppeteer не обладает кросс-браузерностью, но часто выигрывает в скорости, так как не имеет промежуточного звена в виде Selenium server – команды идут напрямую в браузер.

В этой статье мы рассмотрим пример сбора данных с одной из страниц Amazon со списком товаров. Извлечем информацию из страницы списка лучших рубашек, поместим в JSON и посмотрим, как эмулировать действия пользователя (поиск товара). Полный код проекта доступен в репозитории.

Исследуемая страница товаров Amazon
Исследуемая страница товаров Amazon

Установка Puppeteer и
навигация

Puppeteer без проблем устанавливается с помощью npm:

        npm install --save puppeteer
    

Создадим экземпляр браузера и страницы, перейдем к целевому
URL-адресу:

        const puppeteer = require('puppeteer');

const url = 'https://www.amazon.in/s?k=Shirts&ref=nb_sb_noss_2';

async function fetchProductList(url) {
    const browser = await puppeteer.launch({ 
        headless: true, // false: enables one to view the Chrome instance in action
        defaultViewport: null, // (optional) useful only in non-headless mode
    });
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle2' });
    ...
}

fetchProductList(url);
    

Назначение экземпляров интуитивно понятно:

  • browser: запускает экземпляр Chrome при вызове puppeteer.launch. Простая эмуляция браузера.
  • page: напоминает одну вкладку в браузере Chrome. Предоставляет набор методов, которые можно применить к конкретному экземпляру страницы/ Вызывается при запуске browser.newPage. Как в браузере можно создать несколько вкладок, так в Puppeteer можно одновременно обрабатывать несколько экземпляров страниц.

В качестве значения параметра waitUntil используем networkidle2 . Это гарантирует, что состояние загрузки страницы считается
окончательным, если она имеет не более 2 подключений, работающих в течение не
менее 500 мс.

Собираем данные со страницы

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

Требуемая структура блока JSON
        {
    brand: 'Brand Name', 
    product: 'Product Name',
    url: 'https://www.amazon.in/url.of.product.com/',
    image: 'https://www.amazon.in/image.jpg',
    price: '₹599',
}
    

Для запроса DOM используем метод page.evaluate() . Для обхода DOM – обычные методы JavaScript document.querySelector и document.querySelectorAll.

        async function fetchProductList(url) {
	...
    
    await page.waitFor('div[data-cel-widget^="search_result_"]');

    const result = await page.evaluate(() => {
        // counts total number of products
        let totalSearchResults = Array.from(document.querySelectorAll('div[data-cel-widget^="search_result_"]')).length;

        let productsList = [];

        for (let i = 1; i < totalSearchResults - 1; i++) {
            let product = {
                brand: '',
                product: '',
            };
            let onlyProduct = false;
            let emptyProductMeta = false;
			
            // traverse for brand and product names
            let productNodes = Array.from(document.querySelectorAll(`div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base`));

            if (productNodes.length === 0) {
                // traverse for brand and product names 
				// (in case previous traversal returned empty elements)
                productNodes = Array.from(document.querySelectorAll(`div[data-cel-widget="search_result_${i}"] .a-size-medium.a-color-base.a-text-normal`));
                productNodes.length > 0 ? onlyProduct = true : emptyProductMeta = true;
            }

            let productsDetails = productNodes.map(el => el.innerText);

            if (!emptyProductMeta) {
                product.brand = onlyProduct ? '' : productsDetails[0];
                product.product = onlyProduct ? productsDetails[0] : productsDetails[1];
            }
			
            // traverse for product image
            let rawImage = document.querySelector(`div[data-cel-widget="search_result_${i}"] .s-image`);
            product.image =rawImage ? rawImage.src : '';
			
            // traverse for product url
            let rawUrl = document.querySelector(`div[data-cel-widget="search_result_${i}"] a[target="_blank"].a-link-normal`);
            product.url = rawUrl ? rawUrl.href : '';

            // traverse for product price
            let rawPrice = document.querySelector(`div[data-cel-widget="search_result_${i}"] span.a-offscreen`);
            product.price = rawPrice ? rawPrice.innerText : '';

            if (typeof product.product !== 'undefined') {
                !product.product.trim() ? null : productsList = productsList.concat(product);
            }
        }

        return productsList;
    });
    
    ...
}
    
...
    

После изучения DOM стало ясно, что каждый
перечисленный элемент выводится с селектором
div[data-cel-widget^="search_result_"].
Данный селектор ищет все теги div с атрибутом data-cel-widget, которые имеют
значение, начинающееся с search_result_. Аналогичным образом исключаем
селекторы со следующими параметрами:

  • total listed items: div[data-cel-widget^="search_result_"]
  • brand: div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base (i обозначает номер узла в total listed items)
  • product: div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base или div[data-cel-widget="search_result_${i}"] .a-size-medium.a-color-base.a-text-normal
  • url: div[data-cel-widget="search_result_${i}"] a[target="_blank"].a-link-normal
  • image: div[data-cel-widget="search_result_${i}"] .s-image
  • price: div[data-cel-widget="search_result_${i}"] span.a-offscreen

Примечание:
мы ожидаем доступа к селектору именованных элементов div
[data-cel-widget^="search_result_"]
с помощью метода page.waitFor.

При запуске метода page.evaluate мы увидим в логе необходимые данные:

Логи запущенного метода
Логи запущенного метода

Имитируем поведение пользователя

Настройка автоматизации
Настройка автоматизации

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

Но что если, прежде чем извлечь данные, мы должны перейти по нескольким URL? Puppeteer умеет имитировать поведение юзера. Перейдем на домашнюю страницу amazon.in и найдем рубашки. Это приведет нас к странице списка продуктов, а оттуда мы сможем извлечь необходимые данные из DOM. Взглянем на код:

        ...

async function fetchProductList(url, searchTerm) {
	...
	await page.goto(url, { waitUntil: 'networkidle2' });

    await page.waitFor('input[name="field-keywords"]');
    await page.evaluate(val => document.querySelector('input[name="field-keywords"]').value = val, searchTerm);

    await page.click('div.nav-search-submit.nav-sprite');
    
    ...
}

fetchProductList('https://amazon.in', 'Shirts');
    

Ждем, пока поле поиска будет доступно, а затем
добавляем searchTerm, переданный с помощью page.evaluate. Переходим на страницу
списка продуктов, эмулируя щелчок по кнопке поиска – получаем желанное.

Некоторые нюансы в
работе

Есть
несколько моментов, с которыми вы можете столкнуться во время работы.

  • Некоторые ресурсы могут заблокировать доступ, если заподозрят странную активность. Для рандомизации user-agent в браузере используйте пакет user-agents:
        const puppeteer = require('puppeteer');
const userAgent = require('user-agents');

...

const browser = await puppeteer.launch({ headless: true, defaultViewport: null });
const page = await browser.newPage();
await page.setUserAgent(userAgent.toString());

...
    
  • Puppeteer не идеален в вопросе производительности. Повысить эффективность можно за счет троттлинга анимации, ограничения сетевых вызовов и т. д.
  • Не забывайте завершать сеанс Puppeteer, закрывая экземпляр браузера с помощью browser.close.
  • Некоторые распространенные операции, такие как console.log() не будут работать внутри методов страницы. Контекст страницы/браузера отличается от контекста ноды, в которой работает приложение.

Собираем всё вместе

Автоматизируем навигацию на странице со списком
продуктов.


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

Заключение

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

16
Июн
2020

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

Puppeteer: не просто
очередная библиотека для парсинга

Puppeteer – это библиотека Node.js, поддерживаемая
командой Chrome
Devtools
.
Библиотека запускает экземпляр Chrome/Chromium и предоставляет набор
высокоуровневых API.

Puppeteer используется для выполнения множества различных задач:

  • автоматизация сбора данных с веб-сайтов;
  • создание скриншотов и PDF-файлов;
  • тестирование расширений Chrome;
  • автоматизация тестирования веб-интерфейсов;
  • диагностика проблем производительности с помощью таких методов, как захват временной шкалы трассировки веб-сайта.

В сравнении с Selenium библиотека Puppeteer не обладает кросс-браузерностью, но часто выигрывает в скорости, так как не имеет промежуточного звена в виде Selenium server – команды идут напрямую в браузер.

В этой статье мы рассмотрим пример сбора данных с одной из страниц Amazon со списком товаров. Извлечем информацию из страницы списка лучших рубашек, поместим в JSON и посмотрим, как эмулировать действия пользователя (поиск товара). Полный код проекта доступен в репозитории.

Исследуемая страница товаров Amazon
Исследуемая страница товаров Amazon

Установка Puppeteer и
навигация

Puppeteer без проблем устанавливается с помощью npm:

        npm install --save puppeteer
    

Создадим экземпляр браузера и страницы, перейдем к целевому
URL-адресу:

        const puppeteer = require('puppeteer');

const url = 'https://www.amazon.in/s?k=Shirts&ref=nb_sb_noss_2';

async function fetchProductList(url) {
    const browser = await puppeteer.launch({ 
        headless: true, // false: enables one to view the Chrome instance in action
        defaultViewport: null, // (optional) useful only in non-headless mode
    });
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle2' });
    ...
}

fetchProductList(url);
    

Назначение экземпляров интуитивно понятно:

  • browser: запускает экземпляр Chrome при вызове puppeteer.launch. Простая эмуляция браузера.
  • page: напоминает одну вкладку в браузере Chrome. Предоставляет набор методов, которые можно применить к конкретному экземпляру страницы/ Вызывается при запуске browser.newPage. Как в браузере можно создать несколько вкладок, так в Puppeteer можно одновременно обрабатывать несколько экземпляров страниц.

В качестве значения параметра waitUntil используем networkidle2 . Это гарантирует, что состояние загрузки страницы считается
окончательным, если она имеет не более 2 подключений, работающих в течение не
менее 500 мс.

Собираем данные со страницы

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

Требуемая структура блока JSON
        {
    brand: 'Brand Name', 
    product: 'Product Name',
    url: 'https://www.amazon.in/url.of.product.com/',
    image: 'https://www.amazon.in/image.jpg',
    price: '₹599',
}
    

Для запроса DOM используем метод page.evaluate() . Для обхода DOM – обычные методы JavaScript document.querySelector и document.querySelectorAll.

        async function fetchProductList(url) {
	...
    
    await page.waitFor('div[data-cel-widget^="search_result_"]');

    const result = await page.evaluate(() => {
        // counts total number of products
        let totalSearchResults = Array.from(document.querySelectorAll('div[data-cel-widget^="search_result_"]')).length;

        let productsList = [];

        for (let i = 1; i < totalSearchResults - 1; i++) {
            let product = {
                brand: '',
                product: '',
            };
            let onlyProduct = false;
            let emptyProductMeta = false;
			
            // traverse for brand and product names
            let productNodes = Array.from(document.querySelectorAll(`div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base`));

            if (productNodes.length === 0) {
                // traverse for brand and product names 
				// (in case previous traversal returned empty elements)
                productNodes = Array.from(document.querySelectorAll(`div[data-cel-widget="search_result_${i}"] .a-size-medium.a-color-base.a-text-normal`));
                productNodes.length > 0 ? onlyProduct = true : emptyProductMeta = true;
            }

            let productsDetails = productNodes.map(el => el.innerText);

            if (!emptyProductMeta) {
                product.brand = onlyProduct ? '' : productsDetails[0];
                product.product = onlyProduct ? productsDetails[0] : productsDetails[1];
            }
			
            // traverse for product image
            let rawImage = document.querySelector(`div[data-cel-widget="search_result_${i}"] .s-image`);
            product.image =rawImage ? rawImage.src : '';
			
            // traverse for product url
            let rawUrl = document.querySelector(`div[data-cel-widget="search_result_${i}"] a[target="_blank"].a-link-normal`);
            product.url = rawUrl ? rawUrl.href : '';

            // traverse for product price
            let rawPrice = document.querySelector(`div[data-cel-widget="search_result_${i}"] span.a-offscreen`);
            product.price = rawPrice ? rawPrice.innerText : '';

            if (typeof product.product !== 'undefined') {
                !product.product.trim() ? null : productsList = productsList.concat(product);
            }
        }

        return productsList;
    });
    
    ...
}
    
...
    

После изучения DOM стало ясно, что каждый
перечисленный элемент выводится с селектором
div[data-cel-widget^="search_result_"].
Данный селектор ищет все теги div с атрибутом data-cel-widget, которые имеют
значение, начинающееся с search_result_. Аналогичным образом исключаем
селекторы со следующими параметрами:

  • total listed items: div[data-cel-widget^="search_result_"]
  • brand: div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base (i обозначает номер узла в total listed items)
  • product: div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base или div[data-cel-widget="search_result_${i}"] .a-size-medium.a-color-base.a-text-normal
  • url: div[data-cel-widget="search_result_${i}"] a[target="_blank"].a-link-normal
  • image: div[data-cel-widget="search_result_${i}"] .s-image
  • price: div[data-cel-widget="search_result_${i}"] span.a-offscreen

Примечание:
мы ожидаем доступа к селектору именованных элементов div
[data-cel-widget^="search_result_"]
с помощью метода page.waitFor.

При запуске метода page.evaluate мы увидим в логе необходимые данные:

Логи запущенного метода
Логи запущенного метода

Имитируем поведение пользователя

Настройка автоматизации
Настройка автоматизации

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

Но что если, прежде чем извлечь данные, мы должны перейти по нескольким URL? Puppeteer умеет имитировать поведение юзера. Перейдем на домашнюю страницу amazon.in и найдем рубашки. Это приведет нас к странице списка продуктов, а оттуда мы сможем извлечь необходимые данные из DOM. Взглянем на код:

        ...

async function fetchProductList(url, searchTerm) {
	...
	await page.goto(url, { waitUntil: 'networkidle2' });

    await page.waitFor('input[name="field-keywords"]');
    await page.evaluate(val => document.querySelector('input[name="field-keywords"]').value = val, searchTerm);

    await page.click('div.nav-search-submit.nav-sprite');
    
    ...
}

fetchProductList('https://amazon.in', 'Shirts');
    

Ждем, пока поле поиска будет доступно, а затем
добавляем searchTerm, переданный с помощью page.evaluate. Переходим на страницу
списка продуктов, эмулируя щелчок по кнопке поиска – получаем желанное.

Некоторые нюансы в
работе

Есть
несколько моментов, с которыми вы можете столкнуться во время работы.

  • Некоторые ресурсы могут заблокировать доступ, если заподозрят странную активность. Для рандомизации user-agent в браузере используйте пакет user-agents:
        const puppeteer = require('puppeteer');
const userAgent = require('user-agents');

...

const browser = await puppeteer.launch({ headless: true, defaultViewport: null });
const page = await browser.newPage();
await page.setUserAgent(userAgent.toString());

...
    
  • Puppeteer не идеален в вопросе производительности. Повысить эффективность можно за счет троттлинга анимации, ограничения сетевых вызовов и т. д.
  • Не забывайте завершать сеанс Puppeteer, закрывая экземпляр браузера с помощью browser.close.
  • Некоторые распространенные операции, такие как console.log() не будут работать внутри методов страницы. Контекст страницы/браузера отличается от контекста ноды, в которой работает приложение.

Собираем всё вместе

Автоматизируем навигацию на странице со списком
продуктов.


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

Заключение

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

16
Июн
2020

Puppeteer: парсинг сайтов с JavaScript

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

Puppeteer: не просто
очередная библиотека для парсинга

Puppeteer – это библиотека Node.js, поддерживаемая
командой Chrome
Devtools
.
Библиотека запускает экземпляр Chrome/Chromium и предоставляет набор
высокоуровневых API.

Puppeteer используется для выполнения множества различных задач:

  • автоматизация сбора данных с веб-сайтов;
  • создание скриншотов и PDF-файлов;
  • тестирование расширений Chrome;
  • автоматизация тестирования веб-интерфейсов;
  • диагностика проблем производительности с помощью таких методов, как захват временной шкалы трассировки веб-сайта.

В сравнении с Selenium библиотека Puppeteer не обладает кросс-браузерностью, но часто выигрывает в скорости, так как не имеет промежуточного звена в виде Selenium server – команды идут напрямую в браузер.

В этой статье мы рассмотрим пример сбора данных с одной из страниц Amazon со списком товаров. Извлечем информацию из страницы списка лучших рубашек, поместим в JSON и посмотрим, как эмулировать действия пользователя (поиск товара). Полный код проекта доступен в репозитории.

Исследуемая страница товаров Amazon
Исследуемая страница товаров Amazon

Установка Puppeteer и
навигация

Puppeteer без проблем устанавливается с помощью npm:

        npm install --save puppeteer
    

Создадим экземпляр браузера и страницы, перейдем к целевому
URL-адресу:

        const puppeteer = require('puppeteer');

const url = 'https://www.amazon.in/s?k=Shirts&ref=nb_sb_noss_2';

async function fetchProductList(url) {
    const browser = await puppeteer.launch({ 
        headless: true, // false: enables one to view the Chrome instance in action
        defaultViewport: null, // (optional) useful only in non-headless mode
    });
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle2' });
    ...
}

fetchProductList(url);
    

Назначение экземпляров интуитивно понятно:

  • browser: запускает экземпляр Chrome при вызове puppeteer.launch. Простая эмуляция браузера.
  • page: напоминает одну вкладку в браузере Chrome. Предоставляет набор методов, которые можно применить к конкретному экземпляру страницы/ Вызывается при запуске browser.newPage. Как в браузере можно создать несколько вкладок, так в Puppeteer можно одновременно обрабатывать несколько экземпляров страниц.

В качестве значения параметра waitUntil используем networkidle2 . Это гарантирует, что состояние загрузки страницы считается
окончательным, если она имеет не более 2 подключений, работающих в течение не
менее 500 мс.

Собираем данные со страницы

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

Требуемая структура блока JSON
        {
    brand: 'Brand Name', 
    product: 'Product Name',
    url: 'https://www.amazon.in/url.of.product.com/',
    image: 'https://www.amazon.in/image.jpg',
    price: '₹599',
}
    

Для запроса DOM используем метод page.evaluate() . Для обхода DOM – обычные методы JavaScript document.querySelector и document.querySelectorAll.

        async function fetchProductList(url) {
	...
    
    await page.waitFor('div[data-cel-widget^="search_result_"]');

    const result = await page.evaluate(() => {
        // counts total number of products
        let totalSearchResults = Array.from(document.querySelectorAll('div[data-cel-widget^="search_result_"]')).length;

        let productsList = [];

        for (let i = 1; i < totalSearchResults - 1; i++) {
            let product = {
                brand: '',
                product: '',
            };
            let onlyProduct = false;
            let emptyProductMeta = false;
			
            // traverse for brand and product names
            let productNodes = Array.from(document.querySelectorAll(`div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base`));

            if (productNodes.length === 0) {
                // traverse for brand and product names 
				// (in case previous traversal returned empty elements)
                productNodes = Array.from(document.querySelectorAll(`div[data-cel-widget="search_result_${i}"] .a-size-medium.a-color-base.a-text-normal`));
                productNodes.length > 0 ? onlyProduct = true : emptyProductMeta = true;
            }

            let productsDetails = productNodes.map(el => el.innerText);

            if (!emptyProductMeta) {
                product.brand = onlyProduct ? '' : productsDetails[0];
                product.product = onlyProduct ? productsDetails[0] : productsDetails[1];
            }
			
            // traverse for product image
            let rawImage = document.querySelector(`div[data-cel-widget="search_result_${i}"] .s-image`);
            product.image =rawImage ? rawImage.src : '';
			
            // traverse for product url
            let rawUrl = document.querySelector(`div[data-cel-widget="search_result_${i}"] a[target="_blank"].a-link-normal`);
            product.url = rawUrl ? rawUrl.href : '';

            // traverse for product price
            let rawPrice = document.querySelector(`div[data-cel-widget="search_result_${i}"] span.a-offscreen`);
            product.price = rawPrice ? rawPrice.innerText : '';

            if (typeof product.product !== 'undefined') {
                !product.product.trim() ? null : productsList = productsList.concat(product);
            }
        }

        return productsList;
    });
    
    ...
}
    
...
    

После изучения DOM стало ясно, что каждый
перечисленный элемент выводится с селектором
div[data-cel-widget^="search_result_"].
Данный селектор ищет все теги div с атрибутом data-cel-widget, которые имеют
значение, начинающееся с search_result_. Аналогичным образом исключаем
селекторы со следующими параметрами:

  • total listed items: div[data-cel-widget^="search_result_"]
  • brand: div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base (i обозначает номер узла в total listed items)
  • product: div[data-cel-widget="search_result_${i}"] .a-size-base-plus.a-color-base или div[data-cel-widget="search_result_${i}"] .a-size-medium.a-color-base.a-text-normal
  • url: div[data-cel-widget="search_result_${i}"] a[target="_blank"].a-link-normal
  • image: div[data-cel-widget="search_result_${i}"] .s-image
  • price: div[data-cel-widget="search_result_${i}"] span.a-offscreen

Примечание:
мы ожидаем доступа к селектору именованных элементов div
[data-cel-widget^="search_result_"]
с помощью метода page.waitFor.

При запуске метода page.evaluate мы увидим в логе необходимые данные:

Логи запущенного метода
Логи запущенного метода

Имитируем поведение пользователя

Настройка автоматизации
Настройка автоматизации

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

Но что если, прежде чем извлечь данные, мы должны перейти по нескольким URL? Puppeteer умеет имитировать поведение юзера. Перейдем на домашнюю страницу amazon.in и найдем рубашки. Это приведет нас к странице списка продуктов, а оттуда мы сможем извлечь необходимые данные из DOM. Взглянем на код:

        ...

async function fetchProductList(url, searchTerm) {
	...
	await page.goto(url, { waitUntil: 'networkidle2' });

    await page.waitFor('input[name="field-keywords"]');
    await page.evaluate(val => document.querySelector('input[name="field-keywords"]').value = val, searchTerm);

    await page.click('div.nav-search-submit.nav-sprite');
    
    ...
}

fetchProductList('https://amazon.in', 'Shirts');
    

Ждем, пока поле поиска будет доступно, а затем
добавляем searchTerm, переданный с помощью page.evaluate. Переходим на страницу
списка продуктов, эмулируя щелчок по кнопке поиска – получаем желанное.

Некоторые нюансы в
работе

Есть
несколько моментов, с которыми вы можете столкнуться во время работы.

  • Некоторые ресурсы могут заблокировать доступ, если заподозрят странную активность. Для рандомизации user-agent в браузере используйте пакет user-agents:
        const puppeteer = require('puppeteer');
const userAgent = require('user-agents');

...

const browser = await puppeteer.launch({ headless: true, defaultViewport: null });
const page = await browser.newPage();
await page.setUserAgent(userAgent.toString());

...
    
  • Puppeteer не идеален в вопросе производительности. Повысить эффективность можно за счет троттлинга анимации, ограничения сетевых вызовов и т. д.
  • Не забывайте завершать сеанс Puppeteer, закрывая экземпляр браузера с помощью browser.close.
  • Некоторые распространенные операции, такие как console.log() не будут работать внутри методов страницы. Контекст страницы/браузера отличается от контекста ноды, в которой работает приложение.

Собираем всё вместе

Автоматизируем навигацию на странице со списком
продуктов.


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

Заключение

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