pwn @pwn

User

Profile Publications Comments 49Bookmarks 181

begebot Mar 2 2011 at 13:08

«Сделайте мне красиво!» Выпуск №23

1 min

629

Lumber room

Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Show notes:

Что же можно использовать при разработке?
Документация HTML5 в удобном виде
Новая сборка Opera или всем пришел армагеддон
Пособие по созданию букмарклетовов + букмарклет для расстрела сайтов
Вялые наезды на HTML5 Boilerplate
Слухи о смерти div'а*** оказались преувеличены

*** Осторожно: фоновая музыка на странице

Наши ссылки: RSS и лента на rpod.ru

s2d Mar 1 2011 at 23:18

Простой тканевый фон за 5 секунд

1 min

29K

Design

В продолжении тематики, решил сделать свой вариант:

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

+240

201

Dmitry_f Mar 1 2011 at 01:15

Простой рельефный фон за 5 секунд

1 min

87K

Design

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

+397

163

tonsky Mar 27 2012 at 14:28

Делаем веб-клиент GMail удобным

3 min

52K

Cloud services*

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

Под катом рассказ о том, какие особенности и как я использую.

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

+70

110

nd0ut Mar 17 2011 at 12:36

Настраиваем внешний вид Windows 7

4 min

344K

Development for Windows*

В последнее время я стал замечать, что большая часть пользователей «семерки» используют стандартную тему оформления, которую разработчики ласково назвали Aero.

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

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

Поехали!

+100

167

oshibka404 May 25 2013 at 06:36

Как хвост виляет собакой. Азбука пропаганды

4 min

209K

Information Security*

Чем доступнее информация, тем больше её вокруг. Чем быстрее она распространяется, тем меньше остаётся времени на то, чтобы её проверить. Постепенно информационная среда превращается в некое подобие «белого шума». Всё труднее строить внутри себя новые информационные фильтры, чтобы отсеять лишнее: убрать в сторону лозунги, агитацию, пропаганду, а оставить только то, что на самом деле кроется за ними. А манипулировать нашими мыслями пытаются постоянно, и я говорю не о 25-ом кадре (он не работает), а о более земных вещах — приёмах пропаганды, которые так умело (а зачастую — очень топорно) используют политики, рекламщики и вообще, все, кому не лень. Об этих приёмах и пойдёт речь в статье.

Хвост виляет собакой. ("Wag the dog") — чтобы избежать большого скандала или «замять», оставить незамеченным какое-нибудь важное, но неприятное событие, часто используется простой, но хитрый и ловкий приём, который англоязычные политтехнологи называют «Wag the dog», а русскоязычные — «Хвост виляет собакой». Он заключается в том, чтобы вовремя поднять волну обсуждения вокруг вопроса второстепенной важности, на фоне которой другое, более важное событие или действие пройдёт незаметно.
Примеры таких вопросов: Отмена перехода на зимнее время, российское гражданство Депардье, поездка Путина или Саши Грей на Ладе Калине по России, полёты со стерхами и т.д.
Своё название этот приём получил в честь английского выражения tail wagging the dog, который, в свою очередь, появился из следующего народного пассажа:

— Почему собака виляет хвостом?
— Потому, что собака умнее, чем хвост. Если бы хвост был умнее, он вилял бы собакой.

Ещё 7 приёмов - под катом

+302

183

mcmlxxxiii May 6 2013 at 14:21

Работа с моделями данных в javascript

4 min

20K

Website development*JavaScript*Programming*

Tutorial

From sandbox

Здравствуйте, Хабралюди.

Мал по-малу из моего опыта и наших проектов родилась небольшая библиотека для работы с моделями в джаваскрипте. Она так и называется — Model.js.

Я расскажу вам вкратце об этой библиотеке и этим постом запрашиваю обратную связь у тех, кто создавая сложные джаваскрипт-приложения, уже решает эту проблему каким-то определенным образом без фреймворков. Интересно также и мнение тех, кто только подыскивает подходящий инструмент для своих нужд: какой инструмент вам нужен и насколько вам подходит Model.js?

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

+35

A3a May 6 2013 at 07:58

Лёгкий сайт или как посадить браузер на диету

14 min

144K

Website development*Client optimization*HTML*

Translation

А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?

Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

— Zeno Rocha, руководитель проекта.

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

+165

LinguaLeo Apr 16 2013 at 14:11

Хроники LinguaLeo: как мы сделали «Диалоги на английском» с Node.js и DynamoDB

5 min

37K

Website development*Lingualeo corporate blog

Пользователи LinguaLeo начинают изучать английский язык в Джунглях — хранилище тысяч материалов разного уровня сложности, формата и тематик; шаг за шагом учатся слышать и понимать речь носителей языка и расширять словарный запас. Кому нужна грамматика — идут в Курсы. Словарный запас пополняется не только из Джунглей, при добавлении незнакомых слов в Личный словарь, но и с помощью подготовленных Наборов слов, доступных для индивидуального изучения. В разделе Общение можно вести Диалоги на английском, чтобы практиковать язык с другими пользователями LinguaLeo в режиме real-time, выбирая темы для общения. Общение только на английском!

Для создания Диалогов на английском мы использовали Node.js, DynamoDB (все на AWS). Сейчас поделимся нашим опытом.

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

+85

orionll Apr 4 2013 at 21:49

Обзор ECMAScript 6, следующей версии JavaScript

6 min

99K

JavaScript*

Для начала, ликбез и несколько фактов:

ECMAScript — это официальный стандарт языка JavaScript (Слово JavaScript не могло быть использовано, потому что слово Java являлось торговой маркой компании Sun) Т.е. JavaScript — это имплементация стандарта ECMAScript.
TC39 — комитет, развивающий стандарт ECMAScript и принимающий решения по включению фич в него.
ECMAScript стандартов много. Самый популярный из них — ECMA-262.
ECMAScript 5 — последняя редакция стандарта ECMA-262 (утвержден в 2009 году).
Предыдущие версии стандарта ECMA-262 были (совсем старые не упоминаю):
- ECMAScript 3 — поддерживается большинством браузеров (утвержден в 1999 году).
- ECMAScript 4 — не принят в виду слишком радикальных изменений в стандарте. Позднее в июле 2008 году в урезанном варианте (но все же намного богаче, чем ECMAScript 3) вылился в новый проект ECMAScript Harmony.
ECMAScript 6 (кодовое имя ECMAScript.next) должен утвердиться до конца 2013 года.

Итак, что же нас ждет в новой версии JavaScript?

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

+102

179

hitmark Mar 7 2013 at 14:00

В чём разница между использованием MVC и MVP

2 min

69K

Website development*Perfect code*Designing and refactoring*

Привлекая внимание на проблемы, описанные в статье — «Шаблон MVC — это тупик для разработки приложений?», я считаю, что недостаточно подробно объяснил сам механизм MVC. И для колоритности в этой статье хотел бы осветить и MVP. Думаю, что важно понимать различия между MVC и MVP и общие моменты этих двух парадигм.

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

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

Freya Mar 5 2013 at 20:10

Произвольный вид поля file в html-форме, одинаковый во всех браузерах

2 min

78K

CSS*JavaScript*HTML*

Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

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

+43

atomlib Mar 7 2013 at 11:53

Загадка выпадающего списка «Амазона»

2 min

191K

Web design*Interfaces*

Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.

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

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

+538

omfg Feb 1 2013 at 02:05

Flight — новый js-фреймворк от Twitter

4 min

52K

Website development*JavaScript*

Сегодня команда Twitter представила общественности собственный фреймворк. Flight — это легкий компонентный javascript фреймворк, каждый компонент которого описывает поведение элементов на странице. На самом деле, вы скорее всего уже видели Flight в действии, потому что Twitter использует его для своих приложений. Вы можете посмотреть демонстрацию возможностей фреймворка в виде простейшего почтового клиента (код на github).

Новый фреймворк использует ES5-Shim для поддержки ES5 в старых браузерах и jQuery для манипуляции DOM. Также потребуется одна из реализаций AMD, например require.js или loadrunner.

Зачем нам еще один фреймворк?!

+137

SLY_G Jan 30 2013 at 19:16

Как превратить браузер в notepad за 1 секунду

1 min

137K

HTML*

Открыть новую закладку, скопировать в адресную строку

data:text/html, <html contenteditable>

и нажать Enter.

Вуаля.

При клике на белом поле появляется курсор, и можно писать мысли, заметки, наблюдения. Романы, стихи…

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

+282

154

Quiensabe Jan 29 2013 at 19:41

Мысли о верстке с JavaScript позиционированием

10 min

26K

Website development*CSS*JavaScript*

From sandbox

Добрый день, Хабр!

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

я — дилетант. Хотя моя жизнь напрямую связана с программированием уже более 10 лет, я отношусь тем людям, которым интересно в IT очень многое от 3D моделирования до робототехники. А потому бывает, не знаю элементарных для специалиста вещей. Иногда это помогает, иногда мешает, но что есть, то есть.
если вы хотите в результате «пощупать» технологию в деле, вынужден разочаровать. Все дальнейшее – только изложение мыслей и идей. Создать готовый движок на хорошем уровне у меня не хватит ни времени, ни умений. Впрочем, если кто-то заинтересуется изложенным – я готов всячески содействовать разработке.

Суть идеи.

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

При обычной верстке html – задает структуру контента, а css – управляет и позиционированием и визуальным представлением документа. Эта двойственность css приводит к раздутым файлам стилей, внутри которых бывает сложно ориентироваться. Одни и те же свойства управляют и положением и внешним видом элементов – это вносит путаницу и затрудняет отладку.

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

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

+30

SOb_S Jan 27 2013 at 23:50

Пользовательский JavaScript и CSS на мобильных устройствах

4 min

17K

Website development*CSS*JavaScript*

Хочется странного

Если вы регулярно посещаете с мобильного устройства (телефона, планшета) какие-нибудь сайты, и если у вас регулярно возникает желание изменить на них JS/CSS (но разработчикам сайтов вы по какой-то причине не сообщаете об этих желаниях), то статья вам может быть интересна.

Посмотрим, что можно сделать.

+18

WAYS Jan 17 2013 at 18:40

Что нам стоит DOM построить

6 min

56K

Website development*jQuery*

From sandbox

Скажу сразу, всю DOM-модель мы строить не будем, а лишь рассмотрим ее элементы и как с ними работать при помощи jQuery. Статья рассчитана на начинающих или тех кто хочет вспомнить как можно строить элементы «на лету», надеюсь кому-то это будет полезно.
Большинство веб-разработчиков сталкивается с необходимостью вставить какое-либо содержимое из js, возможно это ajax или событие. Но никто не задумывается о том что с вашим кодом возможно кому-то придется работать. И часто даже в очень известных плагинах можно встретить код такого типа:

var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#table').append(content);

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

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

+22

kotiara Jan 13 2013 at 18:22

JavaScript: от начала до конца

6 min

189K

JavaScript*Node.JS*

TL;DR
Эта обзорная статья. Такое себе "краткое содержание предыдущих серий". Она будет полезна для новичков, или тех, кто не следил за отраслью в последнее время. Для новичков это будет первый шаг во "Вселенную JavaScript", бывалые смогут освежить свои знания.

У JavaScript очень удивительная судьба. Он преодолел путь от самого не понимаемого до самого удивительного языка. У него было тяжелое детство:
Изначально Автор хотел написать функциональный язык. Но менеджеры хотели получить, «обычный» объектно-ориентированный. И чтобы было легко искать разработчиков для новоиспеченного языка синтаксис решили сделать похожим на Java и даже название сделали похожим.
Но на этом история не заканчивается. Java, JavaScript это торговые марки Sun (а теперь Oracle). Microsoft не мог воспользоваться именем JavaScript (Netcape и Sun дружили против Microsoft). В результате Microsoft решил сделать реверс инжиниринг JavaScript и назвал его JScript. Сделали реверс инжиниринг, и сделали его настолько хорошо, что даже содрали все баги в реализации. Позже решили сделать стандарт и назвали его ECMAScript.

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

+101

116

doochik Oct 9 2012 at 12:06

Новые аттачи в Яндекс.Почте

8 min

33K

Website development*JavaScript*Яндекс corporate blog

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

Проблема

Раньше всю аудиторию Яндекс.Почты мы разделяли на пользователей с флешем и без.

С первыми всё было просто: пользователи с установленным флешем прикрепляли файлы к письму через флеш-загрузчик. Он позволял загрузить сразу несколько файлов, определял их размер и контролировал процесс загрузки.

А вот с пользователями без флеша (8-10% от дневной аудитории) было сложнее. Мы предлагали им загружать файлы через обычную форму с />. Файлы из неё отправлялись через iframe вместе с содержимым самого письма, и это занимало много времени. Нажав кнопку «Отправить», пользователь долго ждал, пока загрузятся файлы.

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

+117

2 3 ...

9 10