Обновить
256K+

JavaScript *

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

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

Обрабатываем данные на стороне клиента с помощью WebAssembly

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


WebAssembly (сокр. WASM) — технология запуска предварительно скомпилированного бинарного кода в браузере на стороне клиента. Впервые была представлена в 2015 году и на текущий момент поддерживается большинством современных браузеров.

Один из распространенный сценариев использования — предварительная обработка данных на стороне клиента перед отправкой файлов на сервер. В этой статье разберемся как это делается.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №434 (21 — 27 сентября 2020)

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

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

Как я умный аквариум делал (frontend)

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

Пролог



Как я рассказывал тут, я начал постройку умного аквариума на основе платы NodeMCU. На ней я использовал прошивку с micropython, поднял веб сервер и сделал API для манипуляции всеми периферийными устройствами и датчиками. Поскольку мой вариант умного аквариума изначально планировался как автономный, я хотел сделать некий UI для отслеживания всех процессов ну и для ручных корректировок. Каждый раз обращаться по роутам типа: http://192.168.1.70/led_controller?impulse=4000&level=200&ledName=white было очень муторно и неудобно. Особенно когда ты уже лег спать и под рукой только телефон. Да и опять же, хотелось получить levelup в разработке и сделать что-то увлекательное.


За основу UI взял Vue.js. Авторизация как таковая не нужна, т.к. мой "умный друг" был только локально в пределах моего WI-FI окружения. Да и если бы его взломали, ничего страшного не случилось. Другое дело когда я буду делать умный дом, там уже безопасность на первом месте, но сейчас не об этом. Итак, никакой авторизации, только SPA("Одностраничное приложение": "single page application"), никакого роутинга, все показатели и манипуляторы на одной странице. Из того что было сделано на backend — контроль за LED-матрицами и температурный датчик. Создаем новый проект на гите, делаем клон на рабочем месте и запускаем vue-cli:

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

Используем Chrome DevTools профессионально

Время на прочтение5 мин
Охват и читатели86K
И снова здравствуйте. В преддверии старта курса «JavaScript Developer. Professional» перевели

11 советов для тех, кто использует Chrome в качестве среды разработки.





Итак, по тем или иным причинам вы решили при разработке ориентироваться на Chrome. Вы открываете инструменты разработчика и приступаете к отладке кода.



Иногда вы открываете консоль, чтобы посмотреть вывод своей программы, или вкладку Elements, чтобы проверить CSS-стили элементов DOM.



А действительно ли вы разбираетесь в Chrome DevTools? На самом деле у инструментов разработчика множество мощных функций, которые облегчают жизнь, но о них мало кто знает.
Я расскажу о самых полезных из них.
Читать дальше →

Как Chrome DevTools с велосипеда на стандарт пересели

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


Краткая заметка о том, как в команде Chrome DevTools проходила миграция с внутреннего загрузчика модулей на стандартные модули JavaScript. Рассказываем, насколько и почему затянулась миграция, о скрытых издержках миграции и о выводах команды DevTools после завершения миграции. Но начнём с истории инструментов веб-разработчика.
Подробности под катом!

Первое знакомство с Moon.js

Время на прочтение9 мин
Охват и читатели9.8K
Сегодня речь пойдёт об очередной JavaScript-библиотеке, предназначенной для разработки интерфейсов. Возникает такое ощущение, что такие библиотеки появляются всё чаще и чаще. В этом материале мы рассмотрим библиотеку Moon.js и раскроем её особенности, о которых нужно знать для того чтобы приступить к работе с ней. В частности, мы поговорим о том, как создавать новые Moon.js-проекты, о том, как создавать элементы интерфейсов, как обрабатывать события. Освоив это руководство, вы сможете пользоваться Moon.js для разработки собственных приложений.


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

Разбираем тестовое задание на должность фронтенд-разработчика на Vue.js

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

Первое правило тестовых заданий - никогда не делайте тестовые задания!

Об этом уже было множество споров на Хабре, и тут мне выпал случай выучить этот урок на собственной шкуре...

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

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

Читать далее

Математика верстальщику не нужна 2: Матрицы, базовые трансформации, построение 3D и фильтры для картинок

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


В прошлый раз мы говорили о графиках и траекториях для покадровых анимаций, а сегодня речь пойдет про матрицы. Мы разберемся с тем, как строятся базовые трансформации в CSS, SVG и WebGL, построим отображение 3D-мира на экране своими руками, попутно проводя параллель с таким инструментом, как Three.js, а также поэкспериментируем с фильтрами для фотографий и разберемся, что же за магия такая лежит в их основе.

Напомню, что в этой серии статей мы знакомимся с разными штуками из области математики, которые пугают верстальщиков, но могут быть полезны при решении рабочих задач. Мы стараемся избежать излишней теоретизации, отдавая предпочтение картинкам и объяснению на пальцах, с акцентом на практическое применение во фронтенде. В связи с этим формулировки местами могут быть не совсем точными с точки зрения математики, или не совсем полными. Цель этой статьи – дать общее представление о том, что бывает, и откуда можно начать в случае чего.
Читать дальше →

25 и 26 сентября — открытые дни на Frontend Live

Время на прочтение7 мин
Охват и читатели3.2K
В эти дни принять участие в конференции может любой желающий. Но нужно зарегистрироваться. Смотрите, что вам будет по душе в полном расписании Frontend Live.

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

Что нового есть во Frontend и что мы можем сделать лучше?



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

Введение в React, которого нам не хватало

Время на прочтение17 мин
Охват и читатели42K
React — это самая популярная в мире JavaScript-библиотека. Но эта библиотека не потому хороша, что популярна, а потому популярна, что хороша. Большинство существующих вводных руководств по React начинается с примеров того, как пользоваться этой библиотекой. Но эти руководства ничего не говорят о том, почему стоит выбрать именно React.

У такого подхода есть свои сильные стороны. Если кто-то стремится к тому, чтобы, осваивая React, тут же приступить к практике, ему достаточно заглянуть в официальную документацию и взяться за дело.



Этот материал (вот, если интересно, его видеоверсия) написан для тех, кто хочет найти ответ на следующие вопросы: «Почему React? Почему React работает именно так? С какой целью API React устроены так, как устроены?».
Читать дальше →

Вышел Vue.js 3.0 «One piece»

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

Название - это отсылка к манге "One piece" про одного парня, который хочет стать пиратским королем, прим. перев.

Сегодня мы с гордостью объявляем об официальном выпуске Vue 3.0 «One Piece». Эта новая мажорная версия фреймворка с повышенной производительностью, меньшим размером, лучшей поддержкой TypeScript, новыми API-интерфейсами для крупномасштабных проектов (а для средних - можно избавиться от vuex, прим. перев.) и прочную основу для долгосрочных будущих итераций платформы.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №433 (14 — 20 сентября 2020)

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

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

Immutable Trie: найди то, не знаю что, но быстро, и не мусори

Время на прочтение9 мин
Охват и читатели5.8K
Про префиксное дерево (Trie) написано немало, в том числе и на Хабре. Вот пример, как оно может выглядеть:


И даже реализаций в коде, в том числе на JavaScript, для него существует немало — от «каноничной» by John Resig и разных оптимизированных версий до серии модулей в NPM.

Зачем же нам понадобилось использовать его для сервиса по сбору и анализу планов PostgreSQL, да еще и «велосипедить» какую-то новую реализацию?..
Читать дальше →

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

React 17: Ничего нового?

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

Семнадцатый релиз React необычен отсутствием новых фич и/или функционала. Этот релиз сфокусирован на будущее, чтобы миграция на новые версии библиотеки осуществлялась проще: приложения теперь можно обновлять по частям.

Многообещающий Concurrent Mode не будет представлен в 17 версии, как и другие нововведения, над которыми активно работает команда. Грядущий релиз является частью стратегии постепенных обновлений.

Читать далее

Выбираем библиотеку для финансовых графиков

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


Поиск подходящих графиков отнимает время. Делюсь опытом выбора финансовых библиотек — чтобы сэкономить ваше.


В статье — четыре библиотеки, с которыми работал сам. Сравнение и комментарии из личного опыта.


Статья актуализирована 25.07.2026.

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

Моментальная загрузка с instant.page

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


instant.page — это небольшой скрипт, позволяющий ускорять навигацию по сайту с помощью just-in-time предзагрузки. Когда пользователь наводит курсор на ссылку, страница предзагружается в фоне, и при переходе по ссылке открывается моментально. По тому же принципу работает InstantClick, но он предоставляется уже как отдельная библиотека на pushState и Ajax, с дополнительными модулями вроде прогресс-бара предзагрузки.
Читать дальше →

Делаем модальные окна для сайта. Заботимся об удобстве и доступности

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

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


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


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


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

Перфоманс фронтенда как современное искусство: графики, код, кулстори

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

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


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


  • Перфоманс приложения
  • Инфраструктура: сборка, тесты, пайплайны, раскатка на продакшене, инструменты для разработчика (например бабель-плагины, кастомные eslint правила)
  • Дизайн-система (UIKit)
  • Переезд на новые технологии

Если покопаться, можно найти много интересного.


Поэтому, давайте поговорим о перфомансе. Команда фронтенд архитектуры ответственна как за клиентскую часть, так и серверную (SSR).


Я предлагаю посмотреть на метрики и разобраться, как мы реагируем на различные триггеры. Статья будет разбита на 2 составляющие. Серверную и клиентскую. Графики, код и кулстори прилагаются.


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

Web Cryptography API: пример использования

Время на прочтение6 мин
Охват и читатели25K
Доброго времени суток, друзья!

В этом туториале мы рассмотрим Web Cryptography API: интерфейс шифрования данных на стороне клиента. Данный туториал основан на этой статье. Предполагается, что вы немного знакомы с шифрованием.

Что конкретно мы будем делать? Мы напишем простой сервер, который будет принимать зашифрованные данные от клиента и возвращать их ему по запросу. Сами данные будут обрабатываться на стороне клиента.

Сервер будет реализован на Node.js с помощью Express, клиент — на JavaScript. Для стилизации будет использоваться Bootstrap.

Код проекта находится здесь.

Если вам это интересно, прошу следовать за мной.
Читать дальше →

Svelte <3 TypeScript

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

Поддержка Typescript, без сомнения, была самой желанной и востребованной фичей в течении долгого времени и вот она здесь: Svelte официально поддерживает TypeScript!

Мы полагаем, что это даст вам гораздо более приятный опыт разработки. Который прекрасно масштабируется на больших приложениях, независимо от того, используете ли вы TypeScript или JavaScript.

Читать далее