Обновить
293.86

JavaScript *

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

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

Уменьшение размера 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
Читать дальше →

Тестирование JavaScript кода с Jest для чайников. Часть 1

Время на прочтение7 мин
Охват и читатели136K
Здравствуй, Хабр! Данное руководство является первой частью в запланированном цикле статей про такой замечательный фреймворк для тестирования как Jest. Материал будет полезен новичкам и тем, кто только знакомится с тестированием, и хотел бы изучить этот фреймворк. В первой части мы разберём: как начать работу с jest, как написать простой тест, и какие есть методы для сопоставления проверяемых значение с ожидаемыми. Кому интересно — добро пожаловать под кат!
Читать дальше →

Chrome расширение для скрытия отвлекающих рекомендации на YouTube

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

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


Рекомендации на YouTube очень полезны, так как подсказывают релевантные видео к текущему, но и опасны потому что содержат ещё и в принципе интересные и отвлекающие ролики (не на тему видео).




В какой-то момент ты просто устаешь смотреть ролики на определенную тему, и тут тебя ловят отвлекающие рекомендации, ибо YouTube выгоднее привлечь любым другим контентом лишь бы вы провели на нем больше времени. Серфя таким образом, теряем время впустую.

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

Как с помощью js и google sheets стать соседом Билла Гейтса по гольф клубу

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


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


Вот и у меня появилось свободное время, которое я посвятил анализу своих сделок в Тинькофф Инвестициях. Есть 2 типа людей: одни прекрасно строят многомерные массивы у себя в голове, пробегаясь по ним for-циклом в IPython Notebook, другим же нравится "щупать" цифры, раскладывая их по полочкам в Excel. Себя я отношу ко второй категории, поэтому все свои сделки аккуратно заносил в Google Sheets.


Под катом я расскажу, как автоматизировал свою рутину при помощи Google Apps Script и API от Тинькофф Инвестиций.

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

Проверка портала региональных госуслуг под нагрузкой через puppeteer

Время на прочтение13 мин
Охват и читатели4.2K
Привет, Хабр! Вы наверное тоже с любопытством наблюдаете за «эпопеей Американского Дикого Запада по распределению земельных участков — доскачи первым и воткни флаг чтобы застолбить» или возможно даже участвуете в ней. Точнее в ее современном варианте — успей первым подать заявление на госуслугах для получения денежных средств на детей или получи пропуск на выход из дома. Смотря на все это, хочется поделиться опытом нашей команды по тестированию и участию в подготовке регионального портала услуг к предоставлению услуги «Запись в первый класс». Она тоже очень похожа на хабраэффект и, думаю, была близка к тому, что пару дней назад проиcходило с федеральным порталом gosuslugi.ru, но на региональном масштабе.

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

А для начала — фото черного автобуса, трое суток круглосуточно дежурившего у школы, в котором автор этих строк подтверждал свою очередь среди родителей три года назад. У нас хотя бы родители соорганизовались. Дежурить зимой в Хабаровске при -30 градусов — то ещё удовольствие.

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

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

Стыкуемся с МКС с помощью JavaScript и циркуля

Время на прочтение9 мин
Охват и читатели25K
Компания SpaceX, основанная небезызвестным Илоном Маском, выпустила симулятор ручной стыковки корабля Crew Dragon с МКС. Если все пойдет по плану, стыковку проведут 27 мая 2020 года. Она будет проходить в полностью автоматическом режиме, но экипаж корабля сможет переключиться на ручное управление. Собственно, именно ручной режим и воспроизведен в симуляторе.

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

Космический челнок так и норовит улететь не туда… А точность с которой нужно попасть в шлюз составляет 20 см… по трем осям, а также по угловой скорости, скорости смещения и т.д.

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

Как тебе такое, Илон Маск?

image
Курение вредит вашему здоровью
Читать дальше →

Ваня едет к бабушке или динамический адаптив на JavaScript

Время на прочтение9 мин
Охват и читатели10K
Во время работы над адаптивом нам то и дело приходится изменять внешний вид объектов. Обычно нам для этого достаточно прописать несколько медиа-запросов и у нас всё получается. В некоторых случаях нам нужно изменить порядок элементов и тут на помощь приходит, например, свойство order из технологии Flexbox или Grid. Но бывают случаи, когда нам это не поможет.

Идея динамического адаптива призвана упростить жизнь верстальщика и быстро адаптировать сложные элементы макета.

Базовый набор для VueJS-разработчиков

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

Начиная с основ


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


Так, например, Angular имеет огромное количество функциональных возможностей из коробки, React позволяет очень гибко настраивать собственное окружение, а VueJS славится своей абстракцией над сложными вещами. Какой выбрать именно вам? Это дело сугубо индивидуальное и зависит от проектной задумки и поставленных задач.


Одностраничные приложения? Это вкусно?


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


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

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

Переносим Angular проект на ESLint, с Prettier, Husky и lint-staged

Время на прочтение8 мин
Охват и читатели37K
Привет, Хабр! Меня зовут Богдан, я работаю в ПИК Digital Front-End тимлидом. Большую часть проектов мы разрабатываем на Angular и недавно я решил пересмотреть наши стайл гайды, а также добавить новые инструменты для более удобной работы.

В качестве линтера я решил использовать ESLint, так как в скором времени на него планируют перевести Angular. И в этой статье я хочу поделиться инструкцией по переходу с TSLint на ESLint, а заодно рассказать, как запускать Prettier из ESLint, как добавить правила стайл гайда AirBnB, и как сделать линтинг удобным и незаметным с помощью настройки VS Code и Git хуков.
Читать дальше →

Новый взгляд на Fullstack-разработку с фреймворком Ruby on Rails

Время на прочтение12 мин
Охват и читатели9.8K
Можно ли всерьёз обсуждать fullstack-разработку? Если смотреть в сторону больших фреймворков для frontend и для backend, то разговор про fullstack выглядит сомнительно. Предлагаю посмотреть на термин fullstack с точки зрения Ruby on Rails и прежних более простых принципов реализации интерактивности на классических веб-страницах. Представляю обзор frontend-возможностей, предусмотренных во фреймворке Ruby on Rails или связанных с ним.

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

Кастомный скроллбар в Angular

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

После вступления Edge в доблестные ряды Chromium-браузеров кастомизация скроллбаров через CSS отсутствует только в Firefox. Это здорово, но кроме Firefox у CSS-решения есть масса ограничений. Посмотрите, какую черную магию приходится применять для плавного исчезновения. Чтобы получить полный контроль над внешним видом, по-прежнему нужно прибегать к JavaScript. Давайте разберемся, как это по-хорошему сделать через компонент Angular.


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

Работа с куки на чистом JavaScript без головной боли

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

Привет, Хабр!


Недавно я столкнулся с необходимостью работать с куки-файлами при помощи JavaScript. Когда я увидел, насколько ужасна работа с document.cookie на чистом JavaScript, я полез искать библиотеку для удобства работы с куками. Как оказалось, немногие библиотеки для работы с куками, хоть и на первый взгляд кажутся простыми и удобными, в процессе работы с ними обнаруживаеся немало подводных камней.

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