Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.



Демонстрация Скачать исходники

От переводчика

С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

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

Привет Хабр! В данной статье я хочу рассказать о том, как реализовать авторизацию с помощью социальных сетей в одностраничном приложении на примере Backbonejs + Express.

Команда Github продолжает радовать своими обновлениями, и на этот раз они приглашают нас попробовать полностью обновленный github:gist.

Для тех, кто не был знаком с этим сервисом ранее — Gist предназначен для обмена кусочками кода (и не только кода) между людьми. В основе Gist лежит система контроля версий git, что делает возможным коллективную работу над материалом, поддержку форков и версионности.

Gist успел стать незаменимым инструментом в арсенале Open Source сообщества. Например, таким простым образом распространяется перформанс-патч для руби, упомянутый недавно на хабре.

Лицо моей жены, когда она вычитывала эту статью

Я решил написать цикл статей, который и сам был бы счастлив найти где-то полгода назад. Он будет интересен в первую очередь тем, кто хотел бы начать разрабатывать классные приложения на React.js, но не знает, как подступиться к зоопарку разных технологий и инструментов, которые необходимо знать для полноценной front-end разработки в наши дни.

Я хочу с нуля реализовать, пожалуй, наиболее востребованный сценарий: у нас есть серверная часть, которая предоставляет REST API. Часть его методов требует, чтобы пользователь веб-приложения был авторизован.

В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.

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

Эта книга предназначена для программистов, желающих создавать веб-приложения (обычные сайты, воплощающие REST-интерфейсы программирования приложений или что-то среднее между ними) с использованием JavaScript, Node и Express. Для чтения книги вам не потребуется опыт работы с Node, однако необходим хотя бы небольшой опыт работы с JavaScript.

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

Всем привет, дорогие хабрахабровцы! Недавно я начал изучать node.js и дошёл до самого интересного, а именно — Socket.Io. Поизучав информацию в интернете, я так и не смог найти подробного «гайда» по данному модулю, поэтому пришлось копать самому. Некоторые скажут, что можно и самому понять, что написано на сайте модуля, но некоторым этого будет не достаточно чтобы понять базу web-socket'ов, поэтому я решил написать эту статью для таких людей, а именно на самом 'чётком' примере — чате.

Мысли Криса Койера

Одна из мыслей, которая поселилась в моей голове: должен ли frontend-разработчик быть в курсе всего? В общем смысле, frontend-разработчик может использоваться и на других рабочих местах. Вся команда разработчиков заканчивает разговор на frontend-разработчике. В этом смысл моей идеи. Frontend-разработчики создают те вещи, с которыми будут взаимодействовать люди. Все этапы разработки проходят вместе с frontend-разработчиком. Возможно, именно поэтому это такая забавная работа! Поскольку frontend-разработчик занимает центральное место в цепочке разработки, и при этом мы имеем дело с большим количеством разных специалистов, мы должны понимать их работу и иногда подсказывать, что и как сделать лучше.

От переводчика

Всем привет, с вами Максим Иванов, и сегодня мы поговорим на довольно острую тему в сфере веб-разработки. Как утверждает Крис Койер, frontend-разработчик должен разбираться в очень многих вещах, о которых не все даже и задумываются. Конечно, мы должны понимать, что frontend-разработчик не главный в процессе разработки любого онлайн-сервиса или ПО в целом. На ту же позицию frontend-разработчика вы найдете больше откликов на вакансию, чем на позицию backend-разработчиком. Но почему же тогда Крис Койер считает, что работать frontend-разработчиком сложнее, ибо ты должен специализироваться во всем. Конечно, ситуаций в жизни очень много, разные компании по-разному используют своих специалистов, но в чем наверняка должен разбираться frontend-разработчик? Об этом мы сегодня и поговорим. Жду комментариев на эту тему, а сейчас приступим.

В сети есть несколько похожих примеров создания спидометра, но я решил поделиться с вами своим.



Для начала нам нужно в DOM'е создать объект canvas:

Являясь большим фанатом Python и фреймворка Django постоянно искал решение, как сделать разработку новых веб-проектов быстрее и удобнее.

Все, кто знаком с разработкой на Django, знают насколько неудобно строить на нем интуитивно понятную админ.панель. До мегапопулярного WordPress очень далеко, что делает порог вхождения в разработку сайтов выше, чем у PHP-фреймворков и CMS.
После долгого поиска и тестирования различных решений я нашел для себя оптимальный вариант — Wagtail CMS.

Wagtail — это полноценная CMS написанная на Django компанией Torchbox. За что им большое спасибо. Проект с открытым исходным кодом, поддерживается сообществом энтузиастов и выпускается под BSD лицензией.

Когда я учился в университете на втором курсе, мне пришел весьма необычный заказ — трехступенчатая Гаусс пушка. Сроки на ее создание были очень короткими: на все про все была лишь неделя. Кроме того, пушка была с физически нереализуемой изюминкой: переполюсовкой магнитного поля катушек, что должно было, по мнению автора пушки, повысить ее КПД. Тем не менее, поскольку я любил Гаусс пушки и мечтал начать зарабатывать деньги любимым делом, я согласился на выполнение заказа.

Github — важная часть жизни современного разработчика: он стал стандартом для размещения opensource-проектов. В «2ГИС» мы используем гитхаб для разработки проектов web-отдела и хостинга проектов с открытым кодом.

Хотя большинство из нас пользуются сервисом практически каждый день, не все знают, что у него есть много фишек, помогающих облегчить работу или рутинные операции. Например, получение публичного ключа из URL; отслеживание того, с каких сайтов пользователи приходят в репозиторий; правильный шаринг ссылок на файлы, которые живут в репозиториях гитхаба; горячие клавиши и тому подобное. Цель этой статьи — рассказать о неочевидных вещах и вообще о том, что сделает вашу работу с гитхабом продуктивнее и веселее (я не буду рассматривать здесь работу с API гитхаба, так как эта тема заслуживает отдельной статьи).

Содержание

• Трюки с URL
• Горячие клавиши
• Тикеты и пулл-реквесты
• Github markdown
• Аккаунт
• Работа с репозиториями
• Поиск кода
• Командная строка и Github
• User scripts
• Github-вандализм
• Дополнительные Github-ресурсы
• Полезные ссылки

Предыстория

В 2012-2013 годах я нашёл одно онлайн-радио, которое «зацепило» меня большим выбором хорошей музыки и тем, что там (почти) не было рекламы.

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

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

Такое происходило часто, и я всё чаще стал задаваться мыслью найти решение этой проблемы.

От переводчика:
Предлагаю вашему вниманию перевод краткого (действительно краткого) руководства по ES6. В нём можно ознакомиться с основными понятиями стандарта.
Оригинальный текст в некоторых случаях был дополнен или заменён на более подходящий источник. Например, часть определения ключевого слова const является переводом документации с MDN.
Чтобы лучше разобраться в некоторых концепциях (для выполнения качественного перевода) использовалось описание стандарта на сайте MDN, руководство "You Don't Know JS: ES6 & Beyond" и учебник Ильи Кантора.

Перевод выложил на Гитхаб: https://github.com/etnolover/ES6-for-humans-translation. В случае нахождения ошибок пишите, исправлю.
Ссылка на оригинальный текст: https://github.com/metagrover/ES6-for-humans

Update 22.07.2016: добавил опрос про const

Содержание

• let, const и блочная область видимости
• Стрелочные функции
• Параметры по умолчанию
• Spread/Rest оператор
• Расширение возможностей литералов объекта
• Восьмеричный и двоичный литералы
• Деструктуризация массивов и объектов
• Ключевое слово super для объектов
• Строковые шаблоны и разделители
• for...of против for...in
• Map и WeakMap
• Set и WeakSet
• Классы в ES6
• Тип данных Symbol
• Итераторы
• Генераторы

• Промисы

  
  
• Опрос: в каком регистре писать const?

Предлагаю читателям «Хабрахабра» перевод понравившейся мне статьи «After a year of using NodeJS in production» за авторством Gavin Vickery. Это продолжение его статьи «Why I’m switching from Python to Node.js», которую он написал чуть больше года назад в ответ на разочарования при использовании Python и как обоснование перехода на Node.



Год разработки с штатными инструментами командной строки, клиентские проекты и выпуск обновлений для продуктов нашей компании, в двух словах, это то, чему я научился за это время. Я бы хотел поделиться опытом, но речь пойдет не столько про Node, сколько за весь JavaScript в целом.

В качестве вступления стоит сказать что я пользуюсь macOS и потому некоторые части:

• Автозапуск (launchd)
• Формат конфигурационных файлов (plist)
• Программа, используемая для уведомлений (terminal-notifier)

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

Итак, к делу.

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

От переводчика: Я только начинаю присматриваться к Node.js, и, обнаружив это руководство, сильно пожалел, что оно не попалось мне на глаза раньше. Надеюсь, что этот перевод поможет многим разобраться, что же такое Node, и с чем его едят.

У вас уже чешутся руки попробовать Node.js и пора начинать обрабатывать начальство? Не торопитесь! Для некоторых компаний, которые я консультировал на предмет того, подходит ли им Node.js, правильный ответ был — «Нет!»

Это руководство — набор основанных на моём личном опыте советов для тех, кто хочет узнать, имеет ли смысл применять Node у себя в компании, и, если да, то как убедить в этом начальство.

Сигналы и слоты — подход, используемый в некоторых языках программирования и библиотеках (например, Boost и Qt) который позволяет реализовать шаблон «наблюдатель», минимизируя написание повторяющегося кода. Концепция заключается в том, что компонент (часто виджет) может посылать сигналы, содержащие информацию о событии (например: был выделен текст «слово», была открыта вторая вкладка). В свою очередь другие компоненты могут принимать эти сигналы посредством специальных функций — слотов. Система сигналов и слотов хорошо подходит для описания Графического интерфейса пользователя. Также механизм сигналов/слотов может быть применён для асинхронного ввода-вывода (включая сокеты, pipe, устройства с последовательным интерфейсом, др.) или уведомления о событиях. В библиотеке Qt благодаря Метаобъектному компилятору (англ.)русск. отпадает необходимость писать код регистрации/дерегистрации/вызова, так как эти шаблонные участки кода генерируются автоматически.

Говорит нам Википедия.