Skip to content

Instantly share code, notes, and snippets.

Avatar

Jonathan Kemp jonkemp

View GitHub Profile
@jonkemp
jonkemp / do-not-use-switch.md
Last active Nov 25, 2021
'Don’t use switch' excerpted from 'Programming JavaScript Applications' by Eric Elliott, https://www.oreilly.com/library/view/programming-javascript-applications/9781491950289/
View do-not-use-switch.md

Don't Use switch

JavaScript has pretty normal control-flow statements that use blocks delineated by curly braces. There is an exception to this: the switch ... case statement. The strange thing about switch ... case is that you must include the keyword break at the end of each case to prevent control from falling through to the next case. Fall through is a trick that allows you to let more than one case be executed. Control will fall through automatically to the next case unless you explicitly tell it not to with break. However, like the optional semicolons and curly braces, it's possible to forget break when you really should have used it. When that happens, the bug is difficult to find because the code looks correct. For that reason, the break statement should never be left off of a case, even by design.

With that said, JavaScript has an elegant object-literal syntax and first-class functions, which makes it simple to create a keyed method lookup. The object you create for your method lookup is call

@jonkemp
jonkemp / HelloWorld.js
Last active Jun 8, 2021
React Component in Next.js with Styled Components, Enzyme, Jest and Storybook [Template]
View HelloWorld.js
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const HelloWorld = () => {
return <Wrapper />;
};
export default HelloWorld;
@jonkemp
jonkemp / index.js
Created Mar 29, 2021
The Module Pattern from Learning JavaScript Design Patterns by Addy Osmani
View index.js
const testModule = (() => {
let counter = 0;
return {
incrementCounter() {
return counter++;
},
@jonkemp
jonkemp / css-calc.css
Created Apr 2, 2012
Cross Browser CSS Calc()
View css-calc.css
/* 1. write it out for older browsers */
/* 2. use the vendor prefix for webkit */
/* 3. use the vendor prefix for moz */
/* 4. include the un-prefixed version last */
#foo {
width: 200px;
width: -webkit-calc(50% - 100px);
width: -moz-calc(50% - 100px);
width: calc(50% - 100px);
@jonkemp
jonkemp / prepopulate.html
Created Apr 5, 2011
Pre-populate your forms with random data. For testing forms. Requires jQuery. Includes a bookmarklet.
View prepopulate.html
<!-- include jQuery -->
<script>
$('form').find('input:text').val( function(i, val) {
return $(this).attr('name');
});
$('form').find('select').each( function(a) {
$(this).find('option').each( function(b) {
if ( $(this).val() !== '' ) {
$(this).parent().val( $(this).val() );
@jonkemp
jonkemp / validate-currency.js
Last active May 29, 2019
Currency validation method for the jQuery Validation plugin. Decimal place is optional but if included, it requires 2 places. Also, the dollar sign is optional.
View validate-currency.js
// Validation method for US currency
$.validator.addMethod("currency", function (value, element) {
return this.optional(element) || /^\$(\d{1,3}(\,\d{3})*|(\d+))(\.\d{2})?$/.test(value);
}, "Please specify a valid amount");
@jonkemp
jonkemp / timestamp.js
Created May 11, 2012
Print out a nicely formatted timestamp in JavaScript.
View timestamp.js
/**
* Return a timestamp with the format "m/d/yy h:MM:ss TT"
* @type {Date}
*/
function timeStamp() {
// Create a date object with the current time
var now = new Date();
// Create an array with the current month, day and time
@jonkemp
jonkemp / .editorconfig
Last active Apr 11, 2017
gulp-jquery-t3 sample project
View .editorconfig
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
View bookmarklets.html
<!-- switch to htts if available -->
<a href="javascript:(function(){if(location.protocol!='https:'){location.href='https:'+window.location.href.substring(window.location.protocol.length);}})();">HTTPS Switcher</a>