align-toparrow-leftarrow-rightbackbellblockcalendarcamerachatcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-crosscrosseditemptyheartfacebookfullheartglobegoogleimagesinstagramlocation-pinmagnifying-glassmailmoremuplabelShape 3 + Rectangle 1outlookpersonplusImported LayersImported LayersImported Layersshieldstartwitteryahoo

Groundwork for a Modern Web UI

  • Sep 10, 2014 · 12:00 PM
  • dealnews.com

Title

Groundwork for a Modern Web UI

Overview

In this presentation, Dan Nagle will show how to leverage frameworks to build the beginnings of a modern user interface. HTML5 Boilerplate will supply a solid foundation to start the build process. jQuery UI will then be added so the UI structure has a consistent and pleasant theme. Then the Mustache.js template engine will be shown as one tool of choice to finally begin the actual app. Throughout the build process, concepts to be discussed include responsive design, page speed, and cross-browser issues.

Objective

Learn the tools of a modern front-end.

Target Audience

Web developers of any skill level.

Assumed Audience Knowledge

Basic web concepts.

Five things audience members will learn

jQuery UI
HTML5 Boilerplate
Mustache.js
UglifyJS
Modernizr


Join or login to comment.

  • A former member
    A former member

    I'd look at gulp at the same time as grunt. Gruntfile config is cryptic at best and Gulp is supposed to be faster. Gulp is probably the future.

    1 · September 23, 2014

  • Dan N.

    I agree that Grunt / Gulp is the better method. When putting together the presentation, I was trying to target beginner to intermediate, and I decided that Grunt was too advanced. When I presented this again last week, I talk a little more about Grunt and showed the query string as the easy "low-hanging fruit" technique. Based on the head-nodding, I think that was the right balance. Thanks for the feedback.

    2 · September 22, 2014

  • Jonathan W.

    I checked with Paul Irish on Twitter. He does NOT think that filename revving with query strings is an issue anymore for proxies. He did not give a specific reason, but said cache bust with query string at will. But automating it with Grunt sounds awesome as well. I am trying to learn Grunt among other things.

    1 · September 22, 2014

  • A former member
    A former member

    I agree with Jonathan that the build process of grunt or gulp should be computing a SHA or MD5 and renaming the file and updating the index.html that loads it.

    That also reduces the server load because you aren't checking a file time stamp each time you serve a page.

    2 · September 22, 2014

  • Jonathan W.

    I mentioned my concern about filename revving with query strings at Groundwork for a Modern Web UI meetup. I am certainly not the expert when it comes to proxies (like Squid and Nginx), but I have read that some proxies will not cache files with query strings. I wanted to provide my source:

    (Steve Souders)
    Revving Filenames - Don't Use Query String
    http://tinyurl.com/dmut33

    Yeah that article is 6 yrs old, but Paul Irish makes the effort to reference it in the latest version of HTML5 Boilerplate. And as far as web experts, Paul ranks somewhere right under Tim Berners Lee IMO.

    (Paul Irish)
    HTML5 Boilerplate
    .htaccess file (Line 761)
    http://tinyurl.com/lguyfqd

    Perhaps this issue is a few years old and most proxies have fixed the problem? Worth discussing I guess.

    2 · September 22, 2014

  • Armando G.

    Very detailed and informative.

    1 · September 11, 2014

  • A former member
    A former member

    Interesting

    2 · September 10, 2014

  • John A.

    Nice job Dan!

    2 · September 10, 2014

  • Lysle S.

    Thanks for the very informative presentation, Dan!

    2 · September 10, 2014

  • Dan N.

    Thanks everybody for coming! Slides can be viewed here:
    http://naglecode.com/modernwebui/

    1 · September 10, 2014

  • Dan N.

    For those that like to read ahead, the example project has been posted to GitHub. This is the app being built with this presentation (a basic mortgage calculator) :
    https://github.com/dannagle/mortgagecalc

    Here is a live demo:
    http://mortgagecalc.naglecode.com/

    Hope to see everybody Wednesday!

    1 · September 7, 2014

  • Dan N.

    The week after, I will be giving this same presentation in Toronto:
    http://fitc.ca/presentation/groundwork-for-a-modern-web-ui/

    This presentation is also going to be a tutorial in Net Magazine. I am shooting for the December issue:
    http://www.creativebloq.com/net-magazine

    Hope everybody enjoys it.

    2 · August 14, 2014

  • James B.

    Working a different set of days this semester.

    August 4, 2014

Our Sponsors

  • DealNews.com

    DealNews.com provides lunch and meeting space for most NAWD Meetups.

  • JetBrains

    Free Personal License of PhpStorm or any other JetBrains IDE.

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy