[Noisebridge WebDev] Re(1): Frontend Web Development, Monday 8pm: CSS selectors and the box model

[Jeffrey Carl Faden]

On Sep 30, 2012, at 8:45 AM, Aaronco Thirtysix <aaronco36 at gmail.com> wrote:

> From: Jeffrey Carl Faden <jeffreyatw at gmail.com>
> To: .........., webdev at lists.noisebridge.net
> Subject: [Noisebridge WebDev] Frontend Web Development, Monday 8pm:
>        CSS selectors and the box model
> 
>> Last class we started talking about selectors in CSS. They are
>> probably the most complex part of CSS, so we're going to look at them
>> further in-depth. We'll also talk about the box model, the display
>> concept that makes words and containers on the web look like they do.
> 
> IMNSHO, it would be great to gather and to present a list of decent
> and alternate web-element inspection add-ons for Firefox/Iceweasel
> _besides_ just Firebug --- naturally including the ability to finely
> inspect CSS-elements for upcoming WebDev classes.
> +Plus+, the ability to provide clearer instructions how to effectively
> _use_ these Firebug alternatives for web-element inspection.
> That's simply because NOT(!) everyone is using Google's Chrome
> browser, Safari (for Macs), MS Internet Explorer (for PCs), Opera,
> ....etcetera.
> 
The unfortunate fact is, Firebug just isn't as easy to use as Chrome's Developer Tools. For example, there is no way I know of to bring a JavaScript console up regardless of what tab you're in - a feature that I find invaluable in day-to-day work. And having a separate CSS tab, as we saw in the last lecture, is baffling to me.

Fortunately, Chrome can be installed anywhere. If there is a concern with its closed-source components, Chromium - the open source project on which Chrome is based - can be installed instead.

I do not find it a failing to have a bias - even when teaching others - toward a specific browser. The actual languages I'm teaching are browser-agnostic, but you can't blame me for having a preference of which tools to use. I try to be accommodating toward other choices - and it is indeed necessary at times to use Firebug to diagnose browser-specific behavior, but we haven't gotten to the part in my curriculum where we discuss cross-browser testing - but I don't find it necessary to spend time in class going over all of the choices. Lab would be a great time for these queries.

> 
>> If you can't make it to this week's lecture, you can watch a live
>> video stream of the class. Join this Google+ Event to be notified of
>> when to hop on (you don't have to be a Google+ member):
>> https://plus.google.com/events/c81a9fc4v6n8s9grq0r87hfobks
>> This video stream will also be available to watch after the class is complete.
> 
> Having watched the live video stream of last week's first class in the
> series, I think that the instructor might want to better sharpen the
> focus on the video projections of the text edits. In several obvious
> instances within that video stream, the text entries in both the
> index.html and style.css files are CLEARLY blurry and hard to
> distinguish. This is especially true when windows or portions of each
> window are minimized, e.g., a) horizontally tiling the text editor
> windows for index.html and style.css side-by-side along with the
> browser results, and b) having the larger browser main window along
> with the teeny-tiny (and blurry!) Firebug element-inspection window(s)
> below.
> 
> Uncertain how the instructor could better clarify screen shots.
> Here are just a few thoughts from on the top of my head how this could
> perhaps be done:
> 1) Figuring out and then using the focusing mechanism(s) or control(s)
> on the projector itself?
> 2) Cleaning and polishing the projector lens?
> 3) Physically moving the projector forward and backward from its front
> position until the display is at its sharpest?
> 4) Using some sort of focusing software for video (somewhat like the
> Sharpen filter does for graphics in the GIMP??)
> 5) Rapidly switching between maximized screenshots at maximized focus
> for each part of the live video stream presentation, rather than
> simultaneously trying to tile the several relevant windows or portions
> of each window within the single screen?
> Again, these are just a few thoughts on this off the top of my head...
The webcast is not a recording of the screen from a video camera. No hardware involved. It is a direct screencast done over Google+ Hangouts. Unfortunately, it has a limit to the resolution of your screen when you broadcast (probably for bandwidth reasons), which causes blurriness. The only solution is increasing the font size of my text editor, which I already do.

I started broadcasting the class about a month ago, mostly as an experiment. I found that broadcasting via Google+ Hangouts takes the least amount of extra overhead to set up, and it's free. I don't know of other free, easy options to broadcast and save a 2.5-hour long class to YouTube, so if anyone has a suggestion, I would be happy to try them out.

Again, I'd like to re-stress the fact that I already spend a good amount of my free time setting up the class notes, assignments, teaching the actual classes, etc. I don't have much more time to ensure that the webcast goes without a hitch. The class is intended to be attended in person, with the webcast being more of a crutch for those who can't make it at times.
> 
> 
>> ....If you're either new, couldn't make last week's class or
>> you simply need a refresher, come early and we'll go through
>> a simple tutorial. Don't let it discourage you if you're starting
>> from the middle - attend recaps and labs and you should be
>> able to catch up!
> 
> I'm wondering what other decent tutorials/recaps are available online
> for HTML5 and CSS3 _besides_ the instructor's live video stream and
> the wide breadth of zip'ped downloads listed throughout
> https://noisebridge.net/wiki/Frontend_Web_Development/Notes for Series
> 1 and Series 2 of the FWD class????
> Already viewing the fine HTML and CSS Educator.com YouTube videos,
> e.g., http://www.youtube.com/watch?v=mh0aY17Hh0o& and
> http://www.youtube.com/watch?v=sWJH3GESYcU&
Honestly, I'd like to know this as well! The lack of easy tutorials is one of the reasons I started teaching this class.
> 
> Thanks!
> -A
> 
> ------------------------------
> _______________________________________________
> WebDev mailing list
> WebDev at lists.noisebridge.net
> https://www.noisebridge.net/mailman/listinfo/webdev