WebGL за 100 секунд

WebGL позволяет отображать в Интернете трехмерную графику с GPU ускорением. Изучите основы теории 3D и рендеринга сложной графики и анимации.

📺 YouTube

WebDEV #видео #WebGL

🛠 Monaco Editor — движок популярного редактора кода VSCode. В нем есть поддержка синтаксиса для многих языков, несколько курсоров, горячие клавиши, исправление кода и многое другое. Monaco имеет открытый исходный код, поэтому его можно использовать для любого проекта.

WebDEV #инструменты

🔥 Лучшее на канале за неделю

1. WebGL за 100 секунд.

2. Monaco Editor — движок популярного редактора кода VSCode.

3. Уровни вложенности.

💡 Уровни вложенности

▍Часть 2

Перед прочтением рекомендуем ознакомиться с первой частью.

Аналогичная ситуация – с if/else и return.

Например, две нижеследующие конструкции идентичны.

Первая:

function pow(x, n) {
  if (n < 0) {
    alert("Отрицательные значения 'n' не поддерживаются");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

Вторая:

function pow(x, n) {
  if (n < 0) {
    alert("Отрицательные значения 'n' не поддерживаются");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

Второй вариант является более читабельным, потому что «особый случай» n < 0 обрабатывается на ранней стадии. После проверки можно переходить к «основному» потоку кода без необходимости увеличения вложенности.

WebDEV #советы #coding #js

💡Подборка с советами по стилю кода в JavaScript

▫️ Синтаксис

▫️ Фигурные скобки в JS: Часть 1 | Часть 2

▫️ Длина строки

▫️ Отступы: Часть 1 | Часть 2

▫️ Точка с запятой

▫️ Уровни вложенности

WebDEV #подборка #советы

WebDEV #test #html

Выберите правильный вариант 👇🏼

💡 Размещение функций

▍Часть 1

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

Объявить функции перед кодом, который их вызовет:

// объявление функций
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// код, который использует их
let elem = createElement();
setHandler(elem);
walkAround();

Сначала код, затем функции:

// код, использующий функции
let elem = createElement();
setHandler(elem);
walkAround();

// --- вспомогательные функции ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

Продолжение следует...

WebDEV #советы #coding #js

📖 Изучаем HTML, XHTML и CSS
🖋 Робсон Э., Фримен Э., 2017

Устали от чтения книг по HTML, которые понятны только специалистам в этой области? Тогда самое время взять в руки второе издание «Изучаем HTML, XHTML и CSS».

Хотите изучить HTML, чтобы уметь создавать веб-страницы, о которых вы всегда мечтали? Так, чтобы более эффективно общаться с друзьями, семьей и привередливыми клиентами? Тогда эта книга для вас. Прочитав ее, вы изучите все секреты создания веб-страниц. Вы узнаете, как работают профессионалы, чтобы получить визуально привлекательный дизайн, и как максимально эффективно использовать HTML, CSS и XHTML, чтобы создавать такие веб-страницы, мимо которых не пройдет ни один пользователь.

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

💾 Скачать книгу

WebDEV #book #html #css #XHTML

🛠 Hat.sh — это приложение на основе JavaScript, которое обеспечивает безопасное шифрование файлов с помощью API WebCrypto. Это быстро, безопасно и без сервера. Вы можете использовать его для быстрого шифрования и дешифрования любого типа файла за секунды без каких-либо проблем.

WebDEV #инструменты #js

💡 Размещение функций

▍Часть 2

Перед прочтением рекомендуем ознакомиться с первой частью.

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

Третий способ — смешанный стиль: функция объявляется там, где она используется впервые.

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

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

WebDEV #советы #coding #js

🔥 Лучшее на канале за неделю

1. Изучаем HTML, XHTML и CSS.

2. Hat.sh — это приложение на основе JavaScript, которое обеспечивает безопасное шифрование файлов с помощью API WebCrypto.

3. Размещение функций.

WebDEV #test #html

Выберите правильный вариант 👇🏼

💡 Руководства по стилю кода

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

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

Конечно, команда всегда может написать собственное руководство по стилю, но обычно в этом нет необходимости. Существует множество уже готовых.

Некоторые популярные руководства:

• Google JavaScript Style Guide
• Airbnb JavaScript Style Guide (есть перевод)
• Idiomatic.JS (есть перевод)
• StandardJS
• (и ещё множество других)

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

WebDEV #советы #coding #js

3 совета по CSS меняющих жизнь

Изучите 3 потрясающих совета и приема CSS, представленные другими зрителями.

📺 YouTube

WebDEV #видео #css

🛠 CSS Wand — коллекция полезных настраиваемых счетчиков загрузки CSS, анимированных кнопок и других интересных компонентов. Очень просто взять один из фрагментов, скопировать CSS и вставить в свой проект. Код действительно чистый, поэтому после небольшой настройки он будет выглядеть так, как вам нравится.

WebDEV #инструменты #css

💡 Автоматизированные средства проверки (линтеры)

Автоматизированные средства проверки, так называемые «линтеры» – это инструменты, которые могут автоматически проверять стиль вашего кода и вносить предложения по его улучшению.

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

Вот некоторые известные инструменты для проверки:

• JSLint – проверяет код на соответствие стилю JSLint, в онлайн-интерфейсе вверху можно ввести код, а внизу – различные настройки проверки, чтобы попробовать её в действии.

• JSHint – больше проверок, чем в JSLint.

• ESLint – пожалуй, самый современный линтер.

Все они, в общем-то, работают. Большинство линтеров интегрированы со многими популярными редакторами: просто включите плагин в редакторе и настройте стиль.

WebDEV #советы #js

🔥 Лучшее на канале за неделю

1. Руководства по стилю кода.

2. CSS Wand — коллекция полезных настраиваемых счетчиков загрузки CSS, анимированных кнопок и других интересных компонентов.

3. Автоматизированные средства проверки.

WebDEV #test #html

Выберите правильный вариант 👇🏼