Jaime Quiroz

Front End Developer

SASS Maps != Source Maps

I’ve seen the phrase “Sass maps” thrown around  the web in recent months, and have made an assumption that people were talking about Source Maps. They both do sound alike, and in fact both these things were part of the same SASS update (3.3.0). It wouldn’t surprise me if there are others out there who’ve experienced this unfortunate confusion and are still in the dark about this.

I  attended SassConf and Sass Maps were quite a popular topic throughout the conference, with good reason–they’re in fact awesome.

So what is a Sass Map exactly?

A Sass map is like a Sass List, except instead of containing just values you have Keys AND Values.

If you are a javscript developer or have ever used js objects you could even think of Sass maps as ‘Sass objects’. Here is what a Sass Map looks like:

$map: (
	key1: value1,
	key2: value2,
	key3: value3
);

… and like a js object you can assign another ‘object’ (Sass Map) to a keys’ value like:

$map: (
	key1: (
		a: b,
		c: d
	),
	key2: value2,
	key3: value3
);

How is a Sass Map used?

Sass Maps are a great way to organize related CSS, they really lend themselves to looping and can help you write less repetitive code.

Retrieve a value from a Sass Map with ‘map-get()’ like this:

$links: (
	link: #900,
	hover: #333,
	visited: #000
);

a {
	color: map-get($links, link);
}

Simple enough, but what about when a keys’ value is a map?

$buttons: (
  search: (
    bg-color: #333,
    icon: "magnifier.svg"
  ),
  alert: (
    bg-color: red,
    icon: "triangle.png"
  ),
  success: (
    bg-color: green,
    icon: "checkmark.svg"
  )
);

@each $button, $buttonProps in $buttons {

	.button-#{ $button } {
		background-color: map-get( $buttonProps , bg-color );
		background-image: url( images/#{map-get($buttonProps, icon)} );
	}

}

… the output:

.button-search {
  background-color: #333;
  background-image: url(images/magnifier.svg);
}

.button-alert {
  background-color: red;
  background-image: url(images/triangle.png);
}

.button-success {
  background-color: green;
  background-image: url(images/checkmark.svg);
}

Let’s look at this bit:

	@each $button, $buttonProps in $buttons

Those 3 variables contain:

$button = the top level key names ( search, alert and success )

$buttonProps = the map of each key ( background-color: … , background-image: … )

$buttons = the main map we are getting our values from

You can use as many maps in a map as you want, although things can start getting kinda messy with map-get():

$map:(
  a: (
    b: (
      c: (
        key: red
      )
    )
  )
);

@each $x, $props in $map {

	.red {
	    color: map-get( map-get( map-get( $props, b ) , c ) , key );
	}

}

That seems like an unlikely scenario, but it is possible if you do have a use for it.

Sass Maps can be very useful things if used correctly – how you want to leverage them is up to whatever works best for you and your team.

Read more about Sass Maps.

If you actually have been using Sass Maps in your project please share in the comments below, we’d love to know your use cases!

Sherrie Bakshi

Director of Marketing and Social Media

5 Ways to Keep Your Website Content Fresh

Last month, we kicked off our webinar series with a topic many struggle with: writing good keyboardcontent.  We often get asked questions like “How do I keep my content fresh?” and “How often do I need to update my website?”  Here are a few things you can start doing now to make sure your website is up to date:

  • Plan your content in advance.  An editorial calendar for your website can help you lay out content based on your organization’s annual campaigns as well as help you manage your resources and deadlines.  Plus, it will ensure that you provide content to your audiences in a timely manner!
  • You don’t need to update everything all the time. Let’s be honest, you’re not going to be updating your About Us or Membership landing page on a monthly basis, but there some things that you’ll want to update more frequently, including news, events and your blog.
  • Don’t forget about your homepage branding area.  Your homepage branding area is key real estate.  Consider updating it on a quarterly basis to promote your key campaigns, resources you want to highlight, etc.
  • Think about your users’ expectations. For example, if your website provides updates on OSHA regulations and interpretations, you must update you site whenever there is new and updated information.
  • Measure effectiveness. It’s important to know that you’re providing value to your audiences.  Review your analytics to determine top topics and where your audiences are most engaged with you on your site.

What are your tips?

Rich Frangiamore

Systems Admin

Rolling With The G-Punches

Google searchI’m a big Google user. Much of my digital life is wrapped up in their services. I think I joined Gmail when the beta was still in the oven 10 years ago. I’m also user of Calendar, Voice, Wallet, Authenticator, Maps, Drive, Hangouts, Chrome sync, News, Music, Play, and tons of Android stuff. I even meddled around with Buzz and other betas that never quite made it. I was also an avid Reader user, until it was retired recently.

One of my very favorite services is the much-heralded Google Voice, the service that gives you a virtual phone number and lets you forward calls to that number to other numbers per rules that you set. It also enables custom answering schedules, call screening, unlimited texting from your browser, transcribed voicemails, and other really cool stuff.

I’ve loved it so much that my entire mobile communications are dependent on it. My only phone number is a Google Voice number. Nobody knows the number to my mobile, and I have no house phone.

Google Voice logoGoogle Voice, as a separate service, has gone the way of our beloved Reader.

The functionality of Voice is being rolled into Hangouts, the new multi-platform video chat/instant messaging platform which also absorbed the Google Talk service (you may remember this as the original IM function baked into Gmail web client). The future of the individual features of Voice are uncertain.

Let the outrage commence.

… That’s what I wanted to write about. The outrage, and why folks need to chill out and take a step back to see the big picture here.

Depending on a vast array of Google services (or Microsoft services or third-party stuff, what have you) means you have to roll with the punches. Ever notice how most Google services have that little “beta” tag on them? This stuff is always changing. My favorite description of the “Labs” features in GMail is “…they may change, break or disappear at any time.”

We’re living on the cutting edge every day with many of the Google services we depend on. And other products too; just last month, my favorite Twitter client for Windows, MetroTwit, was sunsetted because of API issues. So what did I do? Complain to the developers? No, I went and found something else (Tweetdeck).

Second, I have to mention money. Specifically, the money I pay for all these Google services. It’s zero. I pay squadoosh for this stuff. There’s no service-level agreement here. When an absolutely free service goes away or doesn’t quite do what I want it to, what am I going to do? Ask for my money back? Nobody made me any promises when I started using this product. And don’t forget about the other end of the transaction here: Google’s pocketbook. When a particular product isn’t making any revenue and the company finds themselves eating a significant amount of developer time for a project which really doesn’t have a future, it makes perfect sense to scrap it. There have been several cases in the past where Google has found duplication of functionality in several different products, which means rolling together some products into one.

I don’t hate Google for retiring Reader or eliminating Voice. On the contrary, I applaud them for actually putting the work forth to develop this stuff and inspire others to do the same. Reader taught a lot of folks that RSS is your friend, and it can ease your daily life on the web. Now there’s Feedly and other cool web-based aggregators out there that do the job just as well, and some of those may never have come to light if Reader didn’t exist.

The integration with Hangouts has begun. I’ll have to make some changes. I might need to modify some of my workflows for how my call forwarding works and install a new app on my smartphone. So what? A small price to pay for rich functionality that seems to get better and better every year.

It’s all about rolling with the punches.

What’s your strategy for navigating changes to your web-based services?

Sarah Jedrey

Junior FED

The Inaugural Code(Her) Conference

DCWW Code(Her) Conference
September 13 was just amazing. The whole weekend was dense with events and what seems to be the Real Arrival of Fall, complete with a drizzly, cool, gray weather pattern outside the Microsoft office in Chevy Chase. Inside, it was alive with a sea of excited tech folks and DC Web Women’s chosen neon-green color scheme. It was like they knew how the weather would be and were combating it with design.

Here we were. A hugely, gloriously diverse crowd of people who make things and services for a connected world, all prepared to learn more – and to celebrate the people blazing trails and the people following the trails that they’d never before been able to access. Needless to say, Twitter was humming all day.

After DCWW President Sybil Edwards executed her duties regarding introduction and gratitude, we got to enjoy the first of our keynote speakers.

Great keynotes are more than speeches

Bonnie Bogle, COO of Mapbox, told us about Mapbox, her role in it, and the kind of culture they have there. And, yes, she did that – the stuff Mapbox does is simply amazing, including painting in a city’s streets with the not-entirely-wise habits of people who tweet and drive – but what she really did was give a masterclass in storytelling. It was not merely a talk about business philosophy or statistics. It was a demonstration of why letting collective and individual passion thrive can reach and influence millions and result in a business that is a success by all measures.

Immediately after lunch, we got to listen to Clarissa Peterson speak (slides). She’s co-founder of Peterson/Kandy, a UX expert, and the author of Learning Responsive Web Design. What she gave was the crashiest of courses on responsive web design – a compelling, bite-size reason to buy her book and find her wherever else she chooses to speak – but what she was was an example to those who are too aware of their status as students. The story of Clarissa’s growth from “just” a basic developer to an expert speaking on RWD was a roadmap for those of us new to anything. It yielded bumper sticker-worthy maxims like “You learn more by teaching others” and, when it comes to content (I’m mangling it, but the gist was), “Is it easier to move from a house to an apartment or from an apartment to a house?”

What a talk covers and what it’s about – what it is – can be drastically different in all the important ways. Hire these women to talk for you. They get it.

More information than you can fit in your head

So, if you’ve never been to a conference, let me tell you what’s difficult. Parking. Finding a seat in a crowded room. Finding an unoccupied power outlet.

The hardest part: Figuring out which of the amazing talks you’re going to attend.

After days of agonizing, I figured out which three to attend. My only regret is that there aren’t 12 of me.

Infographics Everywhere

We’re swimming in an ocean of data, and we’re increasingly capturing, analyzing, and taking advantage of that data. The problem is so few of us know how to effectively translate it all into the popular and super-useful infographic. As Laura Larrimore said, ‘The less you know about design, the less you should be designing.” This is especially true for business on a very tight budget. So few of us are designers; so few of us should try to be.

Some low-cost or free tools included Piktochart and Microsoft Office. She walked us through the one and gave us the pros and cons of the others, and I think we all left a little less scared of Big Data and Making It All Look Pretty.

Accessibility Testing

David Kennedy, Theme Wrangler for Automattic, talked to us about testing for web accessibility with free tools. Full disclosure: He’s a friend of mine. He’s knowledgeable and passionate as heck about keeping the web accessible to every person who can get onto the internet.

Accessibility is, unfortunately, foreign to too many of us. It’s not that scary, after all. Dave gave us a crash course on the main difference between Section 508 compliance and Web Content Accessibility Guidelines (WCAG) 2.0 (short form: WCAG is a bit more thorough) and shared resources we can use immediately to make our work more accessible – a11y.me is a fantastic place to start.

Some key tools that are both cool and easy to use are this infographic on Accessibility for Designers, Wave, the Color Palette Accessibility Checker, and The Readability Test Tool.  Do yourself a favor and go try each of them.

The New Word-of-Mouth

The Social Media Trainer and Consultant at Admin Tech Consulting, Romona Foster is a woman of many talents. Due to the laptop and projector refusing to talk to each other for a half hour, we learned that one of her talents was to memorize the name of 30 people in a few minutes. What could’ve been a dull disaster became a high-energy exchange of ideas about the role of social media and how to convince clients reluctant to change.

The room, with those 30 attendees, represented a range of experience from novice to master. The conversation we had brought home the fact that “social media” is as big and complex a subject as you could imagine. We touched on strategy, platforms, engagement, content sourcing, ethics and laws, time-savers, and stereotypes, and we still hadn’t exhausted ourselves when it was time to depart. But before we did, Romona left us with a good, actionable list of tips and tools especially useful for the less-experienced.

So, same again next year?

DCWW Partner AwardThere was an afterparty where DCWW honored several people and businesses for being, I believe, excellent examples of what women in tech can do for women and for tech. The party was so hearty that it was a bit difficult to hear.

All I know is I went up to the stage to accept the DCWW Community Partner of the Year on behalf of Matrix Group!

The conference was fantastic. I left dazed by the density of information I’d absorbed during the day. I can’t wait for next time!

Sherrie Bakshi

Director of Marketing and Social Media

Why Is NOW the Right Time to Upgrade to Universal Analytics?

AnalyticsAs companies invest in new products and services to better meet their customers’ needs and improve their bottom line, they’re looking for one thing to help them make decisions: data!

Many of you are aware of Google’s latest version of the popular web tracking system, but do you know why there’s so much hype about it? Let me explain.

Classic Analytics provides a wealth of information. You can slice and data by demographics, location, new versus returning visitors, hostname, etc. You can track how visitors come to your site and campaigns, conduct A/B testing on specific sections and more. There is so much you can do, but there some problems when it comes to reporting data that Universal Analytics addresses.

When looking at number of new visitors, you may notice a large number of them and thinking, “Great! I am reaching more of the market.” Stop there. In the classic version, the:

  • Number of total unique visitors is overstated
  • Percentage of new visitors is overstated, and
  • Percentage of returning visitors is understated

This happens because Google cannot tell if it’s the same user if they’re not using the same device to access your site. For example, if a user accesses a website from his/her laptop in the morning and then later that day accesses the same website from his/her phone, it’s tracked as a separate visit and user.

This is not the case in Universal Analytics.

What Makes Universal Analytics Awesome

Universal Analytics loads faster because it will only use one cookie and focuses on users, not visits. You can integrate Google Analytics into your CRM, import data, and much, much more. Here are a couple things that you can discover about your users:

  • Their behaviors across multiple sessions and devices, including mobile apps, store checkouts, etc.
  • Insight on who your users are and their interests based on data from your CRM. Custom dimensions allow you to gather more insight on your users, allowing you to create new reports to view and analyze your site’s activities in multiple ways. NOTE: You must have this info in your CRM gather these details.
    • Some dimensions worth tracking are demographics, job title, (B2B businesses, associations or professional societies may be interested in this) and income

Google is planning to roll out additional features in the future. Stay tuned!

Setting Up Universal Analytics:

Once you’ve upgraded to Universal Analytics, you’ll need to set up a UserID. The UserID allows you to capture data of logged-in users and their behaviors on different devices.

Once you have set up your UserID, you’ll want to make sure everything is working properly.

Even with all these new features, you’ll also still have access to your classic analytics data.

If you haven’t upgraded to Google Analytics, definitely make some time to do so.

Have you set up Universal Analytics? What are your favorite features and reports?