Обновить
512K+

JavaScript *

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

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

Использование JavaScript-модулей в продакшне: современное состояние дел. Часть 2

Время на прочтение8 мин
Охват и читатели7.2K
Сегодня мы публикуем вторую часть перевода материала, который посвящён использованию JS-модулей в продакшне.



→ Кстати, вот первая часть статьи.
Читать дальше →

Быстрое введение в Svelte с точки зрения разработчика на Angular

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

Svelte — сравнительно новый UI фреймворк, разработанный Ричем Харрисом, который также является автором сборщика Rollup. Скорее всего Svelte покажется совершенно не похожим на то, с чем вы имели дело до этого, но, пожалуй, это даже хорошо. Две самые впечатляющие особенности этого фреймворка — скорость и простота. В этой статье мы сосредоточимся на второй.



Поскольку мой основной опыт разработки связан с Angular, вполне естественно, что я пытаюсь изучить Svelte, копируя уже привычные мне подходы. И именно об этом будет рассказано в этой статье: как в Svelte делать те же самые вещи, что и в Angular.

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

Ant-карусель на CSS и Javascript

Время на прочтение6 мин
Охват и читатели52K
С появлением CSS3 появилась возможность совершать анимацию без использования JS-библиотек, таких, например, как jQuery. CSS3 свойство transition позволяет плавно изменять другие свойства элемента (width, height, margin, opacity и пр.), задав в качестве параметров время и закон трансформации. Предлагаю небольшую по размерам, но достаточно функциональную карусель на чистом Javascript. Небольшую, как муравей, что гораздо меньше чем сова. Но почти с такими же возможностями.

Ant-карусель позволяет:

  • показывать один или несколько элементов;
  • элементы могут быть показаны в виде конечной или бесконечной ленты (в цикле);
  • автопрокрутка элементов;
  • навигация осуществляется стрелками, индикаторными точками или перелистыванием (для тактильных экранов);
  • автоматически подстраивается под любую ширину экрана.

Помещаем нашу карусель в файл index.html (пример файла см. ниже):

HTML
<div class="ant-carousel">
  <div class="ant-carousel-hider">
    <ul class="ant-carousel-list">
      <li class="ant-carousel-element"><img src="images/img1.jpg" alt="1"> <p>Описание 1</p> </li>
      <li class="ant-carousel-element"><img src=" images /img2.jpg" alt="2"> <p>Описание2</p> </li>
	…
      <li class="ant-carousel-element"><img src=" images /imgN.jpg" alt="N"> <p>Описание N</p> </li>
    </ul>
  </div>
  <div class="ant-carousel-arrow-left"></div><div class="ant-carousel-arrow-right"></div>
  <div class="ant-carousel-dots"></div>
</div>


Здесь использованы элементы <ul><li>, но вместо них можно использовать <div > <div >, если вам это удобнее. Стрелки и индикаторные точки располагаются абсолютным позиционированием в соответствующих контейнерах. Для стрелок используются рисунки в виде треугольных скобок, которые, при желании, вы можете заменить своими рисунками или генерацией изображения псевдо-элементами :before и :after.

Лучшие методики тестирования в JavaScript и Node.js

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

Это исчерпывающее руководство по обеспечению надёжности в JavaScript и Node.js. Здесь собраны десятки лучших постов, книг и инструментов.

Сначала разберитесь с общепринятыми методиками тестирования, которые лежат в основе любого приложения. А затем можно углубиться в интересующую вас сферу: фронтенд и интерфейсы, бэкенд, CI или всё перечисленное.

Как робот «Совести» общается с клиентами

Время на прочтение6 мин
Охват и читатели6.1K
Расскажем, как финтех-проект группы QIWI — карта беспроцентной рассрочки «Совесть» — перевел часть разговоров контакт-центра на робота, который не только отвечает на вопросы, но и сам задает их при исходящих обзвонах. Статья про применение на практике HTTP-запросов, синтеза речи и распознавания голоса.


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

Использование JavaScript-модулей в продакшне: современное состояние дел. Часть 1

Время на прочтение9 мин
Охват и читатели11K
Два года назад я писал о методике, которую сейчас обычно называют паттерном module/nomodule. Её применение позволяет писать JavaScript-код, используя возможности ES2015+, а потом применять бандлеры и транспиляторы для создания двух версий кодовой базы. Одна из них содержит современный синтаксис (она загружается с помощью конструкции вида <script type="module">, а вторая — синтаксис ES5 (её загружают с помощью <script nomodule>). Паттерн module/nomodule позволяет отправлять в браузеры, поддерживающие модули, гораздо меньше кода, чем в браузеры, эту возможность не поддерживающие. Теперь этот паттерн поддерживает большинство веб-фреймворков и инструментов командной строки.



Раньше, даже учитывая возможность отправлять современный JavaScript-код в продакшн, и даже хотя большинство браузеров поддерживало модули, я рекомендовал собирать код в бандлы.
Читать дальше →

Прорываемся сквозь защиту от ботов

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


В последнее время на многих зарубежных сайтах стала появляться incapsula — система которая повышает защищённость сайта, скорость работы и при этом очень усложняет жизнь разработчикам программного обеспечения. Суть данной системы — комплексная защита с использованием JavaScript, который, к слову, многие DDOS боты уже научились выполнять и даже обходить CloudFlare. Сегодня мы изучим incapsula, напишем деобфускатор JS скрипта и научим своего DDOS бота обходить её!
Читать дальше →

5 вещей, которые чаще всего не понимают новички в JavaScript

Время на прочтение7 мин
Охват и читатели40K
Всем привет! В конце сентября в OTUS стартует новый поток курса «Fullstack разработчик JavaScript». В преддверии начала занятий хотим поделиться с вами авторской статьей, подготовленной специально для студентов курса.

Автор статьи: Павел Якупов



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

Круг замкнулся. Как митапы помогли мне найти работу мечты

Время на прочтение6 мин
Охват и читатели20K
4 года назад я с коллегой поехала на свой первый митап. Начальник не отпустил пораньше, поэтому нам пришлось доработать свои регламентированные часы и мчать на такси до места проведения митапа. Мы, как опоздавшие школьники, тихо пробрались на свободные места в самом конце зала и принялись слушать. Это был офис Wrike. Могла ли я тогда представить, что буду работать в этом самом месте? Определенно нет. Думала ли я вообще о смене работы? Тем более нет.

image
pitercss_meetup №24. 11 сентября 2018 в офисе Selectel, фотография Натальи Майстренко

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

Рекомендации по созданию приложений на React Native. Часть 1

Время на прочтение5 мин
Охват и читатели9.3K
Добрый день, хабровчане. Сегодня делимся с вами переводом статьи, перевод которой был подготовлен специально для первого запуска курса «ReactJS/React Native-разработчик». Приятного прочтения.





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

Ниже я составил список лучших практических советов из своего личного опыта, которые, надеюсь, окажутся для вас полезными :)
Читать дальше →

Первое рабочее место или как начать разработку API на Node.js

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

Введение


В данной статье хотел бы поделиться своими эмоциями и приобретенными навыками в разработке первого REST API на Node.js с использованием TypeScript, как говорится, с нуля. История достаточно банальная: «Закончил университет, получил диплом. Куда же пойти работать?» Как можно было догадаться меня проблема не обошла стороной, пусть думать особо и не пришлось. Позвал к себе на стажировку разработчик (выпускник той же специальности). Полагаю, что это достаточно распространенная практика и существует множество подобных историй. Я, недолго думая, решил попробовать свои силы и пошел…

image

День первый. Знакомство с Node.js


Пришёл я на back-end разработку. В данной IT-компании используют платформу Node.js, с которой я абсолютно не был знаком. Я немного убежал вперед, забыв рассказать читателю, что никогда и ничего не разрабатывал на JavaScript (за исключением пары скриптов с копированным кодом). Алгоритм работы и архитектуру веб-приложений в целом я понимал, так как разрабатывал CRUD на Java, Python и Clojure, но этого было недостаточно. Поэтому первый день я полностью посвятил изучению Node.js, очень помог этот скринкаст.

Параллельно изучая веб-фреймворк Express, менеджер пакетов npm, а также такие файлы как package.json и tsconfig.json, голова просто шла кругом от количества информации. Очередной урок, что усвоение всего материала одновременно задача близкая к невозможной. К концу дня я все же справился с настройкой окружения и смог запустить express веб-сервер! Но радоваться было рано, потому что уходил домой с полным ощущением непонимания. Чувство, что я утопал в огромном мире JS не покидало меня ни на минуту, поэтому необходима была перезагрузка.

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

Телефон для коня и оркестр без пианиста. Как придумать спортивные задачи по фронтенду

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

Привет! Меня зовут Дмитрий Андриянов, я работаю разработчиком интерфейсов в Яндексе. В прошлом году я участвовал в подготовке нашего онлайн-соревнования по фронтенду.



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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №379 (2 — 8 сентября 2019)

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


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

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

Ssh-chat

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

Привет, Хабр. Console chat отличная вещь, но для фронтендеров, а что если вы хотите такой же, но для бэкэнда. Если да, то эта статья для вас. Но какой инструмент часто используют в бэкенде? Правильно ssh, так что представляю sshchat.

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

Создание слайдера диапазона значений для фильтра без использования jQuery

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

Очень часто на сайтах интернет-магазинов, и не только, можно фильтры со слайдером выбора диапазона значений. В одном из проектов мне тоже понадобилось сделать такой слайдер.


Первое, что приходит в голову — найти уже готовый и вставить себе на сайт. Тут то я и столкнулся с проблемой. Найденный мною плагин JqueryUI.slider отказался работать на некоторых мобильных устройствах. Проблему я выявить не смог (да не особо и хотел ковыряться в чужом коде) и решил сделать свой "велосипед".

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

Let — это новый Var

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


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

Я знаю о чем вы подумали: «Зачем вы тратите время на то, чтобы написать нам об этом?»

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

В этой статье мы сосредоточимся на том, как хранить данные в JavaScript.
Читать дальше →

Яндекс: умный дом по-взрослому

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


Недавно компания Яндекс запустила свою систему «умного дома». Нам предлагают купить недорогие работающие по Wi-Fi устройства: адаптер в розетку, лампочку и ИК пульт. Интересно, что у разработчиков «умных» устройств появилась возможность создать свои навыки «умного дома», это позволит подключить девайсы к системе Яндекса и управлять ими голосом через Алису. В списках навыков появляется всё больше новых брендов. Алиса прекрасно понимает русскую речь, что делает ее безусловным лидером среди голосовых ассистентов на российском рынке.
Однако, не всё так гладко…
Читать дальше →

Переосмысление deepClone

Время на прочтение5 мин
Охват и читатели7.8K
Как известно в JavaScript объекты копируются по ссылке. Но иногда требуется сделать глубокое клонирование объекта. Многие js библиотеки предлагают для этого случая свою реализацию функции deepClone. Но, к сожалению, в большинстве библиотек не учитываются несколько важных вещей:

  • В объекте могут лежать массивы и их лучше копировать как массивы
  • В объекте могут быть поля с символом в качестве ключа
  • У полей объекта бывают дескрипторы отличные от дефолтного
  • В полях объекта могут лежать функции и их тоже нужно клонировать
  • У объекта наконец бывает прототип отличный от Object.prototype
Читать дальше →

Github actions и кросс-платформенное построение

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

Привет, Хабр. Это статья о том как настроить построение на всех платформах с помощью github actions.

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

Какого цвета ваша функция?

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

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


(Тем временем, вы и я используем только самый просветленный язык и отточенные инструменты, разработанные для ловких рук таких мастеров, как мы).


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


Чтобы защититься от праведного огня и не оскорбить ваши (вероятно деликатные) чувства, я буду рассказывать о языке...

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