Обновить
281.86

JavaScript *

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

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

Atomizer vs Minimalist Notation (MN)

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

Minimalist Notation (MN) (минималистическая нотация) — гибкая адаптивная технология генерации стилей.


Она генерирует стили только для существующих классов разметки html, jsx, и т.п. — благодаря чему отпадает необходимость заботиться о компонентном подходе в CSS, мёртвом CSS коде, и отпадает необходимость писать CSS код вообще.


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


Применение этой технологии похоже на использование инлайновых стилей, только с гораздо более выразительным синтаксисом и множеством дополнительных возможностей, поэтому MN можно даже назвать технологией inline styles 2.0.


MN подразумевает не только правила нотации как таковые, но и, по-сути, даже усовершенствованный альтернативный синтаксис каскадного языка установки стилей, который ориентирован на инлайновое применение.


Я разработал MN в 2017 году, и с того момента успел во многом усовершенствовать эту технологию, добавить достаточно пресетов и удобных инструментов для её изучения.


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

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

React-разработка: 6 путей к профессиональному росту

Время на прочтение7 мин
Охват и читатели22K
Последние полгода я наблюдал за развитием начинающих React-программистов. За это время они прошли просто невероятный путь. Скорость их обучения, их жажда знаний, их стремление к совершенству — всё это произвело на меня сильнейшее впечатление.

Как им это удалось? Как они превратились из тех, кто не может без посторонней помощи открыть PR, в тех, к кому обращаются за помощью другие? Что сделало людей, просящих советов, людьми, охотно дающих советы другим? Как ученики превратились в учителей?



Я задал им эти вопросы. Вот что они на них ответили.
Читать дальше →

readable — еще один линтер для PHP

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

Хочу представить линтер для PHP readable. Сейчас в нем 16 правил, которые должны улучшить читабельность кода. К основным преимуществам можно отнести:


  • скорость — меньше секунды на 1000 файлов
  • настройка baseline — можно не исправлять все ошибки в проекте сразу, а создать конфигурацию с текущими ошибками. И игнорировать их, но реагировать на новые.
  • правила писать проще чем в аналогах (субъективно)


Важные два дисклаймера:


  1. Я основной контрибьютор, поэтому могу быть субъективным. Изначально, readable написан для бельгийской компании officient. Они уже некоторое время его используют у себя внутри, и решили сделать readable открытым проектом.
  2. Он написан на JS.
Читать дальше →

Работаем в IntelliJ IDEA на слабом железе

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

Обнаружил секретный репозиторий на гитхабе JetBrains под названием Projector. Благодаря нему написал кусок кода в IntelliJ IDEA, запущенной на Android-планшете. Рассказываю, как это повторить.


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

Как мы обрабатываем жалобы пользователей с помощью JIRA (REST API)

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


В наше время мало какой веб-сервис или приложение обходится без функционала, где пользователи могут пожаловаться (уведомить, зарепортить) на различные виды контента, будь то грамматическая ошибка в тексте, ошибочные формулировки, неинтересный или не информативный контент (как упражнение, урок, статья, обучающий материал либо часть функционала). Возможность “сообщить о проблеме” является неотъемлемой частью вовлечения пользователей в продукт, реализации одной из форм сбора обратной связи и возможности улучшить свое приложение в целом.


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

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

Vue.js для начинающих, урок 2: привязка атрибутов

Время на прочтение5 мин
Охват и читатели42K
Это второй урок учебного курса по Vue.js для начинающих, который рекомендует Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)

Во втором уроке речь пойдёт о привязке атрибутов, о подключении данных, хранящихся в экземпляре Vue, к атрибутам HTML-элементов.



Vue.js для начинающих, урок 1: экземпляр Vue
Vue.js для начинающих, урок 2: привязка атрибутов
Vue.js для начинающих, урок 3: условный рендеринг
Vue.js для начинающих, урок 4: рендеринг списков
Vue.js для начинающих, урок 5: обработка событий
Vue.js для начинающих, урок 6: привязка классов и стилей
Vue.js для начинающих, урок 7: вычисляемые свойства
Vue.js для начинающих, урок 8: компоненты
Читать дальше →

Интеграция ЭЦП НУЦ РК в информационные системы на базе веб технологий

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

Я расскажу о тонкостях внедрения электронной цифровой подписи (ЭЦП) в информационные системы (ИС) на базе веб технологий в контексте Национального Удостоверяющего Центра Республики Казахстан (НУЦ РК).


В центре внимания будет формирование ЭЦП под электронными документами и, соответственно, NCALayer — предоставляемое НУЦ РК криптографическое программное обеспечение. В частности уделю внимание вопросам связанным с UX и объемом поддерживаемого функционала NCALayer.

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

Управление зависимостями JavaScript

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

Управление зависимостями JavaScript


Всем привет! Меня зовут Слава Фомин, я ведущий разработчик в компании DomClick. За свою 16-ти летнюю практику я в первых рядах наблюдал за становлением и развитием JavaScript как стандарта и экосистемы. В нашей компании мы используем JavaScript, в первую очередь, для продвинутой front-end разработки и успели перепробовать достаточно большое количество различных технологий, инструментов и подходов, набить много шишек. Результатом этого кропотливого труда стал ценнейший опыт, которым я и хочу поделиться с вами.

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

Магия WebPush в Mozilla Firefox. Взгляд изнутри

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

Безусловно одной из самых популярных технологий доставки оповещений на устройства пользователей являются Push уведомления. Технология такова, что для её работы необходим постоянный доступ к интернету, а именно доступ к серверам, на которых регистрируются устройства пользователя для получения уведомлений. В данной статье мы рассмотрим весь спектр механизмов технологии WebPush уведомлений, спрятанных за словами WebSocket, ServiceWorker, vapid, register, broadcast, message encryption и т.д. Основной причиной побудившей меня к реверсу и изучению механизма, являлась необходимость доставки уведомлений мониторинга на рабочие места техподдержки, находящиеся в закрытом сегменте сети без доступа в интернет. И да, это возможно! Подробности под катом.

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

Модульность во Vue.js и Vuex

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

image


При написании больших фронтенд-приложений управление состоянием может стать довольно сложной и утомительной задачей.


image


Для Vue.js был разработан плагин Vuex, предназначенный для управления состоянием. По умолчанию в нем выстроена следующая структура папок:


image
Структура папок в хранилище Vuex


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

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

Двоичное‌ ‌кодирование‌ ‌вместо‌ ‌JSON

Время на прочтение6 мин
Охват и читатели17K
Кодируйте‌ ‌одни‌ ‌и‌ ‌те‌ ‌же‌ ‌данные‌ ‌гораздо‌ ‌меньшим‌ ‌количеством‌ ‌байт.‌ ‌

image

Почему‌ ‌меня‌ ‌это‌ ‌должно‌ ‌волновать ‌


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

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

Типы‌ ‌форматов‌ ‌кодирования‌


Существует‌ ‌два‌ ‌типа‌ ‌форматов‌ ‌кодирования:‌ ‌

  • Текстовые‌ ‌форматы‌ ‌
  • Двоичные‌ ‌форматы‌
‌ ‌
Читать дальше →

Vue.js для начинающих, урок 1: экземпляр Vue

Время на прочтение5 мин
Охват и читатели112K
Сегодня мы предлагаем вашему вниманию перевод первого урока учебного курса по Vue.js для начинающих. Его порекомендовала Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)

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


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

[Видео] В чём сила дашбордов, как тестировать JS-библиотеки и чего стоит выпустить собственный фреймворк в open source

Время на прочтение3 мин
Охват и читатели3.4K
Пост посвящается всем, кто виртуально не добрался до нашего онлайн-митапа, который мы посвятили инструментам автоматического тестирования. Публикуем видео с BugsBusters 2020 — смотрите и будет хорошее начало недели.


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

Canvas и геометрия. Это почти просто

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

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


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

Однако практически никогда не рассматривается возможность непосредственного использования холста для отображения трехмерных объектов.


Остановимся на этом чуть подробнее.

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


Но если требуется просто показать трехмерный объект со всех сторон, то можно обойтись без WebGL и шейдеров. Например некоторые программы CAD/CAM предназначены только для моделирования формы объектов и не предполагают использования реалистичного освещения.

На сайте Canvas и геометрия я последовательно и очень подробно объясняю как используя исключительно HTML5 Canvas можно создать изображения 3D-моделей многогранников.

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

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

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

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

Устройство ленивой загрузки в популярных фронтенд-фреймворках

Время на прочтение9 мин
Охват и читатели18K
Snail steampunk by Avi-li

Команда Mail.ru Cloud Solutions перевела статью о том, что означает ленивая загрузка в трех фронтенд-фреймворках: Angular, React и Vue.js. Далее текст от лица автора.

Один из моих любимых терминов на сегодняшний день — «ленивая загрузка». Честно говоря, когда несколько лет назад я его услышал, то улыбнулся. В этой статье рассмотрю, что именно означает этот термин применительно к трем наиболее часто используемым фронтенд-фреймворкам: Angular, React и Vue.js.
Читать дальше →

Как обойти запрет доступа к страницам с помощью Chrome в headless-режиме

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

Некоторые сайты блокируют Chrome в headless-режиме, и мы рассмотрим, как обойти эту блокировку.


Диагностика – это ключ ко всем аспектам компьютеров и программирования. Эта статья начинается с того, как самостоятельно разобраться с этой проблемой блокировки. Если вам это не интересно, то можете сразу перейти к пункту «Решение» в конце статьи.

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

Redux store vs React state

Время на прочтение14 мин
Охват и читатели21K
Как спроектировать хранение данных в React-приложении? Где хранить данные приложения: в глобальном хранилище (Redux store) или в локальном хранилище (component state)?
Такие вопросы возникают у разработчиков, начинающих использовать библиотеку Redux, и даже у тех, кто ей активно пользуется.

Мы в BENOVATE за 5 лет разработки на React опробовали на практике различные подходы к построению архитектуры таких приложений. В статье рассмотрим возможные критерии для выбора места хранения данных в приложении.
Читать дальше →

Как получить размеры экрана, окна и веб-страницы в JavaScript?

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


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

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

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

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

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

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


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