Day of Action to Save Net Neutrality

Today has been dubbed a “Day of Action to Save Net Neutrality“.  Several of the world’s largest tech companies (including Google and Amazon) are staging elaborate (but worthy) stunts to mess with the internet to prove how important Net Neutrality is. Net neutrality means that internet service providers (oddly enough, AT&T came out in support of Net Neutrality today) have to serve all websites and services with the same speed. They are not permitted to make deals to speed up and slow down traffic to premium sites. Currently there is a FCC rules change that could destroy that neutrality.

“Websites, Internet users, and online communities will come together to sound the alarm about the FCC’s attack on net neutrality. We’ll provide tools for everyone to make it super easy for your followers / visitors to take action. From the SOPA blackout to the Internet Slowdown, we’ve shown time and time again that when the Internet comes together, we can stop censorship and corruption. Now, we have to do it again!” source

Here is a video explaining more about net neutrality:

 

If you would like to voice your support in favor of net neutrality, you may do so on the FCC website.

What Kind of Idiot Gets Phished?

One of my favorite podcasts, Reply All has been doing a series of stories on internet security after their founder and president, Alex Bloomberg’s Uber account got hacked. The story that caught my attention was this piece about how easy it is for someone, even smart, internet savvy people to get phished.  Also how things 2-step authentication do not protect you in this case. These phishers are able to mimic the entire google experience in a seamless way that you would never know you’re giving away your information including your 2-step code. It makes me feel a little bit better about all the horror stories you hear with political campaigns and major corporations getting hacked.  It can happen to anyone so just be suspicious and careful out there on the world wide web!

Listen to the story here and I highly recommend subscribing to all of Gimlet’s podcasts.

A Fearless Girl on Wall Street

Today is International Women’s Day which means more this year than ever. Women have been particularly defiant and vocal in a treacherous political climate. These acts of defiance have also been seen from our male allies. Which is why I was so excited and touched to see this new statute of the “Fearless Girl” posed right in front of the famous Wall Street Bull, sponsored by a predominantly male State Street Global Advisors. This was their way of saying, we hear you, we’re with you and we’re trying to do better. Although McCann (the agency that executed this idea) did get a permit for the statue, it still feels like a gorilla act.

This statue represents the future. This girl will grow up to be the next Bill Gates, Steve Jobs, or Neil Degrasse Tyson and I love that she is completely unphased, starring the bull in the face.

 

Annotator.JS

What does it do?

As the name might suggest, this is a JavaScript library that allows users to annotate webpages. The days of bookmarking a webpage and inevitably forgetting what you were thinking at the time seem distant now. However, Annotator doesn’t come in the form of a browser plugin, instead it is included on a webpage and will require some setup.

With Annotator you can make notes for you and a group of others or only yourself–really, it’s pretty customizable.

 

I will update this blog post this weekend when I have a live demo for show.

Just Walk Out with Amazon Go

A few days ago, Amazon announced their grand experiment in brick and mortar grocery and light food shopping called Amazon Go. Basically a shopper checks into the store using the Amazon Go app, puts their items in their bag and “just walks out”. Their items will be tallied and charged when they leave the store.

Of course this seems like the future of shopping to me. I personally like to limit my human interaction when doing things like grocery shopping which is why I use Instacart several times a week. But it does have scary implications for removing the human out of the shopping experience. There will still be jobs for people to stock shelves and prepare food but no more baggers, no more neighborhood checkout girl. We’ll have to see how well the technology works and whether or not people end up wasting time with a buggy UX but for now, it’s a pretty neat idea and I’d love to see how it can be implemented to other traditional retailers.

Rainforest Foundation Project

This blend created in tribute to our partnership with the Rainforest Foundation is a house favorite at Irving Farm Coffee Roasters, and at Compose[d]. Certified USDA Organic, it tastes great, and helps to secure the rights of indigenous peoples and restore the earth’s rainforests. What’s not to love about that?

Designing Progressive Websites

Last week it was my turn to bring something cool to the team and I decided to share was some stuff I learned at a meetup from earlier in the week.

The meetup was hosted by Sergey Chernyshev from the NY Web Performance meetup group and the topic was “Designing Speed with Progressive Enhancement”.

 

The underlying topic is Progressive Enhancement. If you ask a group of web developers what Progressive Enhancement means, odds are good you’ll get several definitions. But what each of those definitions have in common will be amount or type of features available to a user. Whether that’s in the form of prioritizing content loading (like the main-navigation) or building your website such that it works without JavaScript (this idea is a little older).

This presentation focused more on prioritizing loading and it also touched on pre-loading effects when navigating once already in the website.

Something to focus on is getting that time to “first paint” down to or below 3 seconds, so how can we do that?

In addition to moving your javascript calls to just before the closing </body> tag, when focusing on getting that “first paint” to render as soon as possible you can inline your CSS for static elements such as the main navigation, that way the loading of that interactive content isn’t waiting for your css to get loaded.

When testing for your loading time I recommend using your browser of choice’s developer tools to simulate different mobile networks. This will allow you to see how your website is loading from your current WiFi connection but also allow you to see how it would load for a mobile user on their phone network.

Google Chrome Developer Tools
Google Chrome Developer Tools

For more of a breakdown and slew of other great Progressive Enhancement tips I highly recommend you look through Sergey’s entire presentation.

Full Stack Toronto

I spent the beginning of this week at Full Stack Toronto, a 2-day conference devoted to all things web development. I was honored to be asked to be the Keynote speaker where I gave a talk about the Radical Topic of Women in Tech.  The talk was well received and prompted some really good conversations about the ratio of women to men in the workplace.

Some of the highlights of the conference were:

  • Jennifer Wong’s (Eventbrite) What The Duck-Typed Are My Engineers Saying? talk which fully admitted that developers often use terminology they don’t fully understand.
  • Kate Travers’ (Flatiron School) talk about converting their CSS to Object oriented CSS
  • and my personal fav Henri Helvetica’s talk about The Hateful Weight which discussed how we are accruing way too much page debt in our development and some techniques for getting those page weights down. Check out the slides here.

I’ve been spending much of this week incorporating some of the things I learned into this very website.

Custom Numbered Lists With CSS

This week was my turn to find something cool and share with the team.
And now I’d like to share this with you, so let me give you a summary of CSS counters!

Just like the author Samuel Oloruntoba notes in this article, web developers had to previously resort to an approach like the following:

PHP HTML Example of Archaic Solution
Photo / Code Credit – Samuel Oloruntoba

The reason why this solution is less than desired is that it puts more logic into our markup than is necessary, whereas now we can simply specify this sort of functionality in our stylesheets.

Markup for CSS Counter Example
HTML
SCSS for CSS Counter Example
CSS (SCSS)

With additional styling, this results in the following:

See the Pen
Increment by +X
by Salvatore Torcivia (@SalTor)
on CodePen.

And in addition to incrementing / decrementing decimal values, we also have access to lower/upper-roman, lower/upper-latin, and several other symbolic counters.

Where My Ladies At? The Radical Topic of Women in Tech

On Friday, September 16th in Dallas and Tuesday, October 19th in Toronto I will be speaking about Women in Tech, specifically MY life as a woman in tech. I’ll be giving advice to women (and men) about surviving and getting ahead in this weird, gender biased tech world. I’ll be talking about setting yourself up to have the best career and the best life possible regardless of your gender. Here’s my little synopsis:

There’s no disputing that the future has arrived for pocket computers, autonomous cars and croissants that are also, somehow, donuts. Innovation is moving at light-speed but women are being left behind when it comes to tech. We still having the same, tired conversation about (say it with me) “women in tech.” We are inundated with jargon about leaning in, opting out, work-life balance, which can be discouraging for women, especially for those beginning their careers. Marissa Lerer, CTO for Compose[d], mom, and proud chick coder understands what it’s like to survive the “woman in tech” scene. Join her for an empowering journey of where we’ve been, where we’re heading and some unsolicited advice about making the most of your career.

Hope you can make it!