Java Script

Подробности о JavaScript-объектах
Автор материала, перевод которого мы предлагаем к ознакомлению, говорит, что в JavaScript-объектах содержится много такого, о существовании чего можно и не подозревать, пользуясь ими в повседневной работе. Объекты в JavaScript очень легко создавать, с ними удобно работать, они кажутся понятными и гибкими сущностями, и многие программисты попросту не задумываются о том, что на самом деле устроены объекты не так уж и просто. Из этой статьи вы узнаете о том, что скрыто в глубинах объектов и обсудим тонкости работы с ними.

Как дебажить фронтенд и бекенд: пошаговая инструкция
Представляем вам перевод статьи «How to debug javascript in Chrome quick and easy «. В этом посте вы научитесь дебажить JavaScript на фронт- и бекенде с помощью Chrome DevTools и VS Code.

HTML

Кастомный виджет googleTranslate для сайта
Автор этой статьи предлагает создать кастомный виджет googleTranslate для сайта. В этой статье вы найдёте пошаговую инструкцию как это сделать, а так же объяснения автора, демо и ссылку на репозиторий с проектом на GitHub.

Занимательное

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

Telegram опять раздаёт деньги за разработку простых шаблонов CSS
Павел Дуров объявил о втором конкурсе Template Competition 2.0, всем участникам которого платят по $100 за каждый шаблон HTML/CSS для предпросмотра сайта СМИ в мессенджере. А также $2 за каждую ошибку, найденную в чужом шаблоне (сумма вычитается из гонорара автора). Сделать Instant View для предпросмотра очень легко. Например, победители прошлого конкурса написали по 40 штук. Они получили по 40×100 долларов гонорара (минус штраф за ошибки) и вдобавок разделили главный приз $10 000. Свои кошельки пополнили около 370 других участников! В этом году призы такие же: $10 000 за первое место и $5000 за второе. Сто долларов за каждый шаблон и $2 за найденную ошибку. Общий призовой фонд — $300 000.

Новое в браузерах: Firefox 66 по умолчанию блокирует видео и звук, Chromium ограничивает бюджет страниц
В ближайших версиях Firefox и Chromium могут произойти важные изменения! Во-первых, в Firefox 66 для десктопов по умолчанию заблокируется автоматическое воспроизведение видео и звука на всех страницах. Блог Mozilla Hacks заранее предупреждает об этом разработчиков. Воспроизведение видео и звука разрешается только через HTMLMediaElement API и только после взаимодействия пользователя со страницей (щелчок мыши, нажатие кнопки или прикосновение к тачскрину). В Chromium могут произойти ещё более интересные изменения. При этом разрешено автоматическое воспроизведение видео с заглушённым звуком. Для такого контента нужно для HTMLMediaElement установить атрибут “muted” в значение true. На скриншоте показано, что пользователи могут вручную отключить блокировку звука для отдельных сайтов. В Firefox для Android новая реализация заменит существующий механизм блокировки автоматического воспроизведения. Технически Firefox блокирует вызов play() от HTMLMediaElement.play(), возвращая ошибку NotAllowedError. Так же поступают все браузеры с аналогичной функциональностью. Соответственно, веб-разработчикам не следует предполагать, что вызов play() всегда будет успешен. Чтобы избежать блокировки, рекомендуется два варианта. Первый: запускать воспроизведение контента в связке с обработчиком событий, например, KeyboardEvent на десктопе или touchend под Android. Второй: запустить автовоспроизведение без звука (оно разрешено по умолчанию) и показать пользователю кнопку для включения звука. Финальная версия Firefox 66 запланирована к выходу на 19 марта 2019 года, так что у разработчиков есть время на подготовку. Mozilla сейчас работает над автоматической блокировкой контента Web Audio: её обещают до конца 2019 года.

let weekend = ['Saturday', 'Sunday'];
let work = ['Monday', 'Tuesday', 'Wednesday'];

// Старый способ 
let fullWeek = work.concat( 'Thursday', 'Friday', weekend);
console.log(fullWeek); // [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ]

// ES6 способ
let fullWeekES6 = [...work, 'Thursday', 'Friday', ...weekend];
console.log(fullWeekES6); // [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ]

JavaScript

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

Node.js

12 странных вещей, которые могут произойти после установки npm пакета
Пару месяцев назад автор этого материала начал заниматься проектом под названием malicious-packages (ака «вредоносные пакеты»). Он следит за обновлениями в npm репозитории, скачивает все новые модули, а затем проверяет их на вшивость — ищет сетевую активность, подозрительные операции с файловой системой и т.д. Даже маленькие проекты на node.js часто имеют большое дерево зависимостей, и у разработчиков физически нет возможности проверить их все. Это даёт злоумышленникам огромный простор для манёвра, и возникает вопрос — сколько же всякой гадости прячется по тёмным углам npm registry? 180000 проверенных пакетов спустя автор получил примерный ответ.

Руководство для начинающих по серверной веб-разработке с Node.js

Анализ подходов к связыванию модулей в Node.js
Многие разработчики Node.js для связывания модулей используют исключительно создание жёсткой зависимости с помощью require(), однако существуют и другие подходы, со своими плюсами и минусами. О них в этой статье вы и узнаете. Автор рассматривает четыре подхода: жёсткие зависимости (require()), внедрение зависимостей (Dependency Injection), локаторы служб (Service Locator) и контейнеры внедряемых зависимостей (DI Container).

Когда использовать var, let и const в Javascript [перевод статьи Tyler’а McGinnis]
Представляем вашему вниманию перевод статьи «var vs let vs const in JavaScript» автора Tyler McGinnis.
В этой статье вы узнаете 2 новых способа для создания переменных в Javascript (ES6), let и const. На протяжении этой статьи мы рассмотрим разницу между var, let и const, а также смежные темы такие как: “область видимости функции против блочной области видимости“, “поднятие” переменных и иммутабельность.
Но прежде чем мы углубимся в различия между var, let и const, имеются некоторые темы, которые вам следует узнать в первую очередь. Это объявление переменных и их инициализация, область видимости (особая область видимости функции) и “поднятие”.

ES6

 
ECMAScript Proposal: Array.prototype.{flat,flatMap}
А вы уже слышали про такую интересную штуку, которая в скором времени появится уже появилась в стандарте ECMAScript?
Она уже доступна почти во всех браузерах и весь функционал тоже. Это нововведение всего лишь сахар-обертка и ее можно решить своими средствами и автор этого материала вам это покажет. Но этот сахар позволит вам писать кода меньше, ведь мы это так любим. Итак, добавляется базовые функции к массиву, в данном случае их 2, которые позволят нам разворачивать многоуровневые массивы в один или более уровней вложенности. Да-да, и все это как говориться из коробки☝️😀

Java Script

JavaScript: вопросы и ответы
Недавно в компании SmartSpate решили собрать вопросы, касающиеся JavaScript, и на них ответить. В материале, перевод которого мы публикуем, приведены чуть больше двух десятков вопросов о JavaScript и ответов на них. Спектр затрагиваемых здесь тем достаточно широк. В частности — это особенности языка, проблемы, возникающие у программистов при написании JS-кода, работа в браузере и в среде Node.js.
Браузерная симуляция физики

Vue.js

8 худших вопросов на собеседовании по Vue.js

Много свойств или свойство-объект: критерии выбора

CSS

Как не надо писать шаблоны для bootstrap
Мало кто сейчас пишет дизайн сайта с нуля — зачем, если есть куча замечательных CSS фреймворков? Наиболее популярен среди них bootstrap. Тем не менее, всем хочется, чтобы сайт выглядел уникально, не так как у других — поэтому поверх часто втыкают(в меру возможностей) бесплатный или платный шаблон, либо свой UI кит. О некоторых проблемах, которые(к сожалению) встречаются даже в платных шаблонах, не говоря уж о своих решениях,автор и хочет поговорить.

Занимательное

К чему готовиться в 2019 году: тренды в программировании

Путь курильщика: как войти в профессию программиста, если ты гуманитарий
В детстве Анастасия Бирилло мечтала стать учителем русского языка и литературы. Сегодня она – научный сотрудник JetBrains Research, методист и преподаватель Digital Banana, а также разработчик собственного стартапа. «Гуманитарий – не приговор», – утверждает Настя. На конференции «Контентинг» она рассказала о том, как освоить программирование самостоятельно, какое направление выбрать начинающему разработчику, где искать проекты, какие трудности могут встретиться на «пути курильщика» и как их преодолеть.

Java Script

Трехмерные презентации товаров на Three.js для самых маленьких
Всевозможные презентации товаров в 3D – не такая уж и редкость в наше время, но эти задачи вызывают массу вопросов у начинающих разработчиков. В этой статье вы узнаете некоторые основы, которые помогут войти в эту тему и не спотыкаться о такую простую задачу, как отображение трехмерной модельки в браузере. В качестве подспорья будем использовать Three.js как самый популярный инструмент в этой области.

Angular

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

CSS

Плейсхолдер для изображения с использованием padding-top и процентов
Когда мы проходим собеседования, нам часто задают вопросы по верстке. Зачастую они сводятся к перечислению значений свойства display или способов центрирования элементов. Автора это откровенно достало, и ему захотелось придумать свои задачи, с помощью которых можно проверить знания верстальщика, а не то, как он зазубрил значения свойств.

Философия CSS
Сегодня вам предлагается к ознакомлению перевод статьи Кита Гранта (опубликована в июне), в которой автор излагает свою точку зрения на CSS и фактически объясняет, о чем хотел рассказать в своей книге.

Занимательное

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

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

Декомпозиция проекта для frontend’a
Автор этого материала, взглянув на Фронтенд итоги 2018 года, решил написать своё мнение о декомпозиция проекта для frontend’a. Он ведёт рассуждение на примере большинства проектов из личного опыта и мы уверены, вы найдёте тут немного интересного!

JS

Машинное обучение с Node.js при помощи библиотеки Tensorflow.js
А что вы слышали о ТensorFlow.js – новой версии популярной опенсорсной библиотеки, обогащающей язык JavaScript возможностями глубокого обучения. Теперь с помощью неё разработчики могут определять, обучать и запускать модели при помощи высокоуровневого библиотечного API. В этой статье вы сможете ознакомиться с данной библиотекой, узнать её нюансы и не только!

Явные возможности JavaScript

Начитывая очередную статью про малоизвестные фичи языка JavaScript и втихую пописывая какие-то невменяемые решения в консоли браузера, автор часто проговаривает в голове, мол, ну на проде-то конечно все не так!? Ведь язык давно обзавелся огромнейшим комьюнити и имеет удивительно широкий охват промышленной разработки. Раз так, то почему же мы часто забываем про его возможность быть понятным для каждого и буквально пропагандируем все эти специфичные и «запоминаемые» конструкции? Just make it Obvious! Предлагаем вам ознакомится с рассуждениями автора на этот счёт и почему бы нам немного не приподнять этот занавес хотя бы со стороны JavaScript-сообщества? Для этого достаточно лишь привнести немного явности в наш код, используя гибкость языка не чтобы выпендриться, а чтобы нас понимали.

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

CSS

 
О преимуществах встраивания CSS в JS
В этой статье вы узнаете о преимуществах встраивания CSS в JS, а так же каким образом Javascript оказывается более удобным чем CSS и как написание CSS внутри JS делает его более поддерживаемым.

Атомарный CSS — порядок и чистота
С первых строк кода, каждый человек начинает понимать важность правильной его организации и оптимизации рабочего пространства в целом. Не важно о какой отрасли говорить конкретно, но важно понимать что везде где есть код – должны быть правила его создания и хранения. На первых парах конечно может показаться, что придерживание определенных правил и порядков лишь отнимает время, что на практике выглядит совсем иначе. Квинтэссенция любых принципов написания кода заключается в том, что мы не пишем его один раз и навсегда – мы постоянно возвращаемся к нему с целью редактирования и модификации.
Atomic CSS – пожалуй является самой необычной и даже в какой то мере пугающей методологией, что к счастью не мешает ей быть очень понятной и предсказуемой. Автор используя “атомарную методологию” рассказывает как создать чистый и понятный css.

Node.js

Есть идея: система разрешений для npm-пакетов
Несколько дней назад автор этого материала впервые запустил калькулятор на новом телефоне и увидел такое сообщение: «Калькулятор хотел бы получить доступ к вашим контактам». Сначала ему это сообщение показалось немного грустным (похоже, калькулятору было одиноко), но этот случай заставил меня задуматься…А как вы думаете, можно ли, внедрив систему разрешений для пакетов в npm, повысить безопасность веб-среды?

Занимательное

Фронтенд-2018: итоги года

Мир веб-разработки развивается невероятно быстро. То, что вчера было новостью, сегодня уже может устареть, а то, о чём сегодня почти никто не знает, завтра способно стать двигателем прогресса. В материале, с переводом которого вы можете ознакомится, будет рассмотрено всё самое интересное, произошедшее в сфере фронтенда в 2018 году. Речь пойдёт о развитии фреймворков и вспомогательных инструментов, о JavaScript-трендах, а также о том, в каком направлении фронтенд может пойти в 2019.

JavaScript

Объясняем бэкдор в event-stream
Если вы работаете с Javascript, то скорее всего вы заметили много шума об уязвимости в npm-пакете event-stream. Автор решил написать пост с детальным объяснением, как сработала эта атака и что может сделать Javascript сообщество, чтобы лучше защититься от подобных атак в будущем.

Руководство по обработке ошибок в JavaScript
Этот материал, посвящённый обработке ошибок в JavaScript, с общим обзором системы обработки ошибок в JavaScript и обсуждением объектов ошибок. Так же эта статья подскажет что делать с ошибками, возникающими в серверном коде (в частности, при использовании связки Node.js + Express.js). Рассматриваемые в этой статье принципы работы с ошибками универсальны, поэтому вы без труда сможете применить то, что узнали, к тем инструментам, с которыми работаете.

CSS

Готовим идеальный CSS
В этой статье автор поднимает тему о CSS стилях и о том, как на достаточно большом проекте привести всё в порядок, избавляясь от проблем hot-reload’а, code-splitting’а и больших названий CSS классов. В этом автор склонился к выбору использования CSS Modules, который он пошагово настроит в этой статье.

Занимательное

Столетний холивар: креативность против юзабилити

Недавно на ресурсе Medium было опубликовано противоречивое эссе Boris Müller «Почему все веб-сайты выглядят одинаково?», в котором он поднял тему о визуальной усталости паутины и критикует конкретную тенденцию к вебу, управляемому шаблонами, который оставляет очень мало шансов для инновационных и сложных подходов к разработке. И всё свелось к вечному противостоянию творчество против юзабилити

JavaScript

Стрелочные функции в JavaScript: зачем они нужны, как с ними обращаться, когда ими стоит пользоваться, а когда — нет
И снова вспомним с вами, что такое стрелочные функции, зачем они нужны, что можно делать с их помощью, а что — нет.

Функции высшего порядка в JavaScript: что это такое?
Представляем вам перевод статьи Sukhjinder Arora, опубликованной на ресурсе Bits and Pieces. Вы узнаете о функциях высшего порядка в JavaScript, как их использовать, научитесь создавать собственную функцию высшего порядка и многое другое!

Руководство по JavaScript, часть 8: обзор возможностей стандарта ES6
Продолжение руководства по JavaScript, в котором вы узнаете или повторите возможности стандарта ES6.
Предыдущие части можно посмотреть в этой же статье.

TypeScript

TypeScript: Десериализация JSON в классы с валидацией типов у свойств
Не так давно в JavaScript появилась такая замечательная вещь как классы, которая значительно упростила процесс написания кода. Но к сожалению не появился функционал для десериализации JSON в эти самые классы, т.е. сериализовать класс в строку можно, а вот обратно уже своими силами. И вот для исправления этого недостатка и была написана библиотека ts-serializable которой автор решил поделится со всеми.

Node.js

Самые популярные Node.js-фреймворки 2018 года
Автор этого материала рассказывает о самых популярных в наши дни фреймворках для Node.js. В этот список входят Sails.js, Hapi.js, NestJS, LoopBack, Derby.js, Mean.io и Total.js.

Занимательное

Тренды в языках программирования 2019
2018 запомнится нам открытиями в сфере искусственного интеллекта и машинного обучения, скачками биткоина и развитием блокчейна. А что нас ждет в новом году?

 JavaScript

Кротовые норы в JavaScript
Предлагаем вам ознакомиться с переводом статьи «Wormholes in JavaScript» автора Mathius Buus, в которой он затрагивает идею о том, на что способен компьютер,и можно ли использовать кратчайшие пути или кротовые норы, чтобы сделать программы намного быстрее?

Красота НЕ-безымянных функций в JavaScript
Анонимные стрелочные функции в JavaScript, согласно некоторым опросам — самая популярная фича ES-2015, что также подчеркнуто исчерпывающим числом туториалов в интернете. Они бесспорно очень полезны, но в этой небольшой статье автор рассмоатривает примеры использования обделенных вниманием не менее замечательных выражений с именованными функциями — NFE.

Работа с абстрактными синтаксическими деревьями JavaScript
Зачем парсить свой код? Например, для того, чтобы найти забытый console.log перед коммитом. А что делать, если вам надо изменить сигнатуру функции в сотнях вхождений в коде? Справятся ли тут регулярные выражения? В этой статье будет показано, какие возможности перед разработчиком открывают абстрактные синтаксические деревья.

 CSS

«Class-fields-proposal» или «Что пошло не так в коммитете tc39»
Автор этого интересного материала поднимает тему о class-fields-proposal, о его слабых и сильных сторонах, некоторых изменениях и семантики как таковой.

Создание адаптивных изображений
На просторах интернета можно найти много разных статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных размеров экрана. Но когда автор даного материала наткнулся на доклад от Smashing Conference от MikeRiethmuller под названием «За пределами медиазапросов», его мировозрение перевернулось и он открыл для себя возможности SVG. Поэтому в этом материале вы узнаете, как шаг за шагом сделать свой адаптивный логотип.

Советы по CSS, которые вы вряд ли найдете в самоучителях

JavaScript

Контекст выполнения и стек вызовов в JavaScript
Если вы — JavaScript-разработчик или хотите им стать, это значит, что вам нужно разбираться во внутренних механизмах выполнения JS-кода. В частности, понимание того, что такое контекст выполнения и стек вызовов, совершенно необходимо для освоения других концепций JavaScript, таких, как поднятие переменных, области видимости, замыкания. Материал, с переводом которого вы можете ознакомиться, посвящён контексту выполнения и стеку вызовов в JavaScript.

Красивый и чистый: инструменты, которые помогают добиться почти идеального кода
Вы хотите писать хороший код, но не знаете, с чего начать, пробуете читать то и это, реализуете на практике прочитанное. Но все равно, вопросов остается больше, чем ответов. Нужно ли убирать «мертвый» код? Что делать, если обнаружена неиспользуемая переменная в уже написанном проекте? Как найти проблемные паттерны и все исправить? Эти вопросы важны, и многие из нас пытаются на них ответить. Но лучше всего — все делать хорошо уже с нуля, так, чтобы потом не приходилось искать проблемные места и латать дыры, теряя время. Для создания хорошего кода есть несколько инструментов, которые можно назвать незаменимыми.

Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода
Вы стремитесь к тому, чтобы писать аккуратный код, но не знаете с чего начать… Вы вчитываетесь в руководства по стилю, стараетесь следовать практическим рекомендациям ведущих специалистов… Вам приходится удалять неиспользуемый код? Приходится искать ненужные переменные? Вы пытаетесь выявлять неудачные паттерны, применённые в ваших программах? Например — хотите понять, читая хитросплетения кода некоей функции, возвратит ли она что-нибудь или нет. Звучит знакомо? Проблема заключается в том, что программисту очень тяжело и многое успевать, и многому учиться.
Автор этого материала говорит, что он сталкивался со всем тем, чему посвящены только что заданные вопросы. То, с чем он столкнулся, утомляет и изматывает. Здесь он хочет рассказать об инструментах, правильное применение которых позволяет решить вышеописанные проблемы.

Flexbox: насколько велика эта гибкая коробка?
И снова затрагивая тему Flexbox. В этой статье автор затрагивает тему размеров.Автор рассматрвает часто запутанную проблему размеров во Flexbox, и как Flexbox решает, насколько большие должны быть элементы?

Webpack

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

 Angular

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

Занимательное

Системный подход к скорости: онлайн-измерения на фронтенде
В этой статье речь пойдёт о команде скорости Яндекса и как они вручную оптимизируют поисковую выдачу. Чтоб не собирать все данные вручную, в компании построили инфраструктуру для сбора метрик, тестирования скорости и анализа полученных данных. Вы узнаете что полезного эта команда сделала и с какими подводными камнями столкнулась.