Как стать автором
Обновить
0
0
Евгений Чефранов @Chefranov

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

Отправить сообщение

NudeCrawler: Голый ползун по женщинам на телеграфе

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров87K

Nudecrawler - паук для поиска голых женщин.

Читать далее
Всего голосов 144: ↑134 и ↓10+167
Комментарии135

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

Время на прочтение4 мин
Количество просмотров9.9K


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

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

Время на прочтение4 мин
Количество просмотров37K
Доброго времени суток, друзья!

Представляю Вашему вниманию перевод статьи «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'

Читать дальше →
Всего голосов 12: ↑9 и ↓3+10
Комментарии9

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

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


Читать дальше →
Всего голосов 49: ↑49 и ↓0+49
Комментарии13

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

Время на прочтение6 мин
Количество просмотров46K


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

Всего голосов 60: ↑58 и ↓2+56
Комментарии25

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

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

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

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

Время на прочтение4 мин
Количество просмотров2.2K
automatic-footnotes

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

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

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

Время на прочтение5 мин
Количество просмотров312K
Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (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, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.
Читать дальше →
Всего голосов 112: ↑106 и ↓6+100
Комментарии10

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

Время на прочтение14 мин
Количество просмотров221K
Применяя 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:


Читать дальше →
Всего голосов 213: ↑211 и ↓2+209
Комментарии23

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

Время на прочтение6 мин
Количество просмотров71K
Изучавшие или изучающие английский язык знают, каким страшным может казаться множество английских временных форм глаголов.
Всего в английском 12 временных форм. А в русском-то, на первый взгляд, всего 3, и как их связать с английскими, для новичка может быть совершенно не понятно.
Читать дальше →
Всего голосов 196: ↑173 и ↓23+150
Комментарии202

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

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


Читать дальше →
Всего голосов 13: ↑9 и ↓4+5
Комментарии11

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

Время на прочтение1 мин
Количество просмотров90K
image

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

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

Время на прочтение11 мин
Количество просмотров56K


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

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

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

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

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

Время на прочтение6 мин
Количество просмотров60K
Списки использованных источников приходится использовать довольно часто. Студенты пишут курсовые и дипломы, магистранты, аспиранты и докторанты пишут диссертации. Научные сотрудники пишут статьи и отчеты и много чего еще. Уверен, что каждому из читателей хотя бы раз в жизни приходилось составлять пристатейный список литературы и указывать ссылки на литературу в тексте.

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

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

Время на прочтение20 мин
Количество просмотров15K
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

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

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

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

Читать дальше →
Всего голосов 13: ↑10 и ↓3+7
Комментарии2

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

Время на прочтение13 мин
Количество просмотров200K

Введение



Я не являюсь профессиональным программистом. В том смысле, что не зарабатываю денег этим ремеслом, а использую свои навыки в качестве инструмента для основной, научной, деятельности. Поэтому все мои «поделки» живут лишь отведенный им на решение конкретной задачи период и не выходят за пределы каталогов проекта. Кроме того, уже довольно давно я отошел от разработки под ОС 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 понадобился мне для первого знакомства, с продуктом, но мы не будем уделять ему большого внимания — мой «линукс головного мозга» в последнее время всё больше и больше уводит меня от желания использовать разного рода «мастера» (это субъективно, прошу не пинать). Мы рассмотрим хардкорный способ написания скрипта с чистого листа.

Поехали!
Всего голосов 20: ↑18 и ↓2+16
Комментарии14

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

Время на прочтение9 мин
Количество просмотров86K


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

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

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

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

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

Скачать исходники
Демо
Читать дальше →
Всего голосов 75: ↑45 и ↓30+15
Комментарии55

Геометрические фигуры на CSS

Время на прочтение4 мин
Количество просмотров949K
Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат



#square {
	width: 100px;
	height: 100px;
	background: red;
}

Читать дальше →
Всего голосов 352: ↑328 и ↓24+304
Комментарии103

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

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

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

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



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

2. Возможные решения
Читать дальше →
Всего голосов 21: ↑17 и ↓4+13
Комментарии51

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

Время на прочтение2 мин
Количество просмотров127K
image

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

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

1) Corona SDK


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

image

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

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

Информация

В рейтинге
Не участвует
Откуда
Харьков, Харьковская обл., Украина
Дата рождения
Зарегистрирован
Активность