Pull to refresh
0
0
Евгений Чефранов @Chefranov

Веб-дизайнер

Send message

Выкладка нетрадиционной ориентации

Reading time4 min
Views9.9K


Все, кому приходится иметь дело с вёрсткой, знают что гриды и flexbox давно захватили CSS, позволяют очень удобно организовать классическую выкладку хедер-контент-сайдбар-футер, списки карточек, masonry и так далее. Но их настоящая крутизна не в удобстве использования, а в бескрайних возможностях, которые они открывают. Я покажу и объясню мой любимый трюк, который позволяет верстать за рамками привычной вертикально-горизонтальной прямоугольной сетки, и выглядит это очень круто.
Total votes 28: ↑27 and ↓1+37
Comments2

Шпаргалка по регулярным выражениям

Reading time4 min
Views37K
Доброго времени суток, друзья!

Представляю Вашему вниманию перевод статьи «Regex Cheat Sheet» автора Emma Bostian.

Регулярные выражения или «regex» используются для поиска совпадений в строке.

Ищем совпадение по шаблону

Используем метод .test()

const testString = 'My test string'
const testRegex = /string/
testRegex.test(testString) // true

Ищем совпадение по нескольким шаблонам

Используем | — альтернацию

const regex = /yes|no|maybe/

Игнорируем регистр

Используем флаг i

const caseInsensitiveRegex = /ignore case/i
const testString = 'We use the i flag to iGnOrE CasE'
caseInsensitiveRegex.test(testString) // true

Извлекаем первое совпадение в переменную

Используем метод .match()

const match = 'Hello World!'.match(/hello/i) // 'Hello'

Читать дальше →
Total votes 12: ↑9 and ↓3+10
Comments9

Стилизация старого доброго элемента button

Reading time17 min
Views213K
Кнопка — это один из тех элементов, которые чаще всего используются на веб-страницах. Тег <button></button> может быть применён для запуска некоего процесса вроде вывода данных, открытия модального окна, отправки формы и так далее. В материале, перевод которого мы публикуем, речь пойдёт о тонкостях стилизации элемента button и о том, как оформлять кнопки с учётом того, чтобы они хорошо работали бы в любых браузерах. Кроме того, тут будет рассмотрено большинство часто используемых стилей кнопок. Поговорим мы здесь и о некоторых сложностях, которые возникают при работе с кнопками.


Читать дальше →
Total votes 49: ↑49 and ↓0+49
Comments13

5 приемов работы с CSS, о которых вам следует знать

Reading time6 min
Views46K


Наблюдая за потоком вопросов по CSS на Тостере уже давно заметил, что многие из них повторяются много-много раз. Да, есть совсем глупые вопросы, на которые так и тянет ответить RTFM! Но есть и более занятные. Они связаны с не совсем стандартной версткой. Не такой, чтобы глаза на лоб лезли, но и заметно выходящей за рамки условного бутстрапа и традиционных туториалов для новичков. Похожие вопросы довольно сложно загуглить — обычно вся суть в картинке, но и отвечать каждый раз надоедает. В этой статье мы постараемся посмотреть некоторые приемы, охватывающие довольно широкий круг подобных вопросов. Информация в первую очередь адресуется начинающим верстальщикам, но возможно и опытным будет, чем вдохновиться.

Total votes 60: ↑58 and ↓2+56
Comments25

Поле загрузки файлов, которое мы заслужили

Reading time10 min
Views124K
Все течет, все меняется, но только input[type=file] как портил нервы всем начинающим веб-разработчикам, так и продолжает это делать до сих пор. Вспомните себя N лет назад, когда вы только начинали постигать азы создания веб-сайтов. Молодой и неопытный, вы искренне удивлялись, когда кнопка выбора файла напрочь отказывалась менять цвет своего фона на ваш любимый персиковый. Именно в тот момент вы впервые столкнулись с этим несокрушимым айсбергом под названием «Загрузка файлов», который и по сей день продолжает «топить» начинающих веб-разработчиков.

На примере создания поля для загрузки файлов я покажу вам, как правильно прятать input[type=file], настраивать фокус на объекте, у которого фокуса быть не может, обрабатывать события Drag-and-Drop и отправлять файлы через AJAX. А также я познакомлю вас с парой браузерных багов и путями их обхода. Статья написана для новичков, но в некоторых моментах может быть полезна и занимательна даже для матерых разработчиков.
Читать дальше →
Total votes 40: ↑36 and ↓4+32
Comments19

Автоматические сноски

Reading time4 min
Views2.2K
automatic-footnotes

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

Если выносить и оформлять сноски вручную, то это надоест даже самому настойчивому «писателю». Так что предлагаю Вам способ реализации сносок при помощи jQuery.
Читать дальше
Total votes 16: ↑12 and ↓4+8
Comments3

Абсолютное горизонтальное и вертикальное центрирование

Reading time5 min
Views312K
Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.
Читать дальше →
Total votes 112: ↑106 and ↓6+100
Comments10

Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое

Reading time14 min
Views221K
Применяя CSS-анимации в повседневной работе, я постепенно выработал привычку экспериментировать с ними в свободное время. Постоянно пытаясь реализовать очередную интересную задумку с использованием как можно меньшего числа элементов HTML, я обнаружил немало способов сделать с помощью CSS довольно неочевидные вещи. В этой статье я хочу поделиться некоторыми из них.

Быстрое изменение состояния посреди анимации

Обычно анимации используются для того, чтобы плавно менять свойства элементов со временем. Однако изменения могут также быть практически мгновенными. Для этого надо задать два ключевых кадра с очень маленьким интервалом, например в 0.001%:

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:


Читать дальше →
Total votes 213: ↑211 and ↓2+209
Comments23

Логика английских времен

Reading time6 min
Views71K
Изучавшие или изучающие английский язык знают, каким страшным может казаться множество английских временных форм глаголов.
Всего в английском 12 временных форм. А в русском-то, на первый взгляд, всего 3, и как их связать с английскими, для новичка может быть совершенно не понятно.
Читать дальше →
Total votes 196: ↑173 and ↓23+150
Comments202

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

Reading time6 min
Views31K
Английский востребован не только в аутсорсинговых, но и во многих продуктовых компаниях. Вписать языковые курсы в свой и без того насыщенный график – задача не простая, но реальная. В статье мы расскажем о проверенной программе обучения, раскроем особенности разных форматов занятий и перечислим полезные онлайн-ресурсы.


Читать дальше →
Total votes 13: ↑9 and ↓4+5
Comments11

Как покрасить вкладку Chrome

Reading time1 min
Views90K
image

Если вы заходили с мобильного хрома в фейсбук, то наверняка видели, что интерфейс браузера красится в фирменный синий цвет соцсети. Но зачем и как?
Читать дальше →
Total votes 42: ↑29 and ↓13+16
Comments20

О тестировании одной игры с картинками

Reading time11 min
Views56K


У меня много знакомых, работающих в IT, и почти все они уверены, что я и мой отдел играются на работе. Для справки, я руковожу отделом тестирования компании Иннова с ноября 2009.

Мир геймдева для обитателей мира разработки «человеческого», как я его называю, софта, это что-то непонятное и сказочное. Тестировать гномов, заводить баг на эльфа, моделировать тестовое окружение для осады замка. Я рассказывала на SQA days 7, в чем специфика тестирования игр (слайдкаст есть у меня в блоге).

Недавно мы запустили Атлантику. Это игра от корейского разработчика NDoors, которую можно охарактеризовать двумя словами: ММОРПГ и пошаговый_бой.

Все, больше про саму игру ничего не будет. А будет про её тестирование.
Читать дальше →
Total votes 189: ↑165 and ↓24+141
Comments127

Автоматизация создания и редактирования списков использованных источников с помощью Mendeley

Reading time6 min
Views60K
Списки использованных источников приходится использовать довольно часто. Студенты пишут курсовые и дипломы, магистранты, аспиранты и докторанты пишут диссертации. Научные сотрудники пишут статьи и отчеты и много чего еще. Уверен, что каждому из читателей хотя бы раз в жизни приходилось составлять пристатейный список литературы и указывать ссылки на литературу в тексте.

При создании статьи в Сети можно вставлять гиперссылки на источники прямо в тексте, либо добавить в «подвале» маркированный список, в котором эти источники и любая рекомендованная к прочтению литература будут перечислены в произвольном порядке. Однако в научном сообществе и в системе образования к правилу оформления таких списков предъявляются строгие (и порой противоречивые) требования, соблюдать которые вручную — дело муторное и неблагодарное.
В этой статье я поделюсь своим опытом автоматизации создания списка использованных источников с помощью Mendeley.
Читать дальше →
Total votes 13: ↑12 and ↓1+11
Comments9

Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 3

Reading time20 min
Views15K
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Первая часть. Вторая часть

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

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

Inno Setup: создание инсталлятора на примере развертывания C# приложения

Reading time13 min
Views201K

Введение



Я не являюсь профессиональным программистом. В том смысле, что не зарабатываю денег этим ремеслом, а использую свои навыки в качестве инструмента для основной, научной, деятельности. Поэтому все мои «поделки» живут лишь отведенный им на решение конкретной задачи период и не выходят за пределы каталогов проекта. Кроме того, уже довольно давно я отошел от разработки под ОС Windows, ибо Linux для решения моих задач более удобен.

Однако ученым тоже хочется кушать, прилично одеваться и заправлять машину. Поэтому (правда довольно редко) возникает необходимость немного пофрилансить.

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

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

  1. InstallShield — классика жанра, достаточно солидный проприетарный продукт
  2. Adnvanced Installer — проприетарный инструмент с широкими возможностями кастомизации через GUI. На сайте сказано, что если Вы блоггер и будете писать об этом продукте много хороших слов, то у Вас есть возможность получить Free License
  3. WiX — открытый бесплатный продукт, основанный на XML-скриптах. Мощная, хорошо документированная штука. Разбираться с ним я пока не стал, ибо время дорого (да и к XML душа лежит не очень). Возможно когда нибудь я к нему вернусь. Да, к нему есть плагины для Visual Studio, что несомненный плюс.
  4. Inno Setup — опенсорсный проект, код которого доступен на гитхабе. В силу бесплатности и низкого порога вхождения мой выбор остановился именно на нем, как инструменте позволившем выполнить работу быстро и качественно.


Так что в статье мы будем рассматривать пример использования Inno Setup, для которого имеется полезный фронтэнд Inno Script Studio, позволяющий выполнять создание простых инсталляторов с помощью мастера и менять настройки через GUI. GUI понадобился мне для первого знакомства, с продуктом, но мы не будем уделять ему большого внимания — мой «линукс головного мозга» в последнее время всё больше и больше уводит меня от желания использовать разного рода «мастера» (это субъективно, прошу не пинать). Мы рассмотрим хардкорный способ написания скрипта с чистого листа.

Поехали!
Total votes 20: ↑18 and ↓2+16
Comments14

Как создать веб-сайт, используя видео с YouTube в качестве фона?

Reading time9 min
Views86K


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

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

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

Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.

В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!

Скачать исходники
Демо
Читать дальше →
Total votes 75: ↑45 and ↓30+15
Comments55

QA в наше время. «Принцип Свитчера» или почему отрасли критически не хватает компетенции

Reading time6 min
Views33K
Друзья, сегодня выпала возможность отвечать на вопросы на долгоиграющую тему «Как стать Тестировщиком, каковы перспективы, и что необходимо, чтобы попасть в эту сферу.»

Как водится в начале любых мнениеизложений или презентаций, дам краткую (очень краткую) информацию о себе:
Работаю в QA два с половиной года. За это время сменил три компании, поработал на разных проектах. Много общался с основателями компаний и организаторами тренингов/конференций/семинаров. Проводил собеседования и следил за развитием рынка.

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



Разделю пост следующие части:
1. Наблюдения
  • Почему отрасль Тестирования низкоквалифицирована?
  • Личный опыт
  • «Принцип Свитчера» и его влияние на QA

2. Возможные решения
Читать дальше →
Total votes 21: ↑17 and ↓4+13
Comments51

12 лучших фреймворков для разработки приложений под Android

Reading time2 min
Views127K
image

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

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

1) Corona SDK


Богатый инструментарий для создания игр и приложений за рекордно короткое время

image

Обеспечивает возможность очень быстрой разработки. Элегантный API упрощает добавление сложных функций, технологический процесс позволяет сразу же видеть внесённые изменения, сама же разработка идёт на Lua – простом для изучения языке. Всё это приводит к рекордной скорости разработки.

Самый популярный фреймворк, часто используется разработчиками игр, но подходит для любого рода приложений. Уже более миллиона разработчиков пользуются API, поддержкой нативного интерфейса, встроенным движком и рекламной платформой.
Читать дальше →
Total votes 31: ↑21 and ↓10+11
Comments24

Information

Rating
Does not participate
Location
Харьков, Харьковская обл., Украина
Date of birth
Registered
Activity