Skip to content

Instantly share code, notes, and snippets.

@levibostian
levibostian / post.md
Last active April 15, 2020 20:31
webpack, Tachyons, pug, Vue.js web app.

Today, single page web apps are driving many websites that we use each and every day. Instead of having your browser request a new web page for each and every action you perform on a web page, single page web apps may load all in one request to smoothly and quickly transition with every action you perform.

When building single page web apps, you may decide to retrieve all of the HTML, CSS and Javascript with one single page load or dynamically load these resources as the user moves about your site. Either way, it can be a pain to bundle all of these assets together for the end user to download from your web server. This is where webpack comes into play.

webpack does all of the heavy lifting bundling all of your HTML, CSS and Javascript together. If you write your site all from scratch or depend on dependencies from npm, webpack takes care of packaging it all together for you. It has the ability to take your single page web app, cut out all of the code you don't need, then packa

@bvaughn
bvaughn / gist:012fb525e6c819fdc9bf
Last active May 23, 2016 15:01
Debugging Angular bindings

This afternoon I encountered a race condition in an Angular app I'm working on. Essentially my controller was pushing some values to an Array on its scope and something (I wasn't sure what) was asynchronously overriding the Array's contents. The Array was being used by a custom directive- written by someone else- as well as an ngModel and it wasn't clear who was making the change.

I ended up trying something I had not done before and it worked well enough that I thought I'd post it here in case it helped anyone else.

First I enabled The "Async" option in Chrome's "Sources > Call Stack" panel.

Next I set a breakpoint in my controller where I was modifying the Array. When I hit that breakpoint, I ran the following code in my console:

Object.observe(this.theArray, function(changes) {
@imjasonh
imjasonh / markdown.css
Last active May 24, 2024 22:56
Render Markdown as unrendered Markdown (see http://jsbin.com/huwosomawo)
* {
font-size: 12pt;
font-family: monospace;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: black;
cursor: default;
}
@addyosmani
addyosmani / README.md
Last active July 13, 2024 21:26 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

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

@martinaglv
martinaglv / 01.js
Last active May 10, 2019 07:03
What do these functions do?
function whatDoesItDo(val){
return val ? 1 : 2;
}
@bastianallgeier
bastianallgeier / statify.php
Last active October 4, 2022 17:12
A first draft for a script, which converts a Kirby site into a static site. It's a rough first draft, so don't expect it to be perfect. Play with it, if you like it!
<?php
/**
* Instructions:
*
* 1. Put this into the document root of your Kirby site
* 2. Make sure to setup the base url for your site correctly
* 3. Run this script with `php statify.php` or open it in your browser
* 4. Upload all files and folders from static to your server
* 5. Test your site
module Sass::Script::Functions
def file_exists(path)
return bool(false) unless options[:filename] # not all sass has a file name (e.g. std input)
current_directory = File.dirname(options[:filename]) rescue nil # a sass filename from an importer may not be processable by File.dirname
return bool(false) unless current_directory && File.exist?(current_directory) # not all sass files are served from the filesystem
full_path = File.expand_path(path.value, current_directory) # a relative path will be expanded against the current_directory of the sass file, symlinks will be followed, absolute paths will be left alone.
return bool(File.exist?(full_path))
end
end
@willurd
willurd / web-servers.md
Last active July 22, 2024 15:25
Big list of http static server one-liners

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000
@desandro
desandro / require-js-discussion.md
Created January 31, 2013 20:26
Can you help me understand the benefit of require.js?

I'm having trouble understanding the benefit of require.js. Can you help me out? I imagine other developers have a similar interest.

From Require.js - Why AMD:

The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order"

I don't quite understand why this methodology is so bad. The difficult part is that you have to manually order dependencies. But the benefit is that you don't have an additional layer of abstraction.