Pull to refresh
19
0
Алексей Колганов @KaLGaN

Пользователь

Send message

Что за черт, Javascript

Reading time17 min
Views159K


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


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

Читать дальше →
Total votes 104: ↑89 and ↓15+74
Comments155

Полное руководство по переходу с HTTP на HTTPS

Reading time36 min
Views216K

В наше время HTTPS обязателен для каждого веб-сайта: пользователи ищут замочек в адресной строке, когда передают личные данные; Chrome и Firefox недвусмысленно помечают как небезопасные веб-сайты с формами на страницах без HTTPS; это влияет на позиции в поисковой выдаче и оказывает серьёзное влияние на приватность в целом. Кроме того, сейчас имеется несколько вариантов получить бесплатный сертификат, так что переход на HTTPS — всего лишь вопрос желания.


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

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

Сюда включены детальные инструкции для владельцев виртуального хостинга на cPanel, администраторов серверов Apache HTTP и nginx под Linux и Unix, а также Internet Information Server под Windows.
Читать дальше →
Total votes 67: ↑64 and ↓3+61
Comments53

Занимательная музыка: Число 5 и немного о том, как «видят» музыку юзабилист и программист

Reading time6 min
Views12K
Свою работу «Комбинаторная теория музыки» инженер-программист и музыкант Эндрю Дункан начинает со слов о том, что нет профессий более далеких, чем музыкант и математик — однако, как это ни парадоксально для самих музыкантов и математиков, музыка и ее создание может служить отличным примером работы ряда математических концепций.

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

Total votes 29: ↑27 and ↓2+25
Comments25

Сага о поливоксе: полёт советского Феникса из 80-х к «светлому» будущему в DOOM

Reading time7 min
Views21K
Этот пост выходит в качестве дополнения к циклу «Тернистый путь развития синтезаторов». Резонансные комментарии читателей к предыдущим материалам серии, навели на мысль о создании этой статьи. Затрагивая синтезаторы 80-х, мы не справедливо обошли стороной советский инструмент «Поливокс», который сыграл заметную роль в современной культуре. Инструмент, выпускавшийся в СССР до 1990-го года, через 15 лет после прекращения производства становится культовым, а в минувшем году было заявлено о начале производства новой версии синтезатора.



Поливокс, созданный инженером Владимиром Кузьминым, нельзя назвать мировым прорывом или инновацией для 1982 года, когда он был запущен в серию. Принципы работы поливокса не не были новым словом в мировой технике, если не брать в расчет уникальное, агрессивное звучание инструмента. Однако именно это устройство, в силу обстоятельств, является самым известным и заметным в современной музыке продуктом советской электромузыкальной индустрии. Именно этот не слишком замысловатый, монофонический синтезатор стал источником возможностей не только для своих современников, но для многих именитых современных музыкантов, в частности для таких групп как Franz Ferdinand, Rammstein, Goldfrapp, а также создателя саундтрека к новому DOOM, Мика Гордона.
Total votes 36: ↑36 and ↓0+36
Comments22

В ядре Linux обнаружена опасная 0-day уязвимость Dirty COW (CVE-2016-5195)

Reading time2 min
Views43K


В ядре Linux обнаружена опасная уязвимость, которая связана с обработкой подсистемой памяти ядра механизма copy-on-write (COW). Эксплуатируя баг можно спровоцировать так называемое состояние гонки (race condition). При эксплуатации уязвимости неавторизованный локальный пользователь сможет получить доступ к memory mappings с правом записи, хотя доступ должен быть ограничивать только чтением (read-only). Уязвимость относится к privilege escalation.
Читать дальше →
Total votes 68: ↑67 and ↓1+66
Comments51

Pico8 — несуществующая игровая консоль

Reading time1 min
Views37K
Второй день умираю от умиления и решил поделиться с хабрасообществом. По большому счёту, достаточно просто дать ссылку, но тогда это вроде как не статья получается, поэтому расскажу немножко.

image
Читать дальше →
Total votes 85: ↑83 and ↓2+81
Comments33

Структуры данных для самых маленьких

Reading time22 min
Views338K
James Kyle как-то раз взял и написал пост про структуры данных, добавив их реализацию на JavaScript. А я взял и перевёл.

Дисклеймер: в посте много ascii-графики. Не стоит его читать с мобильного устройства — вас разочарует форматирование текста.


Читать дальше →
Total votes 91: ↑87 and ↓4+83
Comments51

Полное практическое руководство по Docker: с нуля до кластера на AWS

Reading time39 min
Views1.6M



Содержание



Вопросы и ответы


Что такое Докер?


Определение Докера в Википедии звучит так:


программное обеспечение для автоматизации развёртывания и управления приложениями в среде виртуализации на уровне операционной системы; позволяет «упаковать» приложение со всем его окружением и зависимостями в контейнер, а также предоставляет среду по управлению контейнерами.



Ого! Как много информации.

Читать дальше →
Total votes 125: ↑124 and ↓1+123
Comments44

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

Reading time22 min
Views195K
image

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


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


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

Читать дальше →
Total votes 51: ↑46 and ↓5+41
Comments78

Docker. Зачем и как

Reading time6 min
Views504K
Есть множество прекрасных публикаций для тех, кто уже пользуется docker-ом. Есть хорошие статьи для тех, кто хочет этому научиться. Я пишу для тех, кто не только не знает, что такое docker, но и не уверен стоит ли ему это знать.

Я сознательно опускаю некоторые технические подробности, а кое где допускаю упрощения. Если вы увидите, что docker – то, что вам нужно, вы легко найдете более полную и точную информацию в других статьях.
Читать дальше
Total votes 62: ↑60 and ↓2+58
Comments159

10 особенностей Webpack

Reading time8 min
Views78K
Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.

Читать дальше →
Total votes 51: ↑48 and ↓3+45
Comments52

Первые 10 минут на сервере

Reading time8 min
Views59K

Азбука безопасности Ubuntu


«Мои первые 5 минут на сервере» Брайана Кеннеди — отличное введение, как быстро обезопасить сервер от большинства атак. У нас есть несколько исправлений для этой инструкции, чтобы дополнить ею наше полное руководство. Также хочется подробнее объяснить некоторые вещи для более юных инженеров.

Каждое утро я проверяю почтовые уведомления logwatch и получаю основательное удовольствие, наблюдая несколько сотен (иногда тысяч) безуспешных попыток получить доступ. (Многие довольно прозаичны — попытки авторизоваться как root с паролем 1234 снова и снова). Приведённая здесь общая методика подходит для серверов Debian/Ubuntu, которые лично мы предпочитаем всем остальным. Они обычно служат только хостами для контейнеров Docker, но принципы те же.

На больших масштабах лучше использовать полностью автоматические установки с инструментами вроде Ansible или Shipyard, но иногда вы просто поднимаете единственный сервер или подбираете задачи для Ansible — для таких ситуаций предназначена инструкция.

Примечание: Эта справка создана как базовая азбука. Её следует расширить и дополнить в соответствие с вашими потребностями.
Читать дальше →
Total votes 54: ↑40 and ↓14+26
Comments55

Советы, библиотеки и дополнительные материалы по CSS-анимации

Reading time25 min
Views67K
Советы, библиотеки и дополнительные материалы по CSS-анимации

Введение


Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Читать дальше →
Total votes 24: ↑24 and ↓0+24
Comments12

Правила хорошего тона при написании плагина на jQuery

Reading time7 min
Views32K
Правила хорошего тона при написании плагина на jQueryЯ написал уйму плагинов на jQuery. Если посмотреть код всех плагинов, сортируя их по дате публикации на github, то можно проследить эволюцию кода. Ни в одном из этих плагинов не соблюдены все рекомендации, которые будут описаны ниже. Все что будет описано, лишь мой личный опыт, накопленный от проекта к проекту.
Писать расширения на jQuery довольно просто, но если хотите узнать как написать их так, чтобы потом их было просто поддерживать и расширять, добро пожаловать под кат.
Читать дальше →
Total votes 31: ↑27 and ↓4+23
Comments36

Подборка полезных утилит SCSS

Reading time5 min
Views18K
Для успешной реализации проекта разработчикам фронтенда не обойтись без проверенного арсенала расширения SCSS. Ниже представлены утилиты, которые могут пригодиться в работе.

Triangle


Примесь triangle (которую дизайнеры Sagi предпочитают называть «chupchick»), добавляет к всплывающей подсказке треугольник. И tooltips становится похожим на диалоговое окно. Но triangle также может использоваться в качестве автономного элемента.

/* 
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 6px, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
    border-bottom: $size solid $color;
    border-left: 1/2*$size solid transparent;
    border-right: 1/2*$size solid transparent;
  }
  @else if ($direction == 'down'){
    border-top: $size solid $color;
    border-left: 1/2*$size solid transparent;
    border-right: 1/2*$size solid transparent;
  }
  @else if ($direction == 'left'){
    border-top: 1/2*$size solid transparent;
    border-bottom: 1/2*$size solid transparent;
    border-right: $size solid $color;
  }
  @else if ($direction == 'right'){
    border-top: 1/2*$size solid transparent;
    border-bottom: 1/2*$size solid transparent;
    border-left: $size solid $color;
  }
}


Читать дальше →
Total votes 16: ↑13 and ↓3+10
Comments12

Тестирование вёрстки на визуальные регрессии с помощью PhantomCSS

Reading time9 min
Views25K
Работа с чужим кодом — одна из распространенных и сложных проблем, с которыми мне приходилось сталкиваться в своей работе. Почти в каждом случае предыдущий разработчик писал код не так, как бы мне этого хотелось.

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

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

С другой стороны, мы могли просто переименовать файлы и включить их в один прекомпилированный css (без какого-либо рефакторинга). Но для улучшения кода было бы хорошо порефакторить стили. Эта работа более затратная, но в будущем себя бы окупила. И, что самое важное — это позволило бы нам работать быстрее, с большей уверенностью что мы что-то не сломаем.

Раньше я рассматривал такие изменения как большие риски. В конце концов, C в CSS это каскадирование, где порядок абсолютно важен. Реструктуризация нескольких стилей означает изменение порядка, что, естественно, приводит к большому риску что-то сломать.

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

На этот раз было решено построить визуально регрессионный набор тестов.
Читать дальше →
Total votes 24: ↑22 and ↓2+20
Comments1

400 потрясающих бесплатных сервисов

Reading time16 min
Views719K

Рад представить дополнение оригинального списка из 300 потрясающих бесплатных сервисов. Автор оригинальной статьи Ali Mese добавил ещё +100 новых сервисов, которые помогут найти все — от источников вдохновения и редакторов фотографий до создания опросов и бесплатных иконок.

И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные веб-сайты

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly: Конструктор веб-сайтов.
  • Layers: Создание сайтов на WordPress (new).
  • Bootstrap Zero: Самая большая коллекция бесплатных шаблонов Bootstrap (new).
  • Landing Harbor:  Продвижение мобильного приложения c помощью бесплатного лендинга (new).
Читать дальше →
Total votes 108: ↑89 and ↓19+70
Comments38

Приятная сборка frontend проекта

Reading time12 min
Views442K
В этой статье мы подробно разберем процесс сборки фронтенд проекта, который прижился в моей повседневной работе и очень облегчил рутину.

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

UPD (13 марта 2015): Заменил несколько плагинов на более актуальные + решил проблему с импортом CSS файлов внутрь SCSS

Читать дальше →
Total votes 61: ↑53 and ↓8+45
Comments119

Эффективное изменение размера картинок при помощи ImageMagick

Reading time12 min
Views87K
В наше время всё чаще сайты сталкиваются с необходимостью введения отзывчивого дизайна и отзывчивых картинок – а в связи с этим есть необходимость эффективного изменения размера всех картинок. Система должна работать так, чтобы каждому пользователю по запросу отправлялась картинка нужного размера – маленькие для пользователей с небольшими экранами, большие – для больших экранов.

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

Множество инструментов занимается изменением размера, но слишком часто они выдают большие файлы, аннулирующие выигрыш в быстродействии, который должен приходить вместе с отзывчивыми картинками. Давайте рассмотрим, как при помощи ImageMagick, инструмента командной строки, быстренько изменять размеры картинок, сохраняя превосходное качество и получая файлы небольших объёмов.

Большие картинки == большие проблемы


Средняя веб-страница весит 2 Мб, из них 2/3 – картинки. Миллионы людей ходят в интернет через 3G, или ещё хуже. 2Мб-сайты в этих случаях работают ужасно. Даже на быстром соединении такие сайты могут израсходовать лимиты трафика. Работа веб-дизайнеров и разработчиков – упростить и улучшить жизнь пользователя.

image

Очень маленькие сайты могут просто сохранить несколько вариантов всех картинок. Но что, если у вас их дофига? Например, в магазине может быть сотня тысяч картинок – не делать же их варианты вручную.

ImageMagick


Утилита командной строки с 25-летним стажем в то же время является редактором картинок с полным набором функций. В ней огромная куча функций, и среди них – быстрое и автоматическое изменение размера картинок. Но с настройками по умолчанию файлы часто получаются излишне большими – иногда по объёму больше оригинала, хотя в них и меньше пикселей. Сейчас я объясню, в чём проблема, и покажу, какие настройки необходимы для её решения.
Читать дальше →
Total votes 32: ↑29 and ↓3+26
Comments11

Первые советские транзисторы работают

Reading time2 min
Views113K
imageС незапамятных времен у меня валялись германиевые транзисторы П1А и П3А. Год выпуска — 1957. Ну может они не самые первые, но из первых общедоступных уж точно. Решил я что-то из них сделать. Кто интересуется, что получилось, прошу проследовать ниже.
Читать дальше →
Total votes 72: ↑69 and ↓3+66
Comments44

Information

Rating
Does not participate
Location
Москва и Московская обл., Россия
Date of birth
Registered
Activity