Pull to refresh
6
0
Томас Шестаков @Megaprog

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

Send message

Эластичные шаблоны

Reading time4 min
Views19K

Большинство дизайнов ориентировано на использование фиксированных значений при верстке: ширина и высота блоков, размер шрифта. Это позволяет сверстанному шаблону «не разваливаться» при изменении масштабов просмотра и сохранять свойство кроссбраузерности. Однако в этом есть один большой минус – при большом разрешении экрана маленькие фиксированные блоки теряются на большой площади и остаются незамеченными. Тут даже не спасет «резиновая» верстка, т.к. сайт будет выглядеть еще более нечитабельным, например на 19'' мониторах при разрешении большем 1280 по ширине. Для меня это актуально, т.к. на ноутбуке 17'' с разрешением 1400х800 просматривать «резиновый» сайт очень неудобно. И желание оставаться на таком сайте отпадает быстро. Существует ли способ, позволяющий управлять масштабами не только текста, но и всего сайта?
Читать дальше →

LESS: программируемый язык стилей

Reading time13 min
Views432K
Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.
Так что же такое LESS?

Как я создавал мобильный файтинг под iOS

Reading time11 min
Views50K

Глава 1. Спасибо, Майкл Дудикофф


В детстве я любил мечтать о том, кем же я стану, когда вырасту. Какой путь выбрать: космос или океанские глубины? Нет, я хотел создавать игры. Почему игры? Я рос во времена, когда разум любого мальчишки был отравлен компьютерным бумом и первыми консольными баталиями. Шли годы, мечта моя спала медвежьим сном, задавленная трудовыми буднями. И вот, однажды…

Март 2014. 7 утра в обычном московском спортзале. Поднимаю гантели, подавляя сонное недовольство разговорами с местными хохмачами. Тут в нашу беседу внезапно вклинился ОН.



Мальчики и девочки, рожденные на заре СССР, хорошо помнят гнусавый одноголосый перевод с затертых видеокассет. И вот один из обладателей того голоса появляется на экране ТВ, подвешенного к потолку. Конечно, я сразу узнал легендарного Майкла Дудикоффа, героя киноэпопеи «Американский ниндзя».
Читать дальше →

Языки пламени в CSS

Reading time2 min
Views39K
Прочитав статью про капельное преобразование в CSS, я решил поиграться с настройками в коде примера на CodePen и случайно выделил движущиеся блоки. Мне это показалось красивым и похожим на процесс горения. После недолгих размышлений код был кустарным образом распилен на части, сдобрен прозрачностью фона, анимацией и цветными тенями, и вот, что из этого получилось.



Подойти к огню

От React до Riot 2.0

Reading time3 min
Views21K


Эта популярная запись в блоге была отправной точкой в наших исследованиях минимализма. Мы начали с того, что Muut не должен использовать популярные фреймворки: Backbone, Angular или Ember.

Наша мотивация:

1) малый размер клиентского приложения. Неприемлемо, когда фреймворк гораздо больше самого приложения;
2) небольшой фреймворк, работа которого полностью понятна и прозрачна. Все популярные фреймворки поставляются со очень большим количеством методов API, свойств и других плюшек. Полное понимание было особенно важно, так как у нас было встраиваемое на сторонние сайты приложение.

Мы задались вопросом, а нужен ли фреймворк вообще? Пока API отделен от UI, проблем нет никаких. С помощью системы событий можно построить автономные компоненты, а «нативный» pushState позволяет подружить приложение с кнопкой «Back» браузера.

С этимы мыслями мы начали работу над Riot 1.0.
Читать дальше →

Разработка микросервисов с использованием Scala, Spray, MongoDB, Docker и Ansible

Reading time7 min
Views31K
Цель данной статьи — показать возможный подход для построения микросервисов с использованием Scala, RESTful JSON, Spray и Akka. В качестве базы данных мы будем использовать MongoDB. В результате нашей работы мы упакуем наш проект в Docker-контейнер, а Vagrant и Ansible позволит нам управлять конфигурацией приложения.

В этой статье вы не найдете подробностей о языке Scala и других технологиях, которые будут использоваться в проекте. В ней вы не найдете руководства, которое ответит на все ваши вопросы. Цель статьи — показать технику, которую можно использовать при разработке микросервисов. На самом деле, большая часть этой статьи не завязана на конкретной технологии. Docker имеет более широкую сферу использования, нежели только микросервисы. Ansible позволяют быстро развернуть любое требуемое окружение, а Vagrant — отличный инструмент для создания виртуальных машин.
Читать дальше →

Несколько интересностей и полезностей для веб-разработчика #38

Reading time4 min
Views30K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Awesome-react


Традиционная «awesome» коллекция полезных ресурсов для завоевавшего сердца миллионов фреймворка React.js.

CSS Reference



Вероятно самый подробный справочник по CSS от авторов Codrops с их удивительными HTML/CSS/SVG реализациями. Помимо того, что данный перечень CSS описывает все самые новые свойства, псевдо-классы, функции, типы, правила, он также содержит информация по последним концептам от W3C.

Читать дальше →

Избавляемся от JavaScript в социальных кнопках (Facebook, VK, Twitter и др.)

Reading time5 min
Views79K
Как мы избавились от JavaScript-библиотек социальных сетей, ускорили скорость загрузки страниц и использовали RESTful API для “шаринга” и “лайков”.


Читать дальше →

Разбираемся с Flux, реактивной архитектурой от facebook

Reading time7 min
Views118K


Введение


Добро пожаловать в третью часть серии статей «Изучаем React». Сегодня мы будем изучать, как устроена архитектура Facebook Flux, и как использовать ее в своих проектах.
Ррреактивно!

Kefir.js — новая библиотека для функционального реактивного программирования (FRP) в JavaScript

Reading time4 min
Views22K
Наверняка многие уже слышали о подходе FRP для организации асинхронного кода. На хабре уже писали об FRP (Реактивное программирование в Haskell, FRP на Bacon.js) и есть хорошие доклады на эту тему (Программировние UI с помощью FRP и Bacon.js, Functional Reactive Programming & ClojureScript, О Bacon.js от Juha Paananen — автора бекона)

Если коротко, FRP это подход похожий на Promise, но с неограниченным количеством возвращаемых значений, и бОльшим количеством методов для комбинирования / модифицирования потоков событий. Другими словами, если Promise позволяют работать со значением, которого у вас еще нет, так, будто оно у вас уже есть, то FRP позволяет работать со значением, меняющимся во времени, так, будто оно не меняется.

Вот что это дает по сравнению с обратными вызовами:

1) Поток событий (Event stream) и значение меняющаяся во времени (Property / Behavior) становятся объектами первого класса. Это значит что их можно передавать в функции и возвращать из функций.

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

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

К примеру можно написать функцию, возвращающую поток перетаскиваний (drag). В качестве параметров она будет принимать 3 потока — начало перетаскивания, движение, конец перетаскивания. Дальше можно передать в эту функцию: либо потоки для соответствующих событий мыши (mousedown, mousemove, mouseup), либо для touch событий (touchstart, touchmove, touchend). Сама же функция не будет ничего знать об источниках событий, а будет работать только с абстрактными потоками. Пример реализации на Bacon.

2) Явный state

Второе большое преимущество FRP это явное управление состоянием. Как известно, state — один из самых главных источников сложности программ, поэтому грамотное управление им позволяет писать более надежные и простые в поддержке программы. Отличный доклад от Рича Хикки о сложности (complexity) «Simple Made Easy».

FRP позволяет писать бОльшую часть кода на «чистых функциях» и управлять потоком данных (dataflow) явно (с помощью потоков событий), а состояния хранить тоже явно в Property.

Читать дальше →

Почему вам НЕ стоит использовать AngularJs

Reading time12 min
Views248K
Много времени прошло с момента появления AngularJs (в масштабах веб-технологий конечно). Сейчас в интернетах есть огромное количество постов восхваляющих этот фреймворк до небес, что это манна небесная не иначе, а критики не так уж и много как он того заслуживает. Но такие статьи уже потихоньку начинают появляться, и меня это радует, надеюсь индустрия переболеет ангуляром так же, как переболела MooTools, Prototype, %какой-нибудь новый язык под JVM%, %другая-супер-революционная-технология%. Не знаю почему, но в IT-области такие революционные технологии, которые поднимают шум, а потом пропадают, появляются довольно часто. Хороший разработчик должен уметь отличать очередную модную технологию, от работающего инструмента. И для этого очень важно критически смотреть на вещи. Моя статья — это компиляция самых весомых выводов из других статей, и моих личных умозаключений. Ангуляр создает хороший вау-эффект, когда видишь его впервые: «ух ты, я написал ng-repeat, и реализовал эту логику одними тегами и все само обновляется!», но как только приходится реализовывать реальные приложения, а не очередной TODO-лист, то все становиться очень печально. Сразу хочу сказать, что фреймворк я знаю хорошо, даже больше чем мне хотелось бы его знать, я программировал на нем в течении 2 лет. И для следующего проекта я его точно не выберу, и это хорошо, все мы учимся на ошибках. Так что же не так с ангуляром? Тут нет однозначного ответа, слишком много разных недостатков, которые создают такой облик фреймворку. Если одним словом – непродуманная архитектура. Под катом я привожу конкретику, так что устраивайтесь поудобнее. ДА НАЧНЕТСЯ ХОЛЛИ ВАР!
Читать дальше →

Docker, SkyDNS и SkyDock — быстро и удобно

Reading time4 min
Views33K
Не так давно начал изучать, что такое docker, который уже успел нашуметь по всему миру. Не буду вдаваться в философские изыски «а зачем оно надо?», или «фи, это просто очередной модный тренд!», или «кто же такой сырой продукт выпускает?». Я просто хочу дать краткие советы, как можно быстро в домашних условиях пощупать, что такое docker, используя такие блага и удобства как SkyDock и SkyDNS.
Данная заметка рассчитана на людей, у кого мало времени, чтобы читать горы статьей на английском (или не знают английского), но есть небольшие познания в том, что такое консоль и как установить docker самостоятельно.
Краткая суть статьи для ленивых
docker pull crosbymichael/skydns
docker pull crosbymichael/skydock
docker run -d -v /var/run/docker.sock:/docker.sock --name skydock crosbymichael/skydock -ttl 30 -environment dev -s /docker.sock -domain docker -name skydns
docker run -d -p 172.17.42.1:53:53/udp --name skydns crosbymichael/skydns -nameserver 8.8.8.8:53 -domain docker

Далее следует настройка роутера или правка /usr/lib/systemd/system/docker.service, но за такими подробностями придется всё же залезть под хабракат.

Хочу подробней!

Регистрация безналоговой компании в Эстонии

Reading time5 min
Views170K
«Платить налоги – обязанность, платить мало налогов – искусство! » (с)

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

Задача стояла следующая — найти юрисдикцию, в которой не нужно платить налог на прибыль, при этом клиентам из США, Канады и ЕС удобно было с ней работать. Реальный офис открывать в этой стране задачи не стояло.

Основная деятельность компании — разработка ПО (классическая аутсорс компания со штатом ~20 девелоперов).
Читать дальше →

Создание игры на движке Sprite Kit (Часть 1)

Reading time71 min
Views159K
С появлением iOS 7 мир узрел новый игровой движок от Apple — SpriteKit. В свете того, что он появился совсем недавно об этом движке еще мало что написано, конечно в сети можно найти несколько tutorial -ов по нему но в основном все они на Английском языке. И по этому я задалась целью написать подробный Туториал об этом замечательном движке.

Итак, что же такое SpriteKit?


SpriteKit — это 2D движок, оптимизированный для создание игр для устройств от компании Apple. В его основе лежит популярный физический движок Box 2D. Поскольку разработчики создавали его заточенным специально для устройств Apple он существенно выигрывает в скорости у остальных движков.
В SpriteKit всю роль по оптимизации и рисованию графики берет на себя OpenGl, это все происходит на низком уровне и по этому вы можете сосредоточить свои усилия на решении проблем более высокого уровня и создание больших 2D игр. Для создание игр на SpriteKit используется язык Objective-c, но с выходом iOS 8 и нового языка Swift, игры также можно создавать и на нем.
От себя хотела бы добавить, что в некотором роде на Swift писать даже легче, так что если вы только начинаете и думаете какой язык выбрать то советую выбрать Swift.

Ниже, я предоставила видео с демонстрацией игрового процесса SpriteKit, если вам стало интересно то милости прошу.



Подробности

Используем Docker и не волнуемся о vendor-lock

Reading time8 min
Views112K
Docker в значительной мере изменил подход к настройке серверов, поддержке и доставке приложений. Разработчики начинают задумываться о том, можно ли архитектуру их приложений разделить на более мелкие компоненты, которые будут запускаться в изолированных контейнерах, что позволит достичь большего ускорения, параллелизации исполнения и надежности. Также Docker решает важную проблему снятия облачного vendor–lock и позволяет легко мигрировать настроенные приложения между собственными серверами и облаками. Все что требуется от сервера, чтобы запустить Docker – более-менее современная ОС Linux с ядром не ниже 3.8.

В этой статье мы расскажем о том, как просто использовать Docker и какие преимущества он даст сисадмину и разработчику. Забудьте про проблемы с зависимостями, запускайте на одном сервере софт, требующий разные дистрибутивы Linux, не бойтесь «загрязнить» систему неправильными действиями. И делитесь наработками с сообществом. Docker решает множество актуальных проблем и помогает сделать IaaS гораздо более похожими на PaaS, без vendor-lock.

InfoboxCloud Docker

На облачных VPS от Infobox мы сделали готовый образ Ubuntu 14.04 с Docker. Получите бесплатную пробную версию (кнопка «Тестировать 10 дней») и начните использовать Docker прямо сейчас! Не забудьте поставить галочку «Разрешить управление ядром ОС» при создании сервера, это требуется для работы Docker. В самое ближайшее время у нас появятся и другие ОС с Docker внутри.

Под катом вы узнаете, что же в Docker настолько воодушевило автора статьи, что за пару дней он перевел свои облачные сервера, автоматизирующие части процесса разработки, в контейнеры Docker.
Читать дальше →

10 уроков о том, как повысить продуктивность, которые я усвоил, работая по 90 часов в неделю целый месяц

Reading time8 min
Views199K
image

Сколько часов в неделю вы тратите на работу? Около 40, не так ли? А как вы думаете, что будет, если работать 90 часов в неделю?

Автор сайта a Year of Productivity Chris Bailey решил провести такой эксперимент. К чему это привело? Читайте о 10 уроках, которые он извлек, в нашем переводе его статьи.
Читать дальше →

Разработка веб-приложения

Reading time19 min
Views94K
Привет, Хабр!

При изучении технологий Ext JS и Java, написал web-приложение «Каталог автомобилей». Хочу поделиться с Вами этим опытом.

Вид и функциональность приложения


  • Добавление;
  • Удаление;
  • Редактирование;
  • Поиск;
  • Валидация данных;


Читать дальше →

Выразительный JavaScript: Введение

Reading time9 min
Views470K


Перевод книги Marijn Haverbeke "Eloquent JavaScript". Лицензия Creative
Commons attribution-noncommercial license
. Код предоставляется под лицензией MIT.


Содержание



Читать дальше →

Оценка сложности алгоритмов

Reading time6 min
Views636K
Не так давно мне предложили вести курс основ теории алгоритмов в одном московском лицее. Я, конечно, с удовольствием согласился. В понедельник была первая лекция на которой я постарался объяснить ребятам методы оценки сложности алгоритмов. Я думаю, что некоторым читателям Хабра эта информация тоже может оказаться полезной, или по крайней мере интересной.
Читать дальше →

Почему будущее за удалённой работой (часть 2)

Reading time5 min
Views61K


Немногим менее года назад я написал первую часть этой статьи, пообещав, что вторая будет посвящена рассмотрению самых частых возражений. Конечно, если кто-то и ждал продолжения, вероятно успел уже прочно забыть за это время. Утешая себя мыслью, что лучше всё-таки поздно, чем никогда, берусь наконец исправить ситуацию. Итак.
Читать дальше →

Information

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