IEEE Computer Society

IEEE Computer Society

IEEE Computer Society

IEEE / Institute of Electrical and Electronics Engineers Incorporated

IEEE / Institute of Electrical and Electronics Engineers Incorporated

IEEE / Institute of Electrical and Electronics Engineers Incorporated

IEEE Computer Society

IEEE Computer Society

Online Resource

Online Resource

Genadinik, Alex, author

Marginson, Simon

Narayan, Vickel L., author

Jamali, Siti Salmi, author

Online Resource

Online Resource

Rotch Library - BL1055.R585 2020

Online Resource

Online Resource

Noel, Lance, author

Joshua Blumenstock discusses patterns of mobile phone use as a source of "big data" about wealth and poverty in developing countries; David Grimm talks about gene drives, helpful parasites, and electric roses. Hosted by Sarah Crespi. [Img: A.A. JAMES]

Rotch Library - HE311.D42 C6636 2019

Rotch Library - HE305.D36 2018

Rotch Library - HE305.A735 2020

Online Resource

Online Resource

Online Resource

Online Resource

Dewey Library - JC573.2.E852 B88 2020

Taylor, Dorceta E

Panel Todd Parker (twitter github) Joe Eames (twitter github blog) Jamison Dance (twitter github blog) Merrick Christensen (twitter github) Charles Max Wood (twitter github Teach Me To Code Rails Ramp Up) Discussion 00:53 - Todd Parker Introduction Filament Group 01:21 - DevChat.tv Indiegogo Campaign 01:55 - jQuery Mobile jQuery UI 04:13 - Responsive web design 06:17 - Mobile & Proxy Browsers WebKit Opera & Opera Mini Amazon Silk 14:06 - Enhancements 17:11 - Plugging jQuery Mobile into Desktop Applications 19:11 - Using client-side MVC frameworks AngularJS jQuery Mobile Resources Page 21:52 - Filament Group and jQuery projects ThemeRoller The Filament Group on Github Microsoft Contributions 28:26 - Theming Structure vs Style Object-oriented CSS Widget Factory 37:25 - Accessibility 058 JSJ Building Accessible Websites with Brian Hogan ARIA 44:18 - Progressive Enhancement Bootstrap Designing with Progressive Enhancement: Building the web that works for everyone by The Filament Group Visualize Picks Disenchanted by Robert Kroese (Joe) Sid Meier's Ace Patrol (Joe) Zeds Dead & Omar LinX (Merrick) RequireJS (Merrick) Ember 101 Screencasts (Jamison) Gifsicle (Jamison) vundle (Jamison) D-Link SharePort Go Mobile Companion with Rechargeable Battery (Chuck) E-3lue Cobra Type-M EMS131BK High Precision Gaming Mouse (Chuck) TotalMount - Apple TV Universal Mounting Kit (Chuck) Sonos (Todd) Sketch App (Todd) GitHub (Todd) iOctocat (Chuck) Grunt (Todd) LEGO Batman: DC Super Heroes (Todd) Next Week Development Environments Transcript [Hosting and bandwidth provided by the Blue Box Group. Check them out at Bluebox.net.]  [This episode is sponsored by Component One, makers of Wijmo. If you need stunning UI elements or awesome graphs and charts, then go to Wijmo.com and check them out.]  CHUCK:  Hey everybody, and welcome to Episode 59 of the JavaScript Jabber Show. This week on our panel, we have Joe Eames. JOE:  Hey everybody. CHUCK:  Jamison Dance. JAMISON:  Hello. CHUCK:  Merrick Christensen. MERRICK:  Hey guys. CHUCK:  I’m Charles Max Wood from DevChat.tv. And we have a special guest, Todd Parker from the jQuery UI team. TODD:  Hey everyone. CHUCK:  You want to introduce yourself really quickly? TODD:  Sure. My name is Todd Parker. I am a partner here at Filament Group in Boston. We’re a small web design shop. And I’m also the project lead for the jQuery Mobile team. And previous to that, I was on the jQuery UI team as well. So, I’m both covered. CHUCK:  Did I say jQuery UI? I meant jQuery Mobile. TODD:  You did. I was covering for you though, it’s okay. CHUCK:  [Laughs] Awesome. Before we get too far into this, I want to make one announcement and that is that I’ve set up an Indiegogo campaign for the network of podcasts that this is a part of. So, we’re trying to build a website that has all the features that people have been asking for. Mostly it has to do with search and some RSS feed management stuff. So, if you would like to support the show, then by all means do so. You can do it by going to Indiegogo.com/projects/DevChat-tv. And I’ll put a link to the show notes so that you can find it. Alright. Well, let’s talk about jQuery Mobile here. I’m a little curious. I’ve played with it a little bit, but I haven’t really had to build too many Mobile sites. So, can you explain a little bit about what the focus is and how it’s different from the jQuery that we all know and love? TODD:  Sure. So, jQuery Mobile started its life, it’s very similar in concept to jQuery UI, so it’s a user interface framework that’s built on top of jQuery core. The difference between UI and Mobile is obviously UI is much more desktop focused, and Mobile is mobile focused. That said, jQuery Mobile, from the beginning,

Taking a “mobile first” approach to web development poses some challenges if you need to provide a “desktop” experience for legacy versions of IE. Using a CSS pre-processor like Sass can help.

As of Sass 3.2, there is another way of catering for IE, described by Jake Archibald.

One aspect of a “mobile first” approach to development is that your styles are usually gradually built up from a simple base. Each new “layer” of CSS adds presentational adjustments and complexity, via CSS3 Media Queries, to react to and make use of additional viewport space. However, IE 6/7/8 do not support CSS3 Media Queries. If you want to serve IE 6/7/8 something more than just the base CSS, then you need a solution that exposes the “enhancing” CSS to those browsers.

Popular existing options

An existing option is the use of a CSS3 Media Query polyfill, such as Respond.js. However, there are some drawbacks to this approach (see the project README), such as the introduction of a JavaScript dependency and the XHRing of your style sheets, which may introduce performance or cross-domain security issues. Furthermore, adding support for CSS3 Media Queries is probably not necessary for these legacy browsers. The main concern is exposing the “enhancing” CSS.

Another method, which Jeremy Keith has described in his post on Windows mobile media queries, is to use separate CSS files: one basic global file, and an “enhancing” file that is referenced twice in the <head> of the document. The “enhancing” file is referenced once using a media attribute containing a CSS3 Media Query value. This prevents it being downloaded by browsers (such as IE 6/7/8) which do not support CSS3 Media Queries. The same file is then referenced again, this time wrapped in an IE conditional comment (without the use of a CSS3 Media Query value) to hide it from modern browsers. However, this approach becomes somewhat cumbersome, and introduces multiple HTTP requests, if you have multiple breakpoints in your responsive design.

Getting Sass to help

Sass 3.1 provides some features that help make this second approach more flexible. The general advantages of the Sass-based approach I’ve used are:

1. You have full control over how your style sheets are broken up and reassembled.
2. It removes the performance concerns of having to reference several separate style sheets for each breakpoint in the responsive design, simply to cater for IE 6/7/8.
3. You can easily repeat large chunks of CSS in separate compiled files without introducing maintenance problems.

The basic idea is to produce two versions of your compiled CSS from the same core code. One version of your CSS includes CSS3 @media queries and is downloaded by modern browsers. The other version is only downloaded by IE 6/7/8 in a desktop environment and contains no CSS3 @media queries.

To do this, you take advantage of the fact that Sass can import and compile separate .scss/.sass files into a single CSS file. This allows you to keep the CSS rules used at any breakpoint completely separate from the @media query that you might want it to be a part of.

This is not a CSS3 Media Query polyfill, so one assumption is that IE 6/7/8 users will predominantly be using mid-size screens and should receive styles appropriate to that environment. Therefore, in the example below, I am making a subjective judgement by including all the breakpoint styles up to a width of 960px but withholding those for any breakpoints beyond that.

The ie.scss file imports numerous other files, each containing a layer of CSS that builds upon the previous each layer of CSS. No CSS3 @media queries are contained within the files or the ie.scss file. It then compiles to a single CSS file that is designed to be served only to IE 6/7/8.

// ie.scss

@import "base";
@import "320-up";
@import "480-up";
@import "780-up";
@import "960-up";

The style.scss file imports the code for each breakpoint involved in the design (including any beyond the limit imposed for legacy versions of IE) but nests them within the relevant CSS3 @media query. The compiled version of this file is served to all browsers apart from IE 6/7/8 and IEMobile.

// style.scss

@import "base";
@media (min-width:320px) {
    @import "320-up"; }
@media (min-width:480px) {
    @import "480-up"; }
@media (min-width:780px) {
    @import "780-up"; }
@media (min-width:960px) {
    @import "960-up"; }
@media (min-width:1100px) {
    @import "1100-up"; }

The resulting CSS files can then be referenced in the HTML. It is important to hide the ie.css file from any IE-based mobile browsers. This ensures that they do not download the CSS meant for desktop versions of IE.

<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="/css/style.css">
<!--<![endif]-->

<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="/css/ie.css">
<![endif]-->

This Sass-enabled approach works just as well if you need to serve a basic style sheet for mobiles without CSS3 Media Query support, and prevent those devices from downloading the CSS used to adapt the layout to wider viewports. For example, you can avoid importing base.scss into the ie.scss and style.scss files. It can then be referenced separately in the HTML.

<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/style.css" media="(min-width:320px)">

<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="/css/ie.css">
<![endif]-->

You’ll notice that I didn’t wrap the style.css reference in a conditional comment to hide it from legacy versions of IE. It’s not necessary this time because the value of the media attribute is not understood by legacy versions of IE, and the style sheet will not be downloaded.

In different circumstances, different combinations of style sheets and media attribute values will be more appropriate.

Summary

Even if you want to don’t want to use any of the Sass or SCSS syntax, the pre-processor itself can help you to write your CSS in a “mobile first” manner (with multiple breakpoints), provide a “desktop” experience for IE 6/7/8, and avoid some of the performance or maintenance concerns that are sometimes present when juggling the two requirements.

I’m relatively new to using Sass, so there may be even better ways to achieve the same result or even to prevent the inclusion of IE-specific CSS unless the file is being compiled into a style sheet that only IE will download.