Skip to content

Instantly share code, notes, and snippets.

Web Component Development

Follow these instructions to set up a dev environment for web component development using Lit. These instructions use Storybook for an accompanying component library.

Before You Start

IMPORTANT: Before you begin, make sure you install the latest versions of Node (20.15.0 at time of writing) and PNPM (9.4.0 at time of writing). This also assumes you have Visual Studio Code installed.


@jpolete
jpolete / New .NET Core Solution.md
Created August 22, 2018 16:32
Command line commands for creating a new .NET Core solution

Create .NET Core / VS Code Solution

Create a folder.

$ mkdir SampleDotNet
$ cd SampleDotNet

Create a solution file.

@jpolete
jpolete / us-states.sql
Created January 29, 2017 22:22
SQL to create a MySQL table of U.S. states and abbreviations
CREATE TABLE `states` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`code` char(2) NOT NULL DEFAULT '',
`name` varchar(128) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
insert into states (code,name) values ('AL','Alabama');
insert into states (code,name) values ('AK','Alaska');
insert into states (code,name) values ('AS','American Samoa');

Development Process Outline

Discovery

Business

  • Interview stakeholders. Goals. Vision
  • Elevator pitch: “For [target customer], who has [customer need], [product name] is a [market category] that [one key benefit]. Unlike [competition], the product [unique differentiator].”
  • Define your value proposition
  • Create a “Concept Story” as described in “The User’s Journey.”
@jpolete
jpolete / Git Branching Strategy.md
Last active July 13, 2024 22:21 — forked from digitaljhelms/gist:4287848
Git/GitHub branching standards & conventions

Git Branching Strategy

Quick Legend

Branch Name Notes
Stable master Accepts merges from Release and Hotfix branches only.
Development develop Accepts merges from Feature/Bugfix, Release and Hotfix
Features/Bugfix feat-* / bug-* Always branch off HEAD of develop
Hotfix hotfix-* Always branch off master. Merges back into master and develop.
@jpolete
jpolete / gist:b244ab71316676a249ca
Created November 4, 2014 16:48
Invision-style tab renaming sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window Blur / Focus</title>
<script>
window.onblur = function() {
document.title = "You Left!!!";
}
window.onfocus = function() {
@jpolete
jpolete / Preferences.sublime-settings
Created September 30, 2014 17:43
Sublime Text 3 Settings (just in case)
{
"caret_style": "phase",
"color_scheme": "Packages/Color Scheme - Default/Solarized (Dark).tmTheme",
"fade_fold_buttons": false,
"folder_exclude_patterns":
[
".svn",
".git",
".hg",
"CVS",
@jpolete
jpolete / sample.htaccess
Created January 29, 2014 22:34
Starter .htaccess file
# Set +FollowSymLinks otherwise mod_rewrite results in a forbidden error
Options +FollowSymLinks
<IfModule mod_rewrite.c>
# Uncomment to turn on mod_rewrite
# RewriteEngine On
# RewriteBase /
@jpolete
jpolete / functions.php
Last active January 4, 2016 04:28
A simple (albeit limited) setup for caching static assets in WordPress. Sets far future http headers and then writes urls with timestamps. Full explanation at http://blog.poleteweb.com/2013/09/26/performance-tuning-wordpress-far-future-headers-and-cache-busting/
function cache_buster_url($uri) {
//Get base url of WP installation
$base_url = get_bloginfo('url');
//Get local path to the root of the WP installation
$installation_root = $_SERVER['DOCUMENT_ROOT'];
//Get path (from root) to file
$path_info = str_replace($base_url, '', $uri);
@jpolete
jpolete / snippets.json
Last active June 23, 2023 21:38
Emmet abbreviations and snippets for a page skeleton with WAI-ARIA landmark roles and a default meta viewport declaration. For Sublime Text Mac users, save this file in ~/emmet. For other editors/OSes find your default location for emmet overrides.
{
"html": {
"snippets": {
"page": "<header role=\"banner\">\n\t<nav role=\"navigation\">\n\t\t${1}\n\t</nav>\n</header>\n<div role=\"main\">\n\t${2}\n</div>\n<footer role=\"contentinfo\">\n\t${3}\n</footer>",
"meta:vpm": "<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" />"
},
"abbreviations": {
"doc": "html>(head>meta[charset=UTF-8]+meta:vpm+title{${1:Document}})+body",
"!:page": "html:5>page"
}