Register now for the W3C HTML5 online course that starts next Monday, 17 March 2014. Acclaimed trainer Michel Buffa will cover the techniques developers and designers need to create great Web pages and apps. This new course edition has been updated again, and features advanced techniques illustrated by numerous examples. Learn more about W3DevCampus, the official W3C online training for Web developers. See also our self-explanatory fun video.

UMBC’s intercollegiate cyber competition team (the “CyberDawgs”) are heading to the finals of the Mid-Atlantic Collegiate Cyber Defense Competition (CCDC) on March 26-29 at the Johns Hopkins University Applied Physics Lab – Kossiakoff Center in Laurel, MD!

Nearly 300 students from schools throughout the Mid-Atlantic region competed in several qualification rounds to determine the eight finalist teams. Joining the CyberDawgs at the finals will be teams from Anne Arundel Community College, Liberty University, West Virginia University, Towson University, Radford University, Capitol College, and Millersville University. The winner of the Mid-Atlantic finals will advance to the National CCDC Finals in San Antonio, TX later this spring.

The 2014 MA-CCDC finals scenario challenges teams to defend their networks against a series of escalating cybersecurity attacks occuring during a simulated disaster management situation in Maryland.

The 2014 National CyberWatch Mid-Atlantic Collegiate Cyber Defense Competition (CCDC) presented by National CyberWatch Center is in its ninth year of providing a unique experience for college and university students to test their cybersecurity knowledge and skills in a competitive environment.

UMBC’s intercollegiate cyber competition team (the “CyberDawgs”) are heading to the finals of the Mid-Atlantic Collegiate Cyber Defense Competition (CCDC) on March 26-29 at the Johns Hopkins University Applied Physics Lab – Kossiakoff Center in Laurel, MD!

Nearly 300 students from schools throughout the Mid-Atlantic region competed in several qualification rounds to determine the eight finalist teams. Joining the CyberDawgs at the finals will be teams from Anne Arundel Community College, Liberty University, West Virginia University, Towson University, Radford University, Capitol College, and Millersville University. The winner of the Mid-Atlantic finals will advance to the National CCDC Finals in San Antonio, TX later this spring.

The 2014 MA-CCDC finals scenario challenges teams to defend their networks against a series of escalating cybersecurity attacks occuring during a simulated disaster management situation in Maryland.

The 2014 National CyberWatch Mid-Atlantic Collegiate Cyber Defense Competition (CCDC) presented by National CyberWatch Center is in its ninth year of providing a unique experience for college and university students to test their cybersecurity knowledge and skills in a competitive environment.

An outreach project of the Center for Art, Design and Visual Culture, featuring “pop-up arts events” was discussed recently in the Baltimore Guide.

According to Sandra Abbott, CADVC Curator of Collections and Outreach, the “pop-ups” are so named because “they will suddenly appear in unoccupied spaces and then close down shortly thereafter.” The project, a result of a collaboration between the CADVC, the Southeast Community Development Corporation, the Highlandtown Arts District (ha!), and Glitter Thighs (a monthly queer dance party in Baltimore), will promote the potential of empty retail spaces on Eastern Ave.

Read the complete article, “Pop-ups promote the potential”.

WebTV’s creator thinks his forthcoming wireless technology will give us faster, better mobile Internet access.

Ten years ago, when most of us still had no idea what a smartphone was, Steve Perlman was contemplating a future in which we’d be watching so many YouTube videos over cellular networks that the radio frequency bands available to wireless carriers would get clogged up.

Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those children is some percentage of the width of parent such that they make equal rows, like 25% wide each for four columns, 33.33% wide each for three columns, etc. The goal is to fill the space of this "grid" evenly. There are an unknown number of children, so let's say you were going with 25% and there were 7 children, that would be 4 in the first row and 3 in the second. Chris needed the final 3 to adjust in width to fill the space, rather than leaving the gap.

Flexbox has just the answer for this, which would otherwise likely need to be a JavaScript intervention.

The solution is essentially making the children able to wrap with flex-wrap, and then filling the space with flex-grow.

.grid {
      display: flex;
      flex-wrap: wrap;
    }
    
    .grid-item {
      flex-grow: 1;
      min-width: 25%;
    }

Here's a visual example of that when each grid item is red and separated with a border:

By adjusting the min-width at different @media query breakpoints, you can make it responsive pretty easily:

.grid-item {
      flex-grow: 1;
      min-width: 25%;
    }
    @media (max-width: 1200px) {
      .grid-item {
        min-width: 33.33%; 
      }
    }

Here's that demo:

See the Pen Wrapping Flexbox with Media Query Widths by Chris Coyier (@chriscoyier) on CodePen.

If you like to balk at flexbox for not being ready to use yet, this example is for you. flex-wrap wasn't in Firefox at all until pretty recently, and isn't even in stable yet, so probably not a super practical solution for Chris just yet. But remember Firefox auto-updates so when 28 rolls out everyone will have it pretty quickly. I'm still optimistic flexbox will be a pretty standard layout mechanism on new sites within a year or so.

If you only need flexbox for single-directional stuff, falling back to display: table is sometimes an option, if by fallback you mean to replicate the layout with some accuracy. If you need the wrapping, inline-block might work. You can test for flexbox wrapping support with:

@supports not (flex-wrap: wrap) {
    
    }

And possibly fall back to inline-block (with no space between them) If you did that, here's how you might adjust that last row if needed with JavaScript:

var leftovers = $(".child").removeAttr("style").length % 4;
      
    if (leftovers > 0) {
      var newWidth = 100 / leftovers;
      var fromHere = $(".child").length - leftovers + 1;
      $(".child:nth-child(n+" + fromHere + ")").css("width", newWidth + "%");
    }

Note the hard-coded 4 in there, which assumes 25% children. You could get fancier and detect that. I'll leave that to you. Selecting the last few stragglers (determined by that modulus (%) operator) I did with a bit of an :nth-child recipe. Here's a demo of it though:

See the Pen Wrapping Flexbox with Media Query Widths by Chris Coyier (@chriscoyier) on CodePen.

Remember there is a big ol' guide to all the flexbox properties here.

Filling the Space in the Last Row with Flexbox is a post from CSS-Tricks