JavaScript *

Недавно к нам в команду поступил запрос на создание прототипа системы по выдачи билетов, что и было сделано за какие-то 40 часов работы включая обсуждение "ТЗ", проектирование, реализацию и даже некие доработки. Сделали мы и подумали, что такое простое приложение может быть очень даже полезным для широкой аудитории. В итоге, мы слегка поколдовали на IONDV. Framework, придумали социальное предназначение и заодно протестировали IONDV. Studio.

«Все об этом говорят, некоторые понимают, (как они думают), а занимаются, по-настоящему, лишь единицы» — цитата программного директора DUMP Казань. Если вы думаете, что вы тертый калач фронтенд, и ничего нового на конференциях не услышите, то загляните на frontend-секцию 8 ноября. Мы вспотели, пока слушали мат.часть некоторых докладов и истории взлетов-падений.

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

Сегодня публикуем перевод третьей части серии материалов об ускорении instagram.com. В первой части мы говорили о предварительной загрузке данных, во второй — об отправке данных клиенту по инициативе сервера. Здесь речь пойдёт о кэшировании.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

IndexDB — это документоориентированная СУБД, удобное средство для временного хранения относительно небольшого объёма (единицы и десятки мегабайт) структуированных данных на стороне браузера. К стандартной задаче, для которых мне приходится использовать IndexDB относится кэширование данных бизнес-справочников на стороне клиента (названия стран, городов, валют по коду и прочее). Скопировав их на сторону клиента потом можно лишь изредка загружать с сервера обновления этих справочников (либо целиком — они же небольшие) и не делать это при каждом открытии окна браузера.

Человек остается начинающим в течение 1000 дней. Он находит истину после 10000 дней практики.

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

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

(предыдущие списки заданий для тренировки: 1) 8 учебных проектов 2) Еще список проектов, на чем потренироваться)

Проект 1: Pacman

Создайте свою версию Pacman. Это отличный способ получить представление о том, как разрабатываются игры, понять основы. Используйте JavaScript-фреймворк, React или Vue.

Вы узнаете:

• Как передвигаются элементы
• Как определить какие клавиши нажимать
• Как определить момент столкновения
• Вы можете не останавливаться на достигнутом и добавить управление движением призраков

Пример этого проекта вы найдете в репозитории GitHub

«Мастер совершает больше ошибок, чем новичок — попыток»

Этой весной прошла HolyJS 2019 Piter — большая конференция для JavaScript-разработчиков. Вместе с программным комитетом конференции мы составили для вас список лучших докладов, посвящённых следующим темам:

• Алгоритмы на графах;
• Протокол Chrome DevTools и Puppeteer;
• Статические типизаторы;
• CI/CD;
• Миграции: с Backbone на Polymer, с Polymer на Angular.js;
• Большие данные на Node.js в serverless-архитектуре;
• SEO с точки зрения разработчиков Google Search;
• GraphQL;
• Продвижение опенсорс-проектов.

Под катом всё это структурировано следующим образом:

• Видеоролик на YouTube;
• Страница доклада с полным описанием на сайте конференции;
• Ссылка на слайды или специальный сайт доклада (если они есть).

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

Сегодня мы публикуем вторую часть перевода материала о расширении синтаксиса JavaScript с использованием Babel.



→ Головокружительная первая часть

Есть одно высказывание: «Что ты не можешь измерить, то ты не можешь улучшить». Автор статьи, перевод которой мы сегодня публикуем, работает в компании Superhuman. Он говорит, что эта компания занимается разработкой самого быстрого в мире почтового клиента. Здесь речь пойдёт о том, что такое «быстро», и о том, как создавать инструменты для измерения производительности невероятно быстрых веб-приложений.

Современный фронтенд шагнул далеко вперед со времен jQuery и обычных HTML страничек. У нас появились сборщики, менеджеры пакетов, компонентный подход, SPA, SSR и много еще чего.

Кажется, что у нас есть все, что нужно для счастья. Но индустрия двигается вперед. Я хочу вам рассказать о компилируемом фреймворке Svelte, и какие преимущества у него есть перед аналогами.

Автор изображения Andrew Walpole

Привет!

Меня зовут Саша и я работаю архитектором в Тинькофф Бизнес.

В этой статье хочу рассказать о том, как преодолеть ограничение браузеров на количество открытых долгоживущих HTTP-соединений в рамках одного домена при помощи service worker.

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

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

Данная статья содержит решений заданий, в которых рассматриваются аутентификация javascript, обфускация javascript и javascript native code.

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



Для новых читателей нашего блога — два бонуса внутри.

Сегодня я хочу рассказать вам о том, как на нашем проекте состоялся переход на Mobx, какие преимущества это даёт. Также будет показан типовой проект и даны пояснения по основным вопросам. Но сначала вводные.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Перед вами вольный перевод статьи "10 Tips & Tricks to make you a better VueJS Developer" с сайта Dev.to. Автор расскажет нам об интересных и полезных вариантах применения привычных нам средств VueJS.

Введение

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

Перед вами перевод статьи из блога Carlos Caballero на сайте Medium.com. Автор расскажет нам о функциях, которые появились в версии ES10 2019 года.



ES10 — это версия ECMAScript, актуальная для 2019 года. Она содержит не так много нововведений, как версия ES6, выпущенная в 2015 году, однако в нее включили несколько полезных функций.

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

В сентябре в нашем офисе прошел большой митап по разработке на прогрессивном фреймворке vue.js. Мероприятие посетили 400 человек — это не может не радовать. В программе было 3 доклада: команда Delivery Club рассказала про технологическую сторону своей новой web-версии клиентского сайта. Ребята из MSK VUE.JS поделились опытом организации API. А ведущий разработчик Nuxt.js рассказал про основные фичи новой версии фреймворка. Под катом собрали для вас материалы с мероприятия.