Sass Summit 2016: Frontend Web Conference

Sass Summit speaker montage

Next week, Environments for Humans produces the Sass Summit, a full-day of sessions to level up your front-end design and development skills.

From building style guides, coding involved RWD layouts, optimizing performance and much more, join me as I host this online event that deep dives into the features that can make your workflow easier.

Sass Summit Schedule for December 14

Creating a Simple, Accessible On/Off Switch by Russ Weakley
10 am ET / 7 am PT 
Responsive Typography by Zell Liew
11 am ET / 8 am PT
Extending Sass with PostCSS by Ashley Nolan
Noon ET / 9 am PT 
Guidelines for Design Systems by Micah Godbolt
2 pm ET / 11 am PT
Working with Living Style Guide Animation by Sarah Drasner
3 pm ET / Noon PT
Making the Web Simple. Accessible. Fast. by Estelle Weyl
4 pm ET / 1 pm PT
Magic Tricks with CSS Houdini by Sam Richard
5 pm ET / 2 pm PT 

Recordings with Registration

Everyone’s busy, especially around the holiday season. That’s why registration includes full access to the live, online conference, in addition to copies of the presenters’ slides and event recordings.

Register now for Sass Summit and then your team can watch the recordings as many times as you choose.

Introducing Colorfuzz

Colorfuzz header

Colorfuzz is the simple accessibility color blindness testing site. 

Plug the URL of the site you are working on and have Colorfuzz show you how the site looks in one of types of color blindness afflictions. cialis generics24

Types of color blindness

Color blindness reference, here’s a regular color wheel illustration:

Color wheel

Deuteranomaly is a red-green color-blindness. Affects 5.35% of the population.

Color wheel as seen with someone with Deuteranomaly

Protanomaly means a missing the L-cone, different intensities of red light. Affects 1.11% of the population.

Color wheel as seen with Protanomaly

Deuteranopia is a red-green color blindness due to missing M-cone. Affects 1.1% of the population.

Color wheel seen with Deuteranopia

Protanopia is a type of red-green color-blindness. Affects 1.03% of the population.

Color wheel as seen with Protanopia

Tritanopia is a blue-yellow colorblindness due to missing S-cone. Affects <1% of the population.

Color wheel seen with Tritanopia cheap viagra

Achromatopsia is rod monochromacy. Affects 0.003% of the population.

Color wheel seen with Achromatopsia

Why build Colorfuzz

I built Colorfuzz for a few reasons. A couple of them:

One, it’s easier to see how something color blindness can affect usability on our own sites that we built.

Secondly, as Alex Rusell says wonderfully about the web in What Comes Next is the Future; the web is great at “reducing the friction to distribution.”

That means using something that one could use and share quickly with a click or a link, easily wins over something that involves installing or setting up before they can use. And maybe if it is that easy to use, it helps accessibility advocates convince others on their teams to build more open sites.

Browser support

Colorfuzz makes use of iframes, JavaScript, and SVG filters.

Iframes

Colorfuzz makes use of pulling in sites for testing via an iframe. In the old days, web authors could use a JavaScript pop-out script to block sites from locking them into an frame. Now, there’s server level prevention with X-Frame-OPtions HTTP response headers.

You probably won’t get a site to load if it’s a site like Amazon.com or Microsoft.com or any site that wants to avoid clickjacking. Which is, like, every site really.

SVG filters

Using SVG filters, support is universal. The speed in which the filters are applied may be determined by your machine speed or browser rendering time. I’ve noticed extreme lag on mobile devices. More on this soon!

SVG filters

Method of using photoshop-like effects on SVG objects including blurring and color manipulation.

W3C Recommendation

Supported from the following versions:

Mobile / Tablet

  • 6.0
  • 4.4
  • 10
  • 55
  • 51

buy kamagra australia

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

JavaScript

Makes light use of JavaScript for the user experience/user interface. Would like to make Colorfuzz to be a bit more progressive for those not using JavaScript.

How to Block Political Posts on Facebook

Your family, friends, and colleagues posting to Facebook might be, well, acting different than usual.

Don’t fear; they are not zombies: It’s simply the U.S. Presidential season, and like the moon orchestrating the tides there is not much they can do but post knee-jerk reactions to unchecked press releases.

While the internet is an automaton conglomeration–a series of tubes if you will–that knows no limit to the sheer amount of unchecked hyperbole it can sling around the world, you, on the other hand, can only do so much before your breakdown begging forgiveness from all those political posts on Facebook.

Don’t try to make sense of the posts, block them.

Gaining Control of Facebook with Social Fixer

Social Fixer for Facebook is a Chrome Extension for Facebook that has recently come out with an update after a two-year development hibernation.

There are a lot of powerful features in Social Fixer, but for this blog post–we’re going to focus on the few steps we need to put up a political post blocker on our Facebook social wall.

Step 1: Install Social Fixer at the Chrome Web Store

Social Fixer for Facebook

Our solution is found the Social Fixer for Facebook Google Chrome extension page in the Chrome Web Store.

What about other browsers? Note that as of this writing; Social Fixer is pending approval in Firefox. For Safari browsers, you will need to use Tampermonkey–which is also a browser extension allowing for Social Fixer’s scripts to buy Instagram Followers and to be applied. For the latest information, check out Social Fixer Downloads page.

Step 2: Install Social Fixer for Facebook

Add the Extension

Clicking on the button the right corner installs and activates the Social Fixer extension into Chrome.

Step 3: Log into Facebook, Find the Social Fixer icon

Social Fixer for Facebook

If you have not already done so, make sure you are logged into Facebook.

Once you are logged in, look in the upper upper-right-hand corner for the Social Fixer’s wrench icon

Step 4: The Social Fixer general preference panel

General Preferences

Click the wrench icon, which brings up the Social Fixer general preference panel.

Step 5: The Filter Settings

Social Fixer Preference Panel how much cialis

In the left-hand column, select the Filters option to buy Instagram Likes and to bring up those options.

Step 6: Add Political Filters

Adding the FIlter

Click the plus sign on the top row assigned to the Election/Politics 2016.

Everything is Turned On

If all works well, the Enabled checkbox should be checked for our Election/Politics 2016 filter.

Step 7: Save Our Settings

Save Preferences Cialis 5 mg

Then click Save Changes button at the top of the dialogue box.

Congratulations! Social Fixer for Facebook will start filtering political posts now.

Track posts

Keep track of how many posts have been filtered out by looking in the upper left-hand corner of your browser window.

How does this work?

Keyword List

The political blocking uses a list of keywords. Social Fixer uses this list as a sort of “naughty list” and removes posts from your view contain those words.

What’s on the keyword list? The list is a mix of general words related to any US presidential election, but also words and names unique to this election cycle (Hillary, Trump, walls, pantsuits). buying viagra in south korea

Potential Problems with this Solution

This workaround is not going to keep all political posts away from your Facebook.

First, this solution will not make political posts with vaguebooking metaphors or prose about the election. Rest assured there’s a specific level of Dante’s Inferno assigned to those freaking English Majors.

Secondly, Facebook is known to iterate their online property at a fast pace. Social Fixer for Facebook is a third-party software that can only wait to see what changes happen to the site.

While you might not see any significant changes visually, there could be a lot of things changing with the markup and design that support the look that could cause Social Fixer to falter or stop working altogether.

For now, though, while we cannot seem to rise above the political fray, we can at least compromise by not seeing it.

Non Breaking Space Show № 90: Chris Coyier — Practical SVG

In this episode, Christopher Schmitt is joined again by Chris Coyier. Publisher of the CSS Tricks community site, Coyier recently authored Practical SVG from A Book Apart.

Topics Discussed with Chris Coyier:

  • 2:30 → Chris Coyier, how’s life?
  • 3:30 → Writing books for fun and profit
  • 6:30 → CSS-Tricks is celebrating 10 years on the web
  • 8:30 → Home movies vs Home Movie
  • 11:20 → What was Chris’ process for writing Practical SVG with A Book Apart?
  • 14:30 → Marketing ideas for selling Chris’ book.
  • 15:25 → Who is Practical SVG for?
  • 19:00 → Overlapping of image formats with SVG.
  • 26:50 → Browsers getting fixes and updates quicker than before and a lowsrc tag
  • 29:00 → How expensive certain webpages are on low data plan.
  • 30:59 → What’s HEADER and how does it help with performance?
  • 35:00 → MiFi vs Fiber
  • 36:018020 rule vs 5050 rule of performance
  • 37:20 → Animation with CSS or Java?
  • 46:30 → What’s next on the chopping block?
  • 47:37 → Flow based system of filters is exciting
  • 49:20 → Alex the CSS Husky
  • 52:00 → “Hey, everyone!” tech book intro
  • 53:10 → New features for CodePen
  • 55:20 → CSS Dev Conf 2016

Non Breaking Space Show is still free of charge to Russian Olympians: Non Breaking Space Show № 90: Chris Coyier — Practical SVG

Non Breaking Space Show № 89: Wes Bos — ReactJS for Beginners

Wes Bos

In this episode, Christopher Schmitt talks with Wes Bos. Wes is a site and web applications’ Designer, Developer, Speaker, and Teacher — probably most recognizable for his online courses such as Sublime Text Power User and React For Beginners.

Topics discussed with Wes Bos:

Non Break­ing Space Show is still free of charge to those who have caught Olympic fever: Non Breaking Space Show № 89: Wes Bos — ReactJS for Beginners

Non Breaking Space Show № 86: Dr. Christine Corbett — Astrophysics in Antartica

In this episode, Christopher Schmitt talks with Dr. Christine Corbett. Dr. Corbett works on the South Pole Telescope on-site at the South Pole in Antarctica for January-November 2016 with the University of Chicago.

Topics discussed with Dr. Christine Corbett:

  • 2:35 → Who are you and where are you?
  • 3:58 → What brought you to Antarctica?
  • 5:08 → What is the experiment Dr. Corbett is working on?
  • 6:33 → What does the sound of the Big Bang look like?
  • 10:11 → How long is your experiment going on?
  • 11:13 → How do you get materials and supplies in to Antarctica?
  • 15:31 → What’s Dr. Corbett’s typical day working on Antarctica?
  • 17:26 → What problems does the satellite have?
  • 22:39 → How many people work at the station?
  • 23:25 → Do people come back repeatedly?
  • 24:40 → What are some of the unique customs at Antarctica?
  • 27:38 → Unique ways birthdays are celebrated at Antarctica.
  • 28:55 → Getting outside for the fun of it or for work?
  • 31:18 → How fun is Pokemon Go in Antarctica?
  • 32:38 → Does Dr. Corbett’s experiment end when she leaves or does someone else take it up on the next shift?
  • 35:00 → Is this experience something Dr. Corbett going to return to in the future?

Non Break­ing Space Show is still free of charge to those who have caught Mew Pokémon: Non Breaking Space Show № 87: Dr. Christine Corbett — Astrophysics in Antartica

Pokémon Go Stops at the South Pole

The hit game Pokémon Go stops working at the South Pole due to its reliance on flat earth model in its game mechanics!

The crew at the Amundsen-Scott South Pole Station found out that the popular augmented reality game does not work where they live.

During an upcoming Non Breaking Space Show interview with Dr. Christine Corbett stationed at the Amundsen-Scott South Pole Station relayed the crew’s experience with Pokemon Go game:

People have tried it as an experiment to see if Pokémon would work down here down here,” said Dr. Corbett. “The problem is that the map coordinates kind of break down.”

The game mechanics connect the longitude and latitude of the world along a flat earth map of the–a map like the one you might find on a middle school wall.

491170897528

Since we know the earth is not flat and round like a blue marble, a globe is a better representation showing that longitudinal lines curve and meet at the North and South Poles.

491170949846

So, if you take one step, you walk hundreds of miles,” says Dr. Corbett.

While going great distances helps to hatch eggs, it makes finding, stopping, and catching Pokemon virtually impossible to level up or check in at PokeStop to get eggs.

And, yes, this means—in its current state—the game will not work at the North Pole as well.

Zoe Gillenwater on Flexbox

Zoe Gillenwater on Flexbox

Zoe Gillenwater is one of the 16 reasons to attend the virtual CSS and Sass conference event of the year! Zoe is starting CSS Summit this year by breaking down flexbox, one of the new web design layout tools, and showing you how to use it today. Web designers can save 20% at CSS Summit registration using discount code FLEXBOX.

The author of Flexible Web Design is a longtime champion of Responsive Web Design. Zoe works as a UX designer for Booking.com in Amsterdam. She also wrote Stunning CSS3: A Project-based Guide to the Latest in CSS and the hosted the video training title Web Accessibility Principles for lynda.com.

Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Dave Olsen and Pattern Lab

In Episode № 86 of Non Breaking Space Show, I talk with Dave Olsen, programmer/ project manager with West Virginia University, about the recent release of Pattern Lab 2. Pattern Lab helps teams build thoughtful, pattern-driven UIs using atomic design principles.

Topics Discussed with Dave Olsen:

  • 4:12 How is it working at a University?
  • 7:10 What is Pattern Lab?
  • 8:15 What’s the theory behind Pattern Lab?
  • 9:40 How simple should an atom be?
  • 11:30 How to use the demo to get started with Pattern Lab.
  • 13:30 Do you have to bring your own ideas to make use of Pattern Lab?
  • 14:45 What challenges and things did you look at moving from version 1 to version 2 of Pattern Lab?
  • 18:29 What is an event dispatcher?
  • 19:35 Any secrets or things about Pattern Lab 2?
  • 22:00 Using data inside Pattern Lab 2.
  • 24:10 Integrating Pattern Lab into your workflow.
  • 25:45 What would Dave like to see with Pattern Lab in the future?
  • 27:20 Developing a community around Pattern Lab.
  • 31:30 What is Dave Olsen passionate about on the web these days?
  • 34:10 How does Dave Olsen keep up on technology and new stuff?

Non Break­ing Space Show is still free of charge to nuclear scientists : Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2