Обновить
139.55

JavaScript *

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

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

Vue 3: CompositionAPI + Typescript эксперименты

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

В прошлой статье меня упрекнули, что я при живом Vue 3 пишу про "устаревший" Vue 2. Отговорившись тем, что Vue 3 еще не production-ready, я понемногу начал его смотреть и изучать. И поскольку я заядлый любитель типизации и различных фичей с сахарком, то рассматривать Vue 3 с его новеньким CompositionAPI в статье именно с этой точки зрения. А заодно поэкспериментируем и попробуем написать свой типизированный store, организовать компоненты в стиле <script setup> и подружить его с typescript и eslint, а также напишем небольшой компонент на TSX в качестве еще одного эксперимента.

Рубрика эээксперименты!

Готовим селекторы в Redux

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

Редакс - Single-store стейт-менеджер, в котором к тому же принято группировать данные по объектам. Примерно так же, как в стейте классовых компонентов в реакте.

То есть, это совершенная противоположность атомарного подхода, которому, к примеру, следуют многие хуки реакта или Multi-store стейт-менеджеры (например Effector, где селекторы не нужны по определению - достаточно сторов).

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

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

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

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

Читать далее

Новые JavaScript-API для работы с аппаратным обеспечением

Время на прочтение4 мин
Охват и читатели15K
Сталкивались ли вы когда-нибудь с необходимостью работы с аппаратным обеспечением устройств из веб-приложения, а, когда оказывалось, что это невозможно, создавали ли нативное приложение для некоей платформы только ради того, чтобы обойти это ограничение? Если вы бывали в подобной ситуации, то знайте, что вы не одиноки. До недавнего времени работа с аппаратным обеспечением из веб-приложений представляла собой весьма запутанную и сложную задачу. Но сейчас, благодаря тому, что в современных браузерах появилась поддержка некоторых новых JavaScript-API, рассчитанных на работу с аппаратным обеспечением, решить эту задачу гораздо проще, чем раньше.



В этом материале речь пойдёт о трёх новых JavaScript-API, направленных на работу с аппаратным обеспечением. В частности — о WebHID, о WebNFC и о WebUSB.
Читать дальше →

Как управлять несколькими потоками в Node JS

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

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

Читать далее

Первая программа для семилетки

Время на прочтение4 мин
Охват и читатели1.1K
Большой Короткомордый Медведь, он же Матти, он же Матс, он же Мэтью, он же неугомонный сын №3, решил на старости лет научиться программированию. И, для начала, написать какую-нибудь игрушку. Ну что же еще писать, кроме игрушек, правда?

Текстовая игра «Матс или Мишка» (вариант «орел-решка») на Питоне его не особо порадовал: «Вот если б какие-нибудь автогонки»… Поскольку строгий папа обещал, что в собственноручно написанные игры можно будет играть без ограничений.

Строгий папа где стоял, там и сел. У него вообще-то не то, чтобы дохрена свободного времени, чтобы писать детям автогонки. И вообще… это ж сколько писанины-то. Для папы. И куда там семилетке, первый раз видящему настоящую программу (Лого-черепашки не в счет) разбираться в классах и методах. Пе-пе-пе-сец… Или нет?

Папа, как обычно, принялся чесать за ушами. Если автогонки 2D, то, пожалуй, можно сделать их довольно просто. Да и 3D, в общем-то тоже. Только перестаньте все время толкать меня под локоть, у меня своей работы полно. Займитесь чем-нибудь полезным. Трассу вон пока нарисуйте.

Не умеете? А Paint на что?

image

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

В закладки: репозитории с книгами, шпаргалками, ресурсами по дизайну и не только

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

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

Читать далее

Как мы создали Web приложение для определения лиц и масок для Google Chrome (часть 2)

Время на прочтение12 мин
Охват и читатели3.6K
Определение лица и маски
В предыдущей статье я рассказывал о том, можно ли использовать машинное обучение (в частности определение лица и маски) в браузере, подходах к детекции и оптимизации всех процессов.
Сегодня я хочу рассказать о технических подробностях реализации.
Читать дальше →

История о том, как я иду к должности JS разработчика через обучение на курсах в Skillbox

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

Как пришел я к тому чтобы вообще начать учить JS?

В 2019 году, 1 сентября, в дождливый осенний день, я решил навсегда завязать с прошлым. Последние 5 лет работы менеджером не приносили удовольствия и не несли перспектив. Увольняюсь с должности менеджера вино-торговой компании, подумал я. И погружаюсь в программирование!

Три месяца до декабря я упорно изучал HTML + CSS и верил, что легко попаду в разработчики, стоит мне только захотеть! Каким же большим было моё разочарование, когда я понял что в этом мире не все так просто...

Читать далее

Идеальный инструмент для создания прогрессивных веб-приложений или Все, что вы хотели знать о Workbox. Часть 2

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

image


Что такое Workbox?


Workbox (далее — WB) — это библиотека (точнее, набор библиотек), основной целью которой является "предоставление лучших практик и избавление от шаблонного кода при работе с сервис-воркерами" (далее — СВ).


Если вы впервые слышите о СВ, то перед изучением данного руководства настоятельно рекомендуется ознакомиться со следующими материалами:



WB предоставляет следующие возможности:


  • предварительное кэширование
  • кэширование во время выполнения
  • стратегии (кэширования)
  • обработка (перехват сетевых) запросов
  • фоновая синхронизация
  • помощь в отладке

Это вторая часть руководства. Вот ссылка на первую часть.


Модули, предоставляемые WB

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

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

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

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

Идеальный инструмент для создания прогрессивных веб-приложений или Всё, что вы хотели знать о Workbox. Часть 1

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

Что такое Workbox?


Workbox (далее — WB) — это библиотека (точнее, набор библиотек), основной целью которой является "предоставление лучших практик и избавление от шаблонного кода при работе с сервис-воркерами" (далее — СВ).


Если вы впервые слышите о СВ, то перед изучением данного руководства настоятельно рекомендуется ознакомиться со следующими материалами:



WB предоставляет следующие возможности:


  • предварительное кэширование
  • кэширование во время выполнения
  • стратегии (кэширования)
  • обработка (перехват сетевых) запросов
  • фоновая синхронизация
  • помощь в отладке

На что похож WB API?


Ниже приведены примеры основных подходов к разработке прогрессивных веб-приложений (приложений, в которых используются возможности, предоставляемые СВ).

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

За что я не люблю Redux

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

Тема, конечно, не нова, и немало на этот счет уже сказано и написано. Но все же поделюсь и своим взглядом на этот счет, т.к. мое осознание сего факта формировалось на основании собственного опыта, ценностей и взглядов, и возможно (надеюсь) в нем читатель найдет что-то свежее.

Читать далее

Темизация. История, причины, реализация

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

Когда веб только зарождался – единственной его целью было размещение контента (гипертекстовые страницы), чтобы у пользователей из всемирной паутины был к нему доступ. В то время не могло идти и речи о дизайне, ведь зачем нужен дизайн страницам с научными публикациями, разве они станут от этого полезнее (первый сайт). Времена меняются и сегодня во всемирной паутине далеко не только научные публикации. Блоги, сервисы, социальные сети и многое, многое другое. Каждый сайт нуждается в своей индивидуальности, ему необходимо заинтересовывать и привлекать пользователей. Даже научные сайты постепенно это понимают, ведь большинство ученых хотят не просто изучать те или иные аспекты, а доносить их до людей, тем самым повышая свою популярность и ценность своих исследований (пример – 15 из 15 научных сайтов списка сделали редизайн в последние 6 лет). Рядовым обывателям не интересен серый сайт с непонятным содержанием. Наука становится доступнее, а сайты преобразуются в приложения с удобным и приятным интерфейсом.

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

Читать далее

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

Скрываем номера курьеров и клиентов с помощью key-value хранилища

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

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

Каждый сервис использует свои решения для маскировки номеров клиентов и курьеров. В этой статье я расскажу, как сделать это с помощью key value storage в Voximplant.

Вау

SpaceShooter на Phaser 3

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

Здравствуйте! Я веб-разработчик и интересуюсь вопросом создания игр для веба. На просторах интернета я нашел для этих целей такую библиотеку как Phaser и множество материала для новичков на английском языке. Это перевод курса (ссылка на оригинал в конце статьи), который охватывает создание космического шутера с помощью Phaser 3. Курс будет состоять из 5 частей, в каждой из которых будет решаться определенная задача при создании проекта. Перед началом прохождения курса желательно знать основы JavaScript.

Шаг первый. Настроить веб-сервер

Первое, что необходимо сделать, это настроить веб-сервер. Несмотря на то, что фазерные игры запускаются в браузере, к сожалению нельзя просто запустить локально html-файл непосредственно из файловой системы. При запросе файлов по протоколу http, безопасность сервера позволяет получить доступ только к тем файлам, которые вам разрешены. При загрузке файла из локальной файловой системы (file://) ваш браузер сильно ограничивает его по очевидным причинам безопасности. Из-за этого нам нужно будет разместить нашу игру на локальном веб-сервере. Вы можете использовать любой удобный для вас веб-сервер, будь то OpenServer или какой-либо другой.

Шаг второй. Создать необходимы файлы и папки

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

Читать далее

Юмористичный обзор Rust с перспективы JavaScript

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

В этой статье я в несколько забавном ключе документирую кое-какие размышления о своем знакомстве с Rust с позиции прожженного энтузиаста JavaScript. Здесь вас ждет импровизированная прогулка по феодам Вестероса, встреча с Ланнистерами и даже замаскированный под остров корабль — занятные аналогии, которые можно провести с работой в этом языке.
Читать дальше →

React. Не вглубь, а вширь. Композиция против реальности

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

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

Читать далее

Как я доделал функции за Яндекс.Музыкой

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

Можно ли без официального API создавать плейлисты и удалять дубликаты? Статья описывает расширение для браузеров на Chromium. Преследуя цель добавить новые функции на сайт Яндекс.Музыки.

Мой первый крупный опыт работы с JavaScript и что из этого вышло. В решении не используется библиотека от MarshalX, не запрашивается логин/пароль.

Читать далее

Как работает Middleware в Express?

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

Эта статья представляет собой адаптированный отрывок из книги "Express API Validation Essentials". Она научит вас полноценной стратегии валидации API, которую вы можете начать применять в своих Express-приложениях уже сегодня.

__________________

Документация Express говорит нам, что "приложение Express - это, по сути, серия вызовов функций промежуточного ПО". На первый взгляд это звучит просто, но, честно говоря, промежуточное ПО может быть весьма запутанным. Вы, вероятно, задавались вопросом:

Читать далее

Книга «JavaScript с нуля»

Время на прочтение6 мин
Охват и читатели22K
imageПривет, Хаброжители! JavaScript еще никогда не был так прост! Вы узнаете все возможности языка программирования без общих фраз и неясных терминов. Подробные примеры, иллюстрации и схемы будут понятны даже новичку. Легкая подача информации и живой юмор автора превратят нудное заучивание в занимательную практику по написанию кода. Дойдя до последней главы, вы настолько прокачаете свои навыки, что сможете решить практически любую задачу, будь то простое перемещение элементов на странице или даже собственная браузерная игра.

Вот небольшой список того, что вы узнаете:

  • Как организовать код с помощью переменных.
  • Как функции делают ваш код повторно используемым.
  • Как работать с циклами и условиями.
  • Что такое глобальная и локальная области видимости.
  • Что такое замыкания.
  • Как правильно писать комментарии.
  • Основные типы объектов, с которыми вы столкнетесь в JavaScript.
  • Как работать с текстом и выполнять стандартные операции со строками.
  • Как использовать массивы для обработки списков.
  • Как создавать собственные объекты.

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

Вклад авторов