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

Для чего нужен SSL (Secure Socket Layer) 🖥️🤔.
У многих разработчиков рано или поздно всплывает схожий вопрос.
Дочитав этот пост до конца вы будете знать ответ на этот вопрос.
И еще много дополнительной информации про эту важную тему.

https://telegra.ph/Dlya-chego-nuzhen-SSL-Secure-Socket-Layer-02-07

👨🏼‍💻Несколько полезных сайтов для веб-разработчиков на утро🌅.

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

https://telegra.ph/Neskolko-poleznyh-sajtov-dlya-veb-razrabotchikov-na-utro-02-06

🖥️🎯Про HOF функции(функция высшего порядка).

Функция высшего порядка это функция, которая берет функцию как аргумент и/или возвращает её.
Ниже представлен список самых часто используемых HOF функций в JS:
map(), filter(), reduce(), forEach():


✅ map() - Это самый часто используемый метод высшего порядка в JS.
Используется для создания нового массива из существующего, применяя переданную как параметр функцию к каждому из элементов первого массива.

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

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

✅forEach() - отличная функция высшего порядка для замены типичных циклов while и for в скриптах JavaScript.

🚀Примеры каждого из методов представлены ниже🚀.
https://telegra.ph/HOF-motody-v-JavaScript-02-06

🖥️В чем преимущества Node.js?🤔

Node.js — это программная платформа, которая делает JavaScript языком общего назначения. Ее также называют средой выполнения JS. Она умеет связываться с внешними библиотеками, вызывать команды из кода и выполнять роль веб-сервера. Если объяснять проще, этот инструмент добавляет к полностью фронтендовому языку бекендовую часть, позволяя создавать с его помощью не только веб-сайты, но и полноценные приложения, без задействования браузера.
Как и JavaScript, Node запускается в V8. Это среда выполнения, переводящая написанное веб-разработчиком в машинный код — набор прямых инструкций для компьютера, не требующие интерпретации. Таким образом низкоуровневый код становится быстрым и удобным для распознавания машиной. Ниже мы рассмотрели плюсы и минусы Node js.
https://telegra.ph/Pochemu-imenno-Node-js-02-05

Школа разработчиков Х5 по фронтенду стартует 25 февраля, участие бесплатное. В программе основы веб-технологий, окружение, сеть, Git, React, Node.js, PostgreSQL, GraphQL. Приём заявок до 7 февраля, дальше идут вструпительные тесты и собеседования.

https://x5-frontend-academy.ru/

​​📌Знай это прежде, чем войти в веб-разработку🖥️📖.

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

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

⚠️Помните, что если вы пользуетесь помощью Google, чтобы найти решение, вы растете, и это нормально.

✅3. Не учите всё - Многие начинающие разработчики думают, что они должны знать ВСЁ про алгоритмы, структуры данных и всё уметь верстать, чтобы являтся junior-разработчиком.
Каждая компания имеет свой список предпочтений для того или иного уровня знаний.
Выберите компанию, где вы хотите работать, а только потом сконцентрируйтесь на обучении в более узкой сфере.

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

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

Просто продолжай расти !!🚀

​​😎🚀8 полезных vanilla-JavaScript плагинов.

GSAP - Он оживляет все, чего может коснуться JavaScript, и решает многие конфликты веб-приложения и браузера, а главное - все это с невероятной скоростью.
[источник]

Plyr - Простой, доступный и настраиваемый медиаплеер для видео, аудио, YouTube и Vimeo.
[источник]

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

Flatpickr - это легкий и мощный плагин для работы с датами.
[источник]

Cleave.js - С помощю этой библиотеки осуществляется форматирование вводимого текстового содержимого при вводе текста.
[источник]

CountUp.js - это свободный от зависимостей, легкий класс JavaScript, который можно использовать для быстрого создания анимации, отображающей числовые данные более интересным способом.
[источник]

Rellax - Добавьте на свой веб-сайт легкую ванильную parallax библиотеку javascript для создания тонкой анимации. Работает с HTML, Wordpress, Shopify и др.
[источник]

Smooth Scrollbar - это плагин javascript, который позволяет настраивать высокопроизводительные полосы прокрутки в разных браузерах.
[источник]

​​🖥️🚀Топ полезных Web-API для разработчиков в 2021 году.

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

✅Drag & Drop API - Firefox и прочие приложения компании Mozilla имеют ряд возможностей для управления drag и drop. Это позволяет пользователю нажать и удерживая зажатой кнопку мыши над элементом, переместить его на другую позицию, отпустив кнопку мыши пользователь может оставить элемент на новой позиции.

✅Geolocation API - позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.

✅WebGL API - (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах canvas HTML5 .

✅Gamepad API - HTML5 представляет большое количесво необходимых компонентов для полной и интерактивной разработки игр. Такие технологии, как <canvas>, WebGL, <audio>, и <video>, вместе с Javascript сейчас поддерживают большое количество задач, для которых раньше требовались нативные программы.  Gamepad API - это способ полученния данных с геймпада и других игровых контроллеров.

​​🖥️✅Уже в наступившем 2021 году всё больше и больше разработчиков знакомятся и работают с TypeScript.

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

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

📌Другое преимущество TypeScript – «самодокументирование» кода. Когда типы определены строго, это позволяет быстро проверять API, в том числе и с помощью IDE показывать ошибки и подсказки.

📌TypeScript вводит понятия, используемые традиционными ООП-языками, такими как Java и C++. Например:

📌Interface – позволяет описывать контракты взаимодействующих сущностей, а также методы и свойства, доступные для кода внутри и вне приложения.

📌Enum – определяет именованные константы.

📌Generics – механизм декларации классов и методов для работы со множественными типами данных.

И ещё немного о приемуществах.
Основные преимущества TypeScript понятными словами
– Компилируется в нормальный JS, который в итоге можно доработать и без TypeScript; – Поддержка классов, интерфейсов и нормального ООП; – Строгая типизация, IDE будет давать подсказки и подсвечивать ошибки, если вы, например, передали в качестве аргумента строку вместо числа; – Отсутствие CallBack Hell и сотни })})})})})} благодаря Async/Await; – Наличие всех новых возможностей в JS, о которых вы слышали, но пока не можете использовать из-за слабой поддержки браузерами; – На нём написан Angular 2, и если вы хотите использовать все преимущества этого фреймворка, то вы хотите использовать TypeScript.

🚀Сделаем из тебя Веб разработчика за 3 месяца - нужно только решиться!

В США буткемпы уже несколько лет помогают людям без опыта стать разработчиками и найти позицию в топовых IT-компаниях мира от Google и Microsoft, до Uber и Amazon.

Мы адаптировали формат под наш рынок и предлагаем:
💪 12 недель супер интенсивной практики на реальных проектах;
🎖 6 реальных проектов в портфолио, которые оценят работодатели;
🤩 Постоянную обратную связь и персональные сессии с нашими учителями - разработчиками с многолетним стажем;
🙋‍♂️ Тренинги по soft skills, помощь с составлением резюме и тестовые собеседования - все, чтобы подготовить тебя к работе;
🏆 И главное - возможность претендовать на позицию джуниор фронтенд разработчик уже через 3 месяца!

Стек: HTML, CSS, JavaScript, React, NodeJS

Остались вопросы? Наши контакты, истории выпускников и описание программы здесь: https://clck.ru/SxPWV

✅📌Интересная идея для создания прoфильных карточек.
Исходный код сможете посмотреть и протестировать по ссылке внизу.

​​📖📌Книги, которые должен прочитать каждый
веб-разработчик

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

📖1. Прагматичный программист Дэвида Томаса и Эндрю Ханта.

📖2. Чистый код Роберта Мартина

📖3. Модели архитектуры корпоративных приложений, Мартин Фаулер

📖4. Искусство программирования Дональда Кнута

📖5. Структура и интерпретация компьютерных программ Гарольда Абельсона, Джеральда Джея Сассмана, Джули Сассман

📖6. Рефакторинг: улучшение дизайна существующего кода Мартин Фаулер

📖7. Красноречивый Javascript Марин Хавербеке

📖8. Pro Git пользователя. Скотт Чакон и Бен Штрауб

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

Highload - это канал нового медиа для разработчиков, которое запускается в феврале.

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

Например, в Highload проанализировали статьи о трендах разработки 2021-го года сразу нескольких ресурсов и разработчиков (основатель Core dna Сэм Солтис, IT-консультант Алексей Гуреев и др.) и составили свой список: https://t.me/highloadtoday/11

Подписывайтесь! https://t.me/highloadtoday
Тут будет много полезной информации и технических решений без воды.

📫Будем рады, если вы поделитесь с редакцией собственными решениями в разработке. Их опубликуют, когда запустится сайт. Ваши кейсы ждут на [email protected]

👉Памятка Программиста.

***
Следуя этим правилам вы заметите повышение работоспособности и общих зананий.
***

✅Создавай/пиши код каждый день.

✅Не бойся проверять свои пределы

✅Изучай техники, а не инструменты.

✅Никогда не переставай учится.

✅При необходимости обратись за помощью.

✅Не просто копируй и вставляй , а понимай и переписывай.

✅Следи за своим прогрессом.

✅Никогда не сдавайся.

✅Всегда получай удовольствие.

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

📌1. Игра-Викторина.
Создайте игру-викторину по типу "Кто Хочет Стать Миллионером".
Из этого проекта вы обретёте опыт работы с большими объёмами данных.
В этом проекте для вас может стать решебником данное видео по ссылке внизу.
[Видео-помощник]

📌2. Приложение-секретарь.
Для практики этот тип приложений является хорошим примером, так как вас научит правильной работе с данными и их защите, UI/UX дизайну, а также вспомните школьную программу математики.
Для этого проекта также есть видео помощник.
[Видео-помощник]

📌3. Kорзина покупателя.
Это интересный проект в который можно бесконечно добавлять функционал и заодно учится. А в конце иметь сильный проект в портфолио.
[Видео-помощник.]

📌4.Прогноз-погоды.
Осилив этот проект вы будете иметь основные понятия для работы с веб-интерфейсами (API). Также иметь достаточно сложный проект, прикреплённый к портфолио.
[Видео-Помощник.]

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

​​📌WebGL — кроссплатформенный API для 3D-графики в браузере, разрабатываемый некоммерческой организацией Khronos Group. WebGL использует язык программирования шейдеров GLSL. WebGL исполняется как элемент HTML5 и поэтому является полноценной частью объектной модели документа браузера.

Вот наглядные примеры проектов webGL на Habr - e.

А хорошие серии уроков по webGL можно найти по данной ссылке внизу.
https://www.youtube.com/watch?v=GtCYKso96pg

Надеемся мы заинтересовали вас создавать проекты на webGL

​​"- А как создавать игры с помощю JavaScript.
Наверное для этого нужны годы опыта и практики...😔"

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

📌1. PixiJS - используя PixiJS сможете создавать красивый цифровой контент с помощью самого быстрого и гибкого средства визуализации 2D WebGL.
[ pixijs.com ]

📌2. CraftyJS - это гибкий фреймворк для игр на JavaScript.
Его особенностью является её открытые исходные коды, иными словами это opensource проект, которая активно поддерживается на GitHub - e.
[ craftyjs.com ]

📌3.MatterJS - это игоровой движок с 2D физикой для веб-страниц.
Oна тоже является opensource и поддерживается на GitHub-e
[ brm.io/matter-js ]

📌4.Phaser - Фреймворк для настольных и мобильных html5-игр. Быстрая, бесплатная и увлекательная среда с открытым исходным кодом для браузерных игр на Canvas и WebGL.
[ phaser.io ]

📌5.BabylonJS - один из ведущих графических движков на основе WebGl. Новый визуальный инспектор сцены, лучший в своем классе физического рендеринга.
[ babylonjs.com ]

Если вам интересна эта тема жмите на ✅ и мы посвятим каждому пост и подробно опишем каждую библиотеку.

​​📄🎯В IT компаниях,во время собеседований очень часто звучат вопросы, основываясь на ответы которых, работадатели смогут сделать выводы о знаниях разработчика в данной сфере.
На таких собеседованиях почти всегда бывают задачи связанные с массивами, особенно это актуально для JavaScript разработчиков.


📌Вот пример из ряда таких вопросов.
-Как удалить элемент из массива в JavaScript?

И вот удовлетворительный ответ на этот вопрос:

1. pop() - Удаляет полседний элемент массива.

Пример:
const numbers = [1, 5, 4, 1]
numbers.pop()
console.log(numbers)
Вывод:
[1, 5, 4]

2. shift() - Удаляет первый елемент массива.

Пример:
const numbers = [1, 5, 4, 1]
numbers.shift()
console.log(numbers)
Вывод:
[5, 4, 1]

3. splice() - Удаляет любой подмассив из массива.

Пример:
const numbers = [1, 5, 4, 1]
numbers.splice(0,2)
console.log(numbers)
Вывод:
[4, 1]

В данном примере метод splice() - удалил из массива отрезок начиная с индекса 0 до индекса 2 [не включительно].
У метода splice() имеется большая функциональность, и вот полный синтаксис для этого метода:

arr.splice(start[, countDelete[, elemInsert1, ..., elemInsertN]])

т.е. удалить countDelete элементов, начиная с номера start, а затем вставить elemInsert1, ..., elemInsertN на их место. Если countDelete не указано, то отрежется все, начиная со start и до конца. Возвращает массив из удалённых элементов.