Обновить
261.06

JavaScript *

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

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

Front End Meetup от Facebook Developer Circle: Moscow

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

Второй год сообщество Facebook Developer Circle: Moscow активно развивается в области JavaScript и Front End разработки. И я рад вам сообщить, что скоро в сообществе будет проводиться очередной митап. Но этот митап будет не один, а три дня! Вы сможете посмотреть гораздо больше интересных докладов)

Day 1 - 15 октября

7:00pm - 7:45pm - DSL approach with JS component libraries

Andrey Kobets / Head of Front-end Development at Yandex

How to write modern frontend application using React/Vue/Angular/..., and

1 Do it the way you like it, but not the way the library requires it.
2 Use only the best solutions for your task.
3 Not to fear major updates of dependencies.
4 Not to rewrite project every time with a new extra fast/robust/flexible library.

7:45pm - 8:30pm - Quo vadis, Frontend?

Evgeny Kot / Director of Development at Wrike

There is no industry that is more rapidly developing than the frontend. You can argue, but how many more ecosystems do you know where frameworks are emerging at this rate? Web standards are being implemented and immediately become obsolete. The most important question is: where are we going, and where will we come to? The question is not rhetorical: how not to stay out of business in this bubbling stream and capture only the most important, what will be the trend in 2021.

8:30pm - 9:15pm - Dive into effector

Yan Lavryushev / Frontend Developer

Mental health issues is the main epidemic of the 21st century, could we reduce it a bit? I guess so


Day 2 - 16 октября

7:00pm - 7:45pm

Читать далее

Как скрестить Clion, Emscripten и Cmake

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

В этой статье я хотел бы пройтись и показать основные моменты того, как настроить IDE CLion для компиляции CMake проекта средствами Emscripten. Когда я занимался этим скрещиванием мне пришлось потратить день или два на эксперименты. И в этой заметке я собираюсь собрать некое "how to", которое в итоге сработало.

Читать далее

Основные команды bash, git, npm и yarn, а также немного о package.json и semver

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

Предлагаю вашему вниманию небольшую шпаргалку по основным командам bash, git, npm, yarn, package.json и semver.

Условные обозначения: [dir-name] — означает название директории, | — означает «или».

Рекомендую вводить каждую команду в терминале и внимательно изучать вывод, так вы быстро их запомните и определите, какие команды вам нужны, а какие нет.

Приношу извинения за возможные ошибки и опечатки. Буду рад любым замечаниям и предложениям.

Без дальнейших предисловий.

Оглавление:

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

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

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

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

Новый механизм JSX трансформации в React 17 Release Candidate

Время на прочтение4 мин
Охват и читатели12K
В React 17 Release Candidate появляется новый способ трансформации JSX. С ним, в бандле, не понадобится сам Реакт, хотя для использования хуков он всё ещё нужен. Это и есть основной бенефит нового механизма. Под катом краткий перевод статьи в блоге ReactJS.
Читать дальше →

Как высчитать ключи перехода от любой системы координат к WGS с сантиметровой точностью?

Время на прочтение5 мин
Охват и читатели35K
Для кого этот пост — картографы, геодезисты, генпланисты, строители и т.д.

Коллеги, привет!

Решаемая проблема — получение 100% достоверных параметров для пересчета координат, например в привычные картографические градусы (WGS84). Коллеги уже поняли про что я, а любопытным поясню — дело в том, что гуляющие по интернету приложения и алгоритмы с параметрами пересчета координат например из выписки ЕГРН на вашу дачу в координаты для GPS приемника, в подавляющем большинстве будут «лаптем по карте». Для поиска объекта размером с дом, это не будет проблемой, а вот для инженерной затеи, уже слабовата точность. К примеру мы хотим обозначить границы на местности с сантиметровой точностью, найти трубу под землей или кабель, запустить беспилотник по картам с плоскими координатами, чертить чертеж в плоских координатах с картографической онлайн основой из интернета и многое другое, что требует субметровой точности.
Читать дальше →

Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?

Время на прочтение9 мин
Охват и читатели30K
Мы, выбирая фреймворк для нового веб-проекта, обычно склонны останавливаться на инструментах, с которыми знакомы, не обращая внимания на то, насколько хорошо они подходят для этого проекта. Я же пробую поступать с точностью до наоборот. Всякий раз, когда у меня возникает такая возможность, я испытываю новые технологии. Что я узнал после таких экспериментов? Почему я, в итоге, считаю своим стандартным инструментом для создания статических сайтов (static site generator, SSG) Next.js?



В этом материале я расскажу о том, как я экспериментировал с разными веб-технологиями. Речь пойдёт о поиске подходящего инструмента в рамках Jamstack, о том, как выбирать именно то, что подойдёт разработчику и хорошо интегрируется в его проект, о том, почему я выбрал Next.js.
Читать дальше →

Как использовать Axios в React

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


В этой статье вы узнаете как использовать библиотеку Axios в React.

Рассмотрим все на примере запросов на сервер, отобразим полученные данные в таблице, сдалаем компонент проверки загрузки и все это используя React Hooks.

Что такое Axios?


Axios это один из самых популярных HTTP клиентов для браузеров и node.js, основанный на промисах.

В Axios есть поддержка запросов, получение ответов от сервера, их трансформация и автоматическая конвертация в JSON.
Читать дальше →

Понимание спецификации ECMAScript, часть 2

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

Привет, Хабр! Представляю вашему вниманию перевод статьи под редакцией xfides


Автор оригинала: Marja Hölttä
Перевод первой части.



Давайте еще попрактикуемся в чтении спецификации. Если вы не видели предыдущую статью, самое время сходить ее посмотреть. В первой части мы познакомились с простым методом Object.prototype.hasOwnProperty. Также, посмотрели список абстрактных операций, которые вызываются при выполнении этого метода. Еще мы узнали о специфических сокращениях «?» и «!», которые связаны с обработкой ошибок. И наконец, мы получили информацию о типах языка, типах спецификации, внутренних слотах и внутренних методах.


Готовы для второй части?

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

Вы не знаете как должны работать модальные окна

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

Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?


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


Я покажу, как просто создавать сложные, удобные, производительные и доступные модальные окна независимо от браузера, платформы, устройства или способа взаимодействия пользователя.


Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

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

Зачем нужна выделенная Frontend Core команда и как мы внедряли дизайн систему

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


Всем привет, меня зовут Ростислав, я занимаю должность Front Lead в компании ДомКлик. Хочу поделиться с вами опытом создания Web Core команды и сразу ответить на следующие вопросы:


  • Необходима ли такая команда в компании?

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


  • Выгодно ли внедрять такую команду?

Безусловно. Изначально было сложно измерить и спрогнозировать выгоду от её создания, все расчеты, P&L были на словах, в цифрах — только примерные предположения. Спустя год мы можем посчитать сэкономленное время, профиты, и все расчеты говорят о том, что это было не зря.


  • На долгую перспективу ли эта команда?

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


  • Чем эта команда занимается?

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

Читать далее

Продолжаем чистить память с three.js

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

Введение


Недавно писал о своем опыте очистки памяти в приложении, с использованием three.js. Напомню, что целью была перерисовка нескольких сцен с подгрузкой gltf моделей.

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

Visx — коллекция графических примитивов для React-приложений, созданная в Airbnb

Время на прочтение10 мин
Охват и читатели10K
После 3 лет разработки и 2,5 лет использования в продакшн-проектах Airbnb, после переписывания кода на TypeScript, мы рады представить вам официальный релиз коллекции графических примитивов visx 1.0  (раньше она называлась vx). Вот — страница проекта на GitHub. Документацию и примеры можно найти на airbnb.io.



Мы поставили себе цель, которая заключалась в том, чтобы унифицировать стек технологий визуализации данных, применяемый во всех проектах Airbnb. В ходе движения к этой цели мы создали новый проект, в котором объединена мощь D3 и удобство React. Среди сильных сторон visx мы можем отметить следующие:

  • Использование коллекции способствует созданию бандлов приложений маленького размера. Дело в том, что visx разбита на множество пакетов. Поэтому при её использовании в некоем проекте можно взять из неё лишь то, что нужно.
  • Коллекция спроектирована так, чтобы не навязывать программистам некие предопределённые схемы работы. Используя visx, разработчик может использовать собственную систему управления состоянием приложения, свою библиотеку анимации или подходящее ему CSS-in-JS-решение. Высока вероятность того, что при создании вашего React-приложения уже приняты решения о том, как в нём выполняются анимации, о том, какой подход используется для работы с темами, о том, как стилизуются элементы. Visx, в этом плане, ничего нового в приложения не добавляет. Библиотека интегрируется со всем тем, что уже есть в проект.
  • Это — не коллекция элементов, «заточенная» под создание графиков. Если вы будете пользоваться визуализационными примитивами для создания графиков, то вы, в итоге, создадите собственную библиотеку, решающую эту задачу. Причём, это будет библиотека, оптимизированная под ваши нужды. Она будет находиться под вашим полным контролем.
Читать дальше →

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

Drag'n'Drop API: пример использования

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

В данном туториале мы рассмотрим встроенный механизм перетаскивания элементов на странице.

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

Поддержка технологии:



Превью:



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

Для стилизации будет использоваться Bootstrap.

Если вам это интересно, прошу следовать за мной.
Читать дальше →

Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно

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

Мы используем TypeScript, потому что это делает разработку безопаснее и быстрее.

Но, на мой взгляд, TypeScript из коробки содержит слишком много послаблений. Они помогают сэкономить немного времени JavaScript-разработчикам при переходе на TS, но съедают очень много времени в долгосрочной перспективе.

Я собрал ряд настроек и принципов для более строгого использования TypeScript. К ним нужно привыкнуть один раз — и они сэкономят массу времени в будущем.

Сэкономить время в будущем

Vue 3.0 — первый взгляд

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

Наконец-то руки дошли попробовать новую версию Vue. Я не собираюсь быть объективным в этой статье, я просто расскажу свои впечатления в процессе работы с новой версией, а так же расскажу как её установить и начать работу уже сейчас.

Не смотря на релиз, Vue 3.0 еще не готов для полноценного использования в продакшене. Router и Vuex еще не готовы для работы с новой версией, Vue CLI по умолчанию устанавливает старую версию, не говоря уже о сторонних плагинах и библиотеках, авторы которых не успели их обновить. Вот такой долгожданный и неполноценный релиз мы получили.

Особенно много вопросов вызывает новый синтаксис, так называемый Composition API, который к счастью не заменит полностью привычный и всеми любимый Options API. В пользу новой композиции нам всюду предлагают подобную картинку:

Читать далее

Термостат на ThingJS (beta)

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


Почти год назад я представил свой pet-проект — IoT платформу ThingJS. Честно сказать, я не достиг всех целей, которые ставил перед собой публикуя ту статью. Но работа окупилась. Удалось получить нечто иное — полезную критику.


Я учел прошлый опыт. Теория без практики заходит плохо. В этот раз презентация будет построена на базе прикладного решения. Каждый сможет “потрогать” его и использовать в быту.

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

Нестабильная сортировка в JavaScript

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

Когда я вижу пост на подобную тему в любой социальной сети, под ним почти всегда оказывается множество комментов вот такого типа:

Зачем это нужно знать, если есть встроенные методы сортировки?

Зачем изобретать велосипед заново?

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

В "любой движок javascript" работают не дураки, и уже сделали все как нужно

И сам я раньше считал так же, пока не пришел в одну из команд Ростелеком ИТ frontend-разработчиком. Вместе мы набрели на очень интересный кейс: нужно было создать виджет, который мог бы встраиваться в информационные системы всех наших макрорегиональных филиалов и упрощать работу операторов по подбору оптимального тарифа.

Сразу к делу

Как думаете, что произойдет после выполнения данного кода? ​

Читать далее

Lazy-loading видео

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

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

Обрабатываем данные на стороне клиента с помощью WebAssembly

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


WebAssembly (сокр. WASM) — технология запуска предварительно скомпилированного бинарного кода в браузере на стороне клиента. Впервые была представлена в 2015 году и на текущий момент поддерживается большинством современных браузеров.

Один из распространенный сценариев использования — предварительная обработка данных на стороне клиента перед отправкой файлов на сервер. В этой статье разберемся как это делается.
Читать дальше →