Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

272,91
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Wolfensteiny 3D — реверс-инжиниринг 251 байтов JavaScript

Время на прочтение5 мин
Охват и читатели17K
При написании кода многие не задумываются ни о чем, кроме логики самой программы. Меньшее число людей думают об оптимизации кода по времени, по памяти. Но лишь единицы доходят до последнего уровня — сжатии программы до рекордно маленького размера.

Посмотрите, например, на результат работы всего 251 байта JavaScript:


Ну, давайте разбираться, как это работает!
Читать дальше →

React и Vue: сильные стороны

Время на прочтение8 мин
Охват и читатели13K
image Здравствуйте, коллеги. Мы возобновляем наши переводные публикации. Сегодняшний текст анонсирует давно назревшую новинку по веб-разработке, посвященную ультрасовременной библиотеке Vue.js. Учитывая, что у нас в ассортименте имеется сразу три отличные книги по React, а также книга по GraphQL, эта книга, несомненно, составит им хорошую компанию. О сильных сторонах Vue по сравнению с React – читайте под катом.

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

Конечно, неэффективно распыляться между схожими инструментами, но разве вам не любопытно? Мне – любопытно.
Читать дальше →

Функциональное тестирование навыков Яндекс Алисы на Node.js

Время на прочтение5 мин
Охват и читатели7K

Алиса, запусти навык


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


В этой статье я рассмотрю написание функциональных автоматизированных тестов для навыка на Node.js. Наличие таких тестов позволяет создавать более качественные навыки и дает уверенность в их работоспособности.

Читать дальше →

Повышаем производительность в компонентах-функциях React с помощью React.memo ()

Время на прочтение7 мин
Охват и читатели37K
Представляем вам перевод статьи Chidume Nnamdi, которая была опубликована на blog.bitsrc.io. Если вы хотите узнать, как избежать лишнего рендера и чем полезны новые инструменты в React, добро пожаловать под кат.

Читать дальше →

React и Code Splitting

Время на прочтение6 мин
Охват и читатели18K

С code splitting я познакомился очень давно, в году так 2008, когда Яндекс немного подвис, и скрипты Яндекс.Директа, синхронно подключенные на сайте, просто этот сайт убили. Вообще в те времена было нормой, если ваши "скрипты" это 10 файлов которые вы подключаете в единственно правильном порядке, что и до сих пор (с defer) работает просто на ура.
Потом я начал активно работать с картами, а они до сих пор подключаются как внешние скрипты, конечно же lazy-load. Потом уже, как член команды Яндекс.Карт, я активно использовал ymodules возможность tree-shaking на клиенте, что обеспечивало просто идеальный code splitting.


А потом я переметнулся в webpack и React, в страну непуганных идиотов, которые смотрели на require.ensure как баран на новые ворота, да и до сих пор так делают.


Code splitting — это не "вау-фича", это "маст хэв". Еще бы SSR не мешался...


Разберемся?

Учебный курс по React, часть 20: первое занятие по условному рендерингу

Время на прочтение9 мин
Охват и читатели16K
Сегодня, в переводе следующей части учебного курса по React, мы поговорим об условном рендеринге.

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами
Часть 25: практикум по работе с формами
Часть 26: архитектура приложений, паттерн Container/Component
Часть 27: курсовой проект
Читать дальше →

Как получить Google Developers Certification: Mobile Web Specialist

Время на прочтение5 мин
Охват и читатели10K

Привет, Хабр! Сегодня хочу поделиться с вами историей о том, как я сдавал сертификационный экзамен Google Developers Certification: Mobile Web Specialist. Если честно, то каких-то объективных причин я назвать не могу, так как не слышал ещё ни об одном случае, когда наличие сертификата давало кому-то преференции при устройстве на работу или помогало повысить зарплату. Под катом расскажу, почему всё же решил сдать экзамен и подробно опишу, как я его сдавал.


Читать дальше →

Sketch + Node.js: генерируем иконки для множества платформ и брендов

Время на прочтение9 мин
Охват и читатели7K


Нет ничего проще, чем добавить иконку в проект: нужно всего лишь написать дизайнеру, он экспортирует её из Sketch и пришлет вам нужный вариант, а вы используете ее у себя в коде. Если же у вас с десяток проектов, несколько платформ и множество А/Б-тестов на дизайн, то достаточно делать всё то же самое, только в 40 раз чаще и нигде не ошибаться… либо постараться автоматизировать процесс. Под катом — первая часть перевода статьи моего коллеги Cristiano Rastelli про один из примеров такой автоматизации.

Проблема, которую мы решали


Мы в Badoo разрабатываем приложение для знакомств. Вообще-то это несколько приложений, каждое из которых функционирует на нескольких платформах (iOS, Android, Mobile Web, Desktop Web), и работу над ними ведут несколько команд.

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

Ломать — не строить. Или Devolution

Время на прочтение3 мин
Охват и читатели3.7K
В последнее время на Хабре появилось пара интересных статей. Первая была посвещена проблеме минификации ES6, вторая про общие полезные советы оптимизации webpack.

Все бы хорошо, но они обе обошли стороной вопрос разделение бандлов на ES6 и ES5 для целей минификации и другой оптимизации. И вообще, в то время как одни все пишут и пишут статьи про это — другие (почти все) данную технику игнорируют.

Потому что Долго. Дорого. И не так чтобы очень очень.

А надо быстро, дешево, и потупее. Возможно следует просто обратить эволюцию вспять.


Хватит это терпеть

Учебный курс по React, часть 19: методы жизненного цикла компонентов

Время на прочтение9 мин
Охват и читатели21K
В сегодняшней части перевода учебного курса по React вашему вниманию будет представлен обзор методов жизненного цикла компонентов.

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами
Часть 25: практикум по работе с формами
Часть 26: архитектура приложений, паттерн Container/Component
Часть 27: курсовой проект
Читать дальше →

Rollup: уже можно собирать приложения

Время на прочтение9 мин
Охват и читатели40K
Rollup — это сборщик javascript приложений и библиотек нового поколения. Многим он давно знаком как перспективный сборщик, который хорошо подходит для сборки библиотек, но плохо подходит для сборки приложений. Однако время идет, продукт активно развивается.

Я впервые попробовал его в начале 2017 года. Он сразу понравился мне за поддержку компиляции в ES2015, treeshaking, отсутствием модулей в сборке и конечно простым конфигом. Но тогда это был сырой продукт, с небольшим числом плагинов и очень ограниченной функциональностью, и я решил оставить его на потом и продолжил собирать через browserify. Вторая попытка была в 2018 году, тогда он уже значительно оброс комьюнити, плагинами и функционалом, но все еще не хватало качества в некоторых функциях, включая watcher. И вот наконец в начале 2019 года можно смело сказать — с помощью Rollup можно просто и удобно собирать современные приложения.
Читать дальше →

Качество кода

Время на прочтение19 мин
Охват и читатели41K
Качество кода — тема, которая родилась вместе с программированием. Для оценки и контроля качества менеджмента предприятий применяется ISO 9000, для продуктов — ГОСТ и тот же ISO, а вот для оценки качества кода ГОСТа нет. Точного определения и стандарта для качества кода тоже нет.



Каждый разработчик понимает качество по-своему, исходя из опыта. Представления джунов и лидов различаются, и это приводит к разногласиям. Каждая команда для отдельных проектов оценивает код по-своему. Команда обновляется, разработчики уходят, тимлиды сменяются — определение качества меняется. Эту проблему попробует помочь решить Иван Ботанов (StressoID) из Tinkoff.ru — Frontend-developer, преподаватель онлайн-курса по Angular, спикер на митапах и конференциях, ведущий уроков на YouTube и, иногда, тренер команд в компаниях.

В расшифровке доклада Ивана на Frontend Conf поговорим о читаемости, нейминге, декларативности, Code style, и косвенно коснемся отношений джунов и лидов: ошибки, грабли и «сгорание» тимлидов.

Disclaimer: Подготовьтесь морально, в тексте будет много плохого кода, взятого с «особенного» сайта.

Эффективное создание компонентов с помощью styled system

Время на прочтение4 мин
Охват и читатели16K
image

Для стилизации react компонентов наша команда использует styled-components.

О styled-components уже есть статьи на Хабре, поэтому подробно останавливаться на этом не будем.

Знакомство с Styled components
Лучше, быстрее, мощнее: styled-components v4

Написав много компонентов мы обнаружили, что почти в каждом компоненте мы копируем повторяющиеся свойства.
Читать дальше →

Ближайшие события

Автоматизируем переход на React Hooks

Время на прочтение8 мин
Охват и читатели5.6K

React 16.18 — первый стабильный релиз с поддержкой react hooks. Теперь хуки можно использовать не опасаясь, что API изменится кардинальным образом. И хотя команда разработчиков react советует использовать новую технологию лишь для новых компонентов, многим, в том числе и мне, хотелось бы их использовать и для старых компонентов использующих классы. Но поскольку ручной рефакторинг — процесс трудоемкий, мы попробуем его автоматизировать. Описанные в статье приемы подходят для автоматизации рефакторинга не только react компонентов, но и любого другого кода на JavaScript.

Читать дальше →

12 концепций JavaScript, о которых нужно знать

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


Читать дальше →

Две стороны WebView: о быстром запуске проектов и краже персональных данных

Время на прочтение8 мин
Охват и читатели51K
Привет, Хабр!

Меня зовут Евгений, я Full Stack JS разработчик, текущий стек Node.js + React + React Native. В разработке я более 10 лет. В мобильной разработке пробовал разные инструменты от Cordova до React Native. Получив опыт работы с Cardova, я понял, что мне хотелось бы создавать нативные интерфейсы, на мой взгляд WebView не должно быть всем приложением. Но это не значит, что его не надо использовать вовсе.

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


Источник: srishta.com

Также немного расскажу о том, как вы можете использовать WebView и как его могут использовать против вас злоумышленники. Примеры в статье будут показаны с использованием фреймворка React Native, но те же идеи можно реализовать и без него.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №353 (17 — 24 февраля 2019)

Время на прочтение3 мин
Охват и читатели13K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →

Учебный курс по React, часть 18: шестой этап работы над TODO-приложением

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

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами
Часть 25: практикум по работе с формами
Часть 26: архитектура приложений, паттерн Container/Component
Часть 27: курсовой проект
Читать дальше →

Разработка под WebAssembly: реальные грабли и примеры

Время на прочтение25 мин
Охват и читатели45K


Анонс WebAssembly состоялся в 2015-м — но сейчас, спустя годы, всё ещё немногие могут похвастаться им в продакшне. Тем ценнее материалы о подобном опыте: информация из первых рук о том, каково с этим жить на практике, пока что в дефиците.

На конференции HolyJS доклад об опыте использования WebAssembly получил высокие оценки зрителей, и теперь специально для Хабра подготовлена текстовая версия этого доклада (видеозапись также приложена).
Читать дальше →

Google Drive как хранилище для веб-приложения

Время на прочтение9 мин
Охват и читатели46K

Предисловие


Мое веб-приложение хранит данные в localStorage. Это было удобно, пока не захотелось, чтобы пользователь, заходя на сайт с разных устройств, видел одно и то же. То есть, понадобилось удаленное хранилище.

Но приложение «хостится» на GitHub Pages и не имеет серверной части. Я решил не делать сервер, а данные хранить у третьей стороны. Это дает существенные преимущества:

  1. Не нужно платить за сервер, не болит голова о его стабильности и доступности.
  2. Меньше кода, меньше ошибок.
  3. Пользователю не нужно регистрироваться в моем приложении (это многих раздражает).
  4. Приватность выше, и пользователь знает, что его данные хранятся в месте, которому он, скорее всего, доверяет больше, чем мне.

Сначала выбор пал на remoteStorage.js. Они предлагают открытый протокол обмена данными, достаточно приятное API, возможность интеграции с Google Drive и Dropbox, а также свои сервера. Но этот путь оказался тупиковым (почему — отдельная история).

В итоге решил использовать Google Drive напрямую, и Google API Client Library (далее GAPI) как библиотеку для доступа к нему.

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

Надеюсь, данная статья сэкономит вам время, если вы решите использовать Google Drive в вашем приложении.
Читать дальше →