Все потоки

JavaScript *

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

261,97

Рейтинг

СтатьиПостыНовостиАвторыКомпании

m1rko 13 авг 2019 в 12:19

Зачем современную веб-разработку так усложнили? Часть 1

7 мин

72K

Веб-разработка * БраузерыjQuery * JavaScript * HTML *

Туториал

Перевод

Современная фронтенд-разработка оставляет полярные впечатления: одни её любят, другие презирают.

Я большая поклонница современной веб-разработки, хотя она мне напоминает некую «магию», со своими плюсами и минусами:

Когда вы поймёте, как использовать волшебные инструменты (babel! бандлеры! вотчеры! и так далее!), ваш рабочий процесс становится быстрым, мощным и восхитительным
Если вы не понимаете волшебные инструменты, всё ужасно запутанно
…и попытки освоить магию слишком часто неудачны, если вам кто-нибудь не поможет продраться через джунгли жаргона, преувеличений и устаревшей информации в интернете

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

+94

ru_vds 13 авг 2019 в 09:30

Разработка динамических древовидных диаграмм с использованием SVG и Vue.js

12 мин

12K

Блог компании RUVDS.comJavaScript * VueJS * Базы данных * Веб-разработка *

Перевод

Материал, перевод которого мы сегодня публикуем, посвящён процессу разработки системы визуализации динамических древовидных диаграмм. Для рисования кубических кривых Безье здесь используется технология SVG (Scalable Vector Graphics, масштабируемая векторная графика). Реактивная работа с данными организована средствами Vue.js.

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

Интерактивная древовидная диаграмма

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

+21

ph_piter 13 авг 2019 в 09:12

Книга «Выразительный JavaScript. Современное веб-программирование. 3-е издание»

8 мин

31K

Блог компании Издательский дом «Питер»JavaScript * Профессиональная литература *

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

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

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

+12

IgorMigal 13 авг 2019 в 08:51

Метод создания DRAG and DROP эффекта

3 мин

23K

Из песочницы

Придя впервые к технологии DRAG and DROP столкнулся с очень тяжелым её описанием (Это мое субъективное мнение. Прошу с ним не соглашаться, а перечитать все что только можно и посмотреть на этот вопрос с многих сторон). И решил написать пару статей, нацеленных на начинающих разработчиков, кто хочет познать дзен.

Статья будет состоять из двух частей:

Метод создания DRAG and DROP эффектов.
Практическое применение полученных знаний для создание сортировки при помощи DRAG and DROP

Параграф №1 Метод создания DRAG and DROP эффекта

Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.

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

При создании DRAG and DROP первым шагом необходимо объекту, который мы будем перемещать, присвоить значение draggable='true'.

<html>
  <head>
    <style>
      .ddd {
	display:block;
	float:left;
	padding:10px;
	border:1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id='d1' class='ddd' draggable='true'>Pervii 1</div>
  </body>
</html>

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

+10

ru_vds 12 авг 2019 в 10:30

Vue.js: 3 анти-паттерна

9 мин

21K

Блог компании RUVDS.comJavaScript * VueJS * Веб-разработка *

Перевод

Вероятно, Vue.js — это один из приятнейших JavaScript-фреймворков. У него имеется интуитивно понятный API, он быстрый, гибкий, им легко пользоваться. Однако гибкость Vue.js соседствует с определёнными опасностями. Некоторые разработчики, работающие с этим фреймворком, склонны к небольшим оплошностям. Это может плохо влиять на производительность приложений, или, в долгосрочной перспективе, на возможность их поддержки.

Автор материала, перевод которого мы сегодня публикуем, предлагает разобрать некоторые распространённые ошибки, совершаемые теми, кто разрабатывает приложения на Vue.js.

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

+34

LawfulGood 12 авг 2019 в 08:10

22 августа — Alfa JS MeetUP SPb

1 мин

1.9K

Блог компании Альфа-БанкJavaScript * WebGL * КонференцииТестирование веб-сервисов *

Привет!

У нас иногда спрашивают, почему мы проводим свои митапы по большей части в Москве, но не в Питере, например. Исправляемся, через 10 дней будет Alfa JS MeetUP SPb, который пройдёт в Санкт-Петербурге.

Коротко о главном:

вход бесплатный;
надо зарегистрироваться на этой странице;
будет и онлайн-трансляция (ссылку выложим в этом посте);
Санкт-Петербург, ул. Льва Толстого, д. 1-3 (Коворкинг «Ясная Поляна»);
Cypress, JavaScript, UI-тесты, WebGL, Docker и пицца.

Под катом — темы докладов наших спикеров.

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

+20

alexzfort 11 авг 2019 в 20:56

Дайджест свежих материалов из мира фронтенда за последнюю неделю №375 (5 — 11 августа 2019)

4 мин

11K

Веб-разработка * JavaScript * HTML * CSS *

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

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

+26

Leono 11 авг 2019 в 08:56

Тяжёлое бремя времени. Доклад Яндекса о типичных ошибках в работе со временем

12 мин

22K

Блог компании ЯндексВеб-разработка * Open source * JavaScript * Java *

В коде самых разных проектов нередко приходится оперировать временем — например, чтобы завязать логику работы приложения на текущее время у пользователя. Старший разработчик интерфейсов Виктор Хомяков victor-homyakov описал типичные ошибки, которые встречались ему в проектах на языках Java, C# и JavaScript от разных авторов. Перед ними вставали одни и те же задачи: получить текущую дату и время, измерить интервалы или выполнить код асинхронно.

— До Яндекса я работал в других продуктовых компаниях. Это не как фрилансер — написал, сдал и забыл. Приходится очень долго работать с одной кодовой базой. И я, собственно, смотрел, читал, писал много кода на разных языках и увидел много чего интересного. В итоге у меня родилась тема этого рассказа.

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

+43

ru_vds 9 авг 2019 в 12:10

Анимированное руководство по базовым механизмам React

4 мин

19K

Блог компании RUVDS.comJavaScript * ReactJS * Веб-разработка *

Перевод

Автор заметки, перевод которой мы сегодня публикуем, говорит, что существует пропасть между использованием React для разработки пользовательских интерфейсов и необходимостью знать о том, как работает React на самом деле. Многие, применяющие React на практике, не знают о том, что происходит в недрах этой библиотеки. Здесь, в анимированной форме, будут рассмотрены некоторые ключевые процессы, происходящие в React при формировании пользовательских интерфейсов.

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

+22

ukbpyh 8 авг 2019 в 21:46

Defined or Undefined? Нюансы создания массивов в JavaScript

8 мин

14K

Программирование * ООП * Алгоритмы * JavaScript *

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

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

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

+30

khovansky 8 авг 2019 в 15:04

Генерируем одноразовые пароли для 2FA в JS с помощью Web Crypto API

9 мин

40K

Веб-разработка * Программирование * Информационная безопасность * JavaScript *

Туториал

Перевод

Введение

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

Уверен, все, кто читают эту статью, хотя бы раз использовали двухфакторную аутентификацию (далее — 2FA, уж больное длинное словосочетание) в своей жизни. Сегодня я приглашаю вас разобраться, как устроена эта технология, ежедневно защищающая бесчисленное количество аккаунтов.

Но для начала, можете взглянуть на демо того, чем мы сегодня займемся.

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

+23

MaxRokatansky 8 авг 2019 в 14:03

Тестирование инфраструктуры как код с помощью Pulumi. Часть 1

7 мин

7.4K

Блог компании OTUSDevOps * JavaScript *

Перевод

Добрый день, друзья. В преддверии старта нового потока по курсу «DevOps практики и инструменты» делимся с вами новым переводом. Поехали.

Использование Pulumi и языков программирования общего назначения для инфраструктурного кода (Infrastructure as Code) дает много преимуществ: наличие навыков и знаний, устранение в коде бойлерплейта через абстракцию, знакомые вашей команде инструменты, такие как IDE и линтеры. Все эти инструменты программной инженерии, не только делают нас более продуктивными, но и улучшают качество кода. Поэтому, вполне естественно, что использование языков программирования общего назначения позволяет внедрить еще одну важную практику разработки программного обеспечения — тестирование.

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

+9

Блог компании EPAM 8 августа 2019

Бритва EPAMа: тест по Java, о котором не скажут «опяяять»

На Хабре больше сотни хабов и компаний, привязанных к тегу Java. Кажется, ни на одну тему не пишут так часто и подробно. Возможно, мы с компанией EPAM и сломали бритву Оккама, но сделали этот тест, посвященный одному из самых популярных языков программирования. Какое отношение имеет Райан Гослинг к Java? Var — это варик или совсем не вариант? Отработает ли вывод в консоль, если программист в конец запутался? — Предлагаем пройти тест и ответить на вопросы, в которых не упущены ни давняя история, ни последние обновления.

Подробности – под катом

+16

ukbpyh 8 авг 2019 в 10:19

Использование let объявлений переменных и особенности образуемых связываний в замыканиях в JavaScript

7 мин

11K

JavaScript * Алгоритмы * ООП * Программирование *

Из песочницы

Написать данную заметку меня сподвигло прочтение статьи на Хабре «Var, let или const? Проблемы областей видимости переменных и ES6» и комментариев к ней, а также соответствующей части книги Закаса Н. «Understanding of ECMAScript 6». Исходя из прочитанного я вынес, что не всё так однозначно в оценке использования var или let. Авторы и комментаторы склоняются к тому, что при отсутствии необходимости поддержки старых версий браузеров имеет смысл полностью отказаться от использования var, а также использовать некоторые упрощенные конструкции, заместо старых, по умолчанию.

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

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

+21

jamak 8 авг 2019 в 06:50

ngFanatic еженедельник

1 мин

1.9K

Angular * JavaScript *

07–08–2019

Релизы:

angular: 8.2.0
angular-cli: 8.2.0, v8.3.0-next.0
angular material: 8.1.2 bologna-bayou

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

+6

AndreasCag 8 авг 2019 в 06:05

5 полезных плагинов для webpack

5 мин

23K

Блог компании ConstantaJavaScript * Программирование * Веб-разработка * Системы сборки *

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

У webpack'а есть много полезных плагинов, о которых многие не знают и не используют в своих проектах. Под катом я собрал 5 таких, они могут здорово упростить вам жизнь!

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

+31

ru_vds 7 авг 2019 в 09:30

Часто задаваемые вопросы о системах типов

10 мин

15K

Блог компании RUVDS.comJavaScript * TypeScript * Веб-разработка *

Перевод

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

Давайте раз и навсегда разберёмся во всём том, что вызывает неразбериху при разговорах о системах типов.

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

+32

smelukov 6 авг 2019 в 14:17

Moscow SPA Meetup #5 — анонс встречи

4 мин

2.3K

Блог компании AvitoTechJavaScript * Программирование * Веб-разработка * Управление разработкой *

Привет! Меня зовут Сергей Мелюков, я senior engineer в команде Frontend Architecture в Авито.
17 августа в нашем офисе пройдет пятый по счёту митап-сателлит Moscow.js — Moscow SPA, встреча для фронтенд-разработчиков, которым интересна тема веб-приложений (Single Page Application). Поговорим об интеграции Jest с QA-инфраструктурой, DI в качестве способа масштабирования, может ли UIKIt быть максимально гибким и подходящим для всего, росте библиотек компонентов и платформенной команде. С докладами, кроме меня, выступят эксперты из Mail.Ru, Яндекса, ВКонтакте и Тинькофф.

Встреча начнётся в 11:00. Регистрируйтесь сами и приглашайте коллег. Под катом — тезисы выступлений, ссылки на регистрацию и видеотрансляцию митапа.

О митапе

+14

syncro 6 авг 2019 в 09:49

Material как WebComponents

11 мин

3.9K

Туториал

В последнее время, как я уже отмечал в предыдущей статье, вполне себе активно ведутся разработки WebComponents оберток для популярных фреймворков позволяющий использовать их через браузерное API. Это значит, что если вы хотите использовать готовые компоненты созданные на том или ином фреймворке, то вам не обязательно разворачивать проект и собирать его. Также это значит, что вы можете использовать разработки на разных фреймворках связывая их между собой посредством взаимодействия через API браузера.

Не очень давно я пытался найти приличный грид для веб-компонент, на тот момент такового, полноценного, но при том не обязывающего использовать какой-либо фреймворк, особенно если он представляет собой что-то типа Polymer не оказалось. В недалеком прошлом у меня был до того достаточно успешный опыт с material/cdk. Тогда мне относительно легко удавалось серьезно кастомизировать фильтры и пейджер для таблицы, локализовать подсказки и все это без переписывания библиотечного кода или мрачных хуков, использовав механизмы переопределения. На момент рассмотрения оказалось, что биндингов конкретно для компонента таблицы еще не успели сделать, но вот пару недель назад я заметил, что в репозитории на эту тему что-то появилось и решил в рамках эксперимента попробовать подключить их как веб-компоненты.

+11

ru_vds 6 авг 2019 в 09:30

Функциональное программирование: дурацкая игрушка, которая убивает производительность труда. Часть 2

8 мин

21K

Блог компании RUVDS.comJavaScript * Веб-разработка * Функциональное программирование *

Перевод

Сегодня мы представляем вашему вниманию продолжение перевода материала о вреде так называемого «функционального» программирования.

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

+13

1 2 ...

272

273 274 ...