Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

Знаете ли вы, что в большинстве случаев уязвимость системы безопасности можно устранить добавив необходимые заголовки ответа?

Безопасность не менее важна, чем содержание или поисковая оптимизация сайта. Тысячи сайтов взламываются из-за ошибок в конфигурации или недостаточной защиты. Если вы владелец сайта или специалист по защите информации, и интересуетесь защитой сайта от кликджекинга, внедрения кода, уязвимостей MIME типов, XSS-атак и т.д., то данная инструкция будет вам полезна.

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

Подозреваете, что Linux-сервер взломан? Уверены, что всё в порядке, но на всякий случай хотите повысить уровень безопасности? Если так – вот несколько простых советов, которые помогут проверить систему на предмет взлома и лучше её защитить.

В ядре Linux обнаружена опасная уязвимость, которая связана с обработкой подсистемой памяти ядра механизма copy-on-write (COW). Эксплуатируя баг можно спровоцировать так называемое состояние гонки (race condition). При эксплуатации уязвимости неавторизованный локальный пользователь сможет получить доступ к memory mappings с правом записи, хотя доступ должен быть ограничивать только чтением (read-only). Уязвимость относится к privilege escalation.

Разработчик Робин Линус на своей странице на GitHub Pages (визит по следующей ссылке небезопасен и его не рекомендуется выполнять с рабочего места, так как кроме видимой части сервисов страница проверяет, залогинены ли вы на сайтах для взрослых, а это останется в логах файрволла как попытка перехода прим.) продемонстрировал, как сайты могут снимать с вас «медийный отпечаток», то есть вести учет того, в каких популярных сервисах залогинены посетители даже без какой-либо авторизации на посещаемой странице.

Для автора публикации «медийный отпечаток» выглядит следующим образом и является абсолютно верным:



И это весьма неприятно.

Javascript – это странный и прекрасный язык, который позволяет писать безумный, но все еще валидный код. Он пытается помочь нам, конвертируя одни штуки в другие в зависимости от того, как мы работаем с ними.

Если добавить строку к чему-то, то он допустит, что мы хотим получить текст, поэтому сконвертирует все в строку.

Если мы добавляем префикс "плюс" или "минус", то он допустит, что нам нужно числовое представление и сконвертирует строку в число, если сможет.

Если мы отрицаем что-то, то он сконвертирует это в булево значение.

Мы можем использовать эти особенности языка и создать немного магии со всего-лишь шестью символами: [,],(,),! и +. Если вы читаете это на десктопе, то можете открыть консоль в вашем браузере (developer tools, например) и запускать код. Просто копируйте любой код из примеров ниже в консоль, и он должен исполнится и вернуть true.

Давайте начнем с простого. Вот главные правила:

1. Префикс ! конвертирует в Boolean
2. Префикс + конвертирует в Number
3. Добавление [] конвертирует String

Вот они в действии:

![] === false
+[] === 0
[]+[] === ""

Андрей Ситник (Iskin, Злые марсиане)

В 2013 году Holowaychuk анонсировал свой проект Rework в статье «Модульный CSS-препроцессинг с Реворком» (http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework ).

Как раз тогда я искал какой-то инструмент для того, чтобы сделать автопрефиксер. Когда я прочитал эту статью, я был поражен, потому что это был действительно революционный подход, он менял все. И поэтому первые версии автопрефиксера базировались на Rework’е. Но, к сожалению, Rework – это был Proof Of Concept, это было первое поколение, чтобы доказать, что это вообще работает. Поэтому мы его жестко форкнули, переманили всех разработчиков, устроили маленькую революцию и сделали PostCSS.

PostCSS – это второе поколение модульного процессора.

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

В примерах используется JavaScript ES2015). (Почему JavaScript?)

Работа над материалом продолжается; присылайте свои пулл-реквесты в оригинальный репозиторий на английском языке.

В документе используются термины из спецификации Fantasy Land spec по мере необходимости.

Arity (арность)

Количество аргументов функции. От слов унарный, бинарный, тернарный (unary, binary, ternary) и так далее. Это необычное слово, потому что состоит из двух суффиксов: "-ary" и "-ity.". Сложение, к примеру, принимает два аргумента, поэтому это бинарная функция, или функция, у которой арность равна двум. Иногда используют термин "диадный" (dyadic), если предпочитают греческие корни вместо латинских. Функция, которая принимает произвольное количество аргументов называется, соответственно, вариативной (variadic). Но бинарная функция может принимать два и только два аргумента, без учета каррирования или частичного применения.

Перевод книги Adam Tepper «Bitcoin — The People's Money». Книга представляет собой отличное введение в биткойн «с нуля», но может оказаться полезной и тем, кто уже разбирается в теме.

Я уже более 5 лет являюсь фронт енд разработчиком и всегда пытаюсь быть в курсе всех новостей. Помню что два года назад я заинтересовался графикой в JavaScript. И тут за пару месяцев я начал делать исследование про графику в JavaScript, так как у меня был тогда проект на D3.js. Во первых я начал изучать Canvas и SVG что является частью HTML5 но тоже нужно писать код в JS, например у меня проект был кустомизировать дорогие часы на Canvas. Следующий проект с графикой был с D3.js он был довольно прост, там нужно было на базе данных всех продаж компании показать графики в D3.js. Последний мои проект на базе гафики будет на p5.js и я решил узнать всё про него, и в этой публикации я хочу поделится своим исследованием про этот p5.js.

P5.js был создан командой Processing в 2014 году. Это JavaScript библиотека, с особым акцентом на изобразительное искусство. Цель P5.js совпадает с изначальной целью Processing — это снизить порог входа в программирование для художников, дизайнеров, учителей. С P5.js можно легко создавать бесконечно большое количество вариантов отображения информации: от веб-формата, статичных картинок для печати, до анимированных и интерактивных схем.

Processing был создан в 2001 году с целью обучить программированию непрограммистов, но с тех пор он стал основным языком для десятков тысяч художников и дизайнеров. P5.js делает рендеринг файлов PDE с исходным кодом Processing. При использовании этой библиотеки программист может вообще не знать JavaScript. Детально об отличиях Processing и p5 можно почитать в этой статье.

Для рендеринга используется canvas, а также p5.js поддерживает работу со звуком и видео. P5.js включает в себя совокупность обьектов, функций, констант с помощью которых можно создавать произвольные формы. Весь ряд возможностей p5.js можно найти в справочнике на официальном сайте.

Понадобилось мне недавно реализовать трёхпозиционный переключатель. Ну это такой, у которого вместо двух состояний «включено/выключено», есть ещё промежуточное состояние. Это часто используется, например, в чекбоксе «выбрать всё», для того чтобы показать, что выбраны не все элементы, а только часть. В общем, захотелось такое реализовать, да чтобы без скриптов.

Да, это именно то, что вы представили. Доступ к cloud.mail.ru как к диску прямо внутри файлового менеджера. Ссылка в конце статьи.

А ещё TC научился показывать иконки во вкладках!

Будем откровенны: безальтернативный механизм работы с облаком Mail.ru через синхронизацию очень неудобен. По сути, у пользователя нет полноценного контроля над единичными файлами; всё, что предлагает ему стандартный клиент — двустороннее зеркалирование указанных им данных. Если же нужно отойти от этого сценария, скажем, скачать из облачного архива единственный файл на несинхронизированном устройстве — приходится запускать браузер и пытаться сделать что-то через веб-интерфейс, в котором даже поиска нет. Учитывая, что содержимое облачных каталогов подгружается по мере прокрутки, поиск в браузере может и не помочь.
Есть и другие кейсы, при которых работа с облаком становится затруднительна. Доступ к облаку по webdav, который решил бы все проблемы, отключён (хотя работал какое-то время после запуска сервиса).
При этом сервис бесплатно предоставляет довольно значительный объём хранилища (раздачу террабайтов все помнят?), лимитирования скорости я ни разу не замечал, и за всё время работы с сервисом нареканий к нему не возникло. Для резервирования и пересылки не слишком приватных данных облако Mail.ru подходит очень хорошо. Ограниченность клиента — единственная проблема.

Раз она есть — надо её решать.

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

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

От переводчика:
Предлагаю вашему вниманию перевод краткого (действительно краткого) руководства по 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?

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

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

Содержание

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

Рано или поздно веб-разработчик, веб-мастер или любой другой специалист, обслуживающий сайт, может столкнуться с проблемами безопасности: ресурс попадает под санкции поисковой системы или начинает блокироваться антивирусом, с хостинга могут прислать уведомление об обнаружении вредоносного кода, а посетители начинают жаловаться на всплывающую рекламу или редиректы на “левые” сайты.



В этот момент возникает задача поиска источника проблемы, то есть диагностики сайта на проблемы безопасности. При грамотном подходе диагностика состоит из двух этапов:

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

Предположим, вы уже проверили файлы на хостинге специализированными сканерами и почистили аккаунт хостинга от «вредоносов» (или ничего подозрительного на нем не нашлось), но поисковик все равно ругается на вирусный код или на сайте по-прежнему активен мобильный редирект. Что делать в этом случае? На помощь приходят веб-сканеры, которые выполняют динамический и статический анализ страниц сайта на вредоносный код.

8 апреля в Екатеринбурге прошла конференция DUMP. Под катом — видео 60-и докладов про frontend, serverside, devops, mobile, дизайн, управление разработкой и тестирование, плюс все презентации и фотографии с прошедшей конференции. А вот короткий отчетный ролик про DUMP-2016.

Разработчики, дизайнеры, тестировщики, менеджеры, не забудьте включить в свои планы на весну — конференция DUMP-2016 пройдёт в Екатеринбурге 8 апреля. Сейчас мы активно ищем докладчиков (как ими стать, читайте ниже). Еще под катом: немного о прошлогодней конференции и планы на этот год (например, у нас две новые секции).



Регистрация уже открыта. Присоединяйтесь!

JavaScript quality guide

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

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

Всем привет, с вами Максим Иванов, и сегодня мы поговорим о правилах оформления кода на языке JavaScript. Николя Бэвакуа (Nicolás Bevacqua), автор книги «Дизайн JavaScript-приложений» (JavaScript Application Design), разработчик из Аргентины, опубликовал данное руководство достаточно давно, первая запись появилась еще в 2014 году, многое написано по стандарту ES5, однако, в наши дни это все равно актуально, сейчас, когда ES6 еще нигде полноценно не работает без babel и прочих транспайлеров. Хотя мы видим прогресс в топовых десктопных браузерах (Google Crhome, Firefox), где уже реализовано 70-90% задуманного, мы видим, что они стремятся поддерживать новый стандарт, но, к сожалению, ещё нет браузеров, которые полностью могли бы поддерживать ES6. К слову, я буду очень рад вашим комментариям. В общем, удачи и давайте начнем.

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

Хотя некоторый CSS-код в этом руководстве, возможно, покажется очевидным, я собираюсь бросить вызов flexbox, а также предложить простые решения проблем, которые возникали, пока он не обрёл популярность.