JS

Переменные нужны для хранения информации. Это своеобразная «коробка» для данных с уникальным именем. Туда можно положить любое значение и потом менять его сколько угодно раз. Важно назвать переменные так, чтобы даже через несколько месяцев, понять, что и как обозначается в коде. Разберёмся, как именовать переменные в JavaScript и PHP.

ES6 и не только

Кайл Симпсон

Единственная книга по ES6 на русском от хорошего автора. Особое внимание в ней уделяется новым функциям, появившимся в Ecmascript 6.

JavaScript: сильные стороны

Дуглас Крокфорд

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

JavaScript. Шаблоны

Стоян Стефанов

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

Practical SVG

Крис Койер

Книга подойдёт для опытных веб-дизайнеров и разработчиков. Если вы никогда не работали с HTML, CSS, JavaScript, возможно, она покажется вам слишком непонятной. В ней разбираются основы использования SVG, инструменты сборки, анимация SVG и другие особенности векторной графики.

Accessibility for everyone

Лора Калбэг

Книга о разработке доступного интерфейса. В ней описано, как написать доступный код, и эффективно использовать лучшие практики. Из неё вы узнаете, почему доступность имеет значение, и как её реализовать.

Некоторые книги серии A Book Apart есть и на русском языке. Среди них — «CSS3 для веб-дизайнеров», «Эмоциональный веб-дизайн», «Дизайн — это работа» и другие.

Мало книг?

Посмотрите подборку для тех, кто начинает учить JavaScript, и осваивать бэкенд-разработку.

Если вы только сели за изучение JavaScript, то у вас очень быстро возникнет вопрос: а как запустить код?

Простой скрипт можно запустить прямо в браузере. Большинство из них сегодня позволяют сделать это в пару кликов. Но возможностей браузера не хватит, если задача — разработка сложного приложения, работающего с базами данных и файлами. Здесь на помощь приходит Node.js.

Node.js — среда выполнения JavaScript-кода. Она создана на базе движка V8, который крутится в сердце браузера Chrome. Эта среда позволяет запускать JavaScript-сценарии в окружении операционной системы, а не браузера.

Кроме стандартных возможностей JavaScript, Node.js даёт инструменты для работы с сетью, вводом и выводом, файловой системой и не только. В придачу к среде идёт и пакетный менеджер npm, который позволяет разработчикам ставить сторонние пакеты в одну строку.

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

Это перевод статьи Кевина Кононенко »JavaScript Arrays and Objects Are Just Like».

Если вы читали книги и газеты, то легко поймёте разницу между объектами и массивами в JavaScript.

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

Выбор между объектом и массивом станет проще, если представлять себе зачем нужна та или иная структура. Массивы подобны книгам, в которых содержится та или иная информация, а объекты похожи на газету.

Разберёмся с этим.

Спрашивает нас Антон: нужна ли математика программисту? Антон, нужна. А, кроме неё, нужна сферическая геометрия, география, музыка и банковское дело. И я сейчас не шучу.

Дело в том, что программисты редко решают задачи для самих себя: мы работаем в банковских сервисах, сервисах бронирования отелей, картографических сервисах и прочих Яндекс.Почтах. Получается, что мы решаем задачи наших пользователей.

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

Важнее то, что стоит за этими вещами: понимание как работает система в целом. Если посмотреть на вещи с этой стороны, то станет понятно, что программист — это младший специалист в области, в которой работает сайт.

Ещё пять лет назад Артём Поликарпов доказал, что каждый фронтендер немного дизайнер. Нам нужно понимать как устроены шрифты: что такое гротеск, чем он отличается от антиквы, что такое интерлиньяж, кернинг, разрядка, капитель. Понимать, что такое сетки и что такое композиция. Кроме этого, разбираться в UX — мы должны знать что такое оптимистичный UI, где поставить прелоадер и зачем это всё нужно пользователю.

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

Например, правильность номера банковской карты определяется по алгоритму Луна — это теория кодирования.

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

С картами, вообще, связано очень много интересного. Например, Яндекс.Карты используют эллиптическую проекцию Меркатора, а все остальные географические сервисы — сферическую, поэтому если вы захотите наложить слой Яндекс.Пробок на любую другую карту у вас не сойдутся улицы и вам нужно будет знать, как трансформировать одну проекцию в другую.

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

.neo {
  transform: matrix(0, -1, 1, 0, 50px, 50px);
}

С кругозором понятно — изучайте всё, что хотите, потому что в любом случае это вам пригодится. Но есть ли какая-то общая область, которая нужна всем программистам? Да, такая область есть, она называется «дискретная математика». Наука, которая лежит в основе информатики.

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

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

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

Например, вы знаете, что querySelector использует поиск в глубину? Это значит, что когда он заходит на узел DOM-дерева, он пытается посмотреть сначала его дочерние узлы и только потом соседние. Это значит если вы будете искать с помощью querySelector первый элемент на странице, то необязательно это будет элемент верхнего уровня, найденный элемент может находиться на любой вложенности.

<main>
  <section>
    <div id="underdog"></div>
  </section>
  <div id="favorite"></div>
</main>

const firstDiv = document.querySelector('div');
firstDiv.id === 'underdog';

Ещё одна тема из дискретной математики — алгоритмы. Теория алгоритмов изучает что такое алгоритмы и оценку их эффективности. Представьте, у вас есть список людей, у которых вам нужно посчитать средний рост. Список задан в виде массива объектов.

const people = [
  { name: 'Иван', height: 183 },
  { name: 'Марья', height: 155 },
];

Первое решение, которое может прийти в голову — это с помощью метода map собрать другой массив, массив ростов этих людей, а потом с помощью метода reduce посчитать их сумму и поделить на количество.

const averageHeight = people
  .map(it => it.height)
  .reduce((acc, it) => acc + it) / people.length;

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

const averageHeight = people
  .reduce((acc, it) => acc + it.height) / people.length;

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

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

Это перевод статьи Притти Кассириди »Let’s Learn JavaScript Closures».

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

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

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

Надеюсь, после этой статьи вы будете лучше подготовлены к использованию замыканий в своей повседневной разработке. Давайте начнём.

Это перевод статьи Ире Адеринокун — »Form validation techniques».

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