Posts tagged: webdev

Netlify # [1] I have happily had my personal site waylonwalker.com [2] hosted on netlify for nearly 2 years now. In fact I have hosted about a dozen different toy projects to play with on there, 4 of which have gone far enough to get a custom domain name. They are fast to deploy and consistently do so on every git push to main. Zeit # [3] I have recently started playing with zeit again. I really like their cli tool, its dead simple and makes sense. I tried the netlify one early on and dont think I really gave it much of a chance. I was able to backup a site we were modifying by saving everything locally (literally control+s) and running now in the command line. While I was on the site I realized that when switching to gatsby v2 I had deployed it to now.sh while testing, before cutting over to the updated one on netlify. It has been building every version since without issue! It has been building every version since without issue! What I am using # [4] - gatsby - forestry.io ...

I love using URL shorteners to easily share links without hitting character limits, but they loose their meaning. Services like bit.ly will save my links for me so that I can find them, but I would rather them to be easy to remember. https://bit.ly/2ruLwQz does not roll of the tongue so well. 301 🤸‍♀️ # [1] I recently discovered a really cool feature of netlify that I have always looked past, _redirects. It is so simple cool and powerful, every netlify site should do this! But how 🤷‍♀️ # [2] simply add a _redirects file to the root of your your published site with the following format. The trick I found with my gatsby site was that it needed to be in my static directory /static/_redirects, not root. Next you just put space separated links on separate lines. #’s can be used for comments. # netlify redirects # from_url to_url # Short-Blog /blog/scli /blog/simple-click/ /blog/cmdt /blog/cmd-exe-tips/ . . . # splats /b* /blog/:splat /n* /notes/:splat # External /twitter https...

Adding an rss feed to your gatsby js site is super simple. https://www.gatsbyjs.org/packages/gatsby-plugin-feed/ Install # [1] npm install --save gatsby-plugin-feed How to use # [2] // In your gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-plugin-feed`, options: { query: ` { site { siteMetadata { title description siteUrl site_url: siteUrl } } } `, feeds: [ { serialize: ({ query: { site, allMarkdownRemark } }) => { return allMarkdownRemark.edges.map(edge => { return Object.assign({}, edge.node.frontmatter, { description: edge.node.excerpt, date: edge.node.frontmatter.date, url: site.siteMetadata.siteUrl + edge.node.fields.slug, guid: site.siteMetadata.siteUrl + edge.node.fields.slug, custom_elements: [{ "content:encoded": edge.node.html }], }) }) }, query: ` { allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date] }, ) { edges { node { excerpt html fields { slug } frontmatter { title date } } } } } ...

Testing out forestry.io Sorry Netlify CMS # [1] I still ♥️ your product dont be forestry is simple I have been playing with the netlify cms for a while now, and it has been a decent experience, but I really struggle configuring it. Forestry is so simple to setup. My favorite part is that I can code up my gatsby.js site, storing all editable text in markdown, and come back later and add the CMS based on existing documents. Configuration is Simple # [2] Forestry.io has this amazing feature to create create based on existing document 🤯. This is great because it sets up the .yml config for me without error. And If I really want to come back later to customize it more I have that option, too. [3] By far my favorite feature is create based on existing document Multi-File Gallery # [4] I have a use case for a photography site where the owner wants to be able to show off sample photos of each type of work she does. I got it working in the netlify cms, although it was not very user...

select rowid, key, raw, store_time, expire_time, access_time, access_count, tag, size, mode, filename from Cache where key=‘e3cd37c97980ab2c’; ’e3cd37c97980ab2c’ ’e3cd37c97980ab2c' select rowid, key, raw, store_time, expire_time, access_time, access_count, tag, size, mode, filename from Cache where key=‘c14050404a107d5e’; #content{ max-width: 800px; margin: 0 auto; } .chart { display: block; padding: 10px; background: peachpuff; } .bar { height: 30px; margin: 5px; background: teal; } .bar:hover{ background: #444; } button { background: rgb(240, 196, 211); border: none; font-size: 1.3rem; border-radius: 5px; padding: .2rem 1rem; margin-bottom: 1rem } .on { background: palevioletred; } .big { width: 100% } .small { width: 50% } Learn D3 in 5 days # [1] For what we are creating in these posts d3 is way overkill and very verbose, but I need to start somewhere! These are just stepping stones into real custom visualizations that cannot be done in any ...

em { color: #ff9966; } code { background: #FF06050A; color: #6394C8; } .item { color: #6394C8; font-size: 1.5rem; padding: 1rem; display: flex; justify-content: center; align-items: center; height: 100px; width: 100px; background: #351D57; margin: 5px; border: 2px solid #A83E75; box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .6); } .flex_container { padding: 1rem; box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .6); background: rgba(99, 148, 200, .2); animation: animate_container 2s cubic-bezier(.66, -0.0, .28, 1.0) infinite both alternate; } .flex_container:hover { animation: none } @keyframes animate_container { 0%{ width: 95%; } 20% { width: 95%; } 80% { width: 200px; } 100% { width: 200px; } } h3 { padding: 1rem; margin: 2rem; display: block; width: 100vw; background: white; color: white; background: #333; position: sticky; top: 0px; box-shadow: 0 0 #333, -100vw 0 #333, 100vw 0 #333; } Flexbox-zombies # [1] I recently fi...

No More Death By PowerPoint I Waylon S. Walker vow that from this point forward I will no longer create powerpoints to be considerec DEATH BY POWERPOINT If you have not seen David JP Phillips Death By PowerPoint [1] TEDx, stop now and watch it. You will never look at slides the same again. Watching this video ruined me for watching presentations with these issues. Reveal is a tool that makes it very easy to follow these principles I currently work in a company that employs over 100K employees, and to this day I cannot recall a single presentation given where the slides did not violate the rules stated in David’s Talk. This year I am putting a stop to this starting with myself. I am starting a new job role in 2018 and there is no better time to make some drastic changes to my workflow than now. I expect there to be a few followers and many naysayers, but I dont care. I will employ the directives listed below. 1+1=0 # [2] Very few people (if any) in your will be able to multi-tas...