Обновить
281.93

JavaScript *

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

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

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

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

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

Почему бы не сделать свой Lisp для веба?

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

Вот есть JavaScript — прекрасная вещь. И прекрасная она на мой взгляд по большей части потому, что дебаггер и отладочные инструменты встроены в каждый Браузер. Без дебаггера и инспектора DOM-дерева было гораздо тяжелее что-либо разрабатывать на JavaScript.


Вот я и решил запилить свой Lisp, но с хорошим дебаггером. Взял маленький, простенький littlelisp и отрефакторил его на 99%. Заточил под пошаговое выполнение и создал свою IDE, простую но работающую.


В итоге получилось следующее.


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

6 концепций, которые нужно освоить архитектору Angular-приложений

Время на прочтение8 мин
Охват и читатели22K
Angular — один из самых масштабных из существующих веб-фреймворков. Он включает в себя множество встроенных возможностей. А это значит, что для полноценного освоения Angular нужно разобраться с изрядным количеством концепций.



Автор материала, перевод которого мы сегодня публикуем, полагает, что существует шесть концепций, глубокое знание которых нужно Angular-разработчикам для того чтобы создавать хорошо спроектированные приложения. При этом он говорит не об изучении исходного кода реализации этих концепций, хотя и ему самому иногда приходится заглядывать в код. Речь идёт о понимании соответствующих механизмов и об умении применять их на практике.
Читать дальше →

Анализ содержимого QR кодов в документах электронного правительства РК во фронтенде

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

Я продемонстрирую как с помощью JavaScript прямо в браузере можно извлечь и проанализировать данные из QR кодов содержащихся в документах сформированных порталами электронного правительства Республики Казахстан (к примеру https://egov.kz).

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

Как вызвать утечку памяти в Angular-приложении?

Время на прочтение9 мин
Охват и читатели8.4K
Производительность — это ключ к успеху веб-приложения. Поэтому разработчикам нужно знать о том, как возникают утечки памяти, и о том, как с ними бороться.

Эти знания особенно важны в том случае, когда приложение, которым занимается разработчик, достигает определённого размера. Если уделять утечкам памяти недостаточно внимания, то всё может закончиться тем, что разработчик, в итоге, попадёт в «команду по устранению утечек памяти» (мне доводилось входить в состав такой команды).



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

Tree — единый AST чтобы править всеми

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

Здравствуйте, меня зовут Дмитрий Карловский и я… рассекаю на велосипедах… по бездорожью… против ветра… в гору… на лыжах. И сегодня я приглашаю вас прокатиться со мной вдоль и поперёк текстовых форматов данных и вместе спроектировать идеальный формат.


Я уже рассказывал о нём 5 лет назад, что привело к жарким дебатам, повлёкшим за собой небольшие изменения синтаксиса. Поэтому позвольте рассказать с чистого листа что он представляет из себя на текущий момент.


Спикер \Дмитрий Карловский
Место \PiterJS #47
Время 2020-05-20

Это — расширенная текстовая версия одноимённого выступления на PiterJS#47. Вы можете читать её как статью, либо открыть в интерфейсе проведения презентаций, либо посмотреть видео.

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

Хватит импортировать JavaScript-пакеты целиком

Время на прочтение5 мин
Охват и читатели23K
Часто ли вам доводилось импортировать в проект целый JavaScript-пакет, когда нужно было воспользоваться лишь очень немногими возможностями этого пакета? Вероятно, вы сможете вспомнить много таких случаев.

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



Библиотека Lodash включает в себя более 200 функций. Это говорит о том, что она, и правда, способна помочь программисту в решении массы задач. Но может случиться так, что, импортировав всю библиотеку, вызовут лишь 4-5 функций. Это приводит нас к вопросу о целесообразности импорта всего пакета в ситуации, когда использовано будет лишь 2-3% его возможностей. Подумаем о том, как с этим справиться.
Читать дальше →

Цветовая схема без помощи дизайнера

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

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

Как встроить ColorPicker в JavaScript Гант для изменения цвета задач

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


Привет, меня зовут Женя, и я просто еще один из обитателей JavaScript вселенной, который хочет поделиться с вами интересным опытом в frontend-разработке, а именно как кастомизировать диаграмму Ганта.


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


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

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


Хотя можно было бы использовать готовый софт, в нашем случае нужно было сильно кастомизировать Гант под нужды проекта. Альтернатива разработки диаграммы с нуля — это слишком накладное и времязатратное мероприятие. Посовещавшись с коллегами, мы решили, что лучше всего найти готовый компонент среди библиотек JavaScript и настроить его под наш проект.

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

Онлайн-паб 23 мая: холиварим про облака, JS и мобилки

Время на прочтение2 мин
Охват и читатели1.2K
Бывало такое, что на митапе самое интересное вы узнавали не из докладов, а на кофе-брейке или афтерпати, пока общались с спикером или другими участниками? Если да, то давайте пропустим лишнее и пойдём сразу в паб. В онлайн-паб.



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

Как всё будет и где смотреть:
Читать дальше →

Alpine.js — продолжаем знакомство

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

Это вторая статья о перспективном фреймворке Alpine.js.
Первую можно прочитать по ссылке:
Alpine.js — легковесный фреймворк с удобным синтаксисом


Продолжаем знакомить сообщество с этим замечательным инструментом.
Полный код урока здесь.


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

Уменьшение размера React Native-приложения на 60% за несколько простых шагов

Время на прочтение10 мин
Охват и читатели13K
Я тружусь в компании Mutual. Она работает в Бразилии, в сфере равноправного кредитования. Мы помогаем заёмщикам и заимодавцам наладить связь друг с другом. Первые ищут хорошие ставки, а вторые — доходы, превышающие то, что может предложить им рынок. Наш продукт применяется широким кругом пользователей, мы работаем в большой стране. В результате наши приложения для iOS и Android, основанные на React Native, загружают на очень разные устройства.


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

The state of soft skills

Время на прочтение9 мин
Охват и читатели17K
Так сложилось, что софт-скиллы довольно сильно помогли мне в карьере. Например, спустя всего 9 месяцев работы в Rambler, куда я приходил простым frontend-разработчиком, мне предложили стать руководителем группы, потому что мой руководитель увидел во мне потенциал и достаточный уровень развития необходимых гибких навыков.

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

Поэтому я решил попробовать доказать тезис, что soft skills важнее для успехов в карьере, чем hard skills. И чтобы не быть субъективным и ссылаться только на собственный опыт, я изучил материалы по теме, провел собственный опрос, проанализировал ответы с использованием небольшого количества математики и теперь хочу поделиться результатами.
Читать дальше →

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

Что такое MagicString и настолько ли эти строки волшебные?

Время на прочтение4 мин
Охват и читатели6.7K
MagicString — это малоизвестная библиотека. Не смотря на это она решает одну из насущных проблем — изменение исходного кода с использованием его структуры (AST — abstract syntax tree).

В этой статье мы узнаем, что такое MagicString и такие ли уж эти строки «магические». Это поможет нам понять следующую статью в которой я расскажу, как удалось перевести документацию Angular так быстро, и как это поможет с созданием универсального переводчика как Markdown, так и файлов любого другого формата.



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

WebRTC. Делаем приложение с блекджеком и видеозвонками

Время на прочтение4 мин
Охват и читатели8.9K
Дорогой читатель, перед тем как мы начнем писать код, давайте разберем саму концепцию видеозвонков.

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

Что ж, давайте поднимем наш WebSocket сервер, нам в этом поможет node.js;
Создадим файл sockets.js и запишем туда код сокет сервера:

const WebSocketServer = require('websocket').server;
const http = require('http');

const server = http.createServer(function(request, response) {
 //здесь мы ничего не пишем,потому что мы используем сокеты,а не http
});
server.listen(1337, function() {});

// создаем вебсокет сервер
const wsServer = new WebSocketServer({
  httpServer: server
});

wsServer.on('request', function(request) {
  let connection = request.accept(null, request.origin);
//принимаем подключение к сокету
})
Читать дальше →

О хранении JWT токенов в браузерах

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

Открытый стандарт JWT официально появился в 2015 (rfc7519) обещая интересные особенности и широкие перспективы. Правильное хранение Access токена является жизненно важным вопросов при построении системы авторизации и аутентификации в современном Web, где становятся все популярнее сайты, построенные по технологии SPA.

Неправильное хранение токенов ведет к их краже и переиспользованию злоумышленниками.
Читать дальше →

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

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

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

Touch slider на JavaScript

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

Когда я начинал изучать JavaScript, мне очень хотелось понять как работают и делаются слайдеры, которые можно перелистывать свайпами или мышью, но материалов с хорошим объяснением именно того, что мне надо, я не нашел. Через какое-то время мне удалось сделать нечто подобное. И теперь я хочу написать об этом статью, чтобы другим людям, которые хотят понять как это все работает и сделать touch события для слайдера (и не только), было проще разобраться. Я постараюсь излагать по порядку и подкреплять объяснения наглядными примерами.

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

Проекты на JavaScript для ознакомления

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


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

Представляю вашему вниманию подборку из 22 проектов на чистом или, как еще говорят, ванильном JavaScript (лично я предпочитаю просто JavaScript).

Для меня это своего рода промежуточный итог в изучении JS.

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

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

Код проектов находится ЗДЕСЬ.

Формат будет следующим: название проекта, его краткое описание, песочница.

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

Итак, поехали.

Немного о Neutralino.js

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

Что такое Neutralino.js?


Данная технология представляет из себя достаточно интересный аналог устоявшихся на данный момент Electron и NodeWebkit. Чем же оно отлично от вышеприведённых технологических решений? Если верить заявлениям предоставленным в официальной документации, то отлична сама используемая архитектура построения приложения, которая позволяет создавать кроссплатформенные приложения на веб-технологиях с достаточно малым размером конечного билда.

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