Shane Parsons shaneparsons

Getting Started with NPM (as a developer)

As easy as 1, 2, 3!

Updated:

Aug, 08, 2022 update config docs for npm 8+
Jul 27, 2021 add private scopes
Jul 22, 2021 add dist tags
Jun 20, 2021 update for --access=public
Sep 07, 2020 update docs for npm version

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

	<!doctype html>
	<title>Site Maintenance</title>
	<style>
	body { text-align: center; padding: 150px; }
	h1 { font-size: 50px; }
	body { font: 20px Helvetica, sans-serif; color: #333; }
	article { display: block; text-align: left; width: 650px; margin: 0 auto; }
	a { color: #dc8100; text-decoration: none; }
	a:hover { color: #333; text-decoration: none; }
	</style>

	(function($) {

	function getTextWidth($element) {
	var tester = $("<div/>").text($element.text())
	.css({ "position": "absolute", "float": "left", "white-space": "nowrap", "visibility": "hidden", "font": $element.css("font"), "text-transform": $element.css("text-transform"), "letter-spacing": $element.css("letter-spacing") })
	.appendTo($element.parent()),
	width = tester.innerWidth();
	tester.remove();
	return width;
	}

	// MultiExporter.jsx
	// Version 0.1
	// Version 0.2 Adds PNG and EPS exports
	// Version 0.3 Adds support for exporting at different resolutions
	// Version 0.4 Adds support for SVG, changed EPS behaviour to minimise output filesize
	// Version 0.5 Fixed cropping issues
	// Version 0.6 Added inner padding mode to prevent circular bounds clipping
	//
	// Copyright 2013 Tom Byrne
	// Comments or suggestions to tom@tbyrne.org

	<?php
	class comment_walker extends Walker_Comment {
	var $tree_type = 'comment';
	var $db_fields = array( 'parent' => 'comment_parent', 'id' => 'comment_ID' );

	// constructor – wrapper for the comments list
	function __construct() { ?>

	<section class="comments-list">

	using UnityEngine;
	using UnityEngine.UI;
	using System.Collections;
	using UnityEngine.SceneManagement;

	public class ScreenFader : MonoBehaviour
	{
	public Image FadeImg;
	public float fadeSpeed = 1.5f;
	public bool sceneStarting = true;

	<?php namespace App\Providers;

	use Illuminate\Support\ServiceProvider;

	/**
	* If the incoming request is an OPTIONS request
	* we will register a handler for the requested route
	*/
	class CatchAllOptionsRequestsProvider extends ServiceProvider {

	<?php

	if(!function_exists('config_path'))
	{
	/**
	* Return the path to config files
	* @param null $path
	* @return string
	*/
	function config_path($path=null)

	<?php
	// This file assumes that you have included the nav walker from https://github.com/twittem/wp-bootstrap-navwalker
	// somewhere in your theme.
	?>

	<header class="banner navbar navbar-default navbar-static-top" role="banner">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only"><?= __('Toggle navigation', 'sage'); ?></span>