Non Breaking Space Show № 72: Arianne Stiles — Submitting Talks to Conferences

Arianne Stiles

Today’s Non Breaking Space Show guest is Arianne Stiles. From Austin, Texas, we talk with Arianne Stiles, ½ of Environments for Humans. Environments for Humans produces over a dozen of virtual front-end and UX design conferences every year as well as the first web builder conference for CSS, CSS Dev Conf, which is coming up this October in San Antonio, Texas.

Topics discussed with Arianne Stiles:

  • 2:45 What’s the difference between online speaking and conference speaking?
  • 10:37 How has double-blind voting helped with talk suggestions at Environments for Humans conferences?
  • 18:00 Overcoming imposter syndrome and talking about your experiences.
  • 23:30 One key thing to have on your website to help a conference organizer.
  • 30:00 A disagreement about “it depends”
  • 37:00 How to describe your talk when submitting for a conference.
  • 44:20 What has been Ari’s favorite presentation?

Non Breaking Space Show is still free of charge for those using Windows XP along with show notes and resources: Non Breaking Space Show № 72: Arianne Stiles — Submitting Talks to Conferences

Rachel’s Tips ‘n’ Tricks on Flexbox and CSS Grid

Rachel Andrew headshot

Rachel Andrews. One of 17 reasons to attend Responsive Web Design 2016. Save 20% at registration using discount code RWDCHRISTOPHER and hear Rachel’s deep dive into CSS layout tools flexbox and grids.

Rachel Andrew is web builder and lives in Bristol, England. She is one half of web development company edgeofmyseat.com, the company behind Perch CMS. Rachel has been working on the web since 1996 and writing about the web for almost as long. Her books include the bestselling CSS Anthology from Sitepoint and recent ventures into self-publishing have seen her write The Profitable Side Project Handbook, and CSS3 Layout Modules, 2nd edition. She is a regular columnist for A List Apart as well as other publications online and print. When not writing, Rachel often acts as a technical editor for other authors.

Non Breaking Space Show № 71: Simon St. Laurent — SXSW Interactive, Fluent Conf

President speaking at SXSW

Today’s Non Breaking Space Show guest is Simon St. Laurent. While I endure the SXSW Interactive invasion of Ausin, Texas, Simon returns from this year’s Fluent Conf. 

We both talk about tech trends they saw from our respective points of view.

Topics discussed with Simon St. Laurent:

  • 5:00 Main topic of conversation at Fluent Conf this year?
  • 11:00 What happened from Angular 1 to Angular 2?
  • 13:56 Design stuff at Fluent Conf
  • 17:40 Are we shifting from native apps to web apps?
  • 18:40 Christopher proposes removes subscription service day
  • 21:11 Classic mobile tools with service worker for web apps
  • 26:00 No wearables, big VR presence at SXSW
  • 30:00 President Obama delivers keynote at SXSW
  • 31:40 President’s remarks on strong encryption vs government backdoors
  • 37:42 Bringing WIFI to rural, low-income areas
  • 43:50 SVG at Fluent Conference

Non Breaking Space Show is still free of charge to those without SXSW badges along with show notes and resources: Non Breaking Space Show № 71: Simon St. Laurent — SXSW Interactive, Fluent Conf

SXSW McDonald’s WIFI Landing Page

I was asked to build out the WIFI landing page for McDonald’s SXSW experience. The catch was I had less than an afternoon before SXSW started to pull it all together. 

When it’s a rush job, the workflow means sticking with what I know–yet I did want to try a few new things.

These are some of the few steps and thoughts I had while producing the landing page:

Paper printout

Since the design was pre-made in Photoshop, I printed out the design and made production notes before I started working. While we prototype in the browsers these days, I always enjoyed printing a PSD web page design and marking it up before I start coding. 

Photoshop

While the design is based with linear artwork that would make it the right candidate for for SVGs, I only had a Photoshop file to worth with.

I know my around Photoshop and know it very well, Adobe keeps on adding new capabilities. I made use of the new “Quick Export as PNG” function to export assets from their respective layers. It’s a new feature in the Adobe Photoshop CC 2015.1 release.

Photoshop Quick Export

Page Weight Budget

Oh, and this all had to be under 1MB. The visual design played to the strengths in the way GIFs and PNGs optimize, so I was able to bring the image file sizes way down. This was done first by restricting the number of colors before exporting them Photoshop.

Reducing colors in Photoshop

Making sure to strip metadata information the image, I then used ImageOptim to squeeze the image files even more. I found that Quick Export feature in Photoshop does not optimize the image files, if at all. 

Expressive CSS

On the Non Breaking Space Show, Allison Wagner made mention of Expressive CSS framework. While the conversation wasn’t about yet another CSS framework, but rather the intent or concept of how it worked differently from other frameworks. 

After working on a previous project when the framework seemed counter-intuitive to my needs, this project was all the excuse I needed to try out a small, nimble framework. 

Expressive CSS Utilities

I appreciate the modular nature of frameworks, however I wish “some assembly required” note was labelled on the download page. It took me a few minutes for me to realize I didn’t have the utilities installed with the original download. Those minutes were precious on a tight deadline.

JavaScript Knowledge

While I was asked to do this project because I know “CSS,” it became clear that HTML, CSS, and JavaScript were required. The JavaScript required was not anything that serious, but I had to switch my brain from CSS-mode to JavaScript-mode.

Conclusion

While it was a rush project, I loved doing it. Offsite brand experiences are a staple of the SXSW experience. As both a web builder and event organizer myself, it was fun to contribute in a small way to a major brand’s experience at one of our industry’s bigger events. 

Favicon Images for My Web Site

Working on a new site means I need to include a favicon. The magical favicon is a design treatment that is made up of a small image or icon that can represent a website or web page. 

Favicons in Browser Tabs

Where Favicons are Found

Favicons are commonly displayed in the browser’s address bar next to the web URL, but can be found in other other areas:

  • Address bar
  • Links bar
  • Bookmarks/Favorites
  • Tabs
  • Dragged to Desktop”

Since they are found in and around the browser as well as sometimes on a desktop when a bookmark is dragged to a PC’s desktop, having a favicon is an important site asset. 

Image Formats for Favicon

Internet Explorer 5 first started using favicons and only through the ICO image file format. 

Other browsers have since widely adopted the favicon and support more file formats. Most browsers support GIF, JPEG, and PNG. 

PNG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the PNG format can be preferable.

Supported from the following versions:

Desktop

  • 4
  • 2
  • 11
  • 9
  • 3.1

Mobile / Tablet

  • No
  • 2.1
  • No
  • 55
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

SVG images are also supported–but only in Firefox and Safari at the time of this writing.

SVG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the SVG format can be preferable to more easily support higher resolutions or larger icons.

Supported from the following versions:

Desktop

  • 57
  • 4
  • No
  • No
  • 9

Mobile / Tablet

  • 9.0
  • No
  • No
  • No
  • No

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

The ICO format is the original responsive image format as it can contain multiple images at different sizes like an image storage locker. 

For example, a browser will use the 16×16 pixel ICO image. However, if a browser is on a computer with a retina screen, it might pick out the 32×32 pixel image instead leaving the smaller image behind.

Since all browsers support ICO file format, going with this “responsive” ICO image format makes the most sense to me. 

Creating a Favicon

For Macs, there is a great application called Icon Slate that makes creating an ICO file easy.1

Using my logo as the image source, I exported different sizes and placed them in their respective slots:

Using IconSlate for Favicon

Once the images are lined up in their respective sections, I start the build process by selecting File > Build which produces a hot ‘n’ fresh ICO file.

Inserting a Favicon into a Web Site

Making sure to rename the file to favicon.ico, place the ICO file in the root or main directory of your site:

Favicon File in FTP Browser

By placing the file in the root directory and giving the file this specific name, the browser picks up the favicon file automatically. No fuss, no muss. 

This way updating the favicon then becomes easy: in the future, create a new image, rename it favicon.ico, and replace the file on the server. 

What If I Don’t Have Access to My Root Directory?

If there is a reason I could not drop the ICO file in the root directory, I could then tell the browser that a favicon would be found elsewhere through a bit of HTML in the document header: 


<link rel="shortcut icon" href="http://example.com/folder1/folder2/myicon.ico" /> 

This link approach is practical if you cannot access the root of a web site for one reason or another and still want to deliver favicon. 

Conclusion

Favicon File on Display in Browser

Adding a bit of flair of your personal brand is pretty straightforward. Give it a shot, if you haven’t already!

UPDATED: To include Can I Use charts for PNG and SVG support.


  1. Use can use the versatile Icon Slate creating icons for pretty much any situation you might need an icon: Apple Watch, folder icons, Android, and much more learn the facts here now

[Literary Press Group of Canada] Responsive Retrofitting

Slide from Responsively Retrofitting talk

On March 10th, I had the pleasure of speaking about responsive web design to members of the Literary Press Group of Canada, a professional membership of independent publishers.

Covering tips and tricks for WordPress, web performance, navigation, HTML tables, and more, the main framework was about retrofit an existing, fixed-width web site. 

For some organizations and companies, starting over does not make financially sense. Whereas responsively retrofitting is both a time and cost effective solution to get sites looking better on mobile devices until a time when starting fresh is possible.

Slides are also available on Slideshare.

Non Breaking Space Show № 70: Zell Liew — Responsive Typography

Zell Leiw

Today’s Non Breaking Space Show guest is Zell Liew. Zell is a writer, freelance web designer & developer based in Singapore. His down-to-earth articles — especially those recently published on the topic of responsive typography — make it easier to understand for both designers and developers.

Topics discussed with Zell Liew:

  • 3:20 What got Zell into the web?
  • 9:30 What’s the difference between EM and REM type sizes?
  • 16:00 Vertical rhythms for typography
  • <a href=“http://goodstuff oxycontin pills.fm/nbsp/70#t=20:20″>20:20 What are people’s main struggles with vertical rhythms?
  • 29:10 Are you a Javascript or a CSS person?
  • 37:50 What else are you passionate about these days?
  • 40:20 Tips for creating responsive images

Non Breaking Space Show is still free of charge to crossing guards along with show notes and resources: Episode № 70: Zell Liew — Responsive Typography

Coding mod_rewrite and WordPress Permalinks

URL rewriting is what mod_rewrite does. 

It’s an engine that helps redirect a visitor that comes for one URL to another page on the same site or another server. If you are using WordPress with some friendly-looking URLs, you are using mod_rewrite. 

Thankfully, WordPress does most of the heavy lifting with pre-built rewrite rules because the syntax is a little unfriendly to the beginner: It combines all you hate about regular expressions with all you hate about having your brain stabbed by rusted forks. 

My Problem and Need for mod_rewrite

I’ve been moving from my old domain, ChristopherSchmitt.com, to this one, Christopher.org.

I still have ChristopherSchmitt.com “live” on a server as I work on finishing some migration tasks.

Visitors might stumble onto pages on the old site and stay there. Instead of that happening, I’d like visitors that do come through the old site go to the new site and read the content there. 

That means working with mod_rewrite!1

First mod_rewrite Workaround

If my new domain’s URL structure was an exact mirror of my original site, I could set up a simple redirect from the old domain to the new domain. 

For example, if I had a URL for my old site:

http://christopherschmitt.com/2015/07/21/i-cant-complain/

And new URL for the new domain is:

http://<strong style="background: yellow;">christopher.org</strong>/2015/07/21/i-cant-complain/

The mod_rewrite is relatively straightforward to code up.

To do that, I add the mod_rewrite rule in the .htaccess file which is in your site’s root directory — and is two lines of code:


RewriteEngine On
RewriteRule ^(.*)$ https://christopher.org/$1 [R=301,L]

The first line tells the server to turn on rewriting engine.

The second line does the heavy lifting: it gives the server information on how to process a request from the browser, i.e. the incoming URL, and what do with it, i.e. form a new URL. 

When that is added, the links will redirect — however, my problem is a bit different than that.

Little More Complex mod_rewrite Examples

While moving content to Christopher.org, I want URLs without the date. I changed WordPress Permalinks settings to remove the date in the URL:

https://christopher.org/i-cant-complain/

Selecting permalink format in WordPress

That result of this decision means my URL structure for my new domain does not match up perfectly with the old domain.

OLD URL: http://christopherschmitt.com/2015/07/21/i-cant-complain/
NEW URL: https://christopher.org/i-cant-complain/

So, the rewrite needs to be updated to reflect that. 

To do that, I would have to use mod_rewrite to grab only the bit of the old URL I need. Thanks to Adam Norword for helping me out with the rewrite rule and sparing me from the regular expression hell I was in: 


RewriteEngine On
RewriteRule ([^\/]+)\/$ https://christopher.org/$1/ [R=301,L]

Let’s look at the lines to see what is going on: 

  1. The first line only has RewriteEngine On and it turns on the rewriting engine in the server.
  2. The second line starts off with RewriteRule and says we are going to have a rule on how the server should handle incoming links.
  3. ([^\/]+)\/$ tells the server to grab just the slug title of the page or post by grabbing the end portion of the URL.
  4. https://christopher.org/$1/ — this tells the server to grab that title of the page or post and append it to the new domain to create the new URL
  5. [R=301,L] this section tells the browser to signify the code is a 301 direct. Using 301 redirects is a method recommended by Google to let them update their listings.

Further Reading on mod_rewrite and WordPress Permalinks

At one time, I was thinking of diving into WordPress to update the Permalinks to add the redirection I needed. At a recent Austin WordPress meetup, I saw a great presentation on Advanced Permalinks in WordPress by Pete Nelson that shed some light on such an approach.

While I didn’t go that route, his presentation did let me know about some great WordPress resources: 

And Adam showed me Regular Expression 101. It works as a regular expression decoder: taking regular expression formulas and decoding them into human-friendly language.


1. If it was one off page, I would use meta HTML element with refresh.