Frontender's notes [ru]

2021-02-26 14:01:02 HTML Canvas.

Элемент HTML используется для рисования графики на веб-странице.

Рисунок слева создан с помощью . Он показывает четыре элемента: красный прямоугольник, градиентный прямоугольник, многоцветный прямоугольник и многоцветный текст.
Элемент HTML используется для рисования графики «на лету» с помощью JavaScript.

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

Ресурсы, где можно изучить тему Canvas.

https://www.w3schools.com/html/html5_canvas.asp

https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial

http://htmlbook.ru/html/canvas

https://habr.com/ru/post/111308/

1.4K views11:01

Открыть/Комментировать

2021-02-26 08:00:11 ​​ Про переменные в JavaScript.

Переменная
Переменная – это «именованное хранилище» для данных. Мы можем использовать переменные для хранения товаров, посетителей и других данных.
Для создания переменной в JavaScript используйте ключевое слово let.

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

Так как же правильно назвать переменные!?

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

Используйте легко читаемые имена, такие как userName или shoppingCart.

Избегайте использования аббревиатур или коротких имён, таких как a, b, c, за исключением тех случаев, когда вы точно знаете, что так нужно.

Делайте имена максимально описательными и лаконичными. Примеры плохих имён: data и value. Такие имена ничего не говорят. Их можно использовать только в том случае, если из контекста кода очевидно, какие данные хранит переменная.

Договоритесь с вашей командой об используемых терминах. Если посетитель сайта называется «user», тогда мы должны называть связанные с ним переменные currentUser или newUser, а не, к примеру, currentVisitor или newManInTown. Открыть/Комментировать

2021-02-25 15:30:03 Фронтендер от бога — топ-канал о фронтенд-разработке. Если вы учите JS — подписывайтесь!

Что вас ждет:
— обучающие материалы (в том числе и уникальные) с удобной категоризацией;
— еженедельные дайджесты информации из мира фронтенд-разработки;
— профессиональный юмор;

Подписывайтесь на фронтендера от бога Открыть/Комментировать

2021-02-25 14:00:40 ​​#основы_js

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

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).
Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но все же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.
Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.

Firefox, Edge и другие
Инструменты разработчика в большинстве браузеров открываются при нажатии на F12.
Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.

Safari
Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы вам нужно включить «Меню разработки» («Developer menu»).
Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс - Теперь консоль можно активировать нажатием клавиш Cmd+Opt+C. Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

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

- В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12. В Chrome для Mac используйте комбинацию Cmd+Opt+J, Safari: Cmd+Opt+C (необходимо предварительное включение «Меню разработчика»). Открыть/Комментировать

2021-02-25 08:00:44 ​​#основы_js

Редакторы кода для фронтенд-разработчиков.
Ни для кого не секрет, что большую часть своего рабочего времени программисты проводят в редакторах кода.
Есть два основных типа редакторов: IDE и «лёгкие» редакторы. Многие используют по одному инструменту каждого типа.

IDE

Термином IDE (Integrated Development Environment, «интегрированная среда разработки») называют мощные редакторы с множеством функций, которые работают в рамках целого проекта. Как видно из названия, это не просто редактор, а нечто большее.
IDE загружает проект (который может состоять из множества файлов), позволяет переключаться между файлами, предлагает автодополнение по коду всего проекта (а не только открытого файла), также она интегрирована с системой контроля версий (например, такой как git), средой для тестирования и другими инструментами на уровне всего проекта.
Если вы ещё не выбрали себе IDE, присмотритесь к этим:
1)Visual Studio Code (бесплатно).
2)WebStorm (платно).
Обе IDE – кроссплатформенные.

«Лёгкие» редакторы

«Лёгкие» редакторы менее мощные, чем IDE, но они отличаются скоростью, удобным интерфейсом и простотой.
В основном их используют для того, чтобы быстро открыть и отредактировать нужный файл.
Главное отличие между «лёгким» редактором и IDE состоит в том, что IDE работает на уровне целого проекта, поэтому она загружает больше данных при запуске, анализирует структуру проекта, если это необходимо, и так далее. Если вы работаете только с одним файлом, то гораздо быстрее открыть его в «лёгком» редакторе.
На практике «лёгкие» редакторы могут иметь множество плагинов, включая автодополнение и анализаторы синтаксиса на уровне директории, поэтому границы между IDE и «лёгкими» редакторами размыты.
Следующие варианты заслуживают вашего внимания:
1)Atom (кроссплатформенный, бесплатный).
2)Sublime Text (кроссплатформенный, условно-бесплатный).
3)Notepad++ (Windows, бесплатный).
4)Vim и 5)Emacs тоже хороши, если знать, как ими пользоваться. Открыть/Комментировать

2021-02-24 18:01:16 Уже завтра 25 февраля, мы начинаем отбор JUNIOR специалистов Front-end. Необходимы базовые знания HTML, CSS, JS и React.JS.

Всем участникам — много практики и разборов результатов выполнения заданий, финалистам — бонусы и скидки, победителю — бесплатная стажировка на платформе PRE.AX.
PRE.AX — цифровая платформа, работает по модели Talent-as-a-Service. Мы оказываем IT-услуги силами молодых специалистов, которые работают под наблюдением опытных наставников.

Что делать: зарегистрировать себя и друга тоже зарегистрировать — http://pre.ax/marathon-2021-02-25?utm_source=frontendersnotes&utm_medium=telegram&utm_campaign=marathon1 Открыть/Комментировать

2021-02-24 14:00:32 Основные понятия Flexbox
CSS модуль раскладки Flexible Box, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания.
Когда мы описываем flexbox как одномерно-направленный, мы имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно. Открыть/Комментировать

2021-02-24 08:01:01 Что такое прогрессивные веб-приложения

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

Особенности прогрессивных веб-приложений
1. Работает офлайн
2. Возможность установки
3. Легко синхронизировать
4. Может отправлять push-уведомления.


Преимущества
1. Уменьшение времени загрузки после установки приложения.
2. Возможность обновлять только содержимое, которое изменилось, когда доступно обновление приложения.
3. Внешний вид, более интегрированный с иконками приложений-платформ.
4. Более заинтересованные пользователи и более высокие коэффициенты конверсии.

Итак, как сделать его устанавливаемым
Чтобы его можно было установить, в нем должны быть:
1. Веб-манифест
2. Зарегистрированный сервер
3. HTTPS
4. Значок Открыть/Комментировать

2021-02-23 18:00:30 ​​Создание кроссплатформенных приложений с помощью React Native.

React Native — это JS-фреймворк для создания нативно отображаемых iOS- и Android-приложений. В его основе лежит разработанная в Facebook JS-библиотека React, предназначенная для создания пользовательских интерфейсов. Но вместо браузеров она ориентирована на мобильные платформы. Иными словами, если вы веб-разработчик, то можете использовать React Native для написания чистых, быстрых мобильных приложений, не покидая комфорта привычного фреймворка и единой кодовой базы JavaScript.

Так что такое React Native?
Прежде чем углубляться в подробности разработки, давайте посмотрим, что собой представляет React Native, и немного разберёмся с его работой.

Это просто React
React — это JS-библиотека для создания пользовательских интерфейсов, обычно для веб-приложений. Она разработана в Facebook и распространяется под лицензией open source с 2013 года. React широко распространена, и в отличие от более крупных MVC-фреймворков решает относительно узкую задачу: рендеринг интерфейса.

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

React Native — это та же React, но для мобильных платформ. У неё есть ряд отличий: вместо тега div используется компонент View, а вместо тэга img — Image. Процесс разработки остался тем же. Вам может пригодиться знание Objective-C или Java. Кроме того, в мобильной разработке есть свои подвохи (протестировал ли я на разных устройствах? Достаточно ли крупные объекты, чтобы на них комфортно нажимать?). Тем не менее, если вы работали с React, то React Native покажется вам практически такой же, столь же комфортной.

Он действительно нативный
Первое, что удивляет людей в React Native — он «действительно» нативный. Другие решения JavaScript-для-мобильных-платформ просто оборачивают ваш JS-код в хвалёное веб-представление. Они могут перереализовать какое-нибудь нативное поведение интерфейса, например, анимацию, но всё же это остаётся веб-приложение.

В React компонент описывает собственное отображение, а затем библиотека обрабатывает для вас рендеринг. Эти две функции разделены ясным уровнем абстракции. Если нужно отрисовать компоненты для веба, то React использует стандартные HTML-тэги. Благодаря тому же уровню абстракции — «мосту» — для рендеринга в iOS и Android React Native вызывает соответствующие API. В iOS компоненты отрисовываются в настоящие UI-виды, а в Android — в нативные виды. Открыть/Комментировать

2021-02-23 12:01:28 ​​Где получить углубленные навыки JavaScript разработки? 10 марта на демо-занятии «Vue 3» Михаил Кузнецов познакомит вас с возможностями новой версии одного из самых популярных фронтенд фреймворков.
На открытом уроке:
- рассмотрим ключевые отличия в синтаксисе vue2 от vue3;
- разберем как работать с vue-router и VueX в новой версии фреймворка;
- cоздадим проект на Vue 3 с нуля с помощью Vue-cli.

Демо-урок — возможность познакомиться с онлайн-курсом «JavaScript Developer. Professional» и преподавателем. Пройдите вступительный тест, чтобы принять участие в занятии https://otus.pw/W7FW/ Открыть/Комментировать