История с left-pad пробрала JavaScript-сообщество до самых костей. В то время, как разбухший код продолжает замедлять наши сайты, сажать наши батареи и делать наш npm install медленным, многие разработчики решили сами провести тщательный аудит зависимостей, которые они привносят в свои проекты. Настало время, чтобы мы как сообщество встали и сказали: хватит! Это сообщество принадлежит всем нам, а не только горстке JavaScript-разработчиков с шикарными длинными волосами.
Я решил описать свой опыт в области аудита зависимостей моего проекта, и я надеюсь, что эта информация будет полезной.Читать полностью »
Рубрика «javascript» - 311
Я заглянул в папку node_modules, и вы не поверите, что произошло
2016-08-16 в 9:02, admin, рубрики: javascript, node.js, юморВ этой статье я решил собрать более чем 20 AngularJS инструментов, которые ежедневно облегчают мой процесс разработки на AngularJS вот уже на протяжении нескольких лет. Здесь вы найдете инструменты для тестирования, front-end разработки, IDE, текстовые редакторы, библиотеки, модули, расширения, генераторы кода, Grid-инструменты и другое.
Перейдем к списку.
В начале я бы хотел ознакомить вас с тремя, на мой взгляд, лучшими AngularJS инструментами для тестирования:
1. Karma
Karma один из моих любимых AngularJS инструментов для тестирования. Он обеспечивает идеальную среду для тестирования, что позволяет протестировать приложение в реальных браузерах и реальных устройствах, таких как телефоны и планшеты.
Читать полностью »
Разработка простого чата на Socket.IO [2016] – Node.js
2016-08-15 в 7:35, admin, рубрики: javascript, JS, node.js, socket.io, web, чатВсем привет, дорогие хабрахабровцы! Недавно я начал изучать node.js и дошёл до самого интересного, а именно — Socket.Io. Поизучав информацию в интернете, я так и не смог найти подробного «гайда» по данному модулю, поэтому пришлось копать самому. Некоторые скажут, что можно и самому понять, что написано на сайте модуля, но некоторым этого будет не достаточно чтобы понять базу web-socket'ов, поэтому я решил написать эту статью для таких людей, а именно на самом 'чётком' примере — чате.
Читать полностью »
Прогрессивная загрузка web-приложения с помощью разделения кода
2016-08-15 в 7:32, admin, рубрики: javascript, progressive loading, progressive web apps, React, ReactJS, web-разработка, webpackВ этой статье мы рассмотрим как можно ускорить первоночальную загрузку web-приложения c помощью разделения кода (code splitting). Для реализации задуманного я буду использовать webpack v1, а для демонстрации — React (не обязателен).
В большинстве своих проектов я собираю все javascript файлы (а иногда css и картинки тоже) в ОДИН ОЧЕНЬ БОЛЬШОЙ bundle.js. Возможно ты, дорогой читатель, делаешь точно так же. Это достаточно стандартная практика для современных веб-приложений.
Но этот подход имеет один (и иногда достаточно важный) недостаток: первоночальная загрузка приложения может занимать очень долгое время, так как web-браузер должен (1) загрузить огромный файл и (2) распарсить тонну js-кода. Загрузка файла может занять долгое время, если у пользователя медленный интернет. Так же этот огромный файл может содержать код компонентов, которые пользователь НИКОГДА не увидит (например, пользователь просто не откроет некоторые части вашего приложения).
Что делать?
Читать полностью »
Дайджест свежих материалов из мира фронтенда за последнюю неделю №223 (8 — 14 августа 2016)
2016-08-14 в 20:43, admin, рубрики: angular, css, ES6, html5, javascript, JS, React, vue, анимация, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
Современная WEB-разработка. Как мы пришли к такому?
2016-08-14 в 15:47, admin, рубрики: javascript, web-разработка, ПрограммированиеСовременный мир веб-разработки превратился в один большой костыль. Причем костыль, которому, чтобы хоть как-то работать, необходимо еще пару тысяч костылей, склееных скотчем.
Костыли нас поджидают повсюду: начиная от серверных заголовков призванных обеспечить безопасноть приложений (CSP), заголовков, обеспечивающих взаимодействие между приложениями (Cross-origin resource sharing), и заканчивая инструментариями сборки.
Решая одну проблему, мы создаем пару новых и они уже как снежная лавина несутся, снося все на своем пути. Если сомневаетесь, можете посмотреть статистику вопросов на стековерфлоу, где джаваскрипт уже бесспорный лидер.
Читать полностью »
Создание бесконечного раннера на JavaScript, механика движения фона
2016-08-12 в 14:20, admin, рубрики: javascript, как создать раннер, Программирование, разработка игр, создание игр, создание игры, создание раннераПросматривая примеры разных игровых приложений и интересных решений я наткнулся на пример механики "типичного" раннера. Рассматривался там только принцип движения заднего фона с применением эффекта «параллакс», но эта идея натолкнула меня на некоторые мысли, о которых я и хотел бы рассказать ниже.
Интернационализация приложения в React (и не только)
2016-08-12 в 14:20, admin, рубрики: internationalization, javascript, pluralization, React, ReactJSНедавно я уже писал статью о том, как можно достаточно удобно валидировать формы в React с помощью компонента Formsy-React. Сегодня я бы хотел рассказать о подходе, который использовал для интернационализации разрабатываемого приложения. Как бонус, используемая библиотека добавляет возможность плюрализации, что является весьма полезной фишкой при разработке многоязычного приложения. Если интересно, прошу под кат!
Читать полностью »
Random User-Agent — версия вторая
2016-08-11 в 11:52, admin, рубрики: anonymous, chrome extension, Google Chrome, javascript, open source, Privacy, useragent, wtfpl, Расширения для браузеровПрошло два года с того момента, как вышла первая версия этого расширения для Chromium-based браузеров (работает в Google Chrome, Yandex.Browser и т.д.), задача которого проста и понятна — скрывать настоящий User-Agent. На данный момент это расширение работает у +6.000 пользователей (что очень скромно), и несколько дней назад получил на почту письмо с просьбой его немного доработать. Оценив состояние кода, к которому два года никто не притрагивался, было решено — переписывать его с нуля. Четыре дня работы, и вуаля — встречаем свежую мажорную версию, значительно улучшенную и с новым функционалом.
Под катом будут некоторые мысли как по поводу чуть-более анонимного веб-серфинга, настройке браузера Google Chrome, и почему это расширение может быть полезно. Чуть-чуть опытные анонимусы не найдут в посте для себя чего-либо интересного, поэтому для них, как и для самых нетерпеливых, традиционно — исходники на GitHub и расширение в Google Webstore.
Мысли Криса Койера
Одна из мыслей, которая поселилась в моей голове: должен ли frontend-разработчик быть в курсе всего? В общем смысле, frontend-разработчик может использоваться и на других рабочих местах. Вся команда разработчиков заканчивает разговор на frontend-разработчике. В этом смысл моей идеи. Frontend-разработчики создают те вещи, с которыми будут взаимодействовать люди. Все этапы разработки проходят вместе с frontend-разработчиком. Возможно, именно поэтому это такая забавная работа! Поскольку frontend-разработчик занимает центральное место в цепочке разработки, и при этом мы имеем дело с большим количеством разных специалистов, мы должны понимать их работу и иногда подсказывать, что и как сделать лучше.
От переводчика
Всем привет, с вами Максим Иванов, и сегодня мы поговорим на довольно острую тему в сфере веб-разработки. Как утверждает Крис Койер, frontend-разработчик должен разбираться в очень многих вещах, о которых не все даже и задумываются. Конечно, мы должны понимать, что frontend-разработчик не главный в процессе разработки любого онлайн-сервиса или ПО в целом. На ту же позицию frontend-разработчика вы найдете больше откликов на вакансию, чем на позицию backend-разработчиком. Но почему же тогда Крис Койер считает, что работать frontend-разработчиком сложнее, ибо ты должен специализироваться во всем. Конечно, ситуаций в жизни очень много, разные компании по-разному используют своих специалистов, но в чем наверняка должен разбираться frontend-разработчик? Об этом мы сегодня и поговорим. Жду комментариев на эту тему, а сейчас приступим.
Читать полностью »