Обновить
205.04

JavaScript *

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

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

Добро пожаловать в Angular 11

Время на прочтение6 мин
Охват и читатели15K
Специально к старту нового потока курса «Fullstack веб-разработчик на JavaScript» представляем вам обзор новой версии популярного фреймворка JavaScript — Angular. 11.0.0 версия уже доступна, и в ней есть отличные обновления, которые затрагивают всю платформу, включая сам фреймворк, библиотеку компонентов и инструменты командной строки. Давайте посмотрим, что в этом релизе.


Приятного чтения!

Разработка круговых интерфейсов. Часть 2. Перенос библиотеки с JavaScript на QML

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

Оглавление


Введение
Библиотека круговых интерфейсов v2.0
Круговая CAPTCHA
Перенос библиотеки с JavaScript на QML
Демонстрационное мобильное приложение
Заключение


Введение


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


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


Во-вторых, разработанная библиотека получила реализацию на QML, для демонстрации возможностей которой выпущено мобильное приложение под Android.

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

Декларативный подход в Angular

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

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

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

Узнать, к чему это я

Как релизить библиотеку с открытым кодом в 2020 году

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

Выпуск библиотеки — это непростая задача, но с нужными инструментами это проходит намного легче. На конференции HolyJS Ундже Ли (Eunjae Lee) показал, как можно автоматизировать процесс релиза, как сделать его асинхронным и коллаборативным.



Ниже — видео и перевод этого доклада.

Есть ли перспективы у монолитных web-приложений?

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

Что лучше для web-приложений - монолит или микросервисы? Многие ответят на этот вопрос, что, мол, все инструменты хороши, если их использовать по назначению. В таком случае у меня, как у человека, в силу своего возраста, довольно консервативного и неохотно воспринимающего непроверенные временем концепции, возникает другой вопрос - а чем хорош монолит? Где его ниша? Стоит ли переключаться на микросервисы или монолит ещё не изжил себя и на мой век хватит?

В фокусе моих интересов не гигантские web-приложения типа Gmail, Facebook, Twitter, а web-приложения, созданные на базе таких платформ, как Wordpress, Drupal, Joomla, Django, Magento и им подобным. Под катом мои субъективные мысли на этот счёт. Ничего нового - всё те же 33 буквы кириллицы и 26 букв латиницы вперемешку.

Читать далее

Все ли вы знаете о React key?

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

Привет, Хабр!


Я время от времени провожу собеседования, и когда вопрос касается React key, чаще всего я вижу недоумевающий взгляд, намекающий “Да, там и спрашивать вроде нечего?”. Если Вам кажется React key понятным и простым, тогда давайте проведем мини собеседование (данная статья является расшифровкой видео).

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

Namespaces в JavaScript

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

Мне очень сильно импонируют namespace'ы в таких языках программирования, как Java и PHP. Настолько сильно, что я даже как-то запилил о них статью на Хабре. С тех пор прошло уже почти два года, но namespace'ы в Javascript за это время так не появились. "А если бы я делал namespace'ы в JS для самого себя, то какими бы они были?" - подумалось мне. Под катом - мои соображения, какие же namespace'ы мне нужны в JavaScript'е.

Читать далее

Готовим console.log() правильно

Время на прочтение7 мин
Охват и читатели21K
Специально к старту нового потока курса «Frontend-разработчик» делимся с вами полезным переводом. Автор рассказывает, как использует методы логирования в производственной среде собственного проекта и в чём именно они помогают. Кроме того, нас знакомят с платформой AppSignal, созданной, чтобы напрямую уведомлять разработчика о возникающих у пользователя исключениях в приложении. Подробности под катом.

Приятного чтения!

20 небольших, но вдохновляющих вызовов веб-разработчику

Время на прочтение7 мин
Охват и читатели22K
Специально к старту нового потока курса «Frontend-разработчик» делимся переводом подборки с 20 проектами для освоения фронтенда. Эта подборка хорошо подходит, если вы хорошо знакомы с какой-то областью разработки ПО и хотите глубже копнуть во фронтенд. Также она прекрасно подходит людям, которые не хотят начинать знакомство с фронтендом со стандартных проектов. Проекты довольно небольшие, и у каждого указан уровень сложности. С помощью этих проектов вы ознакомитесь с Tone.js — обёрткой над Web Audio, освоите необычно мягкую смену темы со светлой на темную, и наоборот, а почти в конце ждёт самое вкусное — управляемая голосом векторная графика SVG.


Приятного чтения!

Как я устал от JavaScript и создал свой собственный язык программирования

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

За свою карьеру я успел поработать со множеством языков программирования. Писал flash-игры на ActionScript 3 и Android-игры на Java, сервера на Java, Scala и NodeJS (JavaScript), скрипты на Python, веб и мобильные приложения на React (JavaScript). И на каком бы языке я не писал, меня не покидало ощущение, что синтаксис этого языка слишком многословен, полон излишеств, шума и синтаксического бойлерплейта, мешающего пониманию написанного кода.

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

Читать далее

Написание графического приложения на Electron JS (начало: Создание окна)

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

Приветствую! Если вы зашли на эту статью, значит скорее всего вам крайне неохота лезть в официальную документацию (а очень зря. Она и написана подробно, и имеет перевод на русский язык) и вы пришли за простым решением вашей проблемы — написание кросс-платформенного приложения для компьютера с использованием лишь Web технологий. предлагаю не тянуть, и сразу начать. Но т. к. это первая статья, думаю стоит рассказать в двух словах о том, что же вообще такое Electron JS и для чего оно нужно.


image

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

Пример практического использования модулей

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


Доброго времени суток, друзья!

ES6-модули, использующие синтаксис «import/export», являются довольно мощным инструментом и достойным конкурентом компонентам популярных фреймворков.

Позвольте мне продемонстрировать это на примере рисования различных фигур на холсте.

Источник вдохновения — этот раздел руководства по JavaScript от MDN.

Вот какой функционал будет реализован в нашем небольшом приложении:

  • автоматическое создание холста заданных размеров и его рендеринг на странице
  • возможность рисовать на холсте квадраты, круги и треугольники заданного размера и цвета
  • разделение кода на модули, содержащие логические части приложения

В процессе создания приложения мы уделим особое внимание дефолтному и именованному экспорту/импорту, а также статическому и динамическому импорту. Большая часть приложения будет написана с использованием синтаксиса классов.
Читать дальше →

Производительность приложений, работающих с Video и Audio

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


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


  1. Как работать с Video и Audio с максимальной точностью.
  2. Как оптимально обрабатывать данные с такой скоростью.
  3. Как оптимально обрабатывать данные, приходящие по websocket.

Перед рассмотрением каждого вопроса, хочу дать немного контекста.

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

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

Автоматическое обновление скриптов после деплоя

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

Пролог



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


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


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


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

Как создать приложение-чат за двадцать минут

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

Мой отец любит напоминать мне, что, будучи компьютерным инженером в 1970-х, «он был программистом до того, как программирование стало модным». Пару раз он даже показывал старые скрипты Fortran и COBOL. Прочитав этот код, я с уверенностью могу сказать, что программирование сегодня определенно круче.

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

Как анимировать элемент «details» с помощью WAAPI

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


Доброго времени суток, друзья!

В данной статье я покажу, как можно анимировать нативный элемент «details» с помощью Web Animations API.

Графики в Vuejs

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


Я доволен экосистемой Vue. Как и положено, ты не городишь велосипеды, а пользуешься готовыми плагинами, которые за тебя написали умные дядьки. Когда твоя задача слишком мелкая и локальная, чтобы под неё написали плагин — ты идёшь и ищешь готовые компоненты, и только если не находишь ничего подходящего, чешешь репу и садишься писать своё решение. Таков порядок вещей, и я изрядно удивился, когда за вечер тестов не смог нормально отобразить ни одного подходящего мне графика. Пришлось немного подумать и переписать все примеры с Chart.js, чтобы разобраться с графиками раз и навсегда. Результаты ниже.
Читать дальше →

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

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

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

Engine-version — npm пакет, который позволит задать корректное окружение разработки

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

Некоторые проекты зачастую требуют специфичные версии локально установленных программ. Это может быть как определенная версия node.js или npm (например, npm@7 с поддержкой workspaces), так и определенная база данных, менеджер пакетов и другие утилиты, которые нельзя установить из npm. Зачастую команды фиксирую версии в чатиках, readme или вики.

npm позволяет задекларировать в package.json файле необходимые версии node и npm, но никак не проверяет их. Чтобы исправить это и расширить список инструментов был написан небольшой npm пакет engine-version. Пакет работает очень просто: сначала он считывает описание необходимого софта из package.json, а затем смотрит установлена ли программа и совпадает ли установленная версия описанной. И если проверки прошли неудачно, отображается список ошибок.

Читать далее

Представляем Quarkly – инструмент для react-разработчиков и дизайнеров, который поможет оптимизировать вашу разработку

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

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


Прежде всего, давайте посмотрим, как выглядит типичный цикл разработки веб-приложения в 2020 году? Есть команда. В этой команде есть дизайнер и разработчик. Первый создает дизайн-спецификацию в Figma. Второй, на основе дизайн-спецификации, создает компоненты, переносит тему. Результат своей работы программист показывает дизайнеру в Storybook. Дизайнер его проверяет и утверждает проект, если всё хорошо. Далее он начинает создавать макеты, а разработчик верстает их при помощи компонентов из спецификации.