Архив метки: featured

Подборка бесплатных плагинов Photoshop для веб-разработчиков и дизайнеров

BlendMe.in – легкий доступ к иконкам

Позволяет быстро вставлять в psd документы бесплатные иконки, поставляемые в оригинальном формате(растр, вектор, тп.)

Иконки в основном распространяются под лицензией Creative Commons Attribution 3.0 Unported License, что несомненно полезно при разработке и прототипировании сайтов.

Следующий плагин называется CSS3Ps. Суть проста – при нажатии генерирует CSS3 код для каждого выбранного слоя. Поддерживает тени, обводки, свечения, border-radius. Помимо CSS3 может также генерировать SASS/SCSS.
Сайт плагина: http://css3ps.com/

Мемы про программистов

Добавить комментарий

Небольшая подборочка мемов про программистов.

Production bug

Friday deploy

Clean code

There, I fixed it

Black SEO

Dropzone.js – загрузчик картинок с помощью Drag’n’drop

Добавить комментарий

Dropzone.js – загрузчик картинок с помощью HTML5 Drag-and-drop. Также позволяет грузить с помощью клика.

В FAQ описан способ отображение уже загруженных картинок на сервере. Однако при использовании этого способа следует учитывать, что файлы не появятся в массиве myDropzone.files.

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

Для изменения шаблона, по которому потом будет отображаться файл можно воспользоваться параметром previewTemplate, например:

myDropzone = new Dropzone(
	"div#dropzone-<?php echo $id;?>",
	{
		url: "/Core/Media/Upload",
		uploadMultiple:false,
		multiple:false,
		addRemoveLinks:false,
		dictDefaultMessage: '<i class="attach-file"></i>Прикрепить файл',
		params: <?php echo CJSON::encode(array(
   			$csrfTokenName=>$csrfToken,
   		));?>,
   		paramName: 'FileUploads[file]',
   		previewTemplate: $.trim($('#previewTemplate').html())
	}
);

myDropzone = new Dropzone(

"div#dropzone-<?php echo $id;?>",

{

url: "/Core/Media/Upload",

uploadMultiple:false,

multiple:false,

addRemoveLinks:false,

dictDefaultMessage: '<i class="attach-file"></i>Прикрепить файл',

params: <?php echo CJSON::encode(array(

$csrfTokenName=>$csrfToken,

));?>,

paramName: 'FileUploads[file]',

previewTemplate: $.trim($('#previewTemplate').html())

}

);

И внутри HTML:

<div id="previewTemplate" class="hide">
	<div class="form-uploadedFile">
		<div class="filename"><span data-dz-name></span></div>
		<div class="size" data-dz-size></div>
		<div class="progress"><div class="bar" data-dz-uploadprogress></div></div>
		<div class="error-message"><span data-dz-errormessage></span></div>
	</div>
</div>

</div>

Генератор тем для Twitter Bootstrap

Добавить комментарий

Bootstrap magic – новый генератор тем для css фреймворка Twitter Bootstrap.

Позволяет визуально править переменные бутстрапа и экспортировать их в CSS или LESS файл, что значительно упрощает процесс верстки новых шаблонов.

Версия для bootstrap 2.x – http://pikock.github.io/bootstrap-magic/2.3.2/
Версия для Bootstrap 3 – http://pikock.github.io/bootstrap-magic/

Список избранных WordPress plugin-ов

Добавить комментарий

Список самых востребованных WordPress plugin-ов, подходящих почти под любой блог.

Akismet – плагин для фильтрации спам-комментариев. Для активации требуется Akismet API key.

Crayon Syntax Highlighter – подсвечник кода, поддерживает много языков и тем оформления.

Google XML Sitemaps – автоматический генератор Sitemap.xml для поисковых роботов.

Hansel & Gretel – хлебные крошки по микроформату http://schema.org/WebPage breadcrumb.

SEO Ultimate – полезный плагин для простого SEO. В дополнение к стандартным фишкам таких плагинов, имеет монитор 404 страниц.

Use Google Libraries – заменяет внутресайтовые jquery и пр. на Hosted by Google, что полезно.

W3 Total Cache – универсальный кеш-плагин. Умеет кешировать в memcache, apc. Требует внесения изменений в .htaccess.

WP-reCAPTCHA – reCaptcha для комментариев.

Yandex WebMaster – показывает инфу из Яндекс.Вебмастера на Dashboard WordPress-а.
Показывает немного, а как-то так:

Quoting index (tYC): 0

Pages in index: 37 (crawled: 80)

Your site was last indexed:2013-08-01T04:21:04 (103 hours ago).

Last update: 0 minutes ago.

Plugin access will be expired: 01 Feb 2014.

Яндекс.ПДС Пингер / Yandex Site search pinger – пингует Яндекс.Поиск по сайту. Официальный плагин от Яндекса собственно.

CSS-трюк для линии позади заголовка

Добавить комментарий

Иногда надо сделать линию, позади заголовка.

strikethrough не подходит. Но подходит вот этот CSS-trick.

bash-prompt с показом ветки в git

Добавить комментарий

Вот пример bash-prompt, показывающий текущую ветку git, если мы в папке репозитория

if [[ $COLORTERM = gnome-* && $TERM = xterm ]] && infocmp gnome-256color >/dev/null 2>&1; then
        export TERM=gnome-256color
elif infocmp xterm-256color >/dev/null 2>&1; then
        export TERM=xterm-256color
fi

export GIT_PS1_SHOWDIRTYSTATE=true
export GIT_PS1_SHOWUNTRACKEDFILES=true
export GIT_PS1_SHOWSTASHSTATE=true

if [[ ${EUID} == 0 ]] ; then
        PS1='\[\033[0;37m\][\t\[\033[0;37m\]]\[\033[0;33m\][\[\033[0;36m\]\u\[\033[0;36m\]@\[\033[0;36m\]\h \[\033[1;31m\]\w\[\033[0;33m\]]\[\033[0;31m\]$(__git_ps1 "(%s)")\[\033[0;37m\]\\$ \[\0
33[00m\]'
else
        PS1='\[\033[0;37m\][\t\[\033[0;37m\]]\[\033[0;33m\][\[\033[0;36m\]\u\[\033[0;36m\]@\[\033[0;36m\]\h \[\033[0;32m\]\w\[\033[0;33m\]]\[\033[0;31m\]$(__git_ps1 "(%s)")\[\033[0;37m\]\\$ \[\0
33[00m\]'
fi

if [[ $COLORTERM = gnome-* && $TERM = xterm ]] && infocmp gnome-256color >/dev/null 2>&1; then

export TERM=gnome-256color

elif infocmp xterm-256color >/dev/null 2>&1; then

export TERM=xterm-256color

export GIT_PS1_SHOWDIRTYSTATE=true

export GIT_PS1_SHOWUNTRACKEDFILES=true

export GIT_PS1_SHOWSTASHSTATE=true

if [[ ${EUID} == 0 ]] ; then

PS1='\[\033[0;37m\][\t\[\033[0;37m\]]\[\033[0;33m\][\[\033[0;36m\]\u\[\033[0;36m\]@\[\033[0;36m\]\h \[\033[1;31m\]\w\[\033[0;33m\]]\[\033[0;31m\]$(__git_ps1 "(%s)")\[\033[0;37m\]\\$ \[\0

33[00m\]'

else

PS1='\[\033[0;37m\][\t\[\033[0;37m\]]\[\033[0;33m\][\[\033[0;36m\]\u\[\033[0;36m\]@\[\033[0;36m\]\h \[\033[0;32m\]\w\[\033[0;33m\]]\[\033[0;31m\]$(__git_ps1 "(%s)")\[\033[0;37m\]\\$ \[\0

33[00m\]'

Работает это за счет стандартного функционала git-core – __git_ps1.

Выглядит это примерно так:

Также по теме можно почитать http://blog.jasonmeridth.com/2010/05/22/git-ps1.html и для Mac OS X https://github.com/marcelor/dotfiles/blob/master/git_ps1

Subtle Patterns – коллекция бесплатных паттернов для сайта

Добавить комментарий

Subtle Patterns – простой и понятный ресурс, предоставляющий немалый набор паттернов для использования в качестве фона сайта.

Есть возможность просмотреть фон прямо на сайте + версии для Retina Display.

На момент публикации предоставлено 348 экземпляров.

Speech bubbles на CSS3

Добавить комментарий

Отличное демо от Nicolas Gallagher по созданию speech bubbles на чистом CSS3 без использования дополнительных тегов.

Для изменения размера бордюра – применять манипуляции к border-width, left, top у элемента :after.

Крайне важно, чтобы у главного элемента был прописан стиль:

position:relative;

1	position:relative;

UPD: Сервис для автоматического создания стрелок под блоками: http://cssarrowplease.com/

DevPulse

полезное из мира IT и программирования

Архив метки: featured

Подборка бесплатных плагинов Photoshop для веб-разработчиков и дизайнеров

Мемы про программистов

Dropzone.js – загрузчик картинок с помощью Drag’n’drop

Генератор тем для Twitter Bootstrap

Список избранных WordPress plugin-ов

CSS-трюк для линии позади заголовка

bash-prompt с показом ветки в git

Subtle Patterns – коллекция бесплатных паттернов для сайта

Speech bubbles на CSS3