Skip to content

Instantly share code, notes, and snippets.

View ackernaut's full-sized avatar

Terry Acker ackernaut

View GitHub Profile
1. Highlight a recommended option,

2. Allow users to switch currency (€/$/£)

3. Allow users to switch pricing monthly/yearly

4. Keep the entire pricing plan area clickable

5. Use slider to calculate how much a user would save

6. Provide free first month for good engagement

7. Prominently highlight testimonials prominently

8. Repeating call to action on top and bottom

9. Sell benefits instead of features

10. Indicate that users can cancel any time

@alekseykulikov
alekseykulikov / index.md
Last active February 6, 2025 21:20
Principles we use to write CSS for modern browsers

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

@mrmrs
mrmrs / designer-koans.md
Last active April 9, 2016 09:24
The ultimate definitive guide on whether or not designers should code

Designer Koans

No ultimate difference

One day a designer visited Master HyperTextCascade, and inquired, “Master, how will my designs be different when I have mastered code?”

Master HyperTextCascade answered, “Before code: identify problem, research, test, ship, iterate, solve problem. After code: identify problem, research, test, ship, iterate, solve problem.”

@retlehs
retlehs / header.php
Created April 29, 2015 04:55
Sage header template for Bootstrap top navbar component
<?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>
@nolanlawson
nolanlawson / protips.js
Last active November 19, 2024 02:40
Promise protips - stuff I wish I had known when I started with Promises
// Promise.all is good for executing many promises at once
Promise.all([
promise1,
promise2
]);
// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
if (somethingIsNotRight()) {
throw new Error("I will be rejected asynchronously!");
@hdragomir
hdragomir / sm-annotated.html
Last active February 2, 2025 02:22
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
@salcode
salcode / .gitignore
Last active December 10, 2024 15:31
See https://salferrarello.com/wordpress-gitignore/ for the latest version of my WordPress .gitignore file
# -----------------------------------------------------------------
# .gitignore for WordPress
# Bare Minimum Git
# http://ironco.de/bare-minimum-git/
# ver 20150227
#
# This file is tailored for a WordPress project
# using the default directory structure
#
# This file specifies intentionally untracked files to ignore
@PaulKinlan
PaulKinlan / criticalcss-bookmarklet-devtool-snippet.js
Last active March 12, 2025 01:22
CriticalCSS Bookmarklet and Devtool Snippet.js
(function() {
var CSSCriticalPath = function(w, d, opts) {
var opt = opts || {};
var css = {};
var pushCSS = function(r) {
if(!!css[r.selectorText] === false) css[r.selectorText] = {};
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
for(var i = 0; i < styles.length; i++) {
if(!!styles[i] === false) continue;
var pair = styles[i].split(": ");

Lesson's learnt building the Guardian

Below is a collection of my favourite responses I gathered from Guardian engineers when asked the question: What have you learnt starting from scratch and building a mobile-first next generation web platform for the Guardian?

Daithi O Crualaoich

  • Work with great people.
  • Deploy like crazy. This means the team has to control the infrastructure as well as code.
  • Design is not a service. Designers have to sit in the team.
  • Infrastructure is intrinsically unreliable. Discard and replace is the robust strategy.
  • Use your CDN for HTML too.
  • Don't always do as you are told.
@dergachev
dergachev / GIF-Screencast-OSX.md
Last active April 1, 2025 01:48
OS X Screencast to animated GIF

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Screencapture GIF

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application: