madrobby

<!-- example for the http://retinafy.me ebook -->

<style>
  div.rss {
    background: url(rss.svg);
    width: 32px;
    height: 32px;
  }
  
  body.no-svg div.rss {

gaspanik

Apache+PHP+MySQL（Homebrew） on Mountain Lion

Mountain Lionの中に入ってるApacheとPHPを有効化しつつ、Homebrewを使ってMySQLをインストールするまで

※XcodeとCommand Line Toolsぐらいは入れておかないとだめなはず

Mountain Lion 内のApacheを起動

システム環境設定から消えてるので以下のコマンドでApache起動

sudo apachectl start

studiomohawk

CSS Radar - 2013/01/11

1. Clean out your Sass junk-drawer

CSSもモジュラー開発の時代だからこそ、知っておきたいディレクトリ構成の例。Sassを使った例ではあるが、LESSでもStylusでも同じことは実現できる。このあたりの構成についてはかなり考えたがこれは結構よく出来ている。これをベースに今の構成を見直そう。

2. Javascript module pattern: When to use it and why

JavaScriptのモジュールデザインパターンを著者の好きな形式を詳しく見ていきながら解説。短いながら利点を明確にして解説してあるので、是非。

dergachev

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

japboy

Jade FTW

こんにちは。今回は現実逃避を兼ねて Jade の素晴らしさをお伝えしたいと思います。

Jade とは何か

[Jade][0] は JST (JavaScript Templates) の一つであり、HTML を書くための[軽量マークアップ言語][1] である [Haml][2] に影響を受けた JavaScript テンプレートエンジンでもあります。

gaspanik

In-Browser Design Links

Articles, Styletiles & Styleguide

• Why we skip Photoshop by Jason Fried of 37signals - http://37signals.com/svn/posts/1061-why-we-skip-photoshop
• Style Tiles - http://styletil.es/
• Gimme Bar : Front end styleguides and pattern libraries - https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

Frameworks

gaspanik

/*
* Takes provided URL passed as argument and make screenshots of this page with several viewport sizes.
* These viewport sizes are arbitrary, taken from iPhone & iPad specs, modify the array as needed
*
* Original:
* nhoizey / screenshots.js https://gist.github.com/nhoizey/4060568
* 
* Usage:
* $ casperjs screenshots.js http://example.com
*/

nodesocket

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid {
 	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
	border-collapse: collapse !important;
	background-image: none !important;

wildwest-service

bomberstudios

NOTE: the list has moved to https://github.com/sketchplugins/plugin-directory

Sketch Plugins

A list of Sketch plugins hosted at GitHub, in no particular order.

• brandonbeecroft/Lorem-Ipsum-Plugin-for-Sketch This is a plugin for quickly creating Lorem Ipsum text in Sketch
• sebj/Sketch Templates and Plugins for Sketch by Bohemian Coding
• FredericJacobs/crop_Artboard A script to export the Sketch App artboards to the clipboard
• almonk/SketchGit A simple Git client built right into Sketch.