Posts tagged: dev

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...