Web development

Blogposts on blog.futtta.be about “web development”; looking into frameworks, security, best practices, the use of Flash, usability and accessibility, …

HTML/ Javascript/ multimedia-extranvanganza essay about code

by

Paul Ford’s “What is Code” on Bloomberg Business is a comprehensive and utterly superb essay/ course/ HTML-javascript-multimedia-extravaganza about IT, computer history, programming languages, development, frameworks, version control, testing, shipping projects and much, much more. The entire text is licenced under Creative Commons (by-nc-nd) and all is up on GitHub to fork or simply admire.
Thanks for sharing Nicolas 🙂

Is your string zipped?

by

While looking into a strange issue on a multisite WordPress installation which optimized the pages of the main but not of the sub-blogs, I needed code to check whether a string was gzipped or not. I found this like-a-boss code-snippet on StackOverflow which worked for gzencoded strings:

$is_gzip = 0 === mb_strpos($mystery_string , "\x1f" . "\x8b" . "\x08");

But this does not work for strings compressed with gzcompress or gzdeflate, which don’t have the GZIP header data, so in the end I came up with this less funky function which somewhat brutally simply tries to gzuncompress and gzinflate the string:

function isGzipped($in) {
  if (mb_strpos($in , "\x1f" . "\x8b" . "\x08")===0) {
    return true;
  } else if (@gzuncompress($in)!==false) {
    return true;
  } else if (@gzinflate($in)!==false) {
    return true;
  } else {
    return false;
  }
}

Klunky, but it works. Now if only this would confirm my “educated guess” that the original problem was due to a compressed string.

Celebrating 300000 Autoptimize downloads with new release

by

300k-1, that isSo just now Autoptimize passed the 300000 downloads mark (6 months after reaching 200k), which feels huge to me. To celebrate I just pushed out version 1.9.3, which features -as becomes a minor release- small improvements and bugfixes. From the changelog;

  • improvement: more intelligent CDN-replacement logic, thanks Squazz for reporting and testing
  • improvement: allow strings (comments) to be excluded from HTML-optimization when comment removal is active (via API)
  • improvement: changed priority with which AO gets triggered by WordPress, solving JS not being aggregated when NextGen Galleries is active, with great help from msebald
  • improvement: extra JS exclude-strings: gist.github.com, text/html, text/template, wp-slimstat.min.js, _stq, nonce, post_id (the latter two were removed from the default “manual” exclude list on the settings-page and can be removed there if you want)
  • new in API: autoptimize_filter_html_exclude, autoptimize_filter_css_defer, autoptimize_filter_css_inline, autoptimize_filter_base_replace_cdn, autoptimize_filter_js_noptimize, autoptimize_filter_css_noptimize, autoptimize_filter_html_noptimize
  • bugfix: remove some PHP notices, as reported by dimitrov.adrian
  • bugfix: make sure HTML-optimalization does not gobble a space before a cite as proposed by ecdltf
  • bugfix: cleaning the cache did not work on non-default directories as encountered by NoahJ Champion
  • upgraded to yui compressor php port 2.4.8-4
  • added arabic translation, thanks to the ekleel team
  • tested with WordPress 4.2 beta 3 (yep, it works)

So there you have your present, no go unwrap it! Have fun! 🙂

ALA about Angulars shortcoming: it’s the server, stupid!

by

In “Let links be links” at A List Apart Ross Penman discusses some of the dangers of building single-page-apps that entirely rely on client-side JavaScript (using e.g. AngularJS or Ember) and more importantly proposes a solution;

When dynamic web page content is rendered by a server, rendering code only has to be able to run on that one server. When it’s rendered on a client, the code now has to work with every client that could possibly visit the website. […] If framework developers could put in the effort (which, admittedly, seems large) to get apps running in Node just as they run in the browser, initial page rendering could be handled by the server, with all subsequent activity handled by the browser. […] If this effort could be made at the outset by a framework maintainer, then every developer using that framework could immediately transform an app that only worked on the latest web browsers into a progressively enhanced experience compatible with virtually any web client—past, present, or future. […]

Quick tip; disabling WordPress author pages

by

I helped build a WordPress-site for a not-for-profit and they asked me to disable the author pages. Although I’m sure there are multiple plugin-based solutions, I ended up simply adding an author.php to my (child) theme with this in it;

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: /");
?>

As author.php is used for all author pages (if available, else archive.php is used), every attempt to reach an author page will result in a permanent redirect being sent, effectively disabling the author archive. Keeping it simple stupid!

Uw eigen mobielere deredactie in 5 stappen

by

openshift configureer uw redactieuwredacie op openshift uwredactie op openshiftOok al kunt ge mijn alternatieve mobiele redactie hier bekijken, dan zout ge toch, om redenen die geheel de uwe zijn, misschien liever uw hoogst persoonlijke redactie hebben?
Wel, dat kan in 5 eenvoudige stappen dankzij Openshift, het freemium PAAS platform van Red Hat en dat gaat ongeveer zo:

  1. Maak een gratis account aan bij Openshift
  2. Klik op “Create your first application now“
  3. Vul PHP in in het zoekvenster en selecteer de PHP 5.4 cartridge
  4. Vul een naam in voor de public URL, copy/paste https://github.com/futtta/redactie in het source code veld en klik op “Create application“
  5. Even geduld terwijl uw eigenste redactie wordt aangemaakt. In het laatste scherm kunt ge eventueel git access configureren (“Will you be changing the code of this application?”) of direct op “Visit app in the browser” (in mijn geval naar http://mijnredactie-futtta.rhcloud.com/) klikken.

Spreading the news, tiens!

Verder sleutelen aan mijn m.deredactie.be-alternatief

by

futtta-redactie-tabs-compressorDat ze daar aan de Reyerslaan niet stilzitten; http://m.deredactie.be/ is nu ook bruikbaar op een JavaScript-loze browser! Dat klinkt misschien onbelangrijk, maar zo een basis-versie die werkt, ongeacht de browser, is een grote stap in wat ik de juiste richting acht. Spijtig genoeg blijft de site voor de rest onder Google’s verwachtingen en de laadtijd en total download size blijven een mobiele site onwaardig. Daar ten gronde iets aan veranderen binnen het kader van de gekozen architectuur (MVC in de browser) zal niet eenvoudig zijn.
Daarom ben ik dus ook niet blijven stilzitten en sleutelde ik verder aan mijn alternatief voor m.deredactie.be. Video werkt nog steeds niet (misschien moet ik eens kijken of ik iets kan doen met de JS-file van de VRT), maar onder andere deze verbeteringen zijn er wel bij:

  • Op de homepage hebben “hoofdpunten”en “laatste nieuws” nu elk een eigen tab (ik ben zelf niet overtuigd van de kleurenkeuze, maar soit).
  • Op de detail-pagina’s kun je artikels delen op sociale media (met lyteshare.js)
  • De html is opgekuist en valideert nu bijna op de W3 validator (bijna maar nog niet helemaal; de imgsrc attributen op placeholder-divs voor image lazyloading mogen niet).

Daarnaast zitten er nog een handvol bugfixes en andere kleine wijzigingen in, cfr de  “done” lijst op Trello. Pagespeed Insights score en webpagetest.org testresultaten zijn nog steeds “up to snuff”. De geüpdate code staat op GitHub en het resultaat (als je het projectje niet zelf wilt/ durft/ kunt installeren) zie je op http://futtta.be/redactie/.

Tweaking WordPress’s Expound theme’s menu

by

I’m helping on a site for a not-for-profit for which we selected “Expound” as the base theme. I like Expound; it looks great, there’s no jQuery- or webfont-cruft to worry about and although the CSS comes with a seperate reset.css-file, it does (Auto-)optimize perfectly.
But I wasn’t happy with the menu color-scheme and with the fact that the menu lacked an indication that a child page of a main entry was being shown instead of the page of that main entry itself (confused much?).
Anyway, this is what I ended up with;
wordpress expound theme menu tweaked
For those wanting to do something similar, this is the relevant CSS in my child theme;

/* don't want no blue */
.navigation-main .current-menu-item > a {
        background: #557B47 !important;
}
/* triangle should not be blue either, need it to be a bit bigger */
.navigation-main ul > .current_page_item a:after, .navigation-main ul > .current-menu-item a:after, .navigation-main ul > .current-post-ancestor a:after, .navigation-main ul > .current-menu-parent a:after, .navigation-main ul > .current-post-parent a:after {
        border-top: 10px solid #557B47 !important;
        bottom: -14px;
        z-index: 1000;
}
@media screen and (min-width: 600px) {
  /* if page from submenu, add line under parent item to show your in that submenu */
  .navigation-main ul > .menu-item {
        border-bottom: 6px solid #3A3A3A !important;
  }
  .navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent {
        border-bottom: 6px solid #557B47 !important;
  }
  /* but not in submenu */
  .navigation-main .sub-menu > .menu-item {
        border-bottom: 0px !important;
  }
  /* less padding at the bottom to compensate for that extra line */
  .navigation-main a {
        padding: 10px 10px 4px !important;
  }
  /* except when in submenu */
  .navigation-main .sub-menu a {
        padding: 10px !important;;
  }
}
/* change color to default brown if child-item is active */
.navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent {
        background: #3A3A3A !important;
}

Have fun!