initial commit
This commit is contained in:
Ayo Ayco
commit
c74f5fac7a
37 changed files with 993 additions and 0 deletions
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
_site
|
||||||
|
.sass-cache
|
||||||
|
.jekyll-metadata
|
||||||
|
*~
|
||||||
|
.*~
|
||||||
|
*swp
|
||||||
|
.*swp
|
||||||
|
|
||||||
24
404.html
Normal file
24
404.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
|
||||||
|
<style type="text/css" media="screen">
|
||||||
|
.container {
|
||||||
|
margin: 10px auto;
|
||||||
|
max-width: 600px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 30px 0;
|
||||||
|
font-size: 4em;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>404</h1>
|
||||||
|
|
||||||
|
<p><strong>Page not found :(</strong></p>
|
||||||
|
<p>The requested page could not be found.</p>
|
||||||
|
</div>
|
||||||
27
Gemfile
Normal file
27
Gemfile
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
source "https://rubygems.org"
|
||||||
|
|
||||||
|
# Hello! This is where you manage which Jekyll version is used to run.
|
||||||
|
# When you want to use a different version, change it below, save the
|
||||||
|
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
|
||||||
|
#
|
||||||
|
# bundle exec jekyll serve
|
||||||
|
#
|
||||||
|
# This will help ensure the proper Jekyll version is running.
|
||||||
|
# Happy Jekylling!
|
||||||
|
gem "jekyll", "~> 3.7.0"
|
||||||
|
|
||||||
|
# This is the default theme for new Jekyll sites. You may change this to anything you like.
|
||||||
|
gem "minima", "~> 2.0"
|
||||||
|
|
||||||
|
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
|
||||||
|
# uncomment the line below. To upgrade, run `bundle update github-pages`.
|
||||||
|
# gem "github-pages", group: :jekyll_plugins
|
||||||
|
|
||||||
|
# If you have any plugins, put them here!
|
||||||
|
group :jekyll_plugins do
|
||||||
|
gem "jekyll-feed", "~> 0.6"
|
||||||
|
end
|
||||||
|
|
||||||
|
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
|
||||||
|
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
|
||||||
|
|
||||||
70
Gemfile.lock
Normal file
70
Gemfile.lock
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
GEM
|
||||||
|
remote: https://rubygems.org/
|
||||||
|
specs:
|
||||||
|
addressable (2.5.2)
|
||||||
|
public_suffix (>= 2.0.2, < 4.0)
|
||||||
|
colorator (1.1.0)
|
||||||
|
concurrent-ruby (1.0.5)
|
||||||
|
em-websocket (0.5.1)
|
||||||
|
eventmachine (>= 0.12.9)
|
||||||
|
http_parser.rb (~> 0.6.0)
|
||||||
|
eventmachine (1.2.5)
|
||||||
|
ffi (1.9.18)
|
||||||
|
forwardable-extended (2.6.0)
|
||||||
|
http_parser.rb (0.6.0)
|
||||||
|
i18n (0.9.1)
|
||||||
|
concurrent-ruby (~> 1.0)
|
||||||
|
jekyll (3.7.0)
|
||||||
|
addressable (~> 2.4)
|
||||||
|
colorator (~> 1.0)
|
||||||
|
em-websocket (~> 0.5)
|
||||||
|
i18n (~> 0.7)
|
||||||
|
jekyll-sass-converter (~> 1.0)
|
||||||
|
jekyll-watch (~> 2.0)
|
||||||
|
kramdown (~> 1.14)
|
||||||
|
liquid (~> 4.0)
|
||||||
|
mercenary (~> 0.3.3)
|
||||||
|
pathutil (~> 0.9)
|
||||||
|
rouge (>= 1.7, < 4)
|
||||||
|
safe_yaml (~> 1.0)
|
||||||
|
jekyll-feed (0.9.2)
|
||||||
|
jekyll (~> 3.3)
|
||||||
|
jekyll-sass-converter (1.5.1)
|
||||||
|
sass (~> 3.4)
|
||||||
|
jekyll-watch (2.0.0)
|
||||||
|
listen (~> 3.0)
|
||||||
|
kramdown (1.16.2)
|
||||||
|
liquid (4.0.0)
|
||||||
|
listen (3.1.5)
|
||||||
|
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||||
|
rb-inotify (~> 0.9, >= 0.9.7)
|
||||||
|
ruby_dep (~> 1.2)
|
||||||
|
mercenary (0.3.6)
|
||||||
|
minima (2.1.1)
|
||||||
|
jekyll (~> 3.3)
|
||||||
|
pathutil (0.16.1)
|
||||||
|
forwardable-extended (~> 2.6)
|
||||||
|
public_suffix (3.0.1)
|
||||||
|
rb-fsevent (0.10.2)
|
||||||
|
rb-inotify (0.9.10)
|
||||||
|
ffi (>= 0.5.0, < 2)
|
||||||
|
rouge (3.1.0)
|
||||||
|
ruby_dep (1.5.0)
|
||||||
|
safe_yaml (1.0.4)
|
||||||
|
sass (3.5.5)
|
||||||
|
sass-listen (~> 4.0.0)
|
||||||
|
sass-listen (4.0.0)
|
||||||
|
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||||
|
rb-inotify (~> 0.9, >= 0.9.7)
|
||||||
|
|
||||||
|
PLATFORMS
|
||||||
|
ruby
|
||||||
|
|
||||||
|
DEPENDENCIES
|
||||||
|
jekyll (~> 3.7.0)
|
||||||
|
jekyll-feed (~> 0.6)
|
||||||
|
minima (~> 2.0)
|
||||||
|
tzinfo-data
|
||||||
|
|
||||||
|
BUNDLED WITH
|
||||||
|
1.16.0
|
||||||
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
This blog is build with Jekyll on top of the default [Minima theme](https://github.com/jekyll/minima). Mostly inspired by the [Jekyll website itself](https://jekyllrb.com). :)
|
||||||
|
|
||||||
|
Here is the live website: [https://ayoayco.github.io/blog](https://ayoayco.github.io/blog)
|
||||||
64
_config.yml
Normal file
64
_config.yml
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
# Welcome to Jekyll!
|
||||||
|
#
|
||||||
|
# This config file is meant for settings that affect your whole blog, values
|
||||||
|
# which you are expected to set up once and rarely edit after that. If you find
|
||||||
|
# yourself editing this file very often, consider using Jekyll's data files
|
||||||
|
# feature for the data you need to update frequently.
|
||||||
|
#
|
||||||
|
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
||||||
|
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
|
||||||
|
|
||||||
|
# Site settings
|
||||||
|
# These are used to personalize your new site. If you look in the HTML files,
|
||||||
|
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
|
||||||
|
# You can create any custom variable you would like, and they will be accessible
|
||||||
|
# in the templates via {{ site.myvariable }}.
|
||||||
|
title: ./full.hacker
|
||||||
|
author: Ayo
|
||||||
|
attribution: "2018 © by Full Hacker"
|
||||||
|
website: fullhacker.github.io
|
||||||
|
email: fullhackerblog@gmail.com
|
||||||
|
description: >- # this means to ignore newlines until "baseurl:"
|
||||||
|
// notes on technology and life
|
||||||
|
baseurl: "/" # the subpath of your site, e.g. /blog
|
||||||
|
url: "" # the base hostname & protocol for your site, e.g. http://example.com
|
||||||
|
twitter_username: fullhackerblog
|
||||||
|
instagram_username: fullhackerblog
|
||||||
|
facebook_username: fullhackerblog
|
||||||
|
github_username: fullhacker
|
||||||
|
|
||||||
|
# Build settings
|
||||||
|
markdown: kramdown
|
||||||
|
theme: minima
|
||||||
|
plugins:
|
||||||
|
- jekyll-feed
|
||||||
|
|
||||||
|
defaults:
|
||||||
|
-
|
||||||
|
scope:
|
||||||
|
path: ""
|
||||||
|
type: "posts"
|
||||||
|
values:
|
||||||
|
layout: post
|
||||||
|
author: Ayo
|
||||||
|
|
||||||
|
# this goes inside _config.yml. Change as required
|
||||||
|
navigation:
|
||||||
|
- text: Home
|
||||||
|
url: /
|
||||||
|
- text: About
|
||||||
|
url: /about/
|
||||||
|
- text: Contact me
|
||||||
|
url: /contact-me/
|
||||||
|
|
||||||
|
# Exclude from processing.
|
||||||
|
# The following items will not be processed, by default. Create a custom list
|
||||||
|
# to override the default setting.
|
||||||
|
# exclude:
|
||||||
|
# - Gemfile
|
||||||
|
# - Gemfile.lock
|
||||||
|
# - node_modules
|
||||||
|
# - vendor/bundle/
|
||||||
|
# - vendor/cache/
|
||||||
|
# - vendor/gems/
|
||||||
|
# - vendor/ruby/
|
||||||
5
_drafts/draft-one.md
Normal file
5
_drafts/draft-one.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
layout: post
|
||||||
|
---
|
||||||
|
|
||||||
|
# Sample Draft
|
||||||
20
_includes/disqus_comments.html
Normal file
20
_includes/disqus_comments.html
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{% if page.comments != false and jekyll.environment == "production" %}
|
||||||
|
|
||||||
|
<div id="disqus_thread"></div>
|
||||||
|
<script>
|
||||||
|
var disqus_config = function () {
|
||||||
|
this.page.url = '{{ page.url | absolute_url }}';
|
||||||
|
this.page.identifier = '{{ page.url | absolute_url }}';
|
||||||
|
};
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var d = document, s = d.createElement('script');
|
||||||
|
|
||||||
|
s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
|
||||||
|
|
||||||
|
s.setAttribute('data-timestamp', +new Date());
|
||||||
|
(d.head || d.body).appendChild(s);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
|
||||||
|
{% endif %}
|
||||||
48
_includes/footer.html
Normal file
48
_includes/footer.html
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<footer class="site-footer h-card">
|
||||||
|
<data class="u-url" href="{{ "/" | relative_url }}"></data>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<div class="footer-col-wrapper">
|
||||||
|
<div class="footer-col footer-col-1">
|
||||||
|
<ul class="contact-list">
|
||||||
|
<li class="p-name">
|
||||||
|
{% if site.attribution %}
|
||||||
|
{{ site.attribution }}
|
||||||
|
{% else %}
|
||||||
|
{{ site.title | escape }}
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% if site.email %}
|
||||||
|
<li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-col footer-col-2">
|
||||||
|
<ul class="social-media-list">
|
||||||
|
{% if site.github_username %}
|
||||||
|
<li>
|
||||||
|
{% include icon-github.html username=site.github_username %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if site.twitter_username %}
|
||||||
|
<li>
|
||||||
|
{% include icon-twitter.html username=site.twitter_username %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-col footer-col-3">
|
||||||
|
<ul class="desc-list">
|
||||||
|
<li>{{ site.description | escape }}</li>
|
||||||
|
<li class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
11
_includes/google-analytics.html
Normal file
11
_includes/google-analytics.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||||
|
|
||||||
|
ga('create', '{{ site.google_analytics }}', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
16
_includes/head.html
Normal file
16
_includes/head.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
|
||||||
|
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
|
||||||
|
{% if jekyll.environment == 'production' and site.google_analytics %}
|
||||||
|
{% include google-analytics.html %}
|
||||||
|
{% endif %}
|
||||||
|
<script
|
||||||
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||||
|
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="{{ "/assets/type.js" | relative_url }}"></script>
|
||||||
|
</head>
|
||||||
49
_includes/header.html
Normal file
49
_includes/header.html
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<header class="site-header" role="banner">
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
{% assign default_paths = site.pages | map: "path" %}
|
||||||
|
{% assign page_paths = site.header_pages | default: default_paths %}
|
||||||
|
<div class="type-js site-title-wrapper">
|
||||||
|
<a href="{{ '/' | relative_url }}" class="text-js site-title">{{ site.title }}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if page_paths %}
|
||||||
|
<nav class="site-nav">
|
||||||
|
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
|
||||||
|
<label for="nav-trigger">
|
||||||
|
<span class="menu-icon">
|
||||||
|
<svg viewBox="0 0 18 15" width="18px" height="15px">
|
||||||
|
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
|
||||||
|
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
|
||||||
|
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!--div class="trigger">
|
||||||
|
{% for path in page_paths %}
|
||||||
|
{% assign my_page = site.pages | where: "path", path | first %}
|
||||||
|
{% if my_page.title %}
|
||||||
|
{% if my_page.url == page.url %}
|
||||||
|
{% assign current = 'current' %}
|
||||||
|
{% endif %}
|
||||||
|
<a class="page-link {{ current }}" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
</div-->
|
||||||
|
<div class="trigger">
|
||||||
|
{% for link in site.navigation %}
|
||||||
|
{% assign current = nil %}
|
||||||
|
{% if page.url == link.url%}
|
||||||
|
{% assign current = 'current' %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<a class="page-link {{ current }}" href="{{ link.url | relative_url }}">{{ link.text }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
1
_includes/icon-github.html
Normal file
1
_includes/icon-github.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<a class="u-url" rel="me" href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>
|
||||||
1
_includes/icon-github.svg
Normal file
1
_includes/icon-github.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>
|
||||||
|
After Width: | Height: | Size: 953 B |
1
_includes/icon-twitter.html
Normal file
1
_includes/icon-twitter.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<a class="u-url" rel="me" href="https://twitter.com/{{ include.username }}"><span class="icon icon--twitter">{% include icon-twitter.svg %}</span><span class="username">{{ include.username }}</span></a>
|
||||||
1
_includes/icon-twitter.svg
Normal file
1
_includes/icon-twitter.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg>
|
||||||
|
After Width: | Height: | Size: 814 B |
26
_layouts/default.html
Normal file
26
_layouts/default.html
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
|
||||||
|
|
||||||
|
{% include head.html %}
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="site-container">
|
||||||
|
|
||||||
|
{% include header.html %}
|
||||||
|
|
||||||
|
<div class="site-body">
|
||||||
|
<main class="page-content" aria-label="Content">
|
||||||
|
<div class="wrapper">
|
||||||
|
{{ content }}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include footer.html %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
28
_layouts/home.html
Normal file
28
_layouts/home.html
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="home">
|
||||||
|
{% if page.title %}
|
||||||
|
<h1 class="page-heading">{{ page.title }}</h1>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
|
|
||||||
|
{% if site.posts.size > 0 %}
|
||||||
|
<h2 class="post-list-heading">{{ page.list_title }}</h2>
|
||||||
|
<ul class="post-list">
|
||||||
|
{% for post in site.posts %}
|
||||||
|
<li>
|
||||||
|
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
|
||||||
|
<span class="post-meta">{{ post.date | date: date_format }}</span>
|
||||||
|
<h3>
|
||||||
|
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
|
||||||
|
</h3>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
14
_layouts/page.html
Normal file
14
_layouts/page.html
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
<article class="post">
|
||||||
|
|
||||||
|
<header class="post-header">
|
||||||
|
<h1 class="post-title">{{ page.title | escape }}</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="post-content">
|
||||||
|
{{ content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
28
_layouts/post.html
Normal file
28
_layouts/post.html
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
||||||
|
|
||||||
|
<header class="post-header">
|
||||||
|
<p class="post-meta">
|
||||||
|
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
||||||
|
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
|
||||||
|
{{ page.date | date: date_format }}
|
||||||
|
</time>
|
||||||
|
{% if page.author %}
|
||||||
|
• <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
|
||||||
|
{% endif %}</p>
|
||||||
|
|
||||||
|
<h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="post-content e-content" itemprop="articleBody">
|
||||||
|
{{ content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if site.disqus.shortname %}
|
||||||
|
{% include disqus_comments.html %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
|
||||||
|
</article>
|
||||||
12
_posts/2018-01-09-hello-world.md
Normal file
12
_posts/2018-01-09-hello-world.md
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
permalink: '/hello-world'
|
||||||
|
---
|
||||||
|
|
||||||
|
### Oh, another hello world thingy
|
||||||
|
|
||||||
|
Yes, yet another blog. Hopefully this one sticks.
|
||||||
|
|
||||||
|
``` javascript
|
||||||
|
// here's some code
|
||||||
|
console.log("here's some code");
|
||||||
|
```
|
||||||
0
_posts/Miscellaneous/0.intro.md
Normal file
0
_posts/Miscellaneous/0.intro.md
Normal file
52
_posts/Miscellaneous/mailchimp-and-lotus-notes-issue.md
Normal file
52
_posts/Miscellaneous/mailchimp-and-lotus-notes-issue.md
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
# Mailchimp + Lotus Notes Solution for HTML Email Campaigns
|
||||||
|
|
||||||
|
I remember the first time I saw a web page code generated by a WYSIWYG (What You See Is What You Get)... I had an unpleasant feeling and thought, "How could people stomach this?"
|
||||||
|
|
||||||
|
Maybe because with little to no technical know-how and with minimal time and effort, they do get what they want to see? But what if after using such a tool, with much frustration, you don't get the results you want?
|
||||||
|
|
||||||
|
I had a client using one WYSIWYG tool for designing HTML Email campaigns and guess what... they are not getting the results they want to see. The HTML email designs are chaotic when received in their readers' computers.
|
||||||
|
|
||||||
|
|
||||||
|
## The Problem
|
||||||
|
|
||||||
|
The client's readers use Lotus Notes for reading their emails. The problem is, Lotus Notes may not always display HTML emails as expected. Instead, it displays HTML emails in a proprietary rich-text format. This means that Lotus Notes, as an email reader, uses its own standards in rendering HTML emails that is quite different compared to all other popular email readers (i.e., Gmail, Outlook, etc.).
|
||||||
|
|
||||||
|
There are HTML elements that Lotus Notes simply does not understand. To make things more complicated, different versions of Lotus Notes have different rendering standards. This means that creating an HTML email template that works for one Lotus Notes version does not guarantee it will work on others.
|
||||||
|
|
||||||
|
This is why HTML Email designers hate Lotus Notes the most--pretty much like Internet Explorer for Web Developers.
|
||||||
|
|
||||||
|
|
||||||
|
## Findings on Lotus Notes HTML email rendering
|
||||||
|
|
||||||
|
Lotus Notes has several issues with widely accepted HTML standards because of its own proprietary rich-text formatting. Here are some of these issues that can be found if you search the web:
|
||||||
|
- COLSPANS. These are attributes of table cells to tell the email client or the browser how many columns they span over. Lotus Notes cannot seem to understand this and we might need to just use multiple tables as a workaround.
|
||||||
|
- CENTER ALIGNMENT. Using `<TABLE ALIGN="CENTER">` worked great in Lotus Notes 6.5.3. But not at all in Lotus Notes 6.5.4. Also, `<CENTER>` tags around the tables didn’t work in 6.5.4 either. We can make things simpler as a workaround so they'd look okay as left-aligned in 6.5.4.
|
||||||
|
|
||||||
|
|
||||||
|
## Other Possible Workarounds and Good Practice
|
||||||
|
Here are some helpful tips in designing HTML emails for Lotus Notes:
|
||||||
|
- Use Mail Chimp's `*|ARCHIVE|*` merge tag to automatically generate a link to the online version of your MailChimp campaign. Subscribers can click this link to view your campaign directly in their web browsers.
|
||||||
|
- Allow your subscribers to choose which version of your campaign they want to receive when they sign up to your list: HTML, Text, or Mobile. If they have difficulty viewing HTML email, they can select the Text option instead.
|
||||||
|
- Keep your designs simple so that if they fail, your email is still readable.
|
||||||
|
|
||||||
|
## Suggestion on Campaign Creation Workflow
|
||||||
|
The WYSIWYG tool I mentioned earlier, is one that is provided by Mailchimp. This tool is great. I recommend it... if your readers' does not use Lotus Notes.
|
||||||
|
|
||||||
|
Mailchimp’s Drag and Drop tool for creating Email Campaigns generates HTML code that tries to make the campaign look good in many popular email programs. Unfortunately, Lotus Notes does not play well with most of these programs’ HTML rendering standards.
|
||||||
|
|
||||||
|
To make sure the Campaign will look good in Lotus Notes, we have to clean up the code that Mailchimp generates.
|
||||||
|
|
||||||
|
Follow these steps to clean up the HTML email design:
|
||||||
|
- Save Campaign as Template. To do this, Go to Campaigns page, Edit your Campaign, then click “Save as Template”. This is necessary because Mailchimp only allows Exporting to HTML from Templates.
|
||||||
|
- Export Template to HTML. Once the Campaign is saved as a Template you can now export it into HTML code that we can clean up. Go to Templates page, click the dropdown button beside the Edit button on the Template, then select “Export as HTML”
|
||||||
|
- Clean Up the HTML Code. Once you select the “Export as HTML” option, a file will be downloaded to your computer. Open this file in a Text Editor then do the following:
|
||||||
|
- Add Lotus Notes specific elements.
|
||||||
|
- In the HTML code you downloaded, you will most probably find a line with this code: `<!--[if gte mso 9]>` … replace all occurrence with `<!--[if (gte mso 9)|(IE)]>`
|
||||||
|
- Lotus notes Microsoft’s Internet Explorer (IE) to render HTML emails.
|
||||||
|
- Remove style rules intended for smartphones.
|
||||||
|
- In the HTML code, if you find @media{ … } rules inside the `<style> ... </style>` tags, you may remove it.
|
||||||
|
- These @media{ ... } rules are intended for smartphones and may not play well with Lotus Notes.
|
||||||
|
- Make CSS style rules inline. As much as possible, apply style rules found inside the `<style> ... </style>` tags as inline styles to the elements. As of writing this blog, Mailchimp has an automatic inline feature to do this. Just check the checkbox in the design settings and Mailchimp will automatically do this for you.
|
||||||
|
- Upload the Clean HTML Code into Mailchimp. Once you have done the cleaning up steps, you can go back to Mailchimp then create a Campaign using the new HTML Email. Create a Campain then choose HTML Email, then paste the code from the Text Editor you used.
|
||||||
|
- Test the how the HTML Email looks. Mailchimp provides a paid feature called Inbox Preview to see how the HTML Email renders in several popular Email programs. If you are on a free account, you can use Preview Mode instead. Another option is opening an account in Litmus (http://litmus.com) which gives you screenshots of the HTML Email rendered in various Email Programs (including versions of Lotus Notes).
|
||||||
|
|
||||||
22
_posts/Opensource/0.intro.md
Normal file
22
_posts/Opensource/0.intro.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# Open Source - Where to start?
|
||||||
|
|
||||||
|
I have been using open source since college, studying Computer Science, and I have released a number of projects over at [Github](http://github.com/ayoayco). But up until now, I have not contributed in any other open source project (except maybe that one time in college where we were required to do so...)
|
||||||
|
|
||||||
|
In this note I will document my journey into contributing to the open source community.
|
||||||
|
|
||||||
|
|
||||||
|
## Wet your apetite
|
||||||
|
|
||||||
|
Here is a list of communities/places/actions I have found over the web where I get my interest in open source all fired up.
|
||||||
|
|
||||||
|
1. [Reddit's r/opensource](https://www.reddit.com/r/opensource/) - To see what's the latest in the community.
|
||||||
|
2. [Github Trending](https://play.google.com/store/apps/details?id=com.rubik.github) - To browse through interesting repositories in Github.
|
||||||
|
3. [Stackoverflow](https://stackoverflow.com) - To see what other developers are confused about... and sometimes to answer questions.
|
||||||
|
4. Open an account at [Github](https://github.com).
|
||||||
|
5. Read the [The Conscience of a Hacker](http://www.phrack.org/issues/7/3.html)
|
||||||
|
6. Read on [How To Become A Hacker](http://catb.org/%7Eesr/faqs/hacker-howto.html)
|
||||||
|
7. Install and play with a linux distribution (Ubuntu is a good starting point for me) [Ubuntu Homepage](https://ubuntu.com)
|
||||||
|
8. Publish [Notes](https://github.com/ayoayco/notes) at Github
|
||||||
|
|
||||||
|
-- To be Continued --
|
||||||
|
|
||||||
20
_posts/Opensource/1.github.md
Normal file
20
_posts/Opensource/1.github.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
# Github
|
||||||
|
|
||||||
|
[Github](https://github.com) is a website for opensource communities. It is sort of the place in the Web where developers get together to work on projects. Hence, I find it the best place to learn how to contribute to/start an opensource project or even just to see and learn how other developers code and communicate with each other to resolve issues. To cut the long story short, Github's a good place to learn.
|
||||||
|
|
||||||
|
## Things I have learned over at github
|
||||||
|
|
||||||
|
Here, I list some significant things I have learned over the time I have lurked around Github.
|
||||||
|
|
||||||
|
1. Projects, the good ones, attract developers with the same interests. Communities get born around good projects. Once the project becomes big enough, Governing bodies with leaders rise up to ensure the direction of the project is properly set.
|
||||||
|
1. There are documents that are crucial to the health of a good project. The leaders of the community/contributors need to work on these:
|
||||||
|
1. README.md - this document contains necessary information regarding the project for everyone interested in it.
|
||||||
|
2. CONTRIBUTING.md - this document contains the steps anyone who wants to contribute need to take and the principles they need to understand.
|
||||||
|
3. CODE\_OF\_CONDUCT.md - this document contains the pledge of everyone in the community, usually promising to be welcoming and nurturing, protecting everyone from harassment or abuse, and promoting constructive attitude.
|
||||||
|
4. LICENSE - this document takes care of legal matters (I still need to read more regarding this)
|
||||||
|
1. Essentially, anyone should be able to contribute. Opensource!
|
||||||
|
1. But before you do get to contribute to the source code, usually, projects require the code you are *merging* in to the master branch to be reviewed by other contributors. This ensures that no one messes up the code without another contributor allowing it. :)
|
||||||
|
1. If not contributing code, you may contribute by reporting an issue.
|
||||||
|
1. The UNIX project pioneered the idea that opensource projects must stay flexible to developers that want to change it. This means that I can take a projects code, and then hack away as my heart desires. In this sense, anyone is free to change the original project's code in anyway they want. However, any code that will be requested to merge to the original project's master branch should conform to the project's set standards such as Coding Style and Project Roadmap.
|
||||||
|
1. Github *Issues* is the tracker for every task or discussions related to the project. Commits could directly reference an issue by having the issue number in the commit message. For example, the commit message "Fixes #1 - check for undefined parameters" will reference issue #1.
|
||||||
|
1. A commit that refer to an issue with the word "Fixes", "Fixed", "Fix", "Closes", "Closed", or "Close" will close the issue when merged to the master branch.
|
||||||
28
_posts/Programming/2010-01-05-good-practice.md
Normal file
28
_posts/Programming/2010-01-05-good-practice.md
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
---
|
||||||
|
title: "Good Programming Practices"
|
||||||
|
permalink: "/:title"
|
||||||
|
---
|
||||||
|
I want to talk about programming and some practices that, I think, can make a programmer more efficient when observed. First, let's talk about what programming is.
|
||||||
|
|
||||||
|
### Programming as Problem Solving
|
||||||
|
- Programming is basically writing down code to instruct computers how to solve problems.
|
||||||
|
- This means that there may be as many ways to code a program as there are ways to solve a problem.
|
||||||
|
- A particular solution may be correct, but it could also be a bad/inefficient solution.
|
||||||
|
- Never settle for correct but inefficient solutions.
|
||||||
|
- A good programmer does not only solve problems... he does it well/efficiently.
|
||||||
|
- To do this, one must observe good programming practices.
|
||||||
|
|
||||||
|
### Good Programming Practices
|
||||||
|
Here are some points I try to observe while programming:
|
||||||
|
1. Think of the most appropriate data structures for the problem at hand. Don't do everything in arrays. Remember that there are other ways to represent your models than the common, out-of-the-box data types (i.e., linked lists, trees, heaps, queues, etc.)
|
||||||
|
2. Think of the most efficient algorithm.
|
||||||
|
3. It does not hurt to lint your code. Code linting is arguably the easiest and fastest thing you can do to make sure your code is clean. Learn how to configure code linting so that it becomes natural to your programming practice. Linting detects problematic patterns in your code that might result into bugs and even some lines that are not following a certain style guide.
|
||||||
|
4. Follow a style guide.
|
||||||
|
5. Writing code is very much like writing literature in the sense that you get better at it as you read and read and read good code from experienced programmers. Read code by experienced programmers. If you don't have access to these experienced programmers in your immediate circle, you can always go to [Github](https://github.com).
|
||||||
|
6. Make it easier for others to debug / check your code. Make it as human readable as possible, without sacrificing code efficiency and simplicity.
|
||||||
|
7. Code [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Meaning, Don't Repeat Yourself. Make new methods / functions for lines of code you frequently repeat, make your code design moduler for reusability. DRY coding is the opposite of WET conding which means "Write Everything Twice" or "We Enjoy Typing" or "Waste Everyone's Time" ... you get the idea.
|
||||||
|
8. Peer Programming or just having your code reviewed by other programmers is also a good practice.
|
||||||
|
|
||||||
|
### Further Readings for Good Programming Practices
|
||||||
|
|
||||||
|
1. [A Pragmatic Quick Reference](https://blog.programminghorror.com/a-pragmatic-quick-reference/) - a good summary of the book [The Pragmatic Programmer: From Journeyman to Master](https://www.amazon.com/exec/obidos/ASIN/020161622X/codihorr-20)
|
||||||
37
_posts/Programming/basics.md
Normal file
37
_posts/Programming/basics.md
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
---
|
||||||
|
title: "Programming Basics"
|
||||||
|
permalink: "/programming-basics"
|
||||||
|
---
|
||||||
|
## Table of Contents
|
||||||
|
1. [Choosing Your First Programming Language ](#1-choosing-your-first-programming-language)
|
||||||
|
2. [Hello World](#2-hello-world)
|
||||||
|
3. [Inputs, Outputs](#3-inputs-outputs)
|
||||||
|
4. [Loops](#4-loops)
|
||||||
|
5. *...to be continued*
|
||||||
|
|
||||||
|
|
||||||
|
## 1. Choosing Your First Programming Language
|
||||||
|
When learning programming for the fist time, I believe it is important to decide what programming language you will study first. There is quite a lot of programming languages out there, but not all are friendly for beginners. So far, there are two programming languages that rise above the rest when it comes to friendliness to first-time programmers: C and Python.
|
||||||
|
|
||||||
|
The main difference between the two as options for learning programming could be likened to your options when learning to drive cars--would you like to try out an automatic or a manual?
|
||||||
|
|
||||||
|
Learning in Python is much like learning how to drive a car with an automatic transmission. You don't have to mind much of the what's happening under the hood, and what's happening is often abstracted to you. For an example, you don't have to worry about memory allocation. Whereas in C, you have more control: you're driving a manual.
|
||||||
|
|
||||||
|
I learned programming for the first time in C. This, I believe, made it easier for me to learn other languages and understand how the computer works. For this reason, I find Python a little lacking when it comes to control. But I also understand Python is easier to learn and use for beginners who just wants to start coding and doesn't really plan to dive deep into computers. This is why, I think, many tutorials and classes for beginners use and recommend Python.
|
||||||
|
|
||||||
|
If you have a particular problem you want to solve, you will have to consider other factors in choosing your programming language. Remember, I'm not talking about which language is more powerful (though I would still pick C). Rather, I'm just bringing up the difference of the two languages when it comes to friendliness for first-time programmers.
|
||||||
|
|
||||||
|
In this note, I will be using C for my examples for the basic programming concepts I will discuss.
|
||||||
|
|
||||||
|
## 2. Hello World
|
||||||
|
```c
|
||||||
|
#include <stdio.h>
|
||||||
|
|
||||||
|
int main(void){
|
||||||
|
pritf("Hello world!");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. Inputs, Outputs
|
||||||
|
## 4. Loops
|
||||||
|
|
||||||
5
_posts/Programming/linting.md
Normal file
5
_posts/Programming/linting.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Code Linting
|
||||||
|
|
||||||
|
Code linting is basically using a program (i.e., "linter") to check your code for problematic patterns that may cause bugs or does not conform to your preferred style guide.
|
||||||
|
|
||||||
|
|
||||||
5
_posts/WebDev/Angular/0.intro.md
Normal file
5
_posts/WebDev/Angular/0.intro.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Angular Notes
|
||||||
|
|
||||||
|
[Angular](https://angular.io) is a framework for building frontend client apps for the web and mobile. It is "Opinionated" in the sense that it *forces* you to build your app in a way that is arguably strict.
|
||||||
|
|
||||||
|
Angular's version 2 and above radically changed the implementation of the first version, AngularJS. It steers away from the popular dev paradigm MVC and calls its framework MV\* (where * stands for *whatever*, i.e., Model-View-Whatever). This means that you can handle the Models in virtually whatever way you want.
|
||||||
31
_posts/WebDev/Angular/components.md
Normal file
31
_posts/WebDev/Angular/components.md
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
# Angular Components
|
||||||
|
|
||||||
|
Angular Components are sort of the puzzle pieces that will make the whole. As you design your angular app, you will find the different parts that you will need to work on, and these parts will directly translate into Angular Components.
|
||||||
|
|
||||||
|
Here's a template for an empty component called SideBarComponent:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-sidebar',
|
||||||
|
templateURL: './app.sidebar.component.html',
|
||||||
|
styleURLs: ['./app.sidebar.component.css']
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AppSidebarComponent {
|
||||||
|
|
||||||
|
constructor(){}
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Let's break this code down and discuss it line-by-line.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
```
|
||||||
|
The first line imports other "parts" from other libraries/module. This "part" is technically a JavaScript class which could be component, service, or pipe, or maybe another JavaScript module from an external Node app. This makes it easy to reuse code by other developers or something you did for a previous project.
|
||||||
|
|
||||||
|
*to be continued*
|
||||||
|
|
||||||
68
_posts/WebDev/JavaScript/tips-and-tricks.md
Normal file
68
_posts/WebDev/JavaScript/tips-and-tricks.md
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
# JavaScript Random Tips and Tricks
|
||||||
|
|
||||||
|
Here's a list of some JavaScript techniques I've learned so far.
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
- [Notation](#notation)
|
||||||
|
- [Tips and Tricks](#tips-and-tricks)
|
||||||
|
1. [Exclamation Conversion to Boolean](#exclamation-conversion-to-boolean)
|
||||||
|
2. [Computing for Various Widths](#computing-for-various-widths)
|
||||||
|
3. [Quotes Conversion to String](#quotes-conversion-to-string)
|
||||||
|
|
||||||
|
## Notation
|
||||||
|
|
||||||
|
`// ->` is used to show the result of an expression. For example:
|
||||||
|
|
||||||
|
```js
|
||||||
|
1 + 1 // -> 2
|
||||||
|
```
|
||||||
|
|
||||||
|
`// >` means the result of `console.log` or another output. For example:
|
||||||
|
|
||||||
|
```js
|
||||||
|
console.log('hello, world!') // > hello, world!
|
||||||
|
```
|
||||||
|
|
||||||
|
`//` is just a comment used for explanations. Example:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// Assigning a function to foo constant
|
||||||
|
const foo = function () {}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tips and Tricks
|
||||||
|
### Exclammation Conversion to Boolean
|
||||||
|
Exclamation points can be used to convert any data type into boolean.
|
||||||
|
|
||||||
|
```js
|
||||||
|
'random string' // -> 'random string'
|
||||||
|
!'random string' // -> false
|
||||||
|
!!'random strign' // -> true
|
||||||
|
```
|
||||||
|
|
||||||
|
### Computing for Various Widths
|
||||||
|
Widths can be a pain when you don't know what you're doing. Fortunately, jQuery offers methods we can use for this. The following computes for the border, padding, and margin of an image element:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var borderWidth = $('img').outerWidth() - $('img').innerWidth();
|
||||||
|
var paddingWidth = $('img').innerWidth() - $('img').width();
|
||||||
|
var marginWidth = $('img').outerWidth(true) - $('img').outerWidth();
|
||||||
|
|
||||||
|
var formattedBord = borderWidth + 'px';
|
||||||
|
var formattedPadd = paddingWidth + 'px';
|
||||||
|
var formattedMarg = marginWidth + 'px';
|
||||||
|
```
|
||||||
|
|
||||||
|
### Quotes Conversion to String
|
||||||
|
A pair of single quotes (`''`) and double quotes (`""`) can be used to convert any data type into string by adding them:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var integer = 123;
|
||||||
|
var bool = true;
|
||||||
|
var und = undefined;
|
||||||
|
|
||||||
|
'' + integer // -> '123'
|
||||||
|
"" + bool // -> 'true'
|
||||||
|
"" + und // -> 'undefined'
|
||||||
|
```
|
||||||
|
|
||||||
11
_posts/WebDev/web-service.md
Normal file
11
_posts/WebDev/web-service.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
# Web Services
|
||||||
|
|
||||||
|
Web services make the front-end / back-end architecture possible, where most (if not all) business logic are separated from rendering the view. Here comes two popular types of Web APIs: REST and SOAP. REST, if I understand it correctly, can serve with any prototype such as HTTP or SMTP; while SOAP *is* a prototype particularly for XML-based exchange.
|
||||||
|
|
||||||
|
## REST APIs
|
||||||
|
|
||||||
|
REST APIs have become popular with the rise of JavaScript because it can data in JSON format, which is built in / native in JS, among other reasons. Many of today's most popular web applications provide Back-end API endpoints to provide integration capabilities for programmers.
|
||||||
|
|
||||||
|
## Micro-Services
|
||||||
|
|
||||||
|
Micro-services, in concept, are web services that are built independently to have virtually no effect on other features in the Web Application. Technologies should be independent from other services such that it is able to run fully whether the other services are running or not.
|
||||||
11
about.md
Normal file
11
about.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
layout: page
|
||||||
|
title: About
|
||||||
|
permalink: /about/
|
||||||
|
---
|
||||||
|
|
||||||
|
Hi! I'm Ayo, a software engineer by profession who also occasionally *delves* into some art, music, literature...
|
||||||
|
|
||||||
|
I live in the Philippines with my wife, Jen, and our little boy, Kahel, with whom I often go travel around to take pictures, eat local delicacies, and make lots of fun memories.
|
||||||
|
|
||||||
|
Here, I write notes on technology and life as I experience them hoping to help, if not inspire, others to live more efficient and happier lives...
|
||||||
190
assets/main.scss
Normal file
190
assets/main.scss
Normal file
|
|
@ -0,0 +1,190 @@
|
||||||
|
---
|
||||||
|
# Only the main Sass file needs front matter (the dashes are enough)
|
||||||
|
---
|
||||||
|
|
||||||
|
@import "minima";
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 50px;
|
||||||
|
color: white !important;
|
||||||
|
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
|
||||||
|
0px 8px 13px rgba(0,0,0,0.1),
|
||||||
|
0px 18px 23px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
background-color: white;
|
||||||
|
width: 70%;
|
||||||
|
margin: 30px auto !important;
|
||||||
|
background-color: #444 !important;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||||
|
-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||||
|
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav .page-link.current {
|
||||||
|
background-color: #fc0;
|
||||||
|
color: #222;
|
||||||
|
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.5);
|
||||||
|
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),0 1px 5px rgba(0,0,0,0.5);
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 5px rgba(0,0,0,0.5);
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited, .site-nav .page-link {
|
||||||
|
color: #fc0;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: all 0.25s;
|
||||||
|
-moz-transition: all 0.25s;
|
||||||
|
-o-transition: all 0.25s;
|
||||||
|
transition: all 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.site-nav {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav .page-link:hover {
|
||||||
|
color: #fc0;
|
||||||
|
background-color: #252525;
|
||||||
|
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1);
|
||||||
|
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.1);
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1);
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav .page-link {
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 0.75em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
text-shadow: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
-webkit-transition: all 0.25s;
|
||||||
|
-moz-transition: all 0.25s;
|
||||||
|
-o-transition: all 0.25s;
|
||||||
|
transition: all 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.post-link:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
a.post-link, h1.post-title {
|
||||||
|
color: #ddd;
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
|
font-size: 2em;
|
||||||
|
-webkit-margin-after: 0.67em;
|
||||||
|
-webkit-margin-start: 0px;
|
||||||
|
-webkit-margin-end: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.post-title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #f90;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-list, .contact-list, .social-media-list {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-col-wrapper {
|
||||||
|
color: #ddd
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header, .site-footer {
|
||||||
|
background: #2b2b2b;
|
||||||
|
border: 0px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-desc {
|
||||||
|
top: 0px;
|
||||||
|
color: #efefef;
|
||||||
|
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
|
||||||
|
0px 8px 13px rgba(0,0,0,0.1),
|
||||||
|
0px 18px 23px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-desc-wrapper {
|
||||||
|
float:left;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title-wrapper {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title-desc-wrapper {
|
||||||
|
float: left;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**/
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font: 300 21px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
color: #ddd;
|
||||||
|
background-color: #333;
|
||||||
|
-webkit-box-shadow: inset 0 3px 30px rgba(0,0,0,0.3);
|
||||||
|
-moz-box-shadow: inset 0 3px 30px rgba(0,0,0,0.3);
|
||||||
|
box-shadow: inset 0 3px 30px rgba(0,0,0,0.3);
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
||||||
|
-webkit-font-feature-settings: "kern" 1;
|
||||||
|
-moz-font-feature-settings: "kern" 1;
|
||||||
|
-o-font-feature-settings: "kern" 1;
|
||||||
|
font-feature-settings: "kern" 1;
|
||||||
|
font-kerning: normal;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**/
|
||||||
|
.text-js{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.cursor{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
right: -5px;
|
||||||
|
width: 3px;
|
||||||
|
/* Change colour of Cursor Here */
|
||||||
|
background-color: white;
|
||||||
|
z-index: 1;
|
||||||
|
animation: flash 0.5s none infinite alternate;
|
||||||
|
}
|
||||||
|
@keyframes flash{
|
||||||
|
0%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
43
assets/type.js
Normal file
43
assets/type.js
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
// DISCLAIMER: This function does require jQuery. I've used it here because the project I'm building this for already uses jQuery, so I thought why not. It can be modified quite simply to be done in raw JavaScript. Just thought I'd let you know.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// This is the funtion you need to copy
|
||||||
|
// Copy from line 9 to 34
|
||||||
|
|
||||||
|
function autoType(elementClass, typingSpeed){
|
||||||
|
var thhis = $(elementClass);
|
||||||
|
thhis.css({
|
||||||
|
"position": "relative",
|
||||||
|
"display": "inline-block"
|
||||||
|
});
|
||||||
|
thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
|
||||||
|
thhis = thhis.find(".text-js");
|
||||||
|
var text = thhis.text().trim().split('');
|
||||||
|
var amntOfChars = text.length;
|
||||||
|
var newString = "";
|
||||||
|
thhis.text("|");
|
||||||
|
setTimeout(function(){
|
||||||
|
thhis.css("opacity",1);
|
||||||
|
thhis.prev().removeAttr("style");
|
||||||
|
thhis.text("");
|
||||||
|
for(var i = 0; i < amntOfChars; i++){
|
||||||
|
(function(i,char){
|
||||||
|
setTimeout(function() {
|
||||||
|
newString += char;
|
||||||
|
thhis.text(newString);
|
||||||
|
},i*typingSpeed);
|
||||||
|
})(i+1,text[i]);
|
||||||
|
}
|
||||||
|
},1500);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
// Now to start autoTyping just call the autoType function with the
|
||||||
|
// class of outer div
|
||||||
|
// The second paramter is the speed between each letter is typed.
|
||||||
|
autoType(".type-js",200);
|
||||||
|
|
||||||
|
console.log('dom loaded!');
|
||||||
|
});
|
||||||
7
contact-me.md
Normal file
7
contact-me.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
layout: page
|
||||||
|
title: "Contact Me"
|
||||||
|
permalink: /contact-me/
|
||||||
|
---
|
||||||
|
|
||||||
|
You can email me: [mail@ayoayco.com](mailto:mail@ayoayco.com)
|
||||||
6
index.md
Normal file
6
index.md
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
# You don't need to edit this file, it's empty on purpose.
|
||||||
|
# Edit theme's home layout instead if you wanna make some changes
|
||||||
|
# See: https://jekyllrb.com/docs/themes/#overriding-theme-defaults
|
||||||
|
layout: "home"
|
||||||
|
---
|
||||||
Loading…
Reference in a new issue