tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

lukaskleinschmidt

@use 'sass:map';
@use 'variants' as * with (
  $breakpoints: (
    'small': 640px,
    'medium': 768px,
    'large': 1024px,
    'wide': 1280px,
  )
);

hdragomir

<script type="text/javascript">
    (function () {
      "use strict";
      // once cached, the css file is stored on the client forever unless
      // the URL below is changed. Any change will invalidate the cache
      var css_href = './index_files/web-fonts.css';
      // a simple event handler wrapper
      function on(el, ev, callback) {
        if (el.addEventListener) {
          el.addEventListener(ev, callback, false);

dypsilon

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

---

hatefulcrawdad

/* Row and Column defaults */
.row { margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; width: 100%; }
.row .row.collapse { margin-left: 0; margin-right: 0; max-width: none; width: auto; }
.row .row { margin-left: -0.9375em; margin-right: -0.9375em; max-width: none; width: auto; }
.row.collapse .column, .row.collapse .columns { padding-left: 0; padding-right: 0; float: left; }
.column, .columns { padding-left: 0.9375em; padding-right: 0.9375em; width: 100%; float: left; position: relative; }

/* Up to 640px */
@media only screen {
  .small-1 { width: 8.33333% }

hatefulcrawdad

/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }

.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

hzlzh

<snippet>
    <!-- put this file in /packages/User/<Folder Name>/console_log.sublime-snippet then restart your Sublime Text 2 -->
    <content><![CDATA[console.log($1);$0]]></content>
    <tabTrigger>conl</tabTrigger>
    <scope>text.html,source.js</scope>
    <description>console.log()</description>
</snippet>

<snippet>
    <!-- put this in another file /packages/User/<Folder Name>/console_dir.sublime-snippet then restart your Sublime Text 2 -->

tomykaira

#!/bin/sh

# Licence: MIT
# Created by tomykaira, 2011-10-25

if [ $# -ne 1 ]; then
  echo "Give me your new project name (only)"
  exit 1
fi