Half-Elf on Tech

Thoughts From a Professional Lesbian

Tag: css

  • Revealing Slides

    Revealing Slides

    I’ve struggled with my slides for years. At first, like a lot of people, I made them showy and crammed with content. Then I had a serendipitous meeting with Laura Legendary and talked to her about the accessibility of slides. Which was, in short, mine sucked. Yours probably do to.

    Over the next 18 months, I’ve transitioned from amusing images and gobs of data to a header with images, to a header and subheader, and maybe a bullet list when needed. The amount of text on the slides are minimal. They’re not there to teach you code, because that’s a futile attempt in the first place. Learning to code from slides was a bad idea in college, and in a 30 minute session with 15 for questions, it’s worse.

    Remember college? Class was where you talked about the theory and the principle and the ideas. You got the history and the concepts and (in math class) the formulas. Sometimes you were told to look in your book because the formula was huge. Then you went to the labs and you talked about it again and did ‘experiments’ to turn the theory into reality.

    Perhaps instead of contributor day we should have lab day. Day one is sitting in presentations. Day two is learning how to apply what we learned, with the presenters as the instructors. Learned about CSS and flex box? Okay, let’s all build a flex box together!

    But we don’t. We try to cram everything into a session, to teach people the theory and the reasons why you’d use responsive CSS. And we try to give people examples and code and links. And we hope we inspire them enough to learn more and try it on their own.

    A year ago, I stopped putting practical code examples in my slides. I still do code, now and then, but I limit it as much as I can. It’ll always be hard for someone to read, it’ll always be hard for someone to understand. And I’m a very haptic learner, I learn by doing and not by reading, so I need that Hello World example to read through and try myself.

    Once I decided to do that, I slowly started stepping back my images in slides. If I need one for explanatory purposes, I’ll use it, but otherwise I keep it to plain text. And in keeping to plain text, it allowed me to reconsider my slide options.

    I still use Reveal.js and I love it. Reveal.js is clean and direct to use but sometimes it’s a little plain. It’s a little weird to add a header and a footer, and they can get cluttered and annoying and I sat down to decide what I wanted to see in my slides.

    1) The emphasis is on the content
    2) The ‘credit’ to my company isn’t distracting
    3) A handy way for people to see the link to the slides

    The third one makes more sense when you remember that I use this to display my slides live. If I tell people to go to helf.us/wcsea2016 and I want them to remember this halfway through the talk, I need a link. I also want the slides to be there for the blind to follow along. They can plug in their screen reader and hear the slides as I go through. In addition, I have the speaker notes already in my slides. Just for added fun.

    Example Slide with link to DreamHost and the slides

    If you look at my current slides, you’ll see I have a ribbon that looks like the GitHub fork ribbon on the upper right, and a button link to my company, DreamHost, on the lower left. This is done with CSS and an image. The image is the DH logo, but the rest… Well it gets done by this:

    <body>
    	<div class="reveal">
    		<a class="github-fork-ribbon" href="http://helf.us/wcXX2016" title="http://helf.us/wcXX2016">http://helf.us/wcXX2016</a>
    		<div class="powered-by"><a href="https://dreamhost.com/"><img src="../assets/images/dreamhost.svg"></a></div>
    		<!-- Any section element inside of this container is displayed as a slide -->
    		<div class="slides">
    

    The ribbon is via Fork me on GitHub CSS ribbon by Simon Whitaker, and it’s a quick line of code. The powered by stuff is my own CSS:

    /* DreamHost Powered By */
    
    .powered-by img,
    .powered-by .backlink {
    	height: 20px;
        background: #2F323B;
    	padding: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    
    }
    
    .powered-by a:hover img {
    	background: #2F323B;
    	border-color: #268bd2;
    	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    }
    
    .powered-by {
    	display: block;
    	position: absolute;
    	bottom: 16px;
    	left: 16px;
    	z-index: 20;
    	font-size: 45%!important;
    	text-align: center;
    }
    

    I don’t always use it. I have a file called /assets/css/dreamhost-powered.css that I call for this. If I don’t want to use that and instead want to brand differently, I can use any other CSS file because it’s all just HTML.

  • Mailbag: Static Bars and z-index

    Mailbag: Static Bars and z-index

    Lindsey asks:

    I found this post on your site (https://halfelf.org/2013/genesis-static-nav-bar/) and had a follow up question about it. My nav bar is now static and fixed to the top of my site, but for some reason a couple of things go over the top of it when I scroll, namely two AdSense ads and a related posts plugin’s images at the end of posts on single post pages. I would love any advice you may have on fixing this. I’m sure it must be something simple, but I can’t figure it out. Thanks!

    It’s the z-index. If you’ve used Photoshop, you know about layers. Well, z-index is similar for webpages. It defines the ‘stack’ order, or what’s ‘on top’ of everything else.

    Logically you want a video ‘on top’ of the CSS etc of the page, so most of the time this isn’t a problem. At the same time when we’re using CSS to position a menu, it gets … weird.

    The basic idea of z-index is that any element with greater stack order is always on top of an element with a lower stack order.

    Here’s the CSS I used for my floating menu:

    .nav-primary {
        position:fixed;
        z-index:99;
        top: 0;
        width: 100%
    }
    

    The z-index on the WP toolbar (that black bar on the top of your site) is z-index: 99999; so you can change your CSS from 99 to 99998 and that should take care of it. We do want that toolbar to always win, after all.

  • Gallery Columns Zero

    Gallery Columns Zero

    I have a site where I love using galleries but I hate having to define their width. That’s something I hate about WordPress’ Gallery shortcode, you have to define a width, otherwise it’s all one column. Ugly ugly.

    The way that WordPress handles these columns also sucks. It puts in clear breaks:

    <br style="clear: both" />
    

    And frankly I hate that too.

    But I don’t do that with this other software I use. In fact, I have it all nicely coded in to show all my images, and then toss one final clear break at the bottom, to … clear the breaks. And what that does for me is gives me an adaptive width gallery that will expand and contract with my content.

    So how can I do that with WordPress?

    The easy part is something I already do in EDD, and that’s to use a fake column value of zero: gallery columns="0"

    That gives me a handy new column class: gallery-columns-0

    And that is very easy for me to style, by overriding the width from 100% to auto (the !important is dreadful), and set up the padding I want.

    /* Gallery */
    
    .gallery-columns-0 dl.gallery-item {
    	width: auto!important;
    	padding: 0;
    	margin: 0 10px 0 0;
    }
    

    But what about the ‘break’ afterwards? If you only need to support IE 8 and up, then it’s as simple as this CSS:

    .gallery-columns-0:after {
    	content: "";
    	display: table;
    	clear: both;
    	padding-bottom: 10px;
    }
    

    The padding on the bottom is to make it match my site, adjust as needed. I’m sure I could use the post_gallery filter hook and the same code from the gallery_shortcode function but with my br modification, but 0.017% of people visit this site using IE 7 or less, and at that percentage, so much of the site will look terrible anyway.

    The only real downside is that I have to manually enter the shortcode in text mode, since I can’t select ‘0’ as an option from the dropdown.

  • New Smilies?

    New Smilies?

    While the arguments for and against are pretty hot and heavy (see the trac ticket for more), it’s no secret I’m pro-new smilies. The old ones are too small, too pixelated, and too (pardon the phrase) web 1.0. They look old and out of date on my site.

    Here they are at normal size:

    Old Smilies, normal sized

    And here’s double:

    The smilies at twice size

    These are both gifs, to illustrate the size issue. Notice how they’re fuzzy?

    I want to make one thing clear, pun intended. None of my issues have to do with Retina. I don’t like ‘small’ anything. The smilies are too small, much like the font on many people’s websites, the pixelization is hard for me to identify. In fact, while I’m using the new smilies here, you’ll notice they’re bigger. Sure, cause I tossed this in my CSS:

    #wp_grins img, img.wp-smiley {
        height: 25px;
    }
    

    And that’s all it took to make them something I felt was readable. But the beauty, and why I like the new SVG images, is that I can make them larger like that, without losing readability.

    Thankfully, due to the curmudgeony efforts of the new smilies’ biggest naysayer, Otto, we have a filter! I’ve talked about this before, in how I handled both SVG and PNG as smilies for IE. I have a couple options here. I could write some code myself, or I could use New WordPress.com Smileys (which is on GitHub for reasons, the code is fine!).

    I like the plugin a lot. I like it so much, I refactored my SSL Grins plugin to use them with the fancy pants new span code (instead of images). But… Well, I already had this done by the time his plugin came out, and I like how I accounted for things differently. The only real difference though is he uses spans, and I just swap out the images:

    <?php
    /*
    Plugin Name: Custom Smilies
    Plugin URI:  https://ipstenu.org
    Description: I like the new smilies, shut up Otto.
    Version: 1.0
    Author: Mika Epstein
    Author URI: https://ipstenu.org/
    */
    
    // Move Smilies
    add_filter('smilies_src','helf_smilies_src', 1, 10);
    function helf_smilies_src($img_src, $img, $siteurl) {
        if ( strpos( $_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'MSIE 8' ) || strpos( $_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'MSIE 7' ) || strpos( $_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'Android' ) ) {
            $img = 'ie/'.$img;
        }
        else {
             $img = str_replace("png", "svg", $img); // Remove PNG
        }
        return $siteurl.'/code/images/smilies/'.$img;
    }
    
    // This is in a paren for my sanity....
    {
        global $wpsmiliestrans;
    
        if ( !get_option( 'use_smilies' ) )
            return;
        
        if ( !isset( $wpsmiliestrans ) ) {
            $wpsmiliestrans = array(
            ':mrgreen:' => 'icon_mrgreen.png',
            ':neutral:' => 'icon_neutral.png',
         // removing b/c new versions
            ':twisted:' => 'icon_evil.png',
              ':arrow:' => 'icon_arrow.png',
              ':shock:' => 'icon_eek.png',
              ':smile:' => 'icon_smile.png',
                ':???:' => 'icon_confused.png',
               ':cool:' => 'icon_cool.png',
               ':evil:' => 'icon_evil.png',
               ':grin:' => 'icon_biggrin.png',
               ':idea:' => 'icon_idea.png',
               ':oops:' => 'icon_redface.png',
               ':razz:' => 'icon_razz.png',
               ':roll:' => 'icon_rolleyes.png',
               ':wink:' => 'icon_wink.png',
                ':cry:' => 'icon_cry.png',
                ':eek:' => 'icon_surprised.png',
                ':lol:' => 'icon_lol.png',
                ':mad:' => 'icon_mad.png',
                ':sad:' => 'icon_sad.png',
                  '8-)' => 'icon_cool.png',
                  '8-O' => 'icon_eek.png',
                  ':-(' => 'icon_sad.png',
                  ':-)' => 'icon_smile.png',
                  ':-?' => 'icon_confused.png',
                  ':-D' => 'icon_biggrin.png',
                  ':-P' => 'icon_razz.png',
                  ':-o' => 'icon_surprised.png',
                  ':-x' => 'icon_mad.png',
                  ':-|' => 'icon_neutral.png',
                  ';-)' => 'icon_wink.png',
            // This one transformation breaks regular text with frequency.
            //     '8)' => 'icon_cool.png',
                   '8O' => 'icon_eek.png',
                   ':(' => 'icon_sad.png',
                   ':)' => 'icon_smile.png',
                   ':?' => 'icon_confused.png',
                   ':D' => 'icon_biggrin.png',
                   ':P' => 'icon_razz.png',
                   ':o' => 'icon_surprised.png',
                   ':x' => 'icon_mad.png',
                   ':|' => 'icon_neutral.png',
                   ';)' => 'icon_wink.png',
                  ':!:' => 'icon_exclaim.png',
                  ':?:' => 'icon_question.png',
            // New for me
                  '>:(' => 'icon_mad.png',
                  'o_O' => 'icon_surprised.png',
                  'O_o' => 'icon_eek.png',
                  '^^‘' => 'icon_redface.png',
                  ':‘(' => 'icon_cry.png',
                  ':’(' => 'icon_cry.png',
       ':whiterussian:' => 'icon_whiterussian.png',
                  '|_|' => 'icon_whiterussian.png',
                   ':/' => 'icon_uneasy.png',
                  ':-/' => 'icon_uneasy.png',
          ':developer:' => 'icon_developer.png',
            ':burrito:' => 'icon_burrito.png',
            ':martini:' => 'icon_martini.png',
                  '>-I' => 'icon_martini.png',
              ':blush:' => 'icon_redface.png',
              ':heart:' => 'icon_heart.png',
                //'&amp;lt;3' => 'icon_heart.png',
               ':bear:' => 'icon_bear.png',
               ':star:' => 'icon_star.png',
                  '(w)' => 'icon_wordpress.png',
                  '(W)' => 'icon_wordpress.png',        
            );
        }
        
        if (count($wpsmiliestrans) == 0) {
            return;
        }
    }
    

    But why don’t they all show up in my comments section? Where’s the martini!? I also upgraded my plugin SSL Grins with an ‘easter egg’ of code that hides anything in this array of smiled_hide. This works on both my version of the smilies plugin and Avryl’s. and looks like this:

    $smiled_hide = array("bear", "wordpress", "martini", "developer", "whiterussian", "burrito","icon_bear.gif", "icon_wordpress.gif", "icon_martini.gif", "icon_developer.gif", "icon_whiterussian.gif", "icon_burrito.gif", "icon_bear.png", "icon_wordpress.png", "icon_martini.png", "icon_developer.png", "icon_whiterussian.png", "icon_burrito.png", "icon_bear.svg", "icon_wordpress.svg", "icon_martini.svg", "icon_developer.svg", "icon_whiterussian.svg", "icon_burrito.svg");
    

    Now this is possibly the jankiest, stupidest, code I’ve written in a while. I’d rather just have the words be there, and filter “If any of the values in this array is a partial match to the name of the smilie we’re looking at right now, don’t show it.” But I’m not clever enough with arrays and preg matching at this point, so I did that ugly list, and used this:

    if (!in_array($grin, $smiled) && !in_array($grin, $smiled_hide) ) {...}
    

    So at this point, pull requests are welcome because I’d love to clean that up!

  • Electric Sass Boogaloo

    Electric Sass Boogaloo

    Poster to Breakin' 2 (electric boogaloo)One I mastered using Sass enough to feel confident with basic mixins, I decided to remove my _media.scss file and go at it with Chris Coyer’s methodology of Breakpoints.

    Instead of having a media file with all the special media calls, you can put the media section inside the Sass call. That stops that cognitive dissonance (for me at least) of hunting down where the heck I made that change. Since I was already using Tracy’s code, I was able to slip in breakpoints using her bp mixin, with a name. And thus:

    .site-intro {
        @include font-size(14px);
        line-height: 1.5;
        @include rem(letter-spacing, 1px);
        text-transform: uppercase;
        float: left;
        @include rem(margin-top, 20px);
        @include bp(small) { @include rem(margin-bottom, 15px); width: 100%; text-align: center;}
    }
    

    This is clearly a really simple example, but it means I can add all sorts of blocks and have it be together. It actually made my building of my css files really easy, since once I figured out what size I wanted things to be, I was able to build and ignore all the tricky maths, which as I learned recently, was really important for your REMs.

    Now that I was using includes, mixins, default settings, and breakins, it was time to reconsider how I made the css files. I installed sass on my laptops and servers. It required Ruby, but I’d installed that ages back trying out Jekyll (there’s no post about that yet for … reasons). Once Ruby was installed, Sass was this easy: gem install sass (you may or may not need to sudo that sandwich).

    Having Sass on my server means I can edit files in place (which … you wouldn’t do, right?) and when I’m done, run this:

    $ sass sass/style.scss style.css
    

    But it also means when I (properly) edit on my computer and push up, I can script with git hooks instead! I took my methodology from Nico Hagenburger and Steve Grunwell, but you can use just about anything. I like how they don’t include the complied css file in their builds, which keeps it cleaner. Then one could have another hook to push the files after, say, you tag a release. That one would copy the files up to your server (rsync anyone?) and thus you do it all locally, but magically it appears to the world.

    Breakdancing in Yoyogi, Tokyo, Japan.
    Breakdancing in Yoyogi, Tokyo, Japan. By Colin McMillen.

    Back to breakpoints though. So great, I can use it to make my math teh simples. What else can I do? I can change content, colors, font-families, or anything else you want to change on a size-defined basis. How do you break the points? Breakpoint SASS is possibly my new favorite website.

    For an end user who doesn’t really spend a lot of time with theme development, this buys even me a little time in my day. After I spent a weekend banging it out, I found my updates were easier, cleaner, and faster. Having the files separate is possibly the fastest thing. I edit a scss, check in the code to my git repo (because I am totally neurotic), test the compiled css, and I’m dancing in the streets.

  • Gaining REM

    Gaining REM

    Not sleep… And not the band.

    REM (the band) in 1981I was reading Breaking up responsive design on Yoast.com and, like pretty much everyone else, they’ve been been scaling down the browser base font to 62.5% for a while now. The default font-size for most browsers is, as it happens, 16px. The problem with that 62.5% call is that, at least on Chrome for Mac, I ended up getting a flash of 25.6px fonts before the page would load right. Turns out that wasn’t just me, and it’s the bane of 62.5%

    So the fix would be to make my font 100%:

    html {
    	-webkit-text-size-adjust: 100%;
    	font-size: 100%;
    }
    

    And then I’d have to re-do all my font calls in my CSS because they were all based on 14px. This made me stare at my child theme on another site for a while, and finally knuckle down and script in better font handling, because the idea of manually cranking through everything was too daunting, even if I used REM Calculator to sort out my px/em ratio.

    Still, doing this still meant I’d still have a lot of stuff like this:

      font-size: 16px;
      font-size: 1rem;
    

    Bah. Who want’s that? It was time to get sassier. I went back to Tracy and came up with her use of “Mixins.” And this is where Sass gets weird. It can do my math for me. This was, I admit, what originally made me interested. But in July it was a theoretical attraction. By December it was love. See, Tracy did the math with her sass-responsive library, which she calls a library of variables, mixins and formulas geared towards Responsive Web Design using Sass.

    I called it _taupecat.scss but we’ll get to that in a second.

    The first step would be to split up my files. See, I’m using Genesis, and they have a handy table of contents for all the sections, so I just made each section an import:

    /*
    HTML5 Reset
    --------- */
    @import &amp;quot;normalize&amp;quot;;
    
    /*
    Defaults
    --------- */
    @import &amp;quot;defaults&amp;quot;;
    
    /*
    Structure and Layout
    --------- */
    @import &amp;quot;structure&amp;quot;;
    

    List of my sass files I admit, this gives me a million files, as you can see in that image on the right, but it’s actually pretty easy to figure out what’s where. It took me a while to get everything where I wanted it, and while I could have used Bones for Genesis, I know me, and like using Git is the fastest way to learn it, so is using Sass. So I started with the basics of splitting it up like imports. Also I didn’t want to add in Compass to my mix just yet.

    I named my files _section.scss and they all consisted of the normal CSS for each section at first. After all, the first step is segregation of code. The second step was to use Tracy’s code and change all instances like this:

    	margin-bottom: 24px;
    	margin-bottom: 1.5rem;
    

    to this:

    	@include rem(margin-bottom, 24px);
    

    And then

        padding: 0 12px 0 40px;
        padding: 0 0.75rem 0 2.5rem;
    

    to this:

        padding: 0 12px 0 40px;
        padding: 0 cr(12px) 0 cr(40px);
    

    This lets me use Tracy’s cool files and her hard work to make mine way easier! Basically I no longer have to math out that if 16px is 1rem, then 32px is 2rem, and that means 40px is 2.5rem and so on and so forth. It’s faster. Of course, since I’ve done this in pixels, it takes me a teensy bit longer to use inspector to fiddle, since I have to uncheck the rem and edit the px, but I’m okay with that.

    I also tossed in two special calls:

    @import &amp;quot;settings&amp;quot;;
    @import &amp;quot;taupecat&amp;quot;;
    

    REM (band) in 2011The taupecat has all of Tracy’s code, and settings… well that’s for another post about how I’m controlling my colors and the fonts. But for now, well, all my font sizes and paddings are dynamic. It does mean I have to rebuild my css every time I make a change, but if you ask me, that’s better than math sometimes.

    That’s why we have calculators, right?