Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Сниппеты для Chrome DevTools

Разработка веб-сайтов *JavaScript *Google Chrome
Возможности встроенного в браузер инструмента Chrome Developer Tools можно расширить с помощью сниппетов. Это ускоряет разработку и упрощает рабочий процесс. Хорошая коллекция сниппетов есть на GitHub'е.

Сниппеты в Google Chrome


Подробно о функциях сниппетов можно почитать в официальной документации Chrome. А вот краткая инструкция:

  1. Зайти в «chrome://flags» — Отметить «Enable Developer Tools experiments».
  2. Открыть DevTools: «Settings» — «Developer Tools Experiments» — Отметить «Snippets support».
  3. После перезагрузки во вкладке DevTools «Sources» появится «Snippets», где можно управлять сниппетами:

image
Читать дальше →
Всего голосов 51: ↑49 и ↓2 +47
Просмотры 28K
Комментарии 13

Загрузка модуля по требованию в AngularJS

JavaScript *Angular *
Перевод
Если вы очень спешите: то да, отложенная загрузка модулей в AngularJS возможна, и код необходимый для этого вы можете видеть ниже.

Неужели AngularJS не поддерживает отложенную загрузку в каким либо способом?


AngularJS является одним из лучших шаблонов для front end разработки, но он все еще молод, и не имеет нескольких важных возможностей (кто сказал хорошего маршрутизатора?).
В то время как большинство из этих возможностей может быть добавлено в виде модулей, которые можно найти в google или на специализированных веб сайтах, есть некоторые функции, которые не получится добавить таким способом.
В настоящее время многим требуется асинхронная загрузка модулей, и кажется Google собирается реализовать ее во второй версии фремворка, но кто знает, когда это будет…
Читать дальше →
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 17K
Комментарии 17

Беседа с Артемом Захарченко, JavaScript Developer'ом Pics.io

Блог компании TopTechPhoto JavaScript *
Artem Zakharchenko

Ребята из подкаста «Откровенно про IT-карьеризм» пригласили к себе нашего ведущего фронтендщика Артёма Захарченко. Что из этого получилось — слушаем на их сайте.

В 141-м выпуске подкаста:
  • Про во’IT’и
  • Аутсорсовая империя
  • Gameloft
  • Образование
  • JavaScript
  • JS Конференции
  • Изучение JS
  • Pics.io

Есть также прямая ссылка на файл подкаста.
Всего голосов 29: ↑10 и ↓19 -9
Просмотры 5.1K
Комментарии 0

Frontend Developer Speakers’ Corner в Минске, 17 июня

Блог компании Ciklum
Во вторник 17 июня, 19.00 Ciklum Minsk приглашает frontend-разработчиков на открытое мероприятие Frontend Developer Speakers’ Corner!

Ciklum Speakers’ Corner — это способ Ciklum поддерживать и развивать свободный обмен знаниями в различных технологиях и областях, а также это отличная возможность находить коллег с общими интересами и расширять профессиональный опыт и кругозор.
image
Читать дальше →
Рейтинг 0
Просмотры 1.5K
Комментарии 0

От сообщества для сообщества — открытый хаб статей

Я пиарюсь


DevShelf.us — это открытый хаб статей по веб-разработке, основанный на голосовании пользователей. Цель проекта — дать разработчикам качественные подборки статей и лучшие материалы по мнению сообщества, а не по популярности в выдаче поисковиков (w3schools).

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

Под катом мы вам расскажем подробней об идее проекта и поделимся ссылками на первые сборники статей.
Читать дальше →
Всего голосов 42: ↑29 и ↓13 +16
Просмотры 8.6K
Комментарии 16

Советы front-end разработчику

Разработка веб-сайтов *CSS *HTML *
Из песочницы


Привет, читатель хабра.

Наверное, ты сразу спросишь меня: «Да кто ты такой, чтобы давать мне советы?». Итак, немного обо мне.

Первое мое общение с HTML и CSS было 10 лет назад, еще в школе, когда у меня только появился интернет, и я понял что тоже хочу делать странички, которые сможет увидеть весь мир. С тех пор у меня есть как минимум 5 полных лет опыта разработки сайтов по-взрослому. Сейчас я могу без лишней скромности сказать, что сверстал я уже пару сотен сайтов, большинство из которых, как ни странно, совершенно не совпадают с моими текущими требованиями к верстке.

Я не хочу рассказывать как надо делать, эта статья результат моего опыта и попытка написать рекомендации тем, кто только начинает, хотя и для матерых верстальщиков (слово режущие слух) здесь могут найтись интересные идеи.
Если ты заинтересовался прошу под кат…
Читать дальше →
Всего голосов 129: ↑109 и ↓20 +89
Просмотры 189K
Комментарии 139

Распознаем коды Морзе с использованием Rx.js

Разработка веб-сайтов *JavaScript *
Tutorial


Задача: на входе сигналы с клавиатуры (keyup, keydown) — на выходе буквы и слова декодированные по азбуке Морзе. О том, как декларативно решить данную задачу используя FRP подход, в частности Rx.js — ниже под катом. (Зачем? Because we can)
Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 15K
Комментарии 17

Еще один способ приготовления одностраничных приложений

Блог компании Targetix Разработка веб-сайтов *JavaScript *
Авторы статьи: Борис Солдовский SoldovskijBB, Шевцов Сергей s_shevtsov.

Приветствуем всех, кто читает этот пост! Мы — команда front-end разработчиков Targetix. В этой статье расскажем вам о том, как устроена клиентская часть сервиса Hybrid — веб-интерфейса для взаимодействия с нашим TradingDesk и DSP.

Картинка для привлечения внимания

Введение


Еще до начала работы над Hybrid, когда формировался наш отдел по разработке клиентских приложений и обсуждались возможные варианты реализации этих самых приложений, под влиянием трендов выбор пал на одностраничные приложения, привлекшие тем, что при таком подходе нет необходимости постоянно грузить один и тот же контент, можно быстро манипулировать отображением страницы и при желании организовать офлайн работу. К тому же минимальная зависимость от групп разработки back-end. Со временем этот подход обрел форму и используется для многих наших веб-интерфейсов.

Каркас наших приложений основан на AMD-модулях, которые позволяют ограничивать область видимости, многократно использовать код и делают его структурированным. Например, у нас есть модуль станицы и модуль какого-нибудь popup-окна, а в модуле popup-окна используется какой-нибудь widget-модуль. При этом модуль popup-окна может быть использован на нескольких страницах. В этом и подобных случаях удобно использовать AMD-модули, а в их подключении и управлении зависимостями нам помогает библиотека RequireJS.

Для отображения данных используется Knockout.js — библиотека, которая реализует mvvm-патерн и позволяет динамически менять страницы благодаря шаблонизатору и наблюдаемым переменным.
Читать дальше →
Всего голосов 20: ↑17 и ↓3 +14
Просмотры 21K
Комментарии 2

Итак, вы решили стать фронтендером: практическое руководство для роста начинающего разработчика

Разработка веб-сайтов *JavaScript *
Recovery mode
Перевод


Во фронтенд разработке за последние несколько лет наблюдается огромный скачок развития. JavaScript продолжает увеличивать отрыв от остальных языков как наиболее популярный на Github, а вакансия фронтенд разработчика с каждым годом набирает популярность. И это не удивительно, что c ростом популярности языка мы наблюдаем значительное увеличение числа многообещающих программ изучения фронтенд технологий, учебников, ускоренных курсов и прочего. Такой цикл естественен для любой бурно развивающейся отрасли, и это происходит следующим образом:

  • Существует огромный спрос на фронтенд разработчиков. Компании пытаются найти компетентных людей и они платят большие деньги.
  • Другие компании видят это требование, и создают образовательные ресурсы, чтобы помочь людям в старте карьеры. Они предлагают решения, которые за короткий срок обучат вас веб-разработке, что в итоге приведет к успеху.
  • Такой подход является привлекательным для многих людей. Экспресс курсы и обучающие интернет-ресурсы, продаются как горячие пирожки. Эта сфера быстро стала многомиллиардной долларовой индустрией.


Конечным результатом является огромный «бассейн» слабо обученных кадров. Большинство студентов таких курсов уходят с небольшим портфолио сайта и несколькими демо на javascript. Им не хватает углубленных знаний в отрасли, которые позволили бы им решать реальные задачи, с которыми профессиональные разработчики сталкиваются каждый день.
Читать дальше →
Всего голосов 16: ↑5 и ↓11 -6
Просмотры 19K
Комментарии 13

Meet-up «Продуктивная работа фронтенд-разработчика в условиях поддержки legacy-кода»: переход на Dart

Блог компании Wrike Разработка веб-сайтов *JavaScript *Dart *


Недавно в компании Wrike прошла встреча фронтенд-разработчиков. Спикеры из IT-компаний Петербурга и Москвы поделились своими решениями, помогающими облегчить работу со старым кодом, который имеет свойство накапливаться в течение жизненного цикла продукта, отвлекая от новых бизнес-задач. Отдельная часть докладов была посвящена языку Dart, а также причинам, пожиданиям и непосредственно самому процессу перехода с JavaScript на Dart. Делимся видеозаписями и презентациями самых интересных докладов. Часть 1.

Смотреть
Всего голосов 8: ↑6 и ↓2 +4
Просмотры 5.1K
Комментарии 0

Meet-up «Продуктивная работа фронтенд-разработчика в условиях поддержки legacy-кода»: говорим о полезных инструментах

Блог компании Wrike Разработка веб-сайтов *JavaScript *Программирование *


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

Смотреть
Рейтинг 0
Просмотры 1.7K
Комментарии 0

Чем плох JavaScript в большом проекте? С какими проблемами мы столкнулись и как их решали

Блог компании Wrike Разработка веб-сайтов *JavaScript *Программирование *Dart *


Почему определенные недостатки языка JavaScript в реалиях разработки такого большого проекта, как наш, оказываются критическими? Как решить проблемы JS, когда количество кода превышает 2 млн строк, а команда насчитывает более 20 человек и постоянно растет? Об этом — в докладе фронтенд тимлида Wrike в рамках митапа, проведенного в нашем офисе совместно с сообществом Piter JS.

Смотреть
Всего голосов 35: ↑20 и ↓15 +5
Просмотры 41K
Комментарии 67

Redux-Redents — (еще) один модуль для работы с серверными данными из React-Redux приложений.  

Разработка веб-сайтов *JavaScript *Node.JS *ReactJS *

React и Redux, в последнее время одни из самых популярных buzz-words в мире фронтенда. Поэтому когда мне потребовалось сделать веб-приложение, которое бы отображало данные, полученные с сервера, а также позволяло бы ими манипулировать (создавать, удалять и изменять), я решил построить его на основе связки React и Redux. Множество getting-started руководств покрывают только функционал создания компонентов, action creators и reducers. Но как только дело касается обмена с сервером, начинаются сложности — растет количество необходимых action creator, редьюсеров. Причем они очень похожи друг на друга, с миниальными отличиями. В большинстве случаев — только в типе (имени) активности. После того, как я создал третий одинаковый набор креаторов и редьюсеров, то появилось желание что-то изменить. Так родилась идея реализации redux-redents.

Читать дальше →
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 7.4K
Комментарии 11

Moscow JS Meetup в Badoo

Блог компании Badoo Разработка веб-сайтов *CSS *JavaScript *


Рады сообщить, что 24-го сентября в Badoo пройдет Moscow JS Meetup.


Программа


«Что надо знать о HTTP/2», Александр Майоров (Tutu.ru)

Протокол HTTP/2 обещает ускорение загрузки страниц и очень активно продвигается. Так ли это и какую пользу от протокола могут получить Frontend разработчики? Стоит ли переходить на новый протокол? В качестве киллер фичи заявлена поддержка Server push. Что это и как этим пользоваться? Эти и другие вопросы будут освещены в докладе.

Читать дальше →
Всего голосов 13: ↑12 и ↓1 +11
Просмотры 4.2K
Комментарии 10

Redux Action Creators. Без констант и головной боли

Разработка веб-сайтов *JavaScript *ReactJS *


Всем привет! Эта статья будет полезна тем, кто устал использовать constants в Redux (частично показано на превью выше). Под катом я покажу очередной возможный велосипед и как на нем кататься.


Читать дальше →
Всего голосов 32: ↑20 и ↓12 +8
Просмотры 40K
Комментарии 66

Двенадцать полезных Chrome DevTools Tips

Блог компании Инфопульс Украина Разработка веб-сайтов *JavaScript *Google Chrome
Перевод
В данной статье мы рассмотрим некоторые функции инструментов разработчика Chrome. Конкретно я использую Chrome Canary и вам советую. И не потому, что это отсылка на маленьких милых птиц, которые пожертвовали своими жизнями чтобы мы могли добывать свежий уголь.

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

(В статье ниже присутствуют анимированные гифги, которые начинают раздражать после первого цикла. Поэтому я советую открыть dev tools и удалить DOM ноды, которые отвечают за изображения.)

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

Копируем переменную в буфер обмена


Об этой возможности я узнал из комментариев, и считаю ее достаточно полезной чтобы быть описанной в начале. Иногда бывает нужно скопировать содержимое переменной в буфер обмена. Например html код или json объект. Для этого можно использовать copy функцию.

copy (someVariable)

Теперь текстовое представление переменной скопировано в буфер обмена.
Читать дальше →
Всего голосов 71: ↑69 и ↓2 +67
Просмотры 74K
Комментарии 17

Инструментарий для front-end разработки под Linux

Firefox Разработка веб-сайтов *CSS *JavaScript *HTML *
Из песочницы
Доброго времени суток, господа девелоперы! В этой статье я расскажу, как сделать разработку под Linux действительно комфортной и удобной, чтобы она приносила только боль удовольствие.

Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе HTML и CSS/SASS. Код извлекаем напрямую из PSD, попутно корректируя до PixelPerfect прямо в браузере. При сохранении SASS автоматически преобразуется в CSS и загружается на сервер. Необходимые картинки из PSD шаблона вырезаем в два клика, после чего они так-же автоматически загружаются на сервер. Как этого добиться менее чем за пол часа? Я расскажу вам!

Сразу хочу предупредить вас, если ваш опыт работы более нескольких лет и вы являетесь достаточно опытным front-end'ером, то ничего нового вы в этой статье не найдете. Она предназначена для людей, которые относительно недавно присоединились к GNU/Linux сообществу или только решили к нему примкнуть.

Краткое содержание


  1. Выбор браузера
  2. Установка расширений для Firefox
  3. Выбор текстового редактора
  4. Необходимые расширения для Sublime Text 3
  5. Дополнительные инструменты и оптимизация системы
Читать дальше →
Всего голосов 16: ↑9 и ↓7 +2
Просмотры 20K
Комментарии 38

Консоль в массы. Переход на светлую сторону. Часть первая

Разработка веб-сайтов *Совершенный код *Системное программирование *Отладка *
Tutorial


Вступление


Всем привет! Данная серия статей — это текстовый вариант моего доклада на WSD в Киеве 26 ноября. Решил написать, чтобы дать более развернутое описание темам, которые были затронуты, а некоторые моменты уточнить. Кроме того, есть возможность рассмотреть больше примеров, услышать мнение от тебя, уважаемый читатель. И, конечно же, поделиться информацией с более широкой аудиторией.
Всего голосов 25: ↑20 и ↓5 +15
Просмотры 22K
Комментарии 42

Консоль в массы. Переход на светлую сторону. Часть вторая

Разработка веб-сайтов *Совершенный код *Системное программирование *Отладка *
Tutorial
tmux example

Вступление


Довольно долгое время я использовал в своей работе screen. Но со временем он меня перестал устраивать. Я начал искать альтернативы. Такой альтернативой является tmux. На многих порталах его описывают так: «Это тот-же screen, только на стероидах». Сначала я не мог понять почему такое сравнение пока не попробовал. Скажу честно, я на него не с первого раза перешел. Раза три-четыре пробовал, возвращался к screen’у. Но tmux все же победил.
Всего голосов 31: ↑28 и ↓3 +25
Просмотры 31K
Комментарии 38

Консоль в массы. Переход на светлую сторону. Bash

Разработка веб-сайтов *Совершенный код *Системное программирование *Отладка *
Tutorial
keep-calm-and-bin-bash

Вступление


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

Мы добрались до самой интересной и увлекательной темы — это скрипты на bash. Когда вы запускаете терминал, внутри него работает специальная программа-оболочка — shell (англ) — интерпретатор команд. Shell понимает все команды, которые вы вводите с клавиатуры, и обрабатывает их. Также выводит сообщения об ошибках, следит за корректностью команд и их синтаксисом. Примером таких команд могут быть: сменить директорию, создать новую директорию, добавить текстовый файл, отредактировать текстовый файл, сохранить изменения и другие.
Всего голосов 69: ↑57 и ↓12 +45
Просмотры 51K
Комментарии 108