Commit 24ed3191 authored by Ben Hong's avatar Ben Hong

Merge branch 'vuepress-migration' into 'master'

Vuepress migration

See merge request !1
parents ff43038a 5993c752
# BenCodeZen
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table of Contents
- [Dependencies](#dependencies)
- [Setup](#setup)
- [Get in Touch](#get-in-touch)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## Dependencies
- [GatsbyJS](https://www.gatsbyjs.org/) - Static site generator based on ReactJS
- [VuePress](https://vuepress.vuejs.org/) - Static site generator based with a [Vue.js](https://www.vuejs.org) powered theming system
- [Netlify](https://www.netlify.com/) - Continuous deployment w/ git hooks
- [DocToc](https://github.com/thlorenz/doctoc) - Table of contents generator for markdown files
## Setup
......
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
import { headerFontFamily } from '../utils/variables'
import styles from '../styles/button.module.css'
import postStyles from '../styles/blog-post.module.css'
const BlogPostPreview = ({ node }) => {
return (
<ArticleContainer>
<PublishDate>{node.frontmatter.date}</PublishDate>
<Title>
<Link
to={node.fields.slug}
style={{ boxShadow: '0 0', color: '#222' }}
>
{node.frontmatter.title}
</Link>
</Title>
<p>{node.excerpt}</p>
<Link
to={node.fields.slug}
className={styles.button}
style={{ fontFamily: headerFontFamily }}
>
Read More >
</Link>
</ArticleContainer>
)
}
const ArticleContainer = styled.article`margin-bottom: 3.5rem;`
const PublishDate = styled.time`
display: block;
margin-bottom: 0.5rem;
color: #31688f;
font-size: 0.8rem;
font-weight: 600;
font-family: ${headerFontFamily};
line-height: 1;
text-transform: uppercase;
`
const Title = styled.h3`
margin-top: 0;
margin-bottom: 0.75rem;
line-height: 1.4;
`
export default BlogPostPreview
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
const Footer = props => {
return (
<FooterContainer>
<p style={{ marginBottom: 0, lineHeight: 1 }}>
&copy; Ben Hong 2018
</p>
<p>
Got a request or bug?{' '}
<a href="https://github.com/bencodezen/bencodezen/issues">
Submit it here!
</a>
</p>
</FooterContainer>
)
}
const FooterContainer = styled.footer`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0.8rem;
`
export default Footer
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
import styles from '../styles/logo.module.css'
const platforms = [
{
name: 'Twitter',
url: 'https://www.twitter.com/bencodezen'
},
{
name: 'CodePen',
url: 'https://www.codepen.io/bencodezen'
},
{
name: 'GitHub',
url: 'https://www.github.com/bencodezen'
},
{
name: 'StackOverflow',
url: 'https://stackoverflow.com/users/5100020/bencodezen'
}
]
const renderPlatforms = list => {
return list.map(item => {
return (
<SocialMediaItem key={`header-${item.name}`}>
<SocialMediaLink href={item.url}>{item.name}</SocialMediaLink>
</SocialMediaItem>
)
})
}
const Header = props => {
return (
<HeaderContainer>
<Link to="/" className={styles.logo}>
<Logo>BenCodeZen</Logo>
</Link>
<SocialMediaList>{renderPlatforms(platforms)}</SocialMediaList>
</HeaderContainer>
)
}
const HeaderContainer = styled.header`
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
background-color: #2a3f4e;
`
const Logo = styled.h1`
margin: 0;
font-size: 14px;
color: #fff;
text-transform: uppercase;
`
const SocialMediaItem = styled.li`
margin: 0;
display: flex;
padding-right: 1rem;
&:hover {
text-decoration: underline;
}
&:last-child {
padding-right: 0;
}
`
const SocialMediaLink = styled.a`
color: #fff;
font-size: 13px;
box-shadow: 0 0;
`
const SocialMediaList = styled.ul`
margin: 0;
list-style-type: none;
display: flex;
`
export default Header
import React from 'react'
export default ({ data }) => {
console.log(data)
return (
<div>
<h1>Amazing Pandas Eating Things</h1>
<h4>{data.allMarkdownRemark.totalCount} Posts</h4>
{data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.id}>
<h3>
{node.frontmatter.title}{' '}
<span> {node.frontmatter.date}</span>
</h3>
<p>{node.excerpt}</p>
</div>
))}
</div>
)
}
export const query = graphql`
query IndexQuery {
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
excerpt
}
}
}
}
`
import React from 'react'
import Link from 'gatsby-link'
import BlogPostPreview from '../components/BlogPostPreview'
import Footer from '../components/Footer'
import Header from '../components/Header'
export default ({ data }) => (
<div>
<Header />
<main style={{ margin: '3rem auto', padding: '0 2rem', maxWidth: 680 }}>
<div>
<h2>Blog Posts</h2>
{data.allMarkdownRemark.edges.map(({ node }) => (
<BlogPostPreview key={node.id} node={node} />
))}
</div>
</main>
<Footer />
</div>
)
export const query = graphql`
query AboutQuery {
site {
siteMetadata {
title
}
}
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
totalCount
edges {
node {
id
fields {
slug
}
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
excerpt
}
}
}
}
`
h1,
h2,
h3,
h4,
h5,
h6 {
color: #444;
}
p,
li,
time {
color: #222;
}
.button {
border: 1px solid #32c8cf;
border-radius: 4px;
color: #32c8cf;
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
text-transform: uppercase;
font-weight: bold;
box-shadow: 0 0;
transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.button:hover {
background-color: #32c8cf;
color: #fff;
}
import React from 'react'
import Footer from '../components/Footer'
import Header from '../components/Header'
import postStyles from '../styles/blog-post.module.css'
export default ({ data }) => {
const post = data.markdownRemark
return (
<div>
<Header />
<article
style={{
boxSizing: 'border-box',
margin: '3rem auto',
padding: '0 2rem',
maxWidth: 668
}}
>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
<Footer />
</div>
)
}
export const query = graphql`
query BlogPostQuery($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
import Typography from 'typography'
import parnassusTheme from 'typography-theme-parnassus'
const typography = new Typography(parnassusTheme)
export default typography
export const headerFontFamily = `'Merriweather Sans', sans-serif`
......@@ -8,6 +8,7 @@
},
"dependencies": {},
"devDependencies": {
"vuepress": "^0.14.4"
"vuepress": "^0.14.4",
"yaml-front-matter": "^4.0.0"
}
}
const fs = require('fs')
const yamlFrontMatter = require('yaml-front-matter')
const blogFolder = './gatsby-src/blog/'
const blogPostList = []
fs.readdir(blogFolder, (err, files) => {
if (err) {
return console.log(err)
}
files.forEach(file => {
const fileContent = fs.readFileSync(blogFolder + file, 'utf8')
const frontMatter = yamlFrontMatter.loadFront(fileContent)
delete frontMatter['__content']
let fileData = {}
for (let key in frontMatter) {
fileData[key] = frontMatter[key]
}
blogPostList.push(fileData)
})
fs.writeFileSync('./test3.json', JSON.stringify(blogPostList), 'utf8')
})
<script>
export default {
name: 'BlogPostList',
props: {
list: {
type: Array,
default: []
}
},
computed: {
filteredList() {
const props = this.$options.propsData
if (props) {
return props.list.filter(item => item.path.indexOf("/blog/") > -1)
.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
}
}
}
}
</script>
<template>
<ul class="blog-list">
<li v-for="item in filteredList"
class="blog-list__item">
<BlogPostPreview
:excerpt="item.frontmatter.excerpt"
:path="item.path"
:publishDate="item.frontmatter.date"
:title="item.frontmatter.title"
/>
</li>
</ul>
</template>
<style scoped>
.blog-list {
padding: 0;
margin: 0;
}
.blog-list__item {
list-style-type: none;
}
</style>
<script>
export default {
name: 'BlogPostPreview',
props: {
publishDate: {
type: String,
required: true
},
title: {
type: String,
required: true
},
path: {
type: String,
required: true
},
excerpt: {
type: String,
required: false
}
},
computed: {
formatPublishDate() {
const dateFormat = new Date(this._props.publishDate)
const options = {
year: 'numeric',
month: 'long',
day: 'numeric'
}
return dateFormat.toLocaleDateString('en-US', options)
}
}
}
</script>
<template>
<section>
<time>{{ formatPublishDate }}</time>
<h3 class="blog-post__title">{{ title }}</h3>
<p v-if="excerpt">{{ excerpt }}</p>
<a class="button blog-post__button " :href="path">Read More ></a>
</section>
</template>
<style scoped>
.blog-post__button {
margin-bottom: 1.5rem;
display: inline-block;
}
.blog-post__title {
margin-top: 0.5rem;
}
.button {
border: 1px solid #32c8cf;
border-radius: 4px;
color: #32c8cf;
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
text-transform: uppercase;
font-weight: 700;
box-shadow: 0 0;
transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
</style>
module.exports = {
title: 'BenCodeZen',
ga: '92645815',
dest: './public',
themeConfig: {
repo: 'https://gitlab.com/bencodezen/bencodezen',
repoLabel: 'GitLab',
docsDir: 'src',
editLinks: true,
editLinkText: 'Found a bug? Help me improve this page!',
nav: [
{ text: 'Home', link: '/' },
{ text: 'About', link: '/about/' },
{ text: 'Contact', link: '/contact/' }
]
}
}
# Blog Posts
<BlogPostList :list="$site.pages" />
# About
I am a self-taught developer whose origin story harkens back to the days when I was a naive kid building terrible websites like “Fortune Cookie Universe” on Angelfire with numerous GIFs and marquee elements and hacking themes on Xanga and LiveJournal. After a few detours and becoming an I/O Psychologist, I would finally connect the dots and bring his passion for technology and user experience together. I am currently a Fullstack Engineer on the Meltano team at GitLab.
Aside from coding, I am a huge advocate giving back to the community through teaching, mentoring, speaking and organizing events. I am a co-founder of VueDC and VueMeetups which helps to organize Vue.js prospectives and enthusiasts. And in my free time, you can find me searching for new culinary experiences, traveling the world, or exploring some new hobby I recently learned about.
## The Internet of Things (IoT)
If you're looking for me around the IoT, here's a comprehensive list of everywhere I am at the moment:
- [Twitter](https://twitter.com/bencodezen)
- [Twitch](https://www.twitch.tv/bencodezen)
- [GitLab](https://gitlab.com/bencodezen)
- [GitHub](https://github.com/bencodezen)
- [CodePen](https://codepen.io/bencodezen/)
- [StackOverflow](https://stackoverflow.com/users/5100020/bencodezen)
- [Notist](https://noti.st/bencodezen)
## Ask Me Anything (AMA)
If you have any questions for me that I didn't answer here, feel free to [open an Issue](https://gitlab.com/bencodezen/bencodezen/issues/new?issue) with the `question` label and I'll do my best to answer it!
---
title: A Single Obsession
date: 2017-11-05 23:26:11
excerpt: For those who don't know me, I'm a compulsive learner. I enjoy ramping up on new topics and since my interests are rather diverse, this leads me to often be pulled in eight different directions at once. And that's not an exaggeration in the slightest. The number of projects that were started with an initial burst of excitement and possibility often got quickly replaced by another which left a trail of project husks behind me.
---
For those who don't know me, I'm a compulsive learner. I enjoy ramping up on new topics and since my interests are rather diverse, this leads me to often be pulled in eight different directions at once. And that's not an exaggeration in the slightest. The number of projects that were started with an initial burst of excitement and possibility often got quickly replaced by another which left a trail of project husks behind me.
# {{ $page.title }}
<!-- more -->
For those who don't know me, I'm a compulsive learner. I enjoy ramping up on new topics and since my interests are rather diverse, this leads me to often be pulled in eight different directions at once. And that's not an exaggeration in the slightest. The number of projects that were started with an initial burst of excitement and possibility often got quickly replaced by another which left a trail of project husks behind me.
I'm currently in the process of re-"reading" (because I'm listening to it this time around) to **Ready Player One** by Ernest Cline. And as I listened to Will Wheaton narrate Wade's single obsession with the hunt for Halliday's egg, it struck me just how devoted he (and other professional gunters) were when it came to their quest. In fact, I found myself almost feeling envious of that devotion. And in that moment, I realized that just how fragmented I could be when it came to my own pursuits and interests.
......
---
title: Be a Builder, Not a Barrier
date: 2017-11-20 14:00:31
excerpt: Over the past few years, I’ve had the chance to talk with multiple designers about their work and what their environment is like. And perhaps I was naive, but I was surprised at the number of times I heard that they were told by developers that X feature they wanted to do was “not possible.” Then when I would ask more about the requirements of X feature, I would often be boggled by how simple the request often was. So that got me thinking, “Why are developers often so quick to say no to what designers want?”
---
# {{ $page.title }}
Over the past few years, I’ve had the chance to talk with multiple designers about their work and what their environment is like. And perhaps I was naive, but I was surprised at the number of times I heard that they were told by developers that X feature they wanted to do was “not possible.” Then when I would ask more about the requirements of X feature, I would often be boggled by how simple the request often was. So that got me thinking, “Why are developers often so quick to say no to what designers want?”
To get a few of the obvious counter arguments out of the way, I’m going to be speaking purely from a front-end perspective since that’s my area of expertise; but I do think the sentiments in this post still apply to the rest of the field. In addition, I’m well aware of the fact that a number of things could be playing into a developer (or his team) being able to build X feature. Many reasonable explanations include:
* No access or control of the necessary source code
* System constraints from legacy code / poor architectural decisions made in the past
* No scope, time and/or money
- No access or control of the necessary source code
- System constraints from legacy code / poor architectural decisions made in the past
- No scope, time and/or money
## The Problem
......
---
title: Boring Solutions
date: 2018-08-01 20:23:04
excerpt: Whelp. Here I am again. This must be like the tenth attempt of mine to get my coding blog up and running. And while that may be discouraging in hindsight, as the saying goes, you only fail when you stop trying. So here I am trying again.
---
# {{ $page.title }}
Whelp. Here I am again. This must be like the tenth attempt of mine to get my coding blog up and running. And while that may be discouraging in hindsight, as the saying goes, you only fail when you stop trying. So here I am trying again.
For those that have tried blogging, one of the hardest things that can block someone from doing so is the discipline of writing content. Well sadly, when it comes to a coding blog, there's also the entire concern of how the blog will be judged by my peers and the public. Every time I tried to start up the blog, I would have this grandiose vision of everything I was going to do:
......
---
title: A Change in Scenery
date: 2017-05-04 12:23:37
excerpt: Over these past couple of months, I have had the opportunity to work on some fun and challenging projects. And while it's been a phenomenal learning experience, it has been a bit of a whirlwind and I'm a little burnt out. So in an effort to try and get my head on straight again, I decided to get out of town for a bit.
---
Over these past couple of months, I have had the opportunity to work on some fun and challenging projects. And while it's been a phenomenal learning experience, it has been a bit of a whirlwind and I'm a little burnt out. So in an effort to try and get my head on straight again, I decided to get out of town for a bit.
# {{ $page.title }}
<!-- more -->
Over these past couple of months, I have had the opportunity to work on some fun and challenging projects. And while it's been a phenomenal learning experience, it has been a bit of a whirlwind and I'm a little burnt out. So in an effort to try and get my head on straight again, I decided to get out of town for a bit.
They say when you are starting to feel yourself get in a rut or starting to burnout, it's usually a good idea to get a change of scenery. And what better way to get a change of scenery than to travel? So that's what I did. As I am writing this post, I am currently sitting in a cafe while listening to live music in New Orleans.
......
---
title: '"Cheap" Outsourcing'
date: 2017-05-06 13:07:17
excerpt: 'I was reading my daily Quora digest this morning and the following post: \"What did you do to make your software career better?\" To my surprise and disappointment, one of the most upvoted answers was "to quit ... [because of] cheap outsourcing." And while outsourcing has had an impact on the job market, this answer is complete nonsense'
---
# {{ $page.title }}
I was reading my daily Quora digest this morning and the following post: ["What did you do to make your software career better?"](https://www.quora.com/What-did-you-do-to-make-your-software-career-better) To my surprise and disappointment, one of the most upvoted answers was "to quit ... [because of] cheap outsourcing." And while outsourcing has had an impact on the job market, this answer is complete nonsense.
<!-- more -->
......
---
title: "Developers. Don't Get Too Comfortable"
date: 2017-03-11 12:28:44
excerpt: I recently read "Ten Things I Have Learned" by Milton Glaser and was struck by the notion of the idea of "never having a job."
---
# {{ $page.title }}
I had heard about Milton Glaser's ["Ten Thing I Have Learned"](https://www.miltonglaser.com/files/Essays-10things-8400.pdf) essay from numerous people, but it wasn't until a recent mention on [@FrontEndHH](https://twitter.com/frontendhh) by [Gordon Zhu](https://twitter.com/gordon_zhu) that I finally decided to check it out. And while the essay as a whole contains great advice, the following section struck of chord with me: "2. If you have a choice, never have a job."
> ‘Never have a job, because if you have a job someday someone will take it away from you and then you will be unprepared for your old age. For me, it has always been the same every since the age of 12. I wake up in the morning and I try to figure out how am I going to put bread on the table today? It is the same at 75, I wake up every morning and I think how am I going to put bread on the table today? I am exceedingly well prepared for my old age’ [John Cage] said.
......
---
title: Do It Even If It's Ugly
date: 2017-03-01 23:47:05
excerpt: I read this article by Addy Osmani a while back that was in response to the "How It Feels to Learn JavaScript in 2016" post. For those who have not read it, the essence of the article boiled down to this
---
# {{ $page.title }}
I read [this article](https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3#.uiw3hwcli) by [Addy Osmani](https://twitter.com/addyosmani) a while back that was in response to the "How It Feels to Learn JavaScript in 2016" post. For those who haven't read it, the essence of the article boiled down to this:
> First do it, then do it right, then do it better.
......
---
title: Emerging From a Crucible
date: 2017-04-16 15:22:12
categories: Journal
excerpt: It's been a little over a month since I last wrote here. And in that time, I have challenged myself to dive headfirst into projects equipped with little more than a belief that I could figure it out along the way.
---
# {{ $page.title }}
It's been a little over a month since I last wrote here. And in that time, I have challenged myself to dive headfirst into projects equipped with little more than a belief that I could figure it out along the way. I'm proud to say that in this past month, I found myself completely immersed in two projects that would take me into technology I had always been hesitant to learn: (1) a proper client-side JS framework and (2) hybrid mobile app technology.
At a high level, I got to spend a lot of quality time learning and building projects with [VueJS](https://vuejs.org) and got a glimpse into the world of [Ionic](https://ionicframework.com/) and [ReactNative](https://facebook.github.io/react-native/). While it has been a challenging month, I look back on it with a gratitude to the trials and tribulations I underwent as a crucicle in my journey to improve my abilities as a developer.
......
---
title: I Can Solve a Rubik's Cube!
date: 2017-11-07 16:00:05
excerpt: For my entire life, I've always envied those who could solve a Rubik's cube. Not only did I have a level of respect for what I thought would be an impossible task, but there was also a part of me that wanted to be able to join that "elite" group of people. Well, I'm proud to say that I can solve a Rubik's cube!
---
For my entire life, I've always envied those who could solve a Rubik's cube. Not only did I have a level of respect for what I thought would be an impossible task, but there was also a part of me that wanted to be able to join that "elite" group of people. Well, I'm proud to say that I can solve a Rubik's cube!
# {{ $page.title }}
<!-- more -->
For my entire life, I've always envied those who could solve a Rubik's cube. Not only did I have a level of respect for what I thought would be an impossible task, but there was also a part of me that wanted to be able to join that "elite" group of people. Well, I'm proud to say that I can solve a Rubik's cube!
"What does this have to coding?" is probably a question that's going through your head. Well, after achieving this goal of mine, it made me realize that this view I had of people who could solve a Rubik's cube was similar to how I see a lot of those well respected in our fields.
......