davidbwaters

Horizontal Website

A Pen by Captain Anonymous on CodePen.

License.

coolaj86

How to Find ANY Icon

1. Open the application such that you see the icon on your screen.
2. Open Activity Monitor
3. Double click the name of the application (i.e. Finder or System Preferences)
4. Select "Open Files and Ports"
5. Copy the output to a file and then grep for .icns

Similarly you could run this command, but it may take several minutes to complete:

darrenmothersele

Possible approaches to rendering web components on the server...

Server side DOM library (JSDOM alternative) that supports custom elements:
https://www.npmjs.com/package/happy-dom

https://medium.com/@treshugart/%C3%A5server-side-rendering-web-components-e5df705f3f48
Approach is based on this zip:
https://gist.github.com/justinfagnani/936791248120749ff1f8188f1f4064d9

Share a template between client side code and server side code:

jannecederberg

<form id="contact-form" action="//formspree.io/your@email.com" method="post">
	<input type="text" name="Name" placeholder="Name" required>
	<input type="email" name="Email" placeholder="Email" required>
	<textarea name="Message" cols="30" rows="6" placeholder="Message" required></textarea>
	<!-- CONFIG -->
	<input class="is-hidden" type="text" name="_gotcha">
	<input type="hidden" name="_subject" value="Subject">
	<input type="hidden" name="_cc" value="email@cc.com">
	<!-- /CONFIG -->
	<input class="submit" type="submit" value="Send">

dtomasi

server {
    listen       80;
    server_name  localhost;
    root       /Users/YOUR_USERNAME/Sites;
 
    access_log  /Library/Logs/default.access.log  main;
 
    location / {
        include   /usr/local/etc/nginx/conf.d/php-fpm;
    }

sgnl

Create a new temp project

1. $ mkdir sass_gulp_workshop
2. cd into the new directory
3. Initialize NPM: $ npm init --yes
4. Install gulp and gulp-sass packages: $ npm install -D gulp gulp-sass browser-sync
5. Update package.json's scripts section with this key-value pair: "scripts": { "dev": "gulp" }
6. Recreate this file structure in this directory:

• public (directory)
  • css (directory)
  • index.html (file)

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

rafszul

<div class='header'>
<h1>konstanzer schülerparlament</h1>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

dstroot

/**
 * World's simplest express server
 * - used to serve index.html from /public
 */

var express = require('express');
var serveStatic = require('serve-static');
var app = express();

app.use(serveStatic(__dirname + '/public'));

sstur

function toJSON(node) {
  let propFix = { for: 'htmlFor', class: 'className' };
  let specialGetters = {
    style: (node) => node.style.cssText,
  };
  let attrDefaultValues = { style: '' };
  let obj = {
    nodeType: node.nodeType,
  };
  if (node.tagName) {