Pandahisham

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Pandahisham

Web Dev Resources

Frameworks

• Bootstrap
• HTML5 Boilerplate
• Foundation
• Web Starter Kit
• UI Kit

Pandahisham

In August 2007 a hacker found a way to expose the PHP source code on facebook.com. He retrieved two files and then emailed them to me, and I wrote about the issue:

http://techcrunch.com/2007/08/11/facebook-source-code-leaked/

It became a big deal:

http://www.techmeme.com/070812/p1#a070812p1

The two files are index.php (the homepage) and search.php (the search page)

Pandahisham

; Variables definition
; -----------------------------------------------------------------------------
EnvGet, userProfile, USERPROFILE
Software := userProfile . "\Dropbox\software\"

; Launch or toggle program, http://lifehacker.com/5468862/create-a-shortcut-key-for-restoring-a-specific-window
; -----------------------------------------------------------------------------
ToggleWinMinimize(WindowTitle)
{
	SetTitleMatchMode,2

Pandahisham

<div class="the-amazing-toggle">
  <!-- The Tease -->
  <h1>The amazing Toggle.</h1>
  <h2>Satisfy your togglediction.</h2>

  <!-- The Toggle -->
  <input type="checkbox" id="toggly">
  <label for="toggly"><i></i></label>

  <!-- The Addiction -->

Pandahisham

<h1>Links hover animations</h1>
<div class="link-cont">
    <div class="link-wrapper">
        <a class="link hover-1" href="#">#1 - left to right</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-2" href="#">#2 center to tips</a>
    </div>
    <div class="link-wrapper">
        <a class="link hover-3" href="#">#3 left to right</a>

Pandahisham

CSS Site Scroll Micro Animation

This fantastic dribble shot by Nick Buturishvili, but built with only CSS (Chrome and Safari approved).

A Pen by Ryan Mulligan on CodePen.

License.

Pandahisham

<?php namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Str;

class MakeAll extends Command
{
    /**
     * The name and signature of the console command.
     *

Pandahisham

$solver_timestamp_sec: 0.01;

// Rebound.js-like spring animations in SCSS.
// There is a bunch of functions, which helps generating keyframes for you spring
// animations, if you (like me) really want to avoid doing that in JavaScript.
//
// It only generates values for one spring, with given friction, tension and end value
// (i.e. it doesn't support spring systems)
// Friction and tension are matched to the values used in Origami, so you can use whatever
// your designers put in a Quartz Composer file in "Bouncy Animation" blocks :)

Pandahisham

<button>Submit</button>