Skip to content

Instantly share code, notes, and snippets.

View jonabaptistella's full-sized avatar

Jonathan Baptistella jonabaptistella

View GitHub Profile

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/


For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

@jonabaptistella
jonabaptistella / gist:9b93d8230aa8baba72de
Created March 12, 2016 20:46 — forked from pitch-gist/gist:2999707
HTML: Simple Maintenance Page
<!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>
@jonabaptistella
jonabaptistella / .gitignore
Created April 13, 2016 17:19
kirby .gitignore
.DS_Store
Icon^M^M
Icon?
.dropbox
.dropbox.attr
*.jpg
*.jpg.txt
*.png
*.png.txt

#Installing ngrok on OSX

  1. Download ngrok
  2. Unzip it to your Applications directory
  3. Create a symlink (instructions below)

Creating a symlink to ngrok

Run the following two commands in Terminal to create the symlink.

# cd into your local bin directory
@jonabaptistella
jonabaptistella / README.md
Created August 19, 2016 19:52 — forked from nichtich/README.md
How to automatically deploy from GitHub

Deploy your site with git

This gist assumes:

  • you have an online remote repository (github / bitbucket etc.)
  • you have a local git repo
  • and a cloud server (Rackspace cloud / Amazon EC2 etc)
    • your (PHP) scripts are served from /var/www/html/
    • your webpages are executed by Apache
  • the Apache user is named www-data (may be apache on other systems)
@jonabaptistella
jonabaptistella / README.md
Created August 19, 2016 20:34 — forked from oodavid/README.md
Deploy your site with git

Deploy your site with git

This gist assumes:

  • you have a local git repo
  • with an online remote repository (github / bitbucket etc)
  • and a cloud server (Rackspace cloud / Amazon EC2 etc)
    • your (PHP) scripts are served from /var/www/html/
    • your webpages are executed by apache
  • apache's home directory is /var/www/
@jonabaptistella
jonabaptistella / donate.js
Created October 21, 2016 00:27 — forked from starckio/donate.js
Systeme de donation PayPal - For GetKirby-Themes.com
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
function removeClass (argument) {
for (var i = argument.length - 1; i >= 0; i--) {
argument[i].className = ""
}
}
@jonabaptistella
jonabaptistella / gist:3dd57cb9567d065df7ade4936a2ec6cb
Created October 24, 2016 01:23 — forked from sashtown/gist:4040280
Kirby: How to display the search query item and the count of results
<?php if($results): ?>
<h1>
<?php echo $results->pagination->countItems() ?>
<?php if($results->pagination->countItems()=='1'): ?> result
<?php else: ?> results
<?php endif ?>
for <em><?php echo $search->query() ?></em>
</h1>
<?php endif ?>
@jonabaptistella
jonabaptistella / longpost.php
Created October 24, 2016 01:26 — forked from texnixe/longpost.php
Template for [Kirby CMS](http://getkirby.com) that splits long post into several pages where the content file has a <!--pagebreak--> tag. Adds pagination ( prev numbers next). Put <!--pagebreak--> tag into your content file where you want to split the post.
<?php
// store the content of the kirbytext text variable in $text
$text = kirbytext($page->text());
// split the content of $text whenever a <!--pagebreak--> code is encountered and store in the array $pages
$pages = explode('<!--pagebreak-->', $text);
// count the number of pages in the array
$pageCount = count ($pages);
@jonabaptistella
jonabaptistella / pagination.php
Created October 24, 2016 22:17 — forked from bastianallgeier/pagination.php
Search Template for Kirby
<!-- site/snippets/pagination.php -->
<nav role="pagination">
<div class="count">
<strong><?php echo $pagination->countItems() ?></strong> Results / showing <strong><?php echo $pagination->numStart() ?></strong> - <strong><?php echo $pagination->numEnd() ?></strong>
</div>
<div class="buttons">
<? if($pagination->hasPrevPage()): ?>
<a class="prev" href="<?= $pagination->prevPageURL() ?>">&lsaquo; previous</a>