Обновить
128K+

JavaScript *

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

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

Leaflet. Дружим Image с Canvas

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

Доброго времени суток, дорогие хабрахабровцы!

Leaflet — библиотека, позволяющая добавить интерактивные карты на Ваш сайт и легко их кастомизировать. Сегодня рассмотрим то, как можно разместить изображения на Canvas-слое карт, совместно с базовыми маркерами.
Читать дальше →

Насколько важен порядок свойств в объектах JavaScript?

Время на прочтение4 мин
Охват и читатели18K
В случае JavaScript-движка V8 — очень даже. В этой статье я привожу результаты своего маленького исследования эффективности одной из внутренних оптимизаций V8.
Читать дальше →

Детский ReactJS из 135 строк кода

Время на прочтение7 мин
Охват и читатели5.5K
Про ReactJS статей уже много. Но чтобы приступить к изучению начинающему программисту, нужно найти то самое начало, где основы его сотворения. Мне захотелось показать, что нет ничего сложного в понимании принципов разработки фронтенда на этом фреймворке.

JavaScript for Babies

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

JavaScript библиотека Webix глазами новичка. Часть 3. Модули, диаграммы, древовидные таблицы

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


Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки.
Читать дальше →

Анализ тональности текста на Node.js

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


Всем привет. Тема достаточно интересная и может показаться довольно не простой в реализации. Но я человек практический и хочу прикоснуться к прекрасному особо не напрягаясь. Сегодня мы с вами сделаем "микросервис" для анализа сентиментальности / тональности текста. А походу дела, еще несколько интересных вещей которые помогут вам для подготовки своего текстового обращения к Скайнету.

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

Последовательность шагов по организации управленческого учета на платформе JetCalc

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

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

MyApp extends Holiday

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

Я уверен, что среди уважаемой аудитории найдутся те, кто меня поймет. Дело в том, что во всем изобилии популярных библиотек и фреймворков для веб-фронтэнда, лично мне, не нравятся, практически, все альтернативы. В каждом из вариантов я нахожу для себя существенные минусы, которые не дают мне спокойно ими пользоваться. Начинается всегда все радужно: интересный концепт, здравые, на первый взгляд, рассуждения в пунктах «за»… Но затем, все, снова и снова, начинает упираться в избыточные зависимости, лишние сущности и попытки решить проблемы, которые разработчики сами же и создали. Нам предлагают выучить новый синтаксис, принять новые идеи, узнать кучу умных слов, установить множество «необходимых» пакетов. Ок, я люблю все новое, и люблю умные слова. Но меня сильно обескураживает, когда то, что можно сделать просто, люди начинают фрактально усложнять. Вы наверняка уже читали исповеди тех, кто также как и я, отчаялся искать во всем этом здравый смысл и решил уйти в другую крайность — все писать «на ваниле». Со мной это случилось, когда я разочаровался в проекте Polymer, создаваемом при активном участии разработчиков из Google. Сначала мне все очень нравилось, девизом этого движения была фраза «Use the platform!», что для меня означало: «не стоит делать в коде того, что браузер сам сделает эффективнее». Команда Polymer сделала очень многое для внедрения новых стандартов и возможностей на уровне платформы, и за это им — огромное спасибо. Но когда эти цели были достигнуты, они сами принялись нарушать свои-же принципы. И вот их новая библиотека (LitElement) уже отказывается работать напрямую в браузере без установки специального окружения, потому как ребята не следуют стандартам… Я продолжаю наблюдать за развитием LitElement, и даже вижу явные признаки возвращения этих заблудших на путь истинный, но сам я этим уже пользоваться не буду, потому, что теперь у меня есть кое-что получше.
Читать дальше →

Чему я научился, написав библиотеку компонентов на Svelte

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


Попробовав Svelte в личных проектах, мне захотелось двигаться дальше, и взять фреймворк в проект побольше. Для этого написал библиотеку компонентов svelte-atoms. За основу я взял UI кит на React, который используем на работе.


Каким приемам Svelte я научился, читайте под катом.

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

Опциональная цепочка, объединение с null, и как они меняют наш подход к написанию кода

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

Если Вы следите за релизами TypeScript, то знаете, что опциональная цепочка (Optional Chaining) и объединение с null (Null Coalescing) были представлены в TypeScript 3.7. Также эти фичи по умолчанию включены в Babel 7.8.0. Это одни из главных претендентов на роль особенностей JavaScript. В настоящее время они находятся на 4 и 3 стадиях рассмотрения, соответственно (23 января был принят стандарт ECMAScript 2020, где есть и опциональная цепочка, и объединение с null, и еще парочка занимательных вещей; я в курсе, что недавно на Хабре вышла статья-перевод про особенности, которые привнес в JS ES2020, однако, полагаю, парочка лишних примеров не повредит — прим. пер.).
Читать дальше →

Как сделать React приложение быстрее при помощи совместного размещения состояний

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

В статье речь идет о state colocation, то есть о совместном размещении состояний, этот термин можно было бы еще перевести как стейт колокейшн или стейт колокация.


Одной из основных причин замедления работы React приложения является его глобальное состояние (global state). Я покажу это на примере очень простого приложения, после чего приведу более близкий к реальной жизни пример.


Вот простенькое приложение в котором можно ввести имя для собаки (если окно не работает, вот ссылка):



Если вы поиграете с этим приложением то вскоре обнаружите что оно очень медленно работает. При взаимодействии с любым полем ввода возникают заметные проблемы с производительностью. В такой ситуации можно было бы использовать спасательный круг в виде React.memo и обернуть им все компоненты с медленным рендером. Но давайте попробуем решить эту проблему по другому.


Вот код этого приложения:

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

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

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

Серфинг интернета геймпадом (Javascript)

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


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


В этой статье я поделюсь с вами как:


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

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

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

Мы слишком много используем redux-селекторы

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

Когда я заглядываю в файл {domain}/selectors.js в больших проектах на React/Redux, с которыми работаю, я часто встречаю огромный список redux-селекторов подобного вида:


getUsers(state)
getUser(id)(state)
getUserId(id)(state)
getUserFirstName(id)(state)
getUserLastName(id)(state)
getUserEmailSelector(id)(state)
getUserFullName(id)(state)
…

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


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

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

Реализуем визуальный эффект из фильма «Матрица»

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


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

На днях пересмотрел «Матрицу». Слушайте, до чего же классный фильм (это касается только первой части). В очередной раз обратил внимание на «падающие» строчки с иероглифами на ихних экранах (намеренно использовал слово «ихних» забавы ради). Задумался о том, как это можно реализовать… максимально простым способом (ибо лень). Вот что у меня получилось.
Читать дальше →

Нововведения JavaScript ES2020 с простыми примерами

Время на прочтение3 мин
Охват и читатели55K
Представляем вам перевод статьи из блога Carlos Caballero на сайте Medium.com. Ранее мы публиковали материал этого автора о функциях ES10, появившихся в 2019 году.

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

Prettier в крупных проектах: тратим 20 минут на настройку, забываем о форматировании навсегда

Время на прочтение3 мин
Охват и читатели47K
Разработчики часто не могут договориться о форматировании кода, и типичный рабочий день для многих начинает выглядеть так: кофе, кодинг, всё мирно и хорошо, — а потом, бац, и наступает код-ревью, на котором выясняется, что ты где-то поставил скобочки не так или не перенес что-то на новую строчку.



Год назад одна из команд в Skyeng сталкивалась с такими холиварами почти на каждом ревью. Но затем человек, у которого больше всех болело, сказал: «Теперь живем на Prettier'e, согласны?» За следующие месяцы ребята ни разу не поднимали вопрос о форматировании, а теперь эта штука стоит на всем монорепозитории фронтенда — и его использует каждая команда, которая туда заезжает.
Читать дальше →

AvitoTech On Tour: митапы по Go и фронтенду в Казани

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

Уже четыре года мы поддерживаем IT-комьюнити в России. Мы провели кучу митапов в московском офисе Авито, а потом подумали, что отсутствие офиса в городе — не повод не проводить там митап.


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


Так родилась идея провести свои региональные мероприятия, чтобы поближе со всеми познакомиться. Мы назвали её AvitoTech On Tour.


В феврале мы проведём два митапа в Казани: первый по Go с сообществом GolangKazan, второй по фронтенду. На них выступят классные спикеры из Санкт-Петербурга, Минска, Казани и Москвы. Казанские митапы — наша пилотная попытка провести мероприятия вместе с локальными комьюнити в регионах, так что пожелайте нам удачи и приходите поддержать.


Под катом — даты мероприятий, имена спикеров, подробные программы и ссылки на регистрацию.


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

Парочка приемов работы с iframe

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

Задача


Сделать нечто похожее на Dashboard на Codepen.

Результат должен быть примерно следующим:


Возможное решение


Разметка одной секции может выглядеть так:
<section>
    <h3>Title</h3>
    <div class="viewport">
        <iframe src="index.html" seamless scrolling="no"></iframe>
    </div>
    <div class="buttons">
        <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button>
        <button onclick="document.location='code.7z'" title="download">code</button>
    </div>
</section>
Читать дальше →

Современный курс по Node.js в 2020

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


Дорогие товарищи инженеры, сообщество Метархия представляет вашему вниманию современный курс по Node.js, который включает глубокий разбор всех возможностей и аспектов платформы. Основной упор делается на то, как создавать надежные высоконагруженные сервера приложений и API без привязки к конкретному фреймворку и даже протоколу, т.е. абстрагировать бизнес-логику в отдельный слой. К лекциям прикреплено множество примеров кода, демонстрирующих гибкую структуру приложений и архитектурные приемы, в том числе работу с СУБД через слой доступа к данным, создание интерактивных приложений на вебсокетах, обеспечение безопасности, Graceful shutdown, межпроцессовое взаимодействие, предотвращение утечек памяти, масштабирование и кластеризацию при помощи процессов и потоков. На текущий момент в курсе 38 лекций (около 35 и ½ часов видео), 37 репозиториев с примерами кода, 4 PDF со слайдами. Перед основной частью курса по Node.js нужно сначала освоить хоть частично курс по асинхронному программированию.

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

Moscow JS Meetup в Райффайзенбанке: сохраняйте трансляцию

Время на прочтение2 мин
Охват и читатели1.8K
Присоединяйтесь к трансляции Moscow JS Meetup 30 января: будем отвечать на вопрос, что такое «чистый код», найдем максимум багов за минимум времени, пройдем путь к разработке расширяемых интерфейсов и узнаем про способы перформанса Webpack и Babel. Планы — огонь!

Подключайтесь в 19:30!