Frontender's notes. Страница 60

​​⚛️ 12 бесплатных ресурсов для изучения React💥
React – одна из самых популярных JavaScript-библиотек для разработки пользовательских интерфейсов. В этой статье вы найдете подборку бесплатных ресурсов о React: открытые курсы, подкасты, ёмкие конспекты и плейлисты YouTube.
Как вы уже наверняка знаете, React — это JavaScript-библиотека для создания пользовательских интерфейсов, которая разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций.

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

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

-FreeCodeCamp – Список учебных ресурсов не был бы полным без FreeCodeCamp – одной из крупнейших платформ для изучения кода с тысячами статей, руководств и учебных пособий. По приведенной ссылке курс по фронтенду с React.

-React.js Cheatsheet – сборник готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.

-Подкасты о React - Англоязычный подкаст подойдет тем пользователям React, которые хотят совместить изучение чего-то нового с практикой восприятия английской речи на слух. Хотя подкаст React Podcast и не является учебным ресурсом, он поможет понять React и экосистему WebDev и получить представление о практиках разработки.

- Пятиминутка React - Подкаст 5minreact.ru посвящен не только React, но и различным смежным технологиям и конференциям. Но на странице легко найти темы, посвященные только React. Подкаст ведется с ноября 2016 г., выпущено 65 записей. Кроме видео автор иногда записывает и скринксты.

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

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

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

Подписывайся, чтоб не пропустить.

​​🧐Что такое ECMASCRIPT?

Если вы разработчик JavaScript или изучаете JavaScript, возможно, вы слышали о ECMAScript и таких терминах, как ES2016 или ES16, и так далее ...

ECMAScript - это стандарт JavaScript, предназначенный для обеспечения интерпретируемости веб-страниц в разных браузерах.

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

🚀Движки JavaScript
- Chrome поставляется с двигателем V8
- Mozilla поставляется с SpiderMonkey
- Safari поставляется с JavaScriptCore
- InternetExplorer поставляется с Chakra

💥ECMASript VSJavaScript

ECMASript предоставляет правила, подробные сведения и рекомендации, которым должен следовать script-овый язык, чтобы считаться совместимым с ECMASript.

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

Версии ECMAScript:
> ЕС2015 - 6th Edition of ECMAScript(ES6)
> ES2016 - ES7
> ES2017 - ES8
> ES2018 - ES9
> ES2019 - ES10
> ES2020 - ES11
> ES2021 - ES12

​​- Если бы я знал это прежде...😔

Примерно так я реагировал каждый раз когда узнавал что-то новое и получал новые советы.

Я решил поделиться семью самыми важными из них с тобой.

✅- Не копируй и вставляй код - Пиши код самостоятельно. Это даёт огромную разницу!
Когда только начинаешь, нужно чувствовать себя более комфортно с кодом
Это можно сделать, - как вы уже догадались - написав больше кода самостоятельно.

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

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

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

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

****
Цитата на день: «Работайте в то время, как они спят. Учитесь в то время, как они развлекаются.
Берегите в то время, как они тратят. Живите так, как они мечтают».

​Мы создали специальный курс для фронтенд-разработчиков с опытом. Подойдёт для всех, кто уверенно чувствует себя с HTML, CSS, JavaScript. Знает про работу браузера и Git.

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

Вас ждёт:

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

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

📌Document Object Model или DOM.🚀

✅И так для начала, что такое DOM.🤔

- Document Object представляет собой весь HTML-документ.
Основой HTML-документа являются теги.
В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.
Все эти объекты доступны при помощи JavaScript, мы можем использовать их для изменения страницы.
https://telegra.ph/DOM-Obekt-02-11

​​👨🏻‍💻Алгоритмы которые нужно знать каждому разработчику.🚀
***
⚠️Для разработчиков данные типы алгоритмов являются фундаментальными и без опроса данных алгоритмов не проходит ни одно собеседование в IT
***
📌1. Алгоритмы сортировок. - таких алгоримов есть вагон и ещё маленькая тележка, знать все алгоритмы не целесообразно, нужно знать самые часто-используемые и распространённые.

📌2.Алгоритмы поиска. - Поиск — обработка некоторого множества данных с целью выявления подмножества данных, соответствующего критериям поиска.
Все алгоритмы поиска делятся на
- поиск в неупорядоченном множестве данных;
- поиск в упорядоченном множестве данных.

📌3. Хэш функции - Хеш-функция , или функция свёртки — функция, осуществляющая преобразование массива входных данных произвольной длины в (выходную) битовую строку установленной длины, выполняемое определённым алгоритмом. Преобразование, производимое хеш-функцией, называется хешированием.
***
«Хорошая» хеш-функция должна удовлетворять двум свойствам:
-быстрое вычисление;
-минимальное количество «коллизий».
***

📌4.Динамическое программирование — метод решения задачи путём её разбиения на несколько одинаковых подзадач, рекуррентно связанных между собой. Самым простым примером будут числа Фибоначчи — чтобы вычислить некоторое число в этой последовательности, нам нужно сперва вычислить третье число, сложив первые два, затем четвёртое таким же образом на основе второго и третьего, и так далее

📌5. Парсинг строк и совпадения (regex) - Парсинг (Parsing) – это принятое в информатике определение синтаксического анализа. Для этого создается математическая модель сравнения лексем с формальной грамматикой, описанная одним из языков программирования.

Хочешь стать руководителем команды разработки?

AGIMA совместно с GeekBrains запускает второй поток на курс для middle- и senior-разработчиков. Расскажем, как автоматизировать разработку, управлять командой и высоконагруженными системами.
Длительность курса 6 месяцев, начало — 18 февраля.
В процесс обучения вы узнаете:
— Как подбирать специалистов и делегировать задачи.
— Как организовать командную работу и оценивать ее эффективность.
— Как обучать сотрудников и управлять ими.

Выпускники получат удостоверение о повышении квалификации.
Обучение платное.
Записаться на курс.

🚀Про cookies в веб браузере🍪.

Назначение:
✅Cookie используются веб-серверами для идентификации пользователей и хранения данных о них.
К примеру, если вход на сайт осуществляется при помощи cookie, то, после ввода пользователем своих данных на странице входа, cookie позволяют серверу запомнить, что пользователь уже идентифицирован и ему разрешён доступ к соответствующим услугам и операциям.
Многие сайты также используют cookie для сохранения настроек пользователя. Эти настройки могут использоваться для персонализации, которая включает в себя выбор оформления и функциональности. Например, Википедия позволяет авторизованным пользователям выбрать дизайн сайта. Поисковая система Google позволяет пользователям (в том числе и не зарегистрированным в ней) выбрать количество результатов поиска, отображаемых на одной странице.
Cookie также используются для отслеживания действий пользователей на сайте. Как правило, это делается с целью сбора статистики, а рекламные компании на основе такой статистики формируют анонимные профили пользователей для более точного нацеливания рекламы.
Читать далее...

​​🧐Почему так важно изучать структуры данных и алгоритмы?🤔

***
Они важны, потому что это то, чем вы занимаетесь после того, как станете программистом.
Без структур данных и алгоритмов вы будете всего лишь псевдокодером.
***
🎯Работа программистов - выполнять операции с данными.

основном выполняют эти три шага
1) Принимать данные
2) Обработать эти данные
3) Вернуть результат

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

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

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


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

🔥 GIT — сборник полезных IT-сервисов

На канале публикуются лучшие IT-сервисы и инструменты для разработчиков Frontend, Backend, Data Scientist, DevOps, MobileDev...

+ сервисы для специалистов других направлений и профессий 👍🏽

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

🤔Как бороться с професиональным выгоранием?😓.

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

🔴У разработчиков часто встречаются такие проблемы и вот основные советы для борьбы с ними.

Как можно справиться с профессиональным выгоранием?

✅Не игнорируйте состояние собственного организма.

✅Нормализуйте рабочий день и сопутствующие процессы.

✅Самокритичность должна иметь меру.

✅Отдых от работы.

✅Повышение квалификации и профессиональная переподготовка.

​​Объекты веб-хранилища LocalStorage, sessionStorage.

📌Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.
Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage) и даже после перезапуска браузера (при использовании localStorage). Скоро мы это увидим.
Но ведь у нас уже есть куки. Зачем тогда эти объекты?
В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Поэтому мы можем хранить гораздо больше данных. Большинство браузеров могут сохранить как минимум 2 мегабайта данных (или больше), и этот размер можно поменять в настройках.
Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.
Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:

setItem(key, value) – сохранить пару ключ/значение.

getItem(key) – получить данные по ключу key.

removeItem(key) – удалить данные с ключом key.

clear() – удалить всё.

key(index) – получить ключ на заданной позиции.

length – количество элементов в хранилище.
Как видим, интерфейс похож на Map

(setItem/getItem/removeItem), но также запоминается порядок элементов, и можно получить доступ к элементу по индексу – key(index).
бъект sessionStorage используется гораздо реже, чем localStorage.Свойства и методы такие же, но есть существенные ограничения:

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

…Но если вы откроете ту же страницу в другой вкладке и попробуете получить данные снова, то код выше вернёт null, что значит «ничего не найдено».
Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.

📌Событие storage
Когда обновляются данные в localStorage или sessionStorage, генерируется событие storage со следующими свойствами:

key – ключ, который обновился (null, если вызван .clear()).

oldValue – старое значение (null, если ключ добавлен впервые).

newValue – новое значение (null, если ключ был удалён).

url – url документа, где произошло обновление.
storageArea – объект localStorage или sessionStorage, где произошло обновление.
Важно: событие срабатывает на всех остальных объектах window, где доступно хранилище, кроме того окна, которое его вызвало.
Давайте уточним.
Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.
Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.
Теперь, если оба окна слушают window.onstorage, то каждое из них будет реагировать на обновления, произошедшие в другом окне.

​Ребята из JM поделились с нами тем, что у них идет набор на уникальную программу подготовки Frontend-специалистов. Главная особенность программы - оплата обучения происходит только после вашего трудоустройства в IT.

🙋‍♂️👉Узнать подробнее: https://clck.ru/TCEWq

За 7-9 месяцев наставники подготовят вас на позицию Frontend-разработчика. Менторы помогут освоить востребованные технологии, будут контролировать усвоение материала. Вы получите опыт в бизнес-проекте необходимый для трудоустройства, также наставники помогут составить резюме и подготовят вас к прохождению собеседований.

Трудоустройство в Москве со стартовой зарплатой от 80 000 рублей. Работодателя выбираете самостоятельно после успешных собеседований.

Быстрый карьерный и финансовый рост за счет программы поддержки после трудоустройства рассчитанной на 2 года: вебинары, митапы, буткэмпы от экспертов IT-рынка и карьерных специалистов.

✅🚀5 библиотек JavaScript , которые стоит использовать в 2021-ом году.

📌fullpage.js - Эта библиотека с открытым исходным кодом помогает создавать полноэкранные веб-сайты с прокруткой.

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

📌screenful.js - Если вы также хотите иметь полноэкранные функции, мы рекомендуем использовать эту библиотеку вместо FullScreen API из-за ее 'кроссбраузерности'.

📌moment.js - Работа с датой и временем может быть огромной проблемой, особенно с вызовами API, разными локальными языками часовых поясов и т. д.
Но MomentJS может помочь.

📌leaflet.js - Leaflet - лучшая библиотека с открытым исходным кодом для добавления интерактивных карт, удобных для мобильных устройств, в ваше приложение.

🖥️5 вопросов на собеседовании React разработчика.📄🚀

1. Что такое React?

2. Назовите основные особенности React

3. Что такое JSX?

4. В чем разница между элементом и компонентом?

5. Как в React создаются компоненты?
Ответы на вопросы по ссылке внизу.

😎🚀Создавая приложение нужно сделать её доступным для всех пользователей.

Есть 2 известных способа.
Способ 1 : Создать домашний сервер и поднять сайт на собственном сервере.
Способ 2 : Использовать хостинги.

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

А про 2 способ поговорим поподробнее.
Многие проекты малых и средних масштабов размещаются на хостингах .
Эти хостинги, как правило, оплачиваются ежемесячно.
Ценовой интервал разнится от 0.99 долларов США до 500 долларов США.
Всё зависит от сервиса...

✅Ниже представлены 6 хостингов, на которых можно поднять свои первые приложения.
1. HOSTINGER
2. BLUEHOST
3. GODADDY
4. HOSTGATOR
5. SITEGROUND
6. DREAMHOST

Обучаю, развиваюсь, создаю! Заодно веду свой авторский блог Programmer Way!

Немного о нем:
•Авторские статьи 📝
•React и Redux📍
•Советы по фрилансу💰
•Чат фронтендеров🤝
•Бесплатные уроки 🗂
•Улучшение верстки и кода 📈