134 lines
2.8 KiB
Plaintext
134 lines
2.8 KiB
Plaintext
<header class="w930">
|
|
<div class="heading">
|
|
<a href="#"><span class="title">Tim's Blog</span></a>
|
|
<span class="tagline">Random musings and rantings</span>
|
|
</div>
|
|
</header>
|
|
<main class="w930">
|
|
<section class="pagebody">
|
|
<section class="grid grid-fit grid-gutters">
|
|
<article class="main cell no-top-padding">
|
|
<div class="title">
|
|
<h2>Article Title</h2>
|
|
</div>
|
|
<div class="subtitle">Feb 18, 2016</div>
|
|
|
|
Here are some random code examples:
|
|
|
|
<p>HTML is always fun to look at, right?</p>
|
|
<pre><code><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Some Random Title</title>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
</code></pre>
|
|
|
|
<p>Javascript has several ways of making a self-executing function.</p>
|
|
<pre><code>// ES5 IIFE
|
|
(function() {
|
|
var x = 'foo';
|
|
}());
|
|
|
|
// ES5 Alternate IIFE
|
|
(function() {
|
|
var y = 'bar';
|
|
})();
|
|
|
|
// ES6 IIFE
|
|
(() => {
|
|
let x = 'foo';
|
|
const y = 'bar';
|
|
})();</code></pre>
|
|
|
|
Or, how about some php magic methods?
|
|
|
|
<pre><code><?php
|
|
|
|
class Foo {
|
|
/**
|
|
* A Constructor
|
|
*/
|
|
public function __construct()
|
|
{
|
|
|
|
}
|
|
|
|
/**
|
|
* A Destructor
|
|
*/
|
|
public function __destruct()
|
|
{
|
|
|
|
}
|
|
|
|
/**
|
|
* Dynamically get class properties
|
|
*
|
|
* @param string $key - the key of the item to get
|
|
* @return mixed - the value of the item
|
|
*/
|
|
public function __get($key)
|
|
{
|
|
|
|
}
|
|
|
|
/**
|
|
* Dynamically set class properties
|
|
*
|
|
* @param string $key - the key of the item to set
|
|
* @param mixed $value - the value of the item to set
|
|
*/
|
|
public function __set($key, $value)
|
|
{
|
|
|
|
}
|
|
}</code></pre>
|
|
|
|
<p>Or, you could even showcase CSS</p>
|
|
<pre><code>:root {
|
|
--body-font: 'Slabo 27px', serif;
|
|
--header-fonts: 'PT Serif', serif;
|
|
background:whitesmoke;
|
|
font-family: var(--body-font);
|
|
box-sizing: border-box;
|
|
cursor: default;
|
|
line-height: 1.4;
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
overflow-y: scroll;
|
|
text-rendering: optimizeLegibility;
|
|
text-size-adjust: 100%
|
|
}
|
|
|
|
/*
|
|
*! Flexbox grid
|
|
*/
|
|
section {
|
|
flex: 0;
|
|
}</code></pre>
|
|
</article>
|
|
<aside class="sidebar cell cell-1of3 no-top-padding">
|
|
<div class="bio">
|
|
<img class="logo" src="https://secure.gravatar.com/avatar/2ea65d51f854de868d4e94de8583ed96.jpg?r=g&s=100&d=wavatar" />
|
|
<div class="title">Timothy J. Warren</div>
|
|
<div class="tagline">Web Developer, Programmer, and all-around Technology Enthusiast</div>
|
|
</div>
|
|
<div class="recent-posts">
|
|
<div class="title">Recent Posts <a class="showall" href="#">show all</a></div>
|
|
<div>
|
|
<a class="post" href="#">Hello, this is a sample post!</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
<footer>
|
|
<p>© Timothy J. Warren</p>
|
|
</footer>
|
|
</section>
|
|
</main>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
|
|
<script>
|
|
hljs.initHighlightingOnLoad();
|
|
</script> |