Pinrss.com

bryanlrobinson.com

  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    How to show your template code in 11ty blog posts

    bryanlrobinson.com

    262d If you write a technical blog and use 11ty (or Jekyll ... or just use Liquid or Nunjucks) as your static site generator of choice you might run into a conundrum: How do you show Liquid or Nunjucks template code in your code blocks?Whether y
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    New City, New Job, New Content

    bryanlrobinson.com

    286d Those of you who follow me on Twitter and hang out with me in various community chats may know that I've been focused on moving for the past month or so. Something you may not be aware of is that I've also been getting ready to start a new
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Using Nunjucks 'If Expressions' in 11ty to create a simple active navigation state

    bryanlrobinson.com

    348d Creating active states in your navigation is important for guiding a user through your site. It gives them a sense of place and let's them know how to navigate from page to page.Setting active states in your templates isn't alway easy. Ofte
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more

    bryanlrobinson.com

    1y A few weeks ago, Zach Leatherman announced that he was going to change the Built with 11ty section 11ty's documentation. He was going to create a performance leaderboard to showcase performant projects using the tool.My site wasn't on there
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Three JAMstack movements to watch in 2020

    bryanlrobinson.com

    1y In the second half of 2019, I took my passing interest in the JAMstack and solidified it as one of my main focuses. I'm excited about the prospect of what lies in store in 2020.I was asked by Brian Rinaldi to answer a few questions on Stack
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Create a Codepen promo watermark with no additional HTML, CSS or JS

    bryanlrobinson.com

    1y I use CodePen a lot. I've got hundreds (if not thousands) of pens. Most of them are throwaways, but some are things that I like to share. As a blogger, I like to drive people back to my blog from my Pens when possible. You can add a link i
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    3 underused CSS features to learn for 2020

    bryanlrobinson.com

    1y CSS has a whole lot of power. There are properties and values for any number of amazing designs. With all that power comes a lot to remember.If you don't know about all the tools in your toolbox, how will you find the right one for the job?
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Use CSS Subgrid to layout full-width content stripes in an article template

    bryanlrobinson.com

    1y CSS Grid was missing one important piece when it's Level 1 specification was released into the world: Subgrid. The Level 2 specification is still in "Working Draft" status, but we have our first browser implementation. Mozilla has the Subgr
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Adapt client-side JavaScript for use in 11ty (Eleventy) data files

    bryanlrobinson.com

    1y My good friend James Q. Quick recently wrote an awesome post describing interacting with APIs without a framework. He used the Pokémon API PokeAPI. He hooked me and I had to put my own spin on it!Before we go any further, you need to head
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    CSS Gap creates a bright future for margins in Flex as well as Grid

    bryanlrobinson.com

    1y One of my many favorite parts of the CSS Grid specification is grid-gap. It makes creating "internal margins" to my grids so much easier.Margins and the hacks we do to clear them in various contexts have long been one of my primary annoyanc
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Create your first CSS Custom Properties (Variables)

    bryanlrobinson.com

    1y In this tutorial, we'll tackle one of the amazing new features of CSS: Custom Properties. You may also have heard them referred to as CSS Variables.This feature gives us some of the features of a preprocessor with all the additional power o
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Use CSS Grid to create a self-centering full-width element

    bryanlrobinson.com

    1y Sometimes an idea strikes you so hard that you have no idea why you've never thought of it. CSS Grid excels at creating new types of layouts. It's also amazing at simplifying the code for old design patterns.An idea snuck up on me when I wa
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Creating an 11ty Plugin - SVG Embed Tool

    bryanlrobinson.com

    1y It's well documented that I love the JAMstack. It's also well documented, that I'm a fan of the JavaScript static site generator 11ty (Eleventy). In the sites I've built with it recently, I've found myself reusing a couple filters. This has
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Now offering design and code reviews at PeerReviews.dev

    bryanlrobinson.com

    1y For the past few months, I've talked with a lot of different people about how best to serve up-and-coming designers and developers. I want to be a resource for people learning to code and learning about design. So, when my friend James Q. Q
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Routing contact-form emails to different addresses with Netlify, Zapier and SendGrid

    bryanlrobinson.com

    1y I wrote recently that some developers are wary of jumping on the JAMstack bandwagon due to client expectations. When your client wants dynamic form processing, and your site is "static," what are you going to do?In this article, we'll explo
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Create an Eleventy (11ty) theme based on a free HTML template

    bryanlrobinson.com

    1y In this video series, we'll take a look at what it takes to start with a free HTML template found on Google and convert it for use with a static site generator (SSG). We'll be using my personal favorite SSG 11ty.For many people working in a
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Client work and the JAMstack

    bryanlrobinson.com

    1y I worked at an agency for almost six years. In that time, I created only a handful of static sites. Part of this was because the agency had a custom content management system. The other part was an unwillingness to give up "dynamic" website
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Grid vs. Flex: A Tale of a "Simple" Promo Space

    bryanlrobinson.com

    2y I love the new layout modes in CSS. Grid and Flexbox are both amazing features. They each have their place. What if I told you that if you used the "wrong" one, you could double your CSS and HTML?Let's take a look at what appears to be a si
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    Using Eleventy's (11ty) JavaScript Data Files

    bryanlrobinson.com

    2y I enjoy building workflows for pure static sites. I enjoy ingesting data into my build process instead of loading my client-side with fetches.I've been doing this for a while in Jekyll using Gulp to run a fetch task. After the data is fetch
  • Twitter Facebook Reddit Tumblr Linkedin Mix Pocket Telegram

    The Tech Barrier to Entry

    bryanlrobinson.com

    2y I'm grateful for my unique journey to find my professional niche. It's taken a lot of twists and turns. Is my journey replicable in this era of developer tooling and convenience?In this live vlog, I explored some ideas around the barrier t