<?xml version="1.0" encoding="utf-8" ?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:tt="http://teletype.in/" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/"><title>Coding</title><subtitle>Авторский канал программиста для программистов и начинающих.
Здесь можно будет найти интересующую вас литературу, и много фишек в программировании</subtitle><author><name>Coding</name></author><id>https://teletype.in/atom/xcoding</id><link rel="self" type="application/atom+xml" href="https://teletype.in/atom/xcoding?offset=0"></link><link rel="alternate" type="text/html" href="https://teletype.in/@xcoding?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=xcoding"></link><link rel="next" type="application/rss+xml" href="https://teletype.in/atom/xcoding?offset=10"></link><link rel="search" type="application/opensearchdescription+xml" title="Teletype" href="https://teletype.in/opensearch.xml"></link><updated>2026-04-18T23:02:13.596Z</updated><entry><id>xcoding:howbefullstack</id><link rel="alternate" type="text/html" href="https://teletype.in/@xcoding/howbefullstack?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=xcoding"></link><title>Как стать full stack разработчиком</title><published>2021-04-14T08:57:42.972Z</published><updated>2021-04-14T08:57:42.972Z</updated><summary type="html">&lt;img src=&quot;https://teletype.in/files/7a/a3/7aa30222-890c-492c-a469-5083cdcaece3.png&quot;&gt;Design Credits: Vecteezy</summary><content type="html">
  &lt;p&gt;&lt;a href=&quot;https://www.vecteezy.com/&quot; target=&quot;_blank&quot;&gt;Design Credits: Vecteezy&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Итак, вы решили начать путешествие в мир веб-разработки. Но с чего начать обучение? В интернете огромное количество информации о разных технологиях, которые могут пригодиться веб-разработчику.&lt;/p&gt;
  &lt;p&gt;Оригинальный гайд составлен руководителем команды разработчиков. Автор резюмирует свой личный опыт, а также навыки, которые он считает ключевыми для новых членов своей команды.&lt;/p&gt;
  &lt;figure class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://teletype.in/files/7a/a3/7aa30222-890c-492c-a469-5083cdcaece3.png&quot; width=&quot;2812&quot; /&gt;
  &lt;/figure&gt;
  &lt;h2&gt;Что нужно знать&lt;/h2&gt;
  &lt;p&gt;Независимо от намеченного пути и карьерных целей, есть вещи, которые должен знать каждый разработчик:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;strong&gt;Управление версиями кода/Git.&lt;/strong&gt; Любой хороший разработчик, особенно работающий в команде, должен знать, как использовать Git. Нужно знать, как клонировать репозитории, делать коммиты, создавать ветви и проводить слияние кода;&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;Отладка.&lt;/strong&gt; Баги будут всегда, работаете вы над фронтендом или бэкендом. Освойтесь с отладочными инструментами вашей IDE. Кстати, об IDE…&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;IDE.&lt;/strong&gt; Из множества интегрированных сред разработки выберите себе одну и изучите её. IDE — ваш лучший друг, знание её инструментов и горячих клавиш прокачает вас как разработчика. Автор гайда рекомендует VS Code;&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;Методы управления разработкой (Agile/SCRUM/Kanban). &lt;/strong&gt;Вполне вероятно, что, работая в команде, вы столкнётесь с методами управления разработкой, поэтому постарайтесь ознакомиться с их принципами работы.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h2&gt;Фронтенд&lt;/h2&gt;
  &lt;p&gt;Фронтенд разработчик обычно выполняет следующие задачи:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Реализация дизайна с помощью HTML/CSS;&lt;/li&gt;
    &lt;li&gt;Работа с DOM посредством JavaScript;&lt;/li&gt;
    &lt;li&gt;Взаимодействие с API с помощью Fetch API или подобных средств.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Рассмотрим каждый пункт подробнее.&lt;/p&gt;
  &lt;h3&gt;HTML/CSS&lt;/h3&gt;
  &lt;p&gt;Это основа основ фронтенд разработки. HTML используется для размещения элементов на странице, а CSS для оформления этих элементов. От начинающего разработчика ожидают, что он хорошо знаком с этими инструментами. Вот что важно знать:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Создание сайта с помощью HTML;&lt;/li&gt;
    &lt;li&gt;Применение стилей посредством CSS;&lt;/li&gt;
    &lt;li&gt;Различные способы применения CSS в HTML: шаблоны, inline-стили и тому подобное.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Познакомившись с основами, обратите внимание и на продвинутые практики.&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;https://tproger.ru/translations/css-flexbox-grid/&quot; target=&quot;_blank&quot;&gt;CSS Grid и Flexbox&lt;/a&gt; для вёрстки и более удобного размещения элементов;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://tproger.ru/translations/complete-sass-guide/&quot; target=&quot;_blank&quot;&gt;SCSS&lt;/a&gt; для более удобной работы с CSS.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;На сайте &lt;a href=&quot;https://css-tricks.com/&quot; target=&quot;_blank&quot;&gt;css-tricks.com&lt;/a&gt; можно найти всеобъемлющий гайд по CSS.&lt;/p&gt;
  &lt;p&gt;Чтобы попрактиковаться, создайте несколько проектов с помощью CSS/HTML. Не обращайте внимания на JavaScript или API, сосредоточьтесь исключительно на работе со стилями и гипертекстовой разметкой.&lt;/p&gt;
  &lt;h4&gt;Фреймворки&lt;/h4&gt;
  &lt;p&gt;Следующий шаг — знакомство с CSS-фреймворками. По сути это готовые элементы и стили, которые можно использовать в своём проекте. Большинство компаний использует их, чтобы сберечь время своих разработчиков и не изобретать велосипед. Фреймворков огромное количество, подберите себе один по вкусу и изучите его. Обычно они довольно похожи, и, познакомившись с одним, можно легко освоиться и с остальными.&lt;/p&gt;
  &lt;h4&gt;Bootstrap&lt;/h4&gt;
  &lt;p&gt;Автор гайда рекомендует использовать фреймворк Bootstrap. Этот инструмент весьма распространён среди разработчиков.&lt;/p&gt;
  &lt;p&gt;С таким разнообразием фреймворков может показаться, что нет нужды изучать основы CSS/HTML. Однако вполне возможно, что когда-нибудь вам потребуется подправить что-то с учётом особенностей проекта. В этом случае и пригодится знание основ.&lt;/p&gt;
  &lt;h4&gt;Адаптивный дизайн&lt;/h4&gt;
  &lt;p&gt;Важно принимать в расчёт многообразие мобильных устройств. К счастью, использование названных ранее инструментов (Bootstrap, CSS Grid, Flexbox и других) серьёзно облегчает адаптацию проектов.&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;strong&gt;Медиа-запросы.&lt;/strong&gt; Необходимо понимать, как использовать CSS для создания адаптивного дизайна, а также как работать с медиа-запросами. Это позволяет определить, как будут выглядеть элементы на экранах разного размера;&lt;/li&gt;
    &lt;li&gt;Не стоит указывать размер в пикселях. Изображение размером в 100 пикселей всегда будет изображением в 100 пикселей. Для соответствия стандартам адаптивного дизайна следует использовать &lt;code&gt;rem&lt;/code&gt;, &lt;code&gt;vh&lt;/code&gt;, и &lt;code&gt;vw&lt;/code&gt;&lt;strong&gt;.&lt;/strong&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Обычно вы будете разрабатывать приложения, предназначенные и для мобильных устройств, и для больших экранов. Сосредоточьтесь на разработке мобильного дизайна, а адаптировать приложение под большие экраны вы сможете позже, используя медиа-запросы.&lt;/p&gt;
  &lt;h3&gt;JavaScript&lt;/h3&gt;
  &lt;p&gt;JavaScript — язык программирования, используемый в веб-разработке. Если вы хотите успешно работать с фронтендом, вам придётся его хорошо изучить. Конечно, фреймворки есть и здесь, причина для изучения основ та же, что и в случае с CSS/HTML. В перспективе это знание положительно отразится на вашей работе. Фреймворки приходят и уходят, а базовые элементы языка не меняются.&lt;/p&gt;
  &lt;p&gt;Вот тот минимум, который должен знать начинающий JavaScript разработчик:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Объекты, функции, условия, циклы и операторы;&lt;/li&gt;
    &lt;li&gt;Модули;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://tproger.ru/translations/javascript-arrays-best-practices/&quot; target=&quot;_blank&quot;&gt;Массивы&lt;/a&gt; (включая методы работы с ними);&lt;/li&gt;
    &lt;li&gt;Получение данных от программных интерфейсов посредством Fetch API;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://tproger.ru/translations/dom-javascript/&quot; target=&quot;_blank&quot;&gt;Работа с DOM&lt;/a&gt; и использование событий;&lt;/li&gt;
    &lt;li&gt;Async/Await (это не обязательно, но весьма полезно);&lt;/li&gt;
    &lt;li&gt;JSON;&lt;/li&gt;
    &lt;li&gt;ES6+;&lt;/li&gt;
    &lt;li&gt;Тестирование (Jest, Enzyme, Chai и т.д.).&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;От начинающего разработчика не ожидают знания всего этого, но чем больше, тем лучше. Если вы способны написать простое веб-приложение без руководства, можно считать, что вы знаете JavaScript.&lt;/p&gt;
  &lt;p&gt;Если вы на самом деле хотите стать экспертом в JavaScript, полностью понять язык и выделиться из общей массы, вам помогут тематические ресурсы, освещающие сложные темы:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;https://eloquentjavascript.net/&quot; target=&quot;_blank&quot;&gt;Eloquent JavaScript&lt;/a&gt;;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://freecodecamp.org/&quot; target=&quot;_blank&quot;&gt;freeCodeCamp&lt;/a&gt;;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://github.com/getify/You-Dont-Know-JS&quot; target=&quot;_blank&quot;&gt;You Don’t Know JS&lt;/a&gt;.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;С их помощью вы не только лучше изучите особенности JavaScript, но и освоите общие концепции программирования. На самом деле, если вы будете понимать примеры кода, представленные там, вы будете знать больше, чем некоторые старшие разработчики.&lt;/p&gt;
  &lt;p&gt;Некоторые идеи для проектов:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;создать клон игры Супер Марио (вы изучите JavaScript, работу с DOM, использование событий);&lt;/li&gt;
    &lt;li&gt;создать приборную панель, выводящую полученные через API данные, например, для Twitter, GitHub или любого другого ресурса по желанию (вы научитесь работать с API и JSON).&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Не беспокойтесь о том, как это будет выглядеть, сосредоточьтесь на работе с JavaScript, не уделяя особого внимания CSS/HTML. Внешний вид всегда можно поправить позже.&lt;/p&gt;
  &lt;h4&gt;Фреймворки&lt;/h4&gt;
  &lt;p&gt;Существует множество фреймворков для JS, выберите один и хорошенько изучите. Самые популярные на сегодняшний момент — &lt;strong&gt;Angular.js&lt;/strong&gt;, &lt;strong&gt;React.js &lt;/strong&gt;и &lt;strong&gt;Vue.js&lt;/strong&gt;. Все перечисленные инструменты — хороший выбор, и в ближайшее время их разработку сворачивать не намерены.&lt;/p&gt;
  &lt;p&gt;Если вы освоили основы JavaScript и ориентируетесь в фундаментальных понятиях, изучение фреймворков не составит труда. Вам не нужно знать их все, лучше детально понимать работу одного инструмента, чем знать про разные, но на базовом уровне.&lt;/p&gt;
  &lt;h4&gt;React&lt;/h4&gt;
  &lt;p&gt;Этот инструмент может похвастаться мощным бэкграундом от Facebook, многочисленным сообществом, и в настоящее время является самым распространённым в индустрии.&lt;/p&gt;
  &lt;p&gt;Если вы последовали приведённым выше рекомендациям и ознакомились с JavaScript, изучение React должно показаться не слишком сложным. Как начинающему разработчику, вам нужно освоить основные концепции этого инструмента:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Понимание принципов взаимодействия компонентов React;&lt;/li&gt;
    &lt;li&gt;Использование State &amp;amp; Props внутри компонентов;&lt;/li&gt;
    &lt;li&gt;Концепция JSX и её использование для рендеринга HTML-элементов на веб-странице;&lt;/li&gt;
    &lt;li&gt;Обновление компонентов: как и когда это происходит;&lt;/li&gt;
    &lt;li&gt;Использование hooks в React;&lt;/li&gt;
    &lt;li&gt;NPM, &lt;a href=&quot;https://tproger.ru/translations/webpack-from-zero-to-hero/&quot; target=&quot;_blank&quot;&gt;Webpack&lt;/a&gt; и Babel.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Как и в случае в JavaScript, от начинающего разработчика не ожидают досконального знания фреймворка. Для оттачивания навыков можете попробовать реализовать следующие несколько проектов:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Переделать некоторые из своих старых разработок с использованием React;&lt;/li&gt;
    &lt;li&gt;Создать приложение-калькулятор (хороший способ отработать управление состояниями, так как многие из действий пользователя потребуют обновления состояния. Попробуйте использовать React Hooks);&lt;/li&gt;
    &lt;li&gt;Разработать собственные приложения для работы с Twitter, GitHub или новостными лентами. Данные можно получить через публичный API и вывести внутри собственного приложения;&lt;/li&gt;
    &lt;li&gt;Как и раньше, не уделяйте большого внимания внешнему виду, сконцентрируйтесь на работоспособности приложения, обращая внимание на изучение основных концепций React.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h4&gt;Управление состоянием (Redux)&lt;/h4&gt;
  &lt;p&gt;После базовых концепций React изучите Redux. Это фреймворк, предназначенный в основном для управления состояниями и тесно связанный с React. Можете рассматривать его как базу данных, которая содержит в одном месте все состояния вашего веб-приложения и позволяет легко ими управлять.&lt;/p&gt;
  &lt;p&gt;Это сложная система с большим количеством компонентов, поэтому поначалу работа с ней может несколько озадачить. Однако Redux понадобится вам только для работы с большими коммерческими приложениями. Сфокусируйтесь на понимании основ и управлении состояниями с помощью React.&lt;/p&gt;
  &lt;h5&gt;Инструменты разработки&lt;/h5&gt;
  &lt;p&gt;Это инструменты, которые помогут с отладкой React/Redux.&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en&quot; target=&quot;_blank&quot;&gt;React Dev Tools&lt;/a&gt;;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://github.com/zalmoxisus/redux-devtools-extension&quot; target=&quot;_blank&quot;&gt;Redux Dev Tools&lt;/a&gt;.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3&gt;Веб-браузеры&lt;/h3&gt;
  &lt;p&gt;Фронтенд разработчику важно разбираться в веб-браузерах. Самые распространённые — Chrome, Firefox и Microsoft Edge. Вам нужно разбираться в следующих аспектах:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Инструменты отладки (например Chrome DevTools);&lt;/li&gt;
    &lt;li&gt;Работа с хранилищами (локальные, сессионные, куки);&lt;/li&gt;
    &lt;li&gt;Особенности браузеров. Самая серьёзная проблема веб-разработки — поддержка всех браузеров. Просматривайте &lt;a href=&quot;https://whatwebcando.today/&quot; target=&quot;_blank&quot;&gt;whatwebcando.today&lt;/a&gt;, если хотите быть уверенным, что ваш код будет работать во всех нужных браузерах.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3&gt;Развёртывание и размещение&lt;/h3&gt;
  &lt;p&gt;Фронтенд разработчик должен знать, как развернуть веб-приложение на хостинге и управлять им. Это хорошо для вашего портфолио и в конечном итоге для поиска работы. Возможно, имеет смысл использовать управляемые сервисы, позволив кому-то сделать за вас тяжёлую работу. Вот примерный список:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;GitHub Pages;&lt;/li&gt;
    &lt;li&gt;Heroku;&lt;/li&gt;
    &lt;li&gt;Netlify;&lt;/li&gt;
    &lt;li&gt;Digital Ocean;&lt;/li&gt;
    &lt;li&gt;AWS;&lt;/li&gt;
    &lt;li&gt;Firebase.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Каждый из этих сервисов предоставляет базовый бесплатный доступ. Отрицательная сторона их использования в том, что они не предоставляют полный доступ к некоторым функциям, которые могут понадобиться некоторым разработчикам. Например, к службе электронной почты, SSH или FTP. Если вы не понимаете, о чём речь, вероятно, они вам и не понадобятся, и базового доступа будет вполне достаточно.&lt;/p&gt;
  &lt;p&gt;Если вы хотите использовать для проекта домен типа &amp;lt;ваше_имя&amp;gt;.com, можно найти провайдеров, предоставляющих доменные имена с удобным доступом и невысокой ценой.&lt;/p&gt;
  &lt;h2&gt;Бэкенд&lt;/h2&gt;
  &lt;p&gt;Грубо говоря, это место, где хранятся данные, полученные через фронтенд. Например, когда пользователь создаёт твит, тот проходит через сервер и сохраняется в базе данных.&lt;/p&gt;
  &lt;p&gt;Бэкенд разработчики обычно выполняют следующие задачи:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Создание API для фронтенда (обычно с помощью JSON);&lt;/li&gt;
    &lt;li&gt;Разработка проверочной и бизнес-логики;&lt;/li&gt;
    &lt;li&gt;Интеграция со сторонними API;&lt;/li&gt;
    &lt;li&gt;Работа с базой данных.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3&gt;Языки программирования&lt;/h3&gt;
  &lt;p&gt;Существует несколько сотен языков программирования, но не волнуйтесь, основных не так много:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Java;&lt;/li&gt;
    &lt;li&gt;Ruby;&lt;/li&gt;
    &lt;li&gt;Python;&lt;/li&gt;
    &lt;li&gt;JavaScript (Node.js);&lt;/li&gt;
    &lt;li&gt;Go;&lt;/li&gt;
    &lt;li&gt;PHP.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Стоит выбрать один из них и хорошо его изучить. Если вы уже работали с JavaScript, вам может подойти Node.js. С его помощью вы сможете легко разрабатывать REST API, а это одна из тех задач, которые обычно поручают младшему разработчику.&lt;/p&gt;
  &lt;p&gt;Какой бы язык вы ни выбрали, вам нужно будет освоить следующие навыки:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Разработка API;&lt;/li&gt;
    &lt;li&gt;Основы языка (создание функций, использование условий, операторы, переменные и т. д.);&lt;/li&gt;
    &lt;li&gt;Подключение к базе данных;&lt;/li&gt;
    &lt;li&gt;Создание запросов к базе данных;&lt;/li&gt;
    &lt;li&gt;Управление пакетами;&lt;/li&gt;
    &lt;li&gt;Написание тестов.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Если вы решили изучить Node.js, то со многим из этого списка вы уже знакомы. Не пытайтесь выучить всё это сразу, начинающему разработчику это не нужно. Выберите язык, который лучше всего соответствует вашим целям (для веб-разработки подойдут все перечисленные), сконцентрируйтесь на нём и изучите его досконально. Естественно, если вам интересны другие языки (JavaScript довольно сильно отличается от Python), не стесняйтесь удовлетворить своё любопытство и поэкспериментировать с ними.&lt;/p&gt;
  &lt;h3&gt;REST API и JSON&lt;/h3&gt;
  &lt;p&gt;Одна из основных задач бэкенд разработчика — создание качественного REST API. Вам нужно знать:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Что означают различные глаголы и как их применять;&lt;/li&gt;
    &lt;li&gt;Как установить надёжную обратную связь;&lt;/li&gt;
    &lt;li&gt;Как обрабатывать запросы;&lt;/li&gt;
    &lt;li&gt;Как работать с авторизационными запросами;&lt;/li&gt;
    &lt;li&gt;Как создавать документацию к API.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;REST API — мостик между бэкендом и фронтендом, поэтому для вас очень важно понимать, как он работает.&lt;/p&gt;
  &lt;p&gt;JSON — основной язык, используемый для передачи данных посредством REST API. Данные представлены Объектами и Массивами. Если вы уже освоили JavaScript, эта работа покажется вам знакомой.&lt;/p&gt;
  &lt;h3&gt;Базы данных и DevOps&lt;/h3&gt;
  &lt;p&gt;Эти два аспекта относятся к инфраструктуре разработки. Нельзя сказать, что начинающему веб-разработчику понадобятся углубленные знания в этой области, разве что если вы собираетесь заниматься именно вопросами DevOps. Вот базовые знания, которые вам потребуются:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Управление базой данных;&lt;/li&gt;
    &lt;li&gt;Работа с различными платформами для хостинга (AWS, Azure, Google и т.д.);&lt;/li&gt;
    &lt;li&gt;Использование CI/CD (continuous integration and continuous delivery, непрерывная интеграция и непрерывная доставка) и таких инструментов, как Jenkins, GitLab и т.д.;&lt;/li&gt;
    &lt;li&gt;Наблюдение и журналирование.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Возможно, в вашей команде или компании будут другие люди, которые возьмут на себя заботу об этих вещах. Однако это действительно ценный набор навыков, поэтому, если вам любопытно и у вас есть свободное время, изучение баз данных и DevOps может оказаться полезным в перспективе.&lt;/p&gt;
  &lt;h3&gt;Продвинутые навыки&lt;/h3&gt;
  &lt;p&gt;Ниже приведены некоторые темы, на которые стоит обратить внимание уже после освоения основ. Ссылки ведут на англоязычные ресурсы.&lt;/p&gt;
  &lt;h4&gt;Авторизация с помощью JWT/OAuth&lt;/h4&gt;
  &lt;p&gt;Это стандартный &lt;a href=&quot;https://oauth.net/2/&quot; target=&quot;_blank&quot;&gt;подход&lt;/a&gt;, используемый в индустрии для авторизации и аутентификации пользователей.&lt;/p&gt;
  &lt;h4&gt;Шаблоны разработки&lt;/h4&gt;
  &lt;p&gt;Шаблоны разработки — стандартные решения стандартных проблем. Изучение этих шаблонов облегчит вам решение возникающих в процессе работы задач и повысит ваш профессиональный уровень.&lt;/p&gt;
  &lt;p&gt;&lt;a href=&quot;https://github.com/iluwatar/java-design-patterns&quot; target=&quot;_blank&quot;&gt;Примеры&lt;/a&gt; на языке Java и аналогичные &lt;a href=&quot;https://github.com/fbeline/Design-Patterns-JS&quot; target=&quot;_blank&quot;&gt;примеры&lt;/a&gt; на JavaScript.&lt;/p&gt;
  &lt;p&gt;Шаблонов огромное количество, не пытайтесь выучить их все. Ознакомьтесь с ними, и при возникновении конкретной проблемы вы сможете найти подходящее решение.&lt;/p&gt;
  &lt;h4&gt;Progressive Web App и мобильная разработка&lt;/h4&gt;
  &lt;p&gt;Progressive web apps (PWA) — это веб-приложения, которые запускаются на мобильных устройствах, подобно нативным приложениям. Можете изучить этот вопрос в свободное время.&lt;/p&gt;
  &lt;p&gt;Более подробно: &lt;a href=&quot;https://developers.google.com/web/progressive-web-apps/&quot; target=&quot;_blank&quot;&gt;developers.google.com/web/progressive-web-apps/&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Другие возможности:&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;React Native&lt;/strong&gt; — вы можете писать код, который будет компилироваться под Android/IOS.&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Flutter &lt;/strong&gt;— фреймворк с открытым исходным кодом для создания мобильных приложений от компании Google, похожий на React Native, но на языке Dart.&lt;/p&gt;
  &lt;h4&gt;Рендеринг на стороне сервера&lt;/h4&gt;
  &lt;p&gt;Код веб-приложения может обрабатываться на стороне сервера, возвращая в браузер конечный результат. Такой подход имеет свои достоинства, в частности улучшает скорость работы и показатели SEO.&lt;/p&gt;
  &lt;p&gt;Больше почитать можно здесь: &lt;a href=&quot;https://medium.freecodecamp.org/demystifying-reacts-server-side-render-de335d408fe4&quot; target=&quot;_blank&quot;&gt;Demystifying server-side rendering in React&lt;/a&gt;.&lt;/p&gt;
  &lt;h4&gt;Использование командной строки (SSH/Bash и т.д.)&lt;/h4&gt;
  &lt;p&gt;Когда графический интерфейс не доступен, приходится использовать для работы командную строку. Нужно знать как минимум следующие вещи:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Подключение к серверу через &lt;a href=&quot;https://tproger.ru/explain/a-top-down-introduction-to-ssh/&quot; target=&quot;_blank&quot;&gt;SSH&lt;/a&gt;;&lt;/li&gt;
    &lt;li&gt;Перемещение по директориям с помощью команд (&lt;code&gt;cd&lt;/code&gt;, &lt;code&gt;ls&lt;/code&gt;, и прочее);&lt;/li&gt;
    &lt;li&gt;Редактирование файлов с помощью vim (или похожих инструментов. Вот несколько подсказок: &lt;a href=&quot;https://vim.rtorr.com/&quot; target=&quot;_blank&quot;&gt;vim.rtorr.com&lt;/a&gt;).&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Перевод статьи &lt;a href=&quot;https://www.chrisblakely.dev/the-10-minute-road-map-to-becoming-a-junior-full-stack-web-developer/&quot; target=&quot;_blank&quot;&gt;The 10-minute Road Map To Becoming a Junior Full Stack Web Developer&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href=&quot;https://tproger.ru/translations/full-stack-developer-roadmap/&quot; target=&quot;_blank&quot;&gt;Источник статьи&lt;br /&gt;&lt;br /&gt;&lt;/a&gt;&lt;strong&gt;Заметили ошибку или есть вопросы?&lt;/strong&gt;&lt;br /&gt;Рассказывайте нам о них, связаться с нами ты сможешь с помощью &lt;a href=&quot;https://t.me/coding_chat&quot; target=&quot;_blank&quot;&gt;нашего чата &lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Не забывайте ставить 👍 если вам понравилась и &lt;a href=&quot;http://t.me/cccoding&quot; target=&quot;_blank&quot;&gt;подписаться на канал&lt;/a&gt;&lt;/p&gt;

</content></entry><entry><id>xcoding:parserpython</id><link rel="alternate" type="text/html" href="https://teletype.in/@xcoding/parserpython?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=xcoding"></link><title>HTML парсер на Python</title><published>2021-03-24T08:46:22.300Z</published><updated>2021-03-24T08:46:22.300Z</updated><summary type="html">&lt;img src=&quot;https://teletype.in/files/cc/7d/cc7dddfa-2e5b-4e1d-8b72-49248f709107.png&quot;&gt;Учитывая современное развитие Интернета, было бы кощунством не написать приложение, взаимодействующее со всемирной паутиной. Сегодня мы напишем простенький html-парсер на Python. Наше приложение будет читать код указанной страницы сайта и сохранять все ссылки в ней в отдельный файл. Это приложение может помочь SEO-аналитикам и веб-разработчикам.</summary><content type="html">
  &lt;p&gt;Учитывая современное развитие Интернета, было бы кощунством не написать приложение, взаимодействующее со всемирной паутиной. Сегодня мы напишем простенький &lt;strong&gt;html-парсер на Python&lt;/strong&gt;. Наше приложение будет читать код указанной страницы сайта и сохранять все ссылки в ней в отдельный файл. Это приложение может помочь SEO-аналитикам и веб-разработчикам.&lt;/p&gt;
  &lt;figure class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://teletype.in/files/cc/7d/cc7dddfa-2e5b-4e1d-8b72-49248f709107.png&quot; width=&quot;1266&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Писать будем на &lt;strong&gt;Python 3&lt;/strong&gt;, в котором есть встроенный класс для html-парсера из модуля html.parser&lt;/p&gt;
  &lt;blockquote&gt;from html.parser import HTMLParser&lt;/blockquote&gt;
  &lt;p&gt;Так же нам понадобится функция urlopen из модуля urllib&lt;/p&gt;
  &lt;blockquote&gt;from urllib.request import urlopen&lt;/blockquote&gt;
  &lt;p&gt;Именно функция urlopen будет получать исходный код указанной странички.&lt;/p&gt;
  &lt;h2&gt;Перегрузка класса HTMLParser&lt;/h2&gt;
  &lt;p&gt;Наша задача таким образом перегрузить функционал существующего класса HTMLParser, чтобы он соответствовал нашей задаче.&lt;/p&gt;
  &lt;blockquote&gt;class MyHTMLParser(HTMLParser): def __init__(self, site_name, *args, **kwargs): # список ссылок self.links = [] # имя сайта self.site_name = site_name # вызываем __init__ родителя super().__init__(*args, **kwargs) # при инициализации &amp;quot;скармливаем&amp;quot; парсеру содержимое страницы self.feed(self.read_site_content()) # записываем список ссылок в файл self.write_to_file()&lt;/blockquote&gt;
  &lt;p&gt;Базовый класс HTMLParser имеет несколько методов, нас в данном случае интересуют метод handle_start_tag. Этот метод вызывается каждый раз, когда наш парсер встречает в тексте октрывающий html-тэг.&lt;/p&gt;
  &lt;blockquote&gt;def handle_starttag(self, tag, attrs): # проверяем является ли тэг тэгом ссылки if tag == &amp;#x27;a&amp;#x27;: # находим аттрибут адреса ссылки for attr in attrs: if attr[0] == &amp;#x27;href&amp;#x27;: # проверяем эту ссылку методом validate() (мы его еще напишем) if not self.validate(attr[0]): # вставляем адрес в список ссылок self.links.append(attr[1])&lt;/blockquote&gt;
  &lt;p&gt;Напишем вспомогательный метод validate:&lt;/p&gt;
  &lt;blockquote&gt;def validate(self, link): &amp;quot;&amp;quot;&amp;quot; Функция проверяет стоит ли добавлять ссылку в список адресов. В список адресов стоит добавлять если ссылка: 1) Еще не в списке ссылок 2) Не вызывает javascript-код 3) Не ведет к какой-либо метке. (Не содержит &lt;a href=&quot;https://zen.yandex.ru/t/)&quot; target=&quot;_blank&quot;&gt;#)&lt;/a&gt; &amp;quot;&amp;quot;&amp;quot; return link in self.links or &amp;#x27;&lt;a href=&quot;https://zen.yandex.ru/t/&amp;#x27;&quot; target=&quot;_blank&quot;&gt;#&amp;#x27;&lt;/a&gt; in link or &amp;#x27;javascript:&amp;#x27; in link&lt;/blockquote&gt;
  &lt;p&gt;Создадим метод, который будет открывать указанную страницу и выдавать ее содержимое.&lt;/p&gt;
  &lt;blockquote&gt;def read_site_content(self): return str(urlopen(self.site_name).read())&lt;/blockquote&gt;
  &lt;p&gt;Осталось добавить возможность записи списка ссылок на диск в читабельном формате:&lt;/p&gt;
  &lt;blockquote&gt;def write_to_file(self): # открываем файл f = open(&amp;#x27;links.txt&amp;#x27;, &amp;#x27;w&amp;#x27;) # записываем отсортированный список ссылок, каждая с новой строки f.write(&amp;#x27;\n&amp;#x27;.join(sorted(self.links))) # закрываем файл f.close()&lt;/blockquote&gt;
  &lt;p&gt;Все готово, можем запускать парсер.&lt;/p&gt;
  &lt;blockquote&gt;parser = MyHTMLParser(&amp;quot;&lt;a href=&quot;http://python.org/&quot; target=&quot;_blank&quot;&gt;http://python.org&lt;/a&gt;&amp;quot;)&lt;/blockquote&gt;
  &lt;p&gt;После того как вы запустите данный скрипт в директории, где находится ваш файл появится текстовый документ links.txt, содержащий ссылки.&lt;/p&gt;
  &lt;figure class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://avatars.mds.yandex.net/get-zen_doc/1582174/pub_5e620b870abd406adb4ed9fa_5e620c11b07e74752b792d44/scale_1200&quot; width=&quot;1200&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Конечно, данный пример достаточно примитивен, но на его основе вы можете попробовать написать, к примеру, веб-crawler, который будет анализировать весь сайт целиком, а не одну его страницу.&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://telegra.ph/file/5797ac872f2206f9b4d7c.png&quot; width=&quot;734&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Заметили ошибку или есть вопросы?&lt;br /&gt;Рассказывайте нам о них, связаться с нами ты сможешь с помощью &lt;a href=&quot;https://t.me/coding_chat&quot; target=&quot;_blank&quot;&gt;нашего чата &lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Не забывайте ставить 👍 если вам понравилась и &lt;a href=&quot;http://t.me/cccoding&quot; target=&quot;_blank&quot;&gt;подписаться на канал&lt;/a&gt;&lt;/p&gt;

</content></entry><entry><id>xcoding:7trukovwebdev</id><link rel="alternate" type="text/html" href="https://teletype.in/@xcoding/7trukovwebdev?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=xcoding"></link><title>7 восхитительных трюков для веб-разработки</title><published>2021-03-13T07:40:31.867Z</published><updated>2021-03-13T07:40:31.867Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://teletype.in/files/cf/ba/cfba35a7-c044-460d-b10a-35230d95ae56.png"></media:thumbnail><summary type="html">&lt;img src=&quot;https://telegra.ph/file/97f3d619e75347f562610.png&quot;&gt;К настоящему времени все основные языки веб-разработки можно считать зрелыми.</summary><content type="html">
  &lt;figure class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://telegra.ph/file/97f3d619e75347f562610.png&quot; width=&quot;1280&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;К настоящему времени все основные языки веб-разработки можно считать зрелыми.&lt;/p&gt;
  &lt;p&gt;Разрабатывая более двух десятилетий, &lt;strong&gt;HTML&lt;/strong&gt;, &lt;strong&gt;CSS &lt;/strong&gt;и &lt;strong&gt;JavaScript &lt;/strong&gt;являются всемирно признанными стандартами Интернета. Но это просто факт, ведущий нас к основной теме этого поста.&lt;/p&gt;
  &lt;p&gt;Сегодня я хотел бы продемонстрировать вам 7 интересных и малоизвестных советов / уловок, которые возможно помогут вам,возможно нет.&lt;/p&gt;
  &lt;p&gt;Верьте мне или нет - есть некоторые вещи, о которых даже более опытные веб-разработчики могут не знать. Может быть, это потому, что не все одинаково полезно ... В любом случае, давайте копать глубже и повеселиться!&lt;/p&gt;
  &lt;hr /&gt;
  &lt;h3&gt;Boolean convertion&lt;/h3&gt;
  &lt;p&gt;Безопасность типов и JavaScript могут показаться двумя совершенно разными понятиями. Отслеживание всех динамических типов в JS может быть довольно сложной задачей.&lt;/p&gt;
  &lt;p&gt;Тем не менее, это может привести к повышению производительности, так как написанный код легче обрабатывается JIT-компилятором.&lt;/p&gt;
  &lt;p&gt;Использование типов, отличных от логических, например, условные выражения - типичный пример таких ошибок. Но для этого есть хитрость!&lt;/p&gt;
  &lt;p&gt;Помните логический оператор &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT_(!)&quot; target=&quot;_blank&quot;&gt;logical NOT&lt;/a&gt; (!)?&lt;/p&gt;
  &lt;p&gt;Это простой, быстрый и элегантный способ преобразования заданного значения в противоположное логическое значение.&lt;/p&gt;
  &lt;p&gt;Но что, если мы хотим, чтобы наш логический тип представлял именно то значение, которым он был бы (когда он представлен как логический тип)?&lt;/p&gt;
  &lt;p&gt;Ну ... у нас уже есть противоположное логическое значение, &lt;strong&gt;верно&lt;/strong&gt;?&lt;/p&gt;
  &lt;p&gt;Итак, давайте снова сведем на нет наше значение и получим полноценное логическое значение ... или просто используем функцию &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean&quot; target=&quot;_blank&quot;&gt;Boolean()&lt;/a&gt; с самого начала.&lt;/p&gt;
  &lt;pre&gt;const falsyValue = 0;
const truthyValue = 1;
!!falsyValue; // false
!!truthyValue; // true
&lt;/pre&gt;
  &lt;hr /&gt;
  &lt;h3&gt;Divide &amp;amp; round&lt;/h3&gt;
  &lt;p&gt;В JS довольно много операторов. Некоторые из них широко используются, а другие нет. Вторая группа часто включает в себя так называемые &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators&quot; target=&quot;_blank&quot;&gt;bitwise operators&lt;/a&gt;..&lt;/p&gt;
  &lt;p&gt;Они в основном работают с отдельными битами (двоичными числами) вместо любой другой числовой системы. Многие JS-программисты знают об их существовании, но на самом деле не пытаются их использовать.&lt;/p&gt;
  &lt;p&gt;Это в основном потому, что они могут показаться немного сложными, если не сказать больше, на самом деле не очень удобны для новичков, и их обдумывание может занять некоторое время.&lt;/p&gt;
  &lt;p&gt;Но у данных операторов тоже есть свои преимущества! Они, безусловно, позволяют программисту писать тот же код с более коротким синтаксисом, но только в особых случаях.&lt;/p&gt;
  &lt;p&gt;Помимо этого, тот факт, что они работают с битами, делает их, естественно, более &lt;strong&gt;производительным решением&lt;/strong&gt;.&lt;/p&gt;
  &lt;p&gt;Чтобы дать вам представление о том, что я имею в виду, вот пример деления числа на 2 и округления (полирования) результата по сравнению с той же операцией с базовым оператором правого сдвига.&lt;/p&gt;
  &lt;pre&gt;const value = 543;
const halfValue = value/2; // 271.5
Math.round(halfValue); // 272
Math.floor(halfValue); // 271
value &amp;gt;&amp;gt; 1; // 271
&lt;/pre&gt;
  &lt;hr /&gt;
  &lt;h3&gt;JSON formatting&lt;/h3&gt;
  &lt;p&gt;Концепция JSON, скорее всего, известна всем разработчикам JS. Это то, что вводится в самом начале пути JS. Таким образом, то же самое относится к методам &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse&quot; target=&quot;_blank&quot;&gt;JSON.parse()&lt;/a&gt; и &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify&quot; target=&quot;_blank&quot;&gt;JSON.stringify()&lt;/a&gt;.&lt;/p&gt;
  &lt;p&gt;Как вы наверняка знаете, они позволяют вам конвертировать ваши JSON-совместимые значения в &lt;strong&gt;strings &lt;/strong&gt;туда-сюда.&lt;/p&gt;
  &lt;p&gt;Но один из трюков, который, как я уверен, вы наверняка не знали, заключается в том, что с помощью JSON.stringify() вы можете отформатировать выходную строку.&lt;/p&gt;
  &lt;p&gt;Метод, кроме значения, подлежащего строковому формату, принимает необязательные 2 аргумента:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;code&gt;replacer&lt;/code&gt; - функция или массив строк или чисел, которые впоследствии используются для внесения в белый список свойств переданного значения, чтобы позднее включить их в строку результата.&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;spaces&lt;/code&gt; - число или строка со значением и длиной, ограниченными 10 соответственно. Это дает вам возможность установить строку или количество пробелов, которые вы хотите использовать для разделения свойств вашего объекта внутри выходной строки. Если оно равно 0, пустой строке или нулю (по умолчанию), выходные данные остаются нетронутыми.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Теперь, особенно второй аргумент, дает вам хороший и простой способ предварительно подтвердить ваши строковые значения. Конечно, это, безусловно, не лучшее решение для каждой проблемы, но, по крайней мере, оно готово для использования в любое время.&lt;/p&gt;
  &lt;pre&gt;const obj = {a:{b:1,c:2},d:{e:3,f:4}};
JSON.stringify(obj);
// &amp;quot;{&amp;quot;a&amp;quot;:{&amp;quot;b&amp;quot;:1,&amp;quot;c&amp;quot;:2},&amp;quot;d&amp;quot;:{&amp;quot;e&amp;quot;:3,&amp;quot;f&amp;quot;:4}}&amp;quot;
JSON.stringify(obj, null, 2);
/*
&amp;quot;{
  &amp;quot;a&amp;quot;: {
  &amp;quot;b&amp;quot;: 1,
 &amp;quot;c&amp;quot;: 2
 },
&amp;quot;d&amp;quot;: {
 &amp;quot;e&amp;quot;: 3,
 &amp;quot;f&amp;quot;: 4
 }
}&amp;quot;
*/
&lt;/pre&gt;
  &lt;hr /&gt;
  &lt;h3&gt;CSS centering&lt;/h3&gt;
  &lt;p&gt;&lt;strong&gt;Центрирующие элементы(&lt;/strong&gt;англ&lt;strong&gt;. Centering elements) &lt;/strong&gt;с CSS не трюк как таковой. На самом деле, это очень распространенная практика. Но реальность такова, что некоторые разработчики (включая меня) часто забывают такие простые вещи. И, что еще хуже, нет лучшего и единственного пути решения этой проблемы.&lt;/p&gt;
  &lt;p&gt;Это из-за несовместимости между различными браузерами (особенно IE).&lt;/p&gt;
  &lt;p&gt;Одно из самых распространенных решений, которое получило широкое распространение, - это использование модели Flexbox. Ниже приведен пример центрирования и выравнивания дочернего элемента прямо в центре родителя.&lt;/p&gt;
  &lt;pre&gt;&amp;lt;div style=&amp;quot;display:flex;justify-content:center;align-items:center;&amp;quot;&amp;gt;  &amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/pre&gt;
  &lt;p&gt;Помимо описанного выше метода (&lt;a href=&quot;https://caniuse.com/#feat=flexbox&quot; target=&quot;_blank&quot;&gt;он не имеет хорошей поддержки в разных версиях IE&lt;/a&gt;).Я настоятельно рекомендую вам посетить &lt;a href=&quot;http://howtocenterincss.com/&quot; target=&quot;_blank&quot;&gt;веб-сайт&lt;/a&gt;, где вам будет предоставлено правильное решение для данного случая.&lt;/p&gt;
  &lt;hr /&gt;
  &lt;h3&gt;CSS variables&lt;/h3&gt;
  &lt;p&gt;В эпоху препроцессоров CSS, веб-фреймворков и решения CSS-в-JS использование простого CSS определенно значительно сократилось. Это не так уж и плохо - если перечисленные решения работают лучше.&lt;/p&gt;
  &lt;p&gt;Но одна особенность, которой препроцессоры CSS были хорошо известны и недавно попали в ванильный CSS - это &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties&quot; target=&quot;_blank&quot;&gt;переменные&lt;/a&gt;!&lt;/p&gt;
  &lt;pre&gt;:root {
 --main-bg-color: brown;
}
.className {
  background-color: var(--main-bg-color);
  display: block;
  color: white;
}
&lt;/pre&gt;
  &lt;p&gt;Поддержка этой функции в &lt;a href=&quot;https://caniuse.com/#feat=css-variables&quot; target=&quot;_blank&quot;&gt;браузере &lt;/a&gt;тоже выглядит неплохо! В любом случае, приятно знать, что некоторые столь желанные функции пробиваются к самому языку. Тем не менее, он не соответствует универсальности любого препроцессора или библиотеки &lt;strong&gt;CSS-in-JS&lt;/strong&gt;. Но все же, приятно знать, что такая функция существует.&lt;/p&gt;
  &lt;hr /&gt;
  &lt;h3&gt;CSS support checks&lt;/h3&gt;
  &lt;p&gt;Поддержка различных функций как в JS, так и в CSS сильно различается в разных браузерах. И хотя функциональные проверки на стороне JS на самом деле не так сложны, все обстоит иначе, когда дело доходит до CSS ... или, скорее, так и было.&lt;/p&gt;
  &lt;p&gt;Представляем правило &lt;strong&gt;@supports CSS&lt;/strong&gt; - лучшее решение для проверки функций.&lt;/p&gt;
  &lt;pre&gt;color: white;
}
@supports (display: grid) {
 div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    display: block;
  }
}

&lt;/pre&gt;
  &lt;p&gt;Весь его синтаксис имеет форму операторов &lt;strong&gt;if-else&lt;/strong&gt;, в которых вы можете проверить, &lt;a href=&quot;https://caniuse.com/#feat=css-featurequeries&quot; target=&quot;_blank&quot;&gt;поддерживается &lt;/a&gt;ли данная пара свойство-значение.&lt;/p&gt;
  &lt;hr /&gt;
  &lt;h3&gt;Styled styles&lt;/h3&gt;
  &lt;p&gt;Теперь, для трюка с номером 1, я должен дать правильную ссылку на автора источника - &lt;a href=&quot;https://twitter.com/calebporzio&quot; target=&quot;_blank&quot;&gt;@calebporzio&lt;/a&gt;.&lt;/p&gt;
  &lt;figure&gt;
    &lt;iframe src=&quot;https://platform.twitter.com/embed/Tweet.html?id=1121054728148926467&amp;hideCard=false&quot;&gt;&lt;/iframe&gt;
  &lt;/figure&gt;
  &lt;p&gt;В основном все сводится к тому, что вы можете стилизовать элемент стиля, отобразить его содержимое, сделать его редактируемым! у вас получится несколько живой редактор CSS!&lt;/p&gt;
  &lt;p&gt;Как говорит автор - у него может не быть фактического варианта использования, но это просто потрясающе! Кроме того, к сожалению, с тегом &amp;lt;script&amp;gt; он работает не так.&lt;/p&gt;
  &lt;pre&gt;&amp;lt;style style=&amp;quot;display: block&amp;quot; contenteditable&amp;gt;
    html {
        background: blue;
    }
&amp;lt;/style&amp;gt;
&lt;/pre&gt;
  &lt;p&gt;Итак, что вы думаете об этом коротком, но довольно интересном списке?&lt;/p&gt;
  &lt;figure class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://telegra.ph/file/5797ac872f2206f9b4d7c.png&quot; width=&quot;960&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Заметили ошибку или есть вопросы?&lt;br /&gt;Рассказывайте нам о них, связаться с нами ты сможешь с помощью &lt;a href=&quot;https://t.me/coding_chat&quot; target=&quot;_blank&quot;&gt;нашего чата &lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Не забывайте ставить 👍 если вам понравилась и &lt;a href=&quot;http://t.me/cccoding&quot; target=&quot;_blank&quot;&gt;подписаться на канал&lt;/a&gt;&lt;/p&gt;

</content></entry><entry><id>xcoding:kakieyazykineuchit2021</id><link rel="alternate" type="text/html" href="https://teletype.in/@xcoding/kakieyazykineuchit2021?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=xcoding"></link><title>Рейтинг языков программирования 2021: доля Python падает, а TypeScript обошел С++, в лидерах JavaScript, Java, C#</title><published>2021-03-11T12:09:30.868Z</published><updated>2021-03-11T12:09:30.868Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://teletype.in/files/f0/8b/f08b195f-c87d-4112-88b5-a24d83e1e3e2.png"></media:thumbnail><summary type="html">&lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/c25/19d/ae5/c2519dae565ffa7657f9b86a6f519555.png&quot;&gt;Автор оригинала: Редакция DOU.UA</summary><content type="html">
  &lt;p&gt;&lt;a href=&quot;https://dou.ua/lenta/articles/language-rating-jan-2021/&quot; target=&quot;_blank&quot;&gt;Автор оригинала: Редакция DOU.UA&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Украинский профильный ресурс &lt;a href=&quot;https://dou.ua/lenta/articles/language-rating-jan-2021/&quot; target=&quot;_blank&quot;&gt;DOU.UA&lt;/a&gt; провел очередной ежегодный опрос о языках программирования, в рамках которого было собрано 7211 анкет (92% респондентов находятся в Украине). Из интересного - впервые с 2014 года у Python отрицательная динамика, наблюдается тенденция перехода с JavaScript на TypeScript, наиболее довольны пользователи Elixir, и наконец на графиках появился Rust.&lt;/p&gt;
  &lt;h3&gt;Коммерческое использование&lt;/h3&gt;
  &lt;p&gt;Что изменилось? Прежде всего привлекает внимание рост TypeScipt: похоже, он со временем станет основным языком в экосистеме JavaScript. В этом году он впервые обошел С ++ по популярности.&lt;/p&gt;
  &lt;p&gt;Еще из интересного: впервые за несколько лет мы увидели снижение доли Python: возможно, использование Data Science дошло до точки насыщения.&lt;/p&gt;
  &lt;p&gt;Впервые с 2012 года выросла доля C#. Использование Java продолжает уменьшаться, хотя и не так активно, как раньше. В общем видно уменьшение доли JVM: доля Kotlin стабильна (хотя он и уступил место Ruby), использование Scala возобновилось после значительного снижения в 2019-м и сегодня, если сравнивать с 2018-м, даже немного возросло. Еще стоит отметить незначительный рост Dart.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/c25/19d/ae5/c2519dae565ffa7657f9b86a6f519555.png&quot; width=&quot;1959&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Ниже приведена диаграмма с динамикой по актуальным языкам программирования по годам. Статистически значимыми являются изменения для C ++, TypeScript, Ruby, 1C, Scala, Pascal/Delphi, T-SQL. Напомним, что изменения статистически значимы, если с вероятностью 95% мы не можем получить результаты с изменениями и без, если будем равномерно выбирать две группы респондентов с одной популяции.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/839/5c4/9a7/8395c49a7eef244ef72276f77b5d3bf5.png&quot; width=&quot;1889&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3&gt;Области использования&lt;/h3&gt;
  &lt;p&gt;В этом году мы впервые попросили респондентов указать сферу, в которой они работают. Результаты довольно интересны.&lt;/p&gt;
  &lt;p&gt;Видим, что примерно половина разработчиков - это бэкенд 52%, далее сегменты фронтенд 19% и мобильной разработки 8%, обработка массивов данных (туда относятся и Big Data и машинное обучение) - 6%. Desktop-программирование еще существует и занимает 4% от объема, системное программирование - 3% (сейчас небольшая доля) и Full-Stack разработка - примерно 1%.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/2f7/c9a/a46/2f7c9aa46312ad7fe463f1cda8153fa9.png&quot; width=&quot;1951&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Давайте рассмотрим, какие языки используют в зависимости от области применения&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/23f/b5a/f31/23fb5af311372697a03fabc9ea451d30.png&quot; width=&quot;1952&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/f3d/301/870/f3d301870c648221a23ca23d429277d4.png&quot; width=&quot;1957&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/fa7/056/518/fa705651802ee099d25a22c61a82ffd4.png&quot; width=&quot;1945&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/825/1d4/c4c/8251d4c4cb0257aeb39937411717441a.png&quot; width=&quot;1940&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/285/a97/4ab/285a974ab7e1f177421cf042f3d53a90.png&quot; width=&quot;1954&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/9ef/e16/e91/9efe16e916e53e5711198f61cab4e0dc.png&quot; width=&quot;1958&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/6b4/da2/ea7/6b4da2ea7f63080070f3e50f385b4879.png&quot; width=&quot;1951&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/0f2/79d/be3/0f279dbe36004c9465e3d888d4c4d2ec.png&quot; width=&quot;1946&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/a48/5b8/fd9/a485b8fd91cdbc18da4165e6f4665f3d.png&quot; width=&quot;1943&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/7d8/74c/d1b/7d874cd1b3f5d990e2e05624ea5ee161.png&quot; width=&quot;1953&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Мы видим, что основные языки бэкенда - это Java, C# и PHP. Доля JavaScript и TypeScript есть, но не такая большая и сравнима с долей Ruby и Go. В десятку главных языков бэкенда также входят Scala и С++.&lt;/p&gt;
  &lt;p&gt;Фактически весь фронтенд пишут на JavaScript и TypeScript. Использование других языков сугубо маргинальное. Доля TypeScript сравнительно меньше. Интересно будет посмотреть на это соотношение через год.&lt;/p&gt;
  &lt;p&gt;В мобильной разработке основные языки - Kotlin и Swift. А доля кроссплатформенных фреймворков меньше чем кажется. Кроме того, заметно, что Dart/Flutter сразу заняли большую нишу. А после React Native и Flutter есть еще место для C# Xamarin.&lt;/p&gt;
  &lt;p&gt;Среди обработки данных безоговорочным лидером является Python, далее - языки манипуляции данными T-SQL и PL-SQL. Особое место занимают Scala (здесь она более распространена, чем Java) и R.&lt;/p&gt;
  &lt;h3&gt;Личные предпочтения&lt;/h3&gt;
  &lt;p&gt;Как мы уже указывали, результаты выбора программистов нельзя использовать для прогнозирования, но здесь интересно, что наконец на графиках появился Rust. Опять видим некоторый спад интереса к Python и тенденцию перехода с JavaScript на TypeScript.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/441/57d/158/44157d15870673d8432a315606e26ea8.png&quot; width=&quot;1900&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Посмотрим на «индекс предпочтения» - это относительное количество разработчиков на языке X, которые для следующего проекта в своей сфере тоже выберут язык X.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/a6d/044/ebd/a6d044ebdc0048fa10c51243a4cd875a.png&quot; width=&quot;1973&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Интересно, что здесь данные отличаются от опроса в Stack Overflow и нашего предыдущего опроса: Rust расположен заметно ниже. Наиболее довольны пользователи Elixir (возможно, это миграция Erlang-комьюнити), также обращает на себя внимание место Clojure.&lt;/p&gt;
  &lt;p&gt;Если посчитать отдельно индекс удовлетворения по сферам применения, то результаты почти совпадают.&lt;/p&gt;
  &lt;h3&gt;Изучение новых языков&lt;/h3&gt;
  &lt;p&gt;Фаворитом, как и в предыдущие годы, стал Python. Его собираются изучать почти 18% из тех, кто будет осваивать новый язык. Но все-таки эта доля меньше, чем год назад. Ну а наибольший рост у TypeScript и Rust.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/110/3e1/907/1103e1907b77fe4b5897ac3ed72d8940.png&quot; width=&quot;1893&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Как и в предыдущие годы, большинство респондентов (83%) хочет изучать новый язык самостоятельно, с помощью книг и документации, 4% будут обращаться к коллегам (впечатляющая интровертность), а 12% будут использовать традиционный подход - с помощью профессиональных преподавателей (курсов или индивидуальных занятий).&lt;/p&gt;
  &lt;h3&gt;Финальная таблица&lt;/h3&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/29d/a97/979/29da97979ea39b2aadcae6807cc44758.png&quot; width=&quot;1960&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3&gt;Дополнительные данные&lt;/h3&gt;
  &lt;p&gt;Несмотря на языки программирования, также имеет смысл рассмотреть структуру распределения опыта в динамике.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/d49/0d7/bf5/d490d7bf5d48f7e2f097badaca1ff725.png&quot; width=&quot;1901&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Tут можно сделать вывод, что, поскольку доля разработчиков с опытом в 1 год уменьшилась =&amp;gt; в IT пришло меньше новичков, чем в прошлом году.&lt;/p&gt;
  &lt;p&gt;Но все равно в большинстве это специалисты с менее 5 лет опыта работы в ИТ.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/687/fa0/073/687fa0073563ea25e135f5b0062ec3bd.png&quot; width=&quot;1962&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Рассмотрим корреляцию между возрастом и языком программирования.&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/a70/933/a2b/a70933a2b81bb4d9f0a5a59a8f9c23c6.png&quot; width=&quot;1964&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Здесь мы видим, что более молодая аудитория у Kotlin и JavaScript, а более старшая - ожидаемо у языков PL-SQL и Pascal/Delphi. Похожие данные показывает опыт разработчика в зависимости от языка:&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/4dc/667/f34/4dc667f34f99b73e2e0381399d957ffb.png&quot; width=&quot;1962&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Большинство разработчиков начинало программировать на Pascal и С++, но вскоре первыми языками разработчиков станут JavaScript и Python. Интересно, как это повлияет на культуру программирования ...&lt;/p&gt;
  &lt;figure class=&quot;m_custom&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/upload_files/788/dee/4cf/788dee4cfe9b9500d8e3764342cceba9.png&quot; width=&quot;1904&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;Данные и скрипты обработки можно найти &lt;a href=&quot;https://github.com/rssh/dou_pl_questionare&quot; target=&quot;_blank&quot;&gt;на GitHub&lt;/a&gt;.&lt;/p&gt;
  &lt;p&gt;Также dou.ua недавно опубликовал опрос о зарплатах в Украине, где оказалось что средняя зарплата составляет $2500, перевод этой статьи вы можете прочитать &lt;a href=&quot;https://habr.com/ru/post/540326/&quot; target=&quot;_blank&quot;&gt;тут&lt;/a&gt;.&lt;/p&gt;
  &lt;p&gt;&lt;a href=&quot;https://habr.com/ru/post/543346/&quot; target=&quot;_blank&quot;&gt;Источник&lt;br /&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Подписывайтесь на &lt;a href=&quot;http://t.me/cccoding&quot; target=&quot;_blank&quot;&gt;Coding&lt;/a&gt;&lt;/p&gt;

</content></entry><entry><id>xcoding:kakustroitsyaprogeru</id><link rel="alternate" type="text/html" href="https://teletype.in/@xcoding/kakustroitsyaprogeru?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=xcoding"></link><title>Я провел 3 месяца, пытаясь устроиться на работу после лагеря программирования, и вот чему я научился</title><published>2021-03-09T08:57:34.644Z</published><updated>2021-03-09T08:57:34.644Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://teletype.in/files/56/12/56123304-f250-4d15-a8cb-297c838dafec.png"></media:thumbnail><summary type="html">&lt;img src=&quot;https://habrastorage.org/getpro/habr/post_images/f5c/bf6/aae/f5cbf6aae6658f6114d7adabebe87d2f.png&quot;&gt;Меньше всего говорят о том, что будет после того как ты окончишь лагерь по программированию — когда ты пытаешься занять позицию разработчика с шестизначным окладом.</summary><content type="html">
  &lt;p&gt;Меньше всего говорят о том, что будет после того как ты окончишь лагерь по программированию — когда ты пытаешься занять позицию разработчика с шестизначным окладом.&lt;/p&gt;
  &lt;figure class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/post_images/f5c/bf6/aae/f5cbf6aae6658f6114d7adabebe87d2f.png&quot; width=&quot;800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;&lt;em&gt;&amp;lt; 3% заявлений становились предложениями&lt;/em&gt;&lt;/p&gt;
  &lt;p&gt;Я окончил Hack Reactor в июле 2016, и мне потребовалось почти 3 месяца, прежде чем я принял предложение от Radius Intelligence. Я подавал заявления в 291 компанию, прошел 32 собеседования по телефону и 16 обычных, а также выполнил 13 задач по программированию, 11 из них — в офисах. И получил в итоге 8 предложений. Мне предлагали 60-125 тысяч долларов в компаниях США. В общем 2.8% заявок обернулись для меня выгодными предложениями.&lt;/p&gt;
  &lt;p&gt;Вот 5 вещей, которые я хотел бы знать, прежде чем устраивался на работу.&lt;/p&gt;
  &lt;blockquote&gt;Коротко рассказываем о гибкой методологии разработки программного обеспечения (Agile), которую мы используем на проектах в EDISON Software Development Centre.&lt;/blockquote&gt;
  &lt;figure class=&quot;m_column&quot;&gt;
    &lt;iframe src=&quot;https://www.youtube.com/embed/TPrj-AMJ4Ds?autoplay=0&amp;loop=0&amp;mute=0&quot;&gt;&lt;/iframe&gt;
  &lt;/figure&gt;
  &lt;h2&gt;Озарение#1: пытайтесь связаться с реальными людьми&lt;/h2&gt;
  &lt;p&gt;Поначалу я подавал заявления в компании самым легким способом через Indeed.com, AngelList, LinkedIn, StackOverflow, Hacker News, сайты компаний и даже Craigslist.&lt;/p&gt;
  &lt;p&gt;Я хотел подать резюме на любую специальность, где требовался опыт пользования React, Node или JavaScript. В первую неделю, я обращался к 15-20 организациям в день.&lt;/p&gt;
  &lt;blockquote&gt;&lt;strong&gt;Совет от профессионала&lt;/strong&gt;: Найдите компании, которые используют эту легкую &lt;a href=&quot;https://github.com/j-delaney/easy-application&quot; target=&quot;_blank&quot;&gt;форму подачи заявок.&lt;/a&gt;&lt;/blockquote&gt;
  &lt;p&gt;Результат был не утешающим. Менее 5% компаний отвечали мне. Я словно бы бросал заявления об устройстве на работу в черную дыру.&lt;/p&gt;
  &lt;p&gt;Все изменилось, когда один из моих товарищей, бывший вербовщик, поделился со мной информацией о том, как искать работу. Он сказал отправлять письма непосредственно людям из этих компаний. Это могут быть кто угодно. Главное, чтобы они прочитали ваше заявление.&lt;/p&gt;
  &lt;p&gt;Тогда каждый раз, когда я хотел подать заявление, я искал компанию на LinkedIn и писал кому-то из их технической поддержки или команды найма.&lt;/p&gt;
  &lt;p&gt;У большинства небольших компаний или руководителей высшего звена адрес почты в таком формате firstName@dreamCompany.com. У крупных компаний это firstName.lastName@dreamCompany.com.&lt;/p&gt;
  &lt;p&gt;Для проверки электронной почты, я использовал &lt;a href=&quot;https://rapportive.com/&quot; target=&quot;_blank&quot;&gt;Rapportive&lt;/a&gt;, чтобы привязать почту к аккаунтам в социальных сетях.&lt;/p&gt;
  &lt;p&gt;Результаты были потрясающими. После 150+ отправленных писем результат улучшился на 22%.&lt;br /&gt;Мне также нравилось связываться с реальными людьми. Удивительно, но мне ответили даже CEO и CTO. Иногда они даже сами проводили собеседования.&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Вывод:&lt;/strong&gt; если вы устраиваетесь на работу самым легким способом, попытайтесь достучаться до реальных людей.&lt;/p&gt;
  &lt;h2&gt;Озарение#2: начните с малого и пробейте себе путь наверх&lt;/h2&gt;
  &lt;p&gt;Вы будете сталкиваться с собеседованиями 1 уровня (нетехническая компания, которая нуждается в любом разработчике), где вам зададут лишь тривиальные вопросы о JavaScript.&lt;/p&gt;
  &lt;p&gt;Вы столкнетесь с собеседованиями 9 уровня (уровень Google/Facebook), где вам будут задавать сложные вопросы о структуре данных и вопросы касательно алгоритмов.&lt;/p&gt;
  &lt;p&gt;Я стратегически выстраиваю процесс так, чтобы сначала пройти собеседования низкого уровня, а затем более сложные.&lt;/p&gt;
  &lt;p&gt;От компаний с собеседованиями низкого уровня я получил опыт, уверенность в себе и своих силах и надежные предложения.&lt;/p&gt;
  &lt;p&gt;Чем больше опыта я получал, тем эффективней поднимался на новый уровень и мог проходить собеседования в компаниях, где была более высокая планка для работников. Ниже это проиллюстрировано в виде линейной корреляции между количеством недель, которые я потратил на собеседования и окладом, который мне предложили.&lt;/p&gt;
  &lt;figure class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/post_images/058/393/17a/05839317a65a1f463fc514c4e74ff218.png&quot; width=&quot;800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;&lt;em&gt;Прямая зависимость между временем, которое я потратил на собеседования и предложенной зарплаты&lt;/em&gt;&lt;/p&gt;
  &lt;p&gt;Я преодолел сложные вопросы. Затем пробился к высокой зарплате. И в итоге заполучил желаемую должность.&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Вывод:&lt;/strong&gt; планируйте свои собеседования так, чтобы сначала пройти более легкие, а затем сложные.&lt;/p&gt;
  &lt;h2&gt;Озарение#3: учитесь так, будто от этого зависит ваша будущая работа (потому что так и есть)&lt;/h2&gt;
  &lt;p&gt;Ненавижу говорить это, но самое важное, что вы должны делать — это учиться и готовиться.&lt;/p&gt;
  &lt;p&gt;Почему? Потому что вы не получите предложения, если у вас не будет хороших ответов на вопросы, которые вам будут задавать.&lt;/p&gt;
  &lt;p&gt;Люди не будут рассматривать вашу кандидатуру, если они будут видеть, что вы не готовы к собеседованию.&lt;/p&gt;
  &lt;p&gt;Возвращаясь к теме о Hack Reactor, моей слабостью были структуры данных и алгоритмы. &lt;a href=&quot;http://blog.triplebyte.com/bootcamps-vs-college&quot; target=&quot;_blank&quot;&gt;Исследование Триплбайта&lt;/a&gt; выявило, что оценки выпускников из компьютерного лагеря слабее, чем оценки выпускников из computer science.&lt;/p&gt;
  &lt;p&gt;Поэтому я учился и практиковался. Каждый день.&lt;/p&gt;
  &lt;p&gt;Я посвящал целые дни изучению алгоритмов сортировки. В другие дни я фокусировался на понимании того, как работает интернет.&lt;/p&gt;
  &lt;p&gt;Если я не полностью понимал концепцию, то проводил весь день за просмотром видео на YouTube или искал информацию на StackOverflow пока, наконец, не понимал.&lt;/p&gt;
  &lt;p&gt;Я нашел следующие учебные материалы полезными:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;https://www.interviewcake.com/&quot; target=&quot;_blank&quot;&gt;InterviewCake:&lt;/a&gt; Мой любимый источник информации о структуре данных и алгоритмах. Он разбивает решение на пошаговый алгоритм — отличная альтернатива Cracking the Code Interview (CTCI). Жаль только, что они не решают другие проблемы!&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://www.hiredintech.com/classrooms/system-design/lesson/60&quot; target=&quot;_blank&quot;&gt;HiredInTech’s System Design Section&lt;/a&gt;: отличное руководство по собеседованиям касательно системы дизайна.&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://www.educative.io/collection/5642554087309312/5679846214598656&quot; target=&quot;_blank&quot;&gt;Coderust&lt;/a&gt;: если вы избегаете CTCI как чумы, Coderust 2.0 возможно идеально вам подойдет. За 49$, вы получите решения практически на любом языке программирования, с использованием интерактивных схем.&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://www.reddit.com/r/cscareerquestions/comments/1jov24/heres_how_to_prepare_for_tech_interviews/&quot; target=&quot;_blank&quot;&gt;Reddit’s How to Prepare for Tech Interviews&lt;/a&gt;: постоянно использую его в качестве ориентира своей подготовки.&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://github.com/h5bp/Front-end-Developer-Interview-Questions&quot; target=&quot;_blank&quot;&gt;Front End Interview Questions&lt;/a&gt;: Исчерпывающий перечень интерфейсных вопросов.&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;https://leetcode.com/&quot; target=&quot;_blank&quot;&gt;Leetcode&lt;/a&gt;: ресурс с вопросами по алгоритмам и структуре данных. Вы можете фильтровать их по компаниям. Так, например, вы можете получить все вопросы, которые, как правило, задают Uber или Google.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;&lt;strong&gt;Вывод:&lt;/strong&gt; слишком много подготовки не бывает.&lt;/p&gt;
  &lt;h2&gt;Озарение#4: показывайте себя с лучшей стороны&lt;/h2&gt;
  &lt;p&gt;Пробиться в индустрию сложно. Вы должны хорошо проявить себя, даже если не очень подготовлены. Чтобы добиться успеха, нужно быть своим собственным адвокатом.&lt;/p&gt;
  &lt;h3&gt;Продавайте себя&lt;/h3&gt;
  &lt;p&gt;В Hack Reactor мы тренировались маскировать наше отсутствие опыта. В нашей личной жизни, мы намеренно умалчиваем о нашем образовании в лагере программистов.&lt;/p&gt;
  &lt;p&gt;Почему? В противном случае, нас автоматически классифицируют как младших разработчиков или как работников, у которых недостаточно опыта.&lt;/p&gt;
  &lt;p&gt;В одном из собеседований с стартапом, собеседование сразу сошло на нет, как только услышали, что я был в лагере программистов. Одна компания использовала это против меня и предложила мне 60000$ (столько предлагают младшим разработчикам).&lt;/p&gt;
  &lt;p&gt;В конечном счете, вы должны убедить компании, что вы можете сделать эту работу.&lt;/p&gt;
  &lt;p&gt;В то же время, вы должны убедить себя, что вы можете сделать эту работу.&lt;/p&gt;
  &lt;p&gt;Вы можете. Сосредоточьтесь на любви к программированию. Сосредоточьтесь на том, что вы построили с React и Node. Сосредоточьтесь на том, чтобы продемонстрировать ваши обширные знания в JavaScript и других языках программирования.&lt;/p&gt;
  &lt;p&gt;Только они могут доказать, что вы заслуживаете эту работу.&lt;/p&gt;
  &lt;h3&gt;Это двусторонний разговор&lt;/h3&gt;
  &lt;p&gt;Собеседование — это взаимное изучение соответствия между работником и работодателем. Хоть вы и должны убедить работодателя нанять вас, он тоже должен завоевать вас.&lt;/p&gt;
  &lt;p&gt;Не стыдитесь использовать собеседование как возможность оценить возможность трудоустройства.&lt;/p&gt;
  &lt;p&gt;Я разговаривал с любой компанией, даже если я не имел к ней ни малейшего интереса.&lt;/p&gt;
  &lt;p&gt;Я проходил собеседования на местах со всеми компаниями, которые меня приглашали. Я задавал вопросы и получал знания от команды инженеров об используемых инструментах и технологиях, проблемах компании и архитектуры системы.&lt;/p&gt;
  &lt;blockquote&gt;&lt;strong&gt;Профессиональный совет&lt;/strong&gt;: во время собеседований задавайте следующие вопросы:&lt;br /&gt;С какими техническими трудностями вы недавно столкнулись?Что вам нравится в работе на компанию X?Как построены команды и как обычно распределяются задачи?&lt;/blockquote&gt;
  &lt;p&gt;Я относился к каждому взаимодействию как к возможности узнать что-то новое. Каждое взаимодействие помогло мне улучшить свой доклад, собеседование и технические навыки. Каждая неудача помогла мне найти мои слабые места.&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Вывод:&lt;/strong&gt; знайте себе цену! И помните, это взаимная разведка.&lt;/p&gt;
  &lt;h2&gt;Озарение#5: это марафон, а не спринт&lt;/h2&gt;
  &lt;p&gt;Путешествие отнюдь не легкое. В течение 3 месяцев, я оттачивал свое мастерство 6 дней в неделю. Но я старался заботиться о себе.&lt;/p&gt;
  &lt;figure class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://habrastorage.org/getpro/habr/post_images/189/223/8cc/1892238cc2ce2d9bbc9466fc0153762f.png&quot; width=&quot;800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p&gt;&lt;em&gt;Так может выглядеть типичный день в JavaScript&lt;/em&gt;&lt;/p&gt;
  &lt;p&gt;Несколько дней я учился с друзьями. В другие дни я шел в кафе и занимался один или зависал в выпускном зале Hack Reactor. И каждую неделю я связывался с консультантом занятости, чтобы поговорить о своем прогрессе.&lt;/p&gt;
  &lt;p&gt;Легко перегореть в процессе. Хорошо питайтесь, спите и занимайтесь спортом.&lt;/p&gt;
  &lt;p&gt;Может стать одиноко. Проводите время с друзьями, которые проходят через то же, что и вы.&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Вывод:&lt;/strong&gt; приготовьтесь к долгой игре и убедитесь, что вы хорошо заботитесь о себе&lt;/p&gt;
  &lt;h2&gt;Итог:&lt;/h2&gt;
  &lt;ol&gt;
    &lt;li&gt;Связывайтесь с реальными людьми&lt;/li&gt;
    &lt;li&gt;Начните с малого и пробивайте себе путь наверх&lt;/li&gt;
    &lt;li&gt;Учитесь так, будто ваша будущая работа зависит от этого&lt;/li&gt;
    &lt;li&gt;Показывайте себя с лучшей стороны&lt;/li&gt;
    &lt;li&gt;Это марафон, а не спринт&lt;/li&gt;
  &lt;/ol&gt;
  &lt;p&gt;Процесс может казаться нескончаемым, но вы справитесь. Продолжайте считать часы. Продолжайте подавать заявления. Продолжайте заботиться о себе. Все это окупится в итоге.&lt;/p&gt;
  &lt;p&gt;Особая благодарность Дилану Трану, Карен Цао, Рохиту &amp;#x27;Солнечному&amp;#x27; Рехи, Джейк Пейс, Анамите Гуха, Стефани Лю, и многим другим.&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;https://habr.com/ru/company/edison/blog/316776/&quot; target=&quot;_blank&quot;&gt;Источник&lt;/a&gt;&lt;/p&gt;

</content></entry></feed>