Обновить
281.86

JavaScript *

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

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

Source Maps: быстро и понятно

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


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

E-learning на костылях. Исправляем курсы из Articulate Rise

Время на прочтение4 мин
Охват и читатели5.3K
Рынок насыщен разными программами для разработки электронных курсов — авторскими средствами (authoring tools). Есть продукты на любой вкус: хочешь прогу, чтобы просто конвертировать электронные презентации в HTML5? Да пожалуйста! Хочешь делать одностраничники в редакторе вроде Тильды? Держи! Хочешь создать игрушку в стиле Interactive Fiction? Да кто же тебе запретит, родной? Любой каприз, как говориться.

Каждое авторское средство склоняет на свою сторону простотой использования. Разработчик без какого-либо технического бекграунда может особо не напрягаясь склеить электронный курс и опубликовать его в LMS.

Но всё ли так гладко на самом деле? Что делать, когда кажущаяся простота разворачивается и стреляет вам в колено?

Давайте препарируем несколько популярных инструментов и посмотрим, какие неприятные сюрпризы поджидают наивных Instructional Designer-ов. Сеанс чёрной магии с последующим её разоблачением, так сказать.

Эта статья посвящается Articulate Rise.
Читать дальше →

Как я в 15 лет написал свой первый jQuery плагин и как их создавать

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

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


читать далее

5 типичных ошибок при создании React компонентов (с хуками) в 2020 году

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

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


Оригинальный материал был написан немецким разработчиком Лоренцом Вайсом для личного блога, а позже собрал много позитивных отзывов на dev.to. Переведено командой Quarkly специально для комьюнити на Хабре.


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

Пара слов об именовании переменных и методов

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


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


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

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

«Живые» интерактивные логи: визуализация логов в Voximplant Kit

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

Мы продолжаем обновлять Voximplant Kit с помощью JointJS. И рады сообщить о появлении «живых» логов (live logs) звонков. Насколько они живые и опасны ли для простых юзеров, читайте под катом.

Лабаем на MIDI-клавиатуре в Angular

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

Web MIDI API — интересный зверь. Хоть он и существует уже почти пять лет, его все еще поддерживает только Chromium. Но это не помешает нам создать полноценный синтезатор в Angular. Пора поднять Web Audio API на новый уровень!


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

Spreadable — вариант децентрализованной сети

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

image


Зачем вообще нужна децентрализация? Многие люди не совсем понимают смысла, ведь и так вроде все хорошо работает. Причин на самом деле несколько, но обычно сторонники подхода затрагивают только сложные технические моменты, и обывателю становится сложно углядеть суть. Для меня, например, все очень просто.


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

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

Эволюция real-time Web: примеры из практики (или с чем Lua справляется лучше JS)

Время на прочтение9 мин
Охват и читатели8K
Карантин и переход на удаленку наводят на ностальгические воспоминания о полном жизни офисе, когда вместо звонков и трансляций мы работали и собирались на хакатонах в одной комнате с коллегами. Сегодня вспомним хакатон, где мы писали веб-сервер на Lua, а заодно кратко пробежимся по истории развития real-time web. Под этим термином мы будем понимать технологии, которые позволяют делать в браузере вещи, сравнимые по UX с десктопными приложениями — когда отклик на действия или события приходит сразу. Вспомним, как это делалось раньше, как делается сейчас, сравним существующие решения и расскажем, что и как используем сами. Видео-версию оригинального доклада можно посмотреть на нашем канале.

История


iframe


Начнем с начала нулевых — многие, наверное, помнят чаты на iframe. Сейчас уже сложно назвать это real-time технологией, но тем не менее. Принцип работы — в HTML-документ с помощью тега iframe встраивается содержимое другой веб-страницы — например, блок с чатом в игре. При обновлении этой встроенной части вся остальная страница не обновляется.

Вспомнить все

Портируем старую игру в жанре «shoot 'em up» на JavaScript на коленке

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

Имеется древняя игрушка LaserAge, которая написана на Flash (на очень древнем Macromedia Flash 4) и работает только под Windows. В детстве она мне очень понравилась, поэтому я решил для души портировать её, чтобы можно было играть с браузера со всех устройств.


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


При уничтожении всех противников на уровне происходит переключение на следующий уровень. Всего 100 уровней.


В терминах игры уровень — волна (Wave), а несколько волн объединены в большой уровень (Level), который представляет из себя просто смену заднего фона, т.е. всего 4 больших уровня в каждом из которых 25 волн. В последней волне большого уровня обычно бывает босс — противник с огромным значением жизни и мощным оружием.


https://github.com/EntityFX/laseroid/blob/master/doc/LaserAgeNext.png?raw=true

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

Встречаем Angular 10

Время на прочтение4 мин
Охват и читатели22K
Вышел Angular 10.0.0! Это — мажорный релиз, который затрагивает всю платформу, включая сам фреймворк, библиотеку компонентов Angular Material и инструменты командной строки. Размер этого релиза меньше, чем обычно. Дело в том, что с момента выхода Angular 9 прошло всего 4 месяца.

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



Поговорим о том, что нового появилось в Angular 10.
Читать дальше →

Избушка на обратно-совместимых ножках — компилируем JS для нужных браузеров

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

image


Привет, хабр! Уже сегодня на otus.ru стартует курс "Fullstack разработчик JavaScript" и я решил поддержать ребят этой статьей. Я кстати сам преподаю на курсе по React.js.

Есть такой принцип — Don't break the web, который можно раскрыть как "веб всегда старается сохранить максимальную обратную совместимость". В некоторой мере этот принцип применим и к веб сайтам и приложениям — ваш сайт должен работать не только в одном конкретном браузере, но в целом наборе разных браузеров и версий. Но в каких? Однозначно должны быть какие-то разумные пределы и IE 6 и netscape navigator поддерживать не стоит, но два вопроса остаются открытыми: какие браузеры вы поддерживаете и как это обеспечить?


Если есть обратная совместимость значит что-то меняется. Меняются в вебе три вещи: ECMAScript (javascript), CSS и различные Web API. CSS мы сегодня оставим на опушке, а пока, тропинка ведет нас в дебри современной фронтенд разработки

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

Пишем интеграционные тесты на фронтэнд и ускоряем релизы

Время на прочтение18 мин
Охват и читатели23K
Всем привет! Меня зовут Вова, я фронтэндер в Тинькофф. Наша команда отвечает за два продукта для юридических лиц. О размерах продукта я могу сказать цифрами: полный регресс каждого из продуктов двумя тестировщиками проходит от трех дней (без влияния внешних факторов).

Сроки значительные и напрашиваются на борьбу с ними. Способов борьбы несколько, основные из них:

  • Распил приложения на более мелкие продукты со своими релизными циклами.
  • Покрытие продукта тестами в соответствии с тестовой пирамидой.

Последний пункт и стал темой моей статьи.

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

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

Абстракция — ключ к простому коду

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

Есть ли способ улучшить свои навыки в 10 раз? Есть ли какой-то волшебный секрет, который — если бы вы только знали это — открыл бы для вас совершенно новый мир мастерства и производительности в разработке программного обеспечения?

Вот где сомневающиеся думают: «Здесь не удастся срезать углы! Каждый должен практиковаться, чтобы стать хорошим!» И это действительно так, но что практикуют специалисты чтобы ускорить разработку программного обеспечения, и есть ли одна ключевая вещь, которая может иметь огромное значение?

Да! Есть!

Но даже если я поделюсь им с вами — даже если я подробно изложу его для вас — вам может потребоваться 10 лет, чтобы вырасти и полностью оценить его простоту.

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

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

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

Секрет того, чтобы быть в 10 раз более продуктивным, заключается в овладении абстракцией. Многие разработчики относятся к «абстракции» как к грязному слову. Вы можете услышать совет, например, «не абстрагируйтесь слишком рано» или знаменитое в Zen Python «явное лучше, чем неявное», подразумевая, что конкретное лучше, чем абстрактное. И все это хорошие советы — в зависимости от контекста.

Хватит это верстать, ударим автоматизацией по макетам

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

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


Интересно? Добро пожаловать под кат!


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

Как с помощью веб-скрапинг и Puppeteer проанализировать аукционы Christie’s, Sotheby’s и Phillips. Кейс от Lansoft

Время на прочтение3 мин
Охват и читатели6.4K
Как Web Scraping помог собрать нам данные по официальным коллекциям как у Белгазпромбанка.

Web Scraping — один из самых популярных методов считывания различных данных, расположенных на веб-страницах, для их систематизации и дальнейшего анализа. По сути, это можно назвать “парсингом сайтов”, где информация собирается и экспортируется более удобный для пользователя формат будь то таблица или API.

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

Эффект параллакса в браузере с помощью TensorFlow.js + WASM + Three.js

Время на прочтение3 мин
Охват и читатели6.1K
Помните как Apple представила iOS7 c эффектом параллакса? Теперь это можно делать прямо в браузере.
parallax webcam threejs

На всех ноутбуках и телефонах сейчас есть камера, поэтому можно с помощью tensoflow моделей анализировать положения головы и глаз. Так же новая статья на SIGGRAPH 2020 расказывает как делать датасеты с фотограмметрией, удобные для эффекта параллакса.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №421 (22 — 28 июня 2020)

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

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

Немного простого Javascript способно на многое

Время на прочтение4 мин
Охват и читатели8K
Я никогда не работала профессиональным фронтенд-разработчиком, и хотя уже 15 лет пишу HTML/CSS/JS для небольших побочных проектов, но все проекты были довольно маленькими. Бывает, что я не пишу на Javascript в течение многих лет между этими проектами, и часто не уверена в том, что всё делаю правильно.

Отчасти поэтому я часто использовала библиотеки! Десять лет назад я использовала jQuery, а где-то с 2017 года для моих маленьких проектов много использую vue.js (можете посмотреть небольшую игру типа «сапёр», которую я сделала в качестве вступления к Vue).

Но на прошлой неделе, впервые за долгое время, я написала простой Javascript без библиотеки, и это было весело, поэтому я хотела немного поговорить об этом!
Читать дальше →

Что JavaScript-разработчику следует знать о Curl

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

Представляю Вашему вниманию перевод статьи «What JavaScript Developers Should Know About Curl» автора Valery Karpov.

Curl — это популярный инструмент командной строки, часто используемый для отправки HTTP-запросов. Curl поддерживает большое количество протоколов, однако как Node.js-разработчик вы, скорее всего, будете использовать его для отпраки http-запросов к RESTful API.

Документация curl представляет собой перечень из 383 флагов командной строки, поэтому в ней очень трудно найти то, что ищешь. В этой статье я хочу поделиться с вами некоторыми часто используемыми мной шаблонами. Для примеров будет использоваться сервис httpbin.org.
Читать дальше →