--------------------------------------------------------------------------------
/_site/_templates/sidebar.njk:
--------------------------------------------------------------------------------
1 |
2 | {% set defaultURL = '' %}{% if item.data.links[0] %}{% for name, link in item.data.links[0] %}{% set defaultURL = link %}{% endfor %}{% else %}{% set defaultURL = item.url %}{% endif %}
3 |
4 | {% if r/external/g.test(item.data.tags) or r/course/g.test(item.data.tags) %}{% set external = true %}{% endif %}
5 | {% if item.data.thumb %}
6 |
7 | {% endif %}
8 |
9 | {{item.data.title}}{% if external %}{% endif %}
10 |
12 | {%- for item in postslist %}
13 | {% include "items.njk" %}
14 | {% endfor -%}
15 |
16 |
17 |
Latest Courses
18 | {% set itemList = courselist %}
19 | {% for item in itemList %}
20 | {% include "sidebar.njk" %}
21 | {% endfor -%}
22 |
23 |
--------------------------------------------------------------------------------
/_site/js/data.json.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: /js/data.json
3 | ---
4 | [{%- for item in collections.searchable %}{% set defaultURL = '' %}{% if item.data.links[0] %}{% for name, link in item.data.links[0] %}{% set defaultURL = link %}{% endfor %}{% else %}{% set defaultURL = item.url %}{% endif %}{
5 | "thumbnail": "{{item.data.thumb}}",
6 | "url": "{{defaultURL}}",
7 | {%- for tag in item.data.tags %}{% if tag == 'course' %}
8 | "icon": "",{% endif %}{% if tag == 'post' %}
9 | "icon": "",{% endif %}{%- endfor %}
10 | "title": "{{ item.data.title }}",
11 | "date" : "{{item.date | simpleDate | safe}}",
12 | "summary" : "{{ item.data.summary | escape | safe }}",
13 | "tags" : "{{ item.data.tags | safe }}"
14 | }{% if not loop.last %},{% endif %}{%- endfor %}]
--------------------------------------------------------------------------------
/_site/posts/2015-02-07-chrome-developer-extensions.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.njk
3 | title: "Chrome Developer Extensions for Designers/Developers"
4 | summary: "Google Chrome Extensions can help you take care of certain tasks quickly. Here's a quick review of some of my favorite extensions for web design and development."
5 | hero: /images/posts/chromeextensions.png
6 | thumb: /images/posts/chromeextensions_tn.png
7 | tags:
8 | - post
9 | - web designer
10 | - web developer
11 | ---
12 |
13 | ## Responsive Inspector
14 |
15 | [](https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim)
16 | Awesome for responsive design projects. This extension automatically analyzes a current website and shows you the media query breakpoints on that page in a nice visual display.
17 |
18 |
19 |
20 | Clicking on the bars changes your window to that size and lets you see how the layout of your site is affected by the new size. When you don't know or aren't sure what the media query points are or just don't remember, this is the best way to quickly peek into a site's layouts.
21 |
22 | Although the Chrome Developer tools now offer their own media query inspector, it requires a page reload and resizes your page. Plus it takes a lot of clicks to get to the right place, so sometimes, simpler is better and this extension does the job quickly.
23 |
24 | - [ Get it on Chrome Store](https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim)
25 | - [ Developer site](http://outof.me/responsive-inspector/)
26 |
27 | ---
28 |
29 | ## What Font?
30 |
31 | [](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)
32 | When you're navigating through different sites to take a look at font combinations, digging through the different DevTools screens to get to a font is too cumbersome. This extension makes it easy to identify fonts on sites by simply rolling your mouse over them. Clicking gives you more information about the font.
33 |
34 | - [ Get it on Chrome Store](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)
35 | - [ Developer site](http://chengyinliu.com/whatfont.html)
36 |
37 | ---
38 |
39 | ## Validator
40 |
41 | [](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)
42 | Alghough validation is something that can be handled in many places, this extension gives you one click access to the W3C Validator. It will help you quickly find errors which can potentially affect your scripts or CSS.
43 |
44 | - [ Get it on Chrome Store](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)
45 | - [ Developer site](http://robertnyman.com/html-validator/)
46 |
47 | ---
48 |
49 | ##Clear Cache
50 | [](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en&gl=US)
51 | To test some applications properly, it's often necessary to clear things like cookies and site caches, but the process for doing so in Chrome takes a long time. This extension is a one click solution to quickly removing your site cache...set up some defaults and you're ready to go. Hit the button and the defaults will be applied immediately without confirmation (so be careful with this).
52 |
53 | - [ Get it on Chrome Store](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en&gl=US)
54 | - [ Developer site](http://benjaminbojko.com/work/side-projects)
55 |
--------------------------------------------------------------------------------
/_site/posts/2015-02-11-centered-navigation-table-css.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.njk
3 | title: "Horizontally Centered Navigation Menu with CSS"
4 | summary: "Getting a menu to center horizontally is surprisingly hard, especially when you're using CSS lists. In this tutorial, I'll show you how to change the display element to pretend you're centering a table, which is easy."
5 | hero: /images/posts/horizontally.png
6 | thumb: /images/posts/horizontally_tn.png
7 | resources:
8 | - video: https://www.youtube.com/watch?v=RT64aSNXnzY
9 | - code: http://jsbin.com/popalu/12/edit?html,css,output
10 | tags:
11 | - post
12 | - web design
13 | - css
14 | ---
15 |
16 |
17 |
18 |
19 |
20 | One of the first things you try to do when you learn CSS is to create a centered navigation menu, but it's not as straightforward as it should be. You'd think that there was some sort of center command and in the future, something like flexbox will make it a lot easier. But even flexbox is no magic bullet with poor browser support in older browsers and frankly, a somewhat confusing syntax.
21 |
22 | My current approach is to do something that ends up looking like this.
23 |
24 | JS Bin
25 |
26 | ## The Trick
27 |
28 | Since you can just read the code above or watch the video, I'll give you the highlights so you can catch the critical part.
29 |
30 | ```html
31 |
41 | ```
42 |
43 | I've simplified it a bit here for clarity. The key extra item here is the addition of a wrapper div with a class navwrapper. In order to get this to work you'll need this extra piece of HTML.
44 |
45 | ```css
46 | .sitemenu {
47 | width: 100%;
48 | background: #a2cea5;
49 | font-family: "Droid Sans", serif;
50 | border-top: 8px solid #126758;
51 | }
52 | ```
53 |
54 | ##Set the width of main container
55 | The main thing here is the `width: 100%;` on the nav with the sitemenu class. You should have a container here that makes the width of the navigation container go full width. If you examine the code (by clicking on the HTML tab in the code window).
56 |
57 | ## Enter the table style
58 |
59 | next, you need to have another container inside the first one that sets its display to show up as if it were a table.
60 |
61 | ```css
62 | .sitemenu > .navwrapper {
63 | display: table;
64 | margin: 0 auto;
65 | }
66 | ```
67 |
68 | The code that actually centers the table is the `margin: 0 auto;` line. This item will be the width of the menus, regardless of their size. Normally to center an element, you have to know its width, but setting the display to table here bypasses that.
69 |
70 | Honestly, the rest is just window dressing and pretty easy to follow from the code, so take a look at the jsbin to learn more.
71 |
--------------------------------------------------------------------------------
/_site/posts/2015-03-03-creating-SVG-graphics.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.njk
3 | title: "Getting started creating SVG Graphics"
4 | summary: "A lot of data visualizations use the SVG format to create graphics, so in this article, we'll use SVG to create some basic shapes and graphics. Understanding how the format works will help you when you're using SVG based libraries and frameworks."
5 | hero: /images/posts/svggraphics.png
6 | thumb: /images/posts/svggraphics_tn.png
7 | tags:
8 | - post
9 | - data visualization
10 | - svg
11 | ---
12 |
13 | ## SVG Graphic Fundamentals
14 |
15 | Visualization tools like D3.js or C3.js use the SVG (Scalable Vector Graphics) format by default, so it's important to understand how that format uses XML style commands to generate graphics. Let's dive straight into some code.
16 |
17 | JS Bin
18 |
19 | SVG is pretty easy to read and if you know HTML it should be even easier. An SVG graphic begins and ends with the `` tags like many other HTML elements and you can add different attributes like the width and height of the graphic. As a matter of fact, the very first thing you do with SVG is specify the canvas that the rest of the graphics will be using.
20 |
21 | Just like with any other HTML tag we can add a style attribute and pass it common CSS commands, here we've set the color of the background to a bluish medium gray.
22 |
23 | Inside the SVG tag, you can create additional elements that generate graphics. Here's a comprehensive reference to all of the SVG elements that you can create. Common elements (with examples) include:
24 |
25 | - Rectangle
26 | - Circle
27 | - Ellipse
28 | - Line
29 | - Paths
30 | - Polygon
31 | - Polyline
32 |
33 | |`` | Paths |
34 |
35 | - Text
36 |
37 | If you come from an HTML background, there are some important things to note about this code. First, you'll notice that the tags use a self closing style when they are single tags. So instead of writing something like `` you can write something like ` />`. SGV looks like HTML, but it isn't exactly HTML, so an XHTML style is used for the tags. Although most browsers will be forgiving on some traditional XML rules like capitalization, punctuation and quotes around attributes, the format itself is more strict.
38 |
39 | For example, technically, the `
10 |
11 |
12 |