Super Charged Media Queries with Sass MQ

Sass MQ, built by the Guardian, is a Sass mixin that helps you compose media queries in an elegant way.

Here is a quick example of how it works:

$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
);

@import 'mq';

.foo {
    @include mq($from: mobile, $until: tablet) {
        background: red;
    }
    @include mq($from: tablet) {
        background: green;
    }
}

Which compiles into:

@media (min-width: 20em) and (max-width: 46.24em) {
  .foo {
    background: red;
  }
}
@media (min-width: 46.25em) {
  .foo {
    background: green;
  }
}

What I love is the way responsive breakpoints are declared using this tool. The $from and $until feels more expressive than the typical CSS way of declaring breakpoints.

Refactoring is like changing a diaper

Today Chris Gmyr‏ Tweeted this out and I thought it was brilliant. So good in fact, I spent a few minutes and turned it into a little infographic:

Refactoring is like changing a diaper

MNML: A New Mac App for Writing on Medium

MNML is a brand new app by the indie developer, John Saddington, and he is actually one of the first interviews that I did on this site.  The app is based on his popular Desk app, but designed specifically for Medium.com. Here are a few screenshots from his release:

write, publish, share
Write. Publish. Share.
Compose with comfort
Save locally, or in the cloud

This app is a great way of bringing the simplicity of the Medium editor to your desktop, and the bonus is saving locally. The price is $29.99 which I admire since the App store has lately become a race to the bottom. If you want to find out more checkout the app in the App Store.

Optimize your Sketch SVG’s with SVGito

SVGito is a web app created by Peter Nowell that cleans up SVG files exported from the Sketch App. You copy and paste the SVG code, or drag and drop it into the app and it does its magic:

During the cleanup process it does four things to the SVG:

  • Cleans up Sketch Layers with Fills + Inside/Outside Borders
  • Replaces “Single-Instance” <use> Elements with Their Reference
  • Removes Unnecessary Fill-Rule Attributes
  • Removes <defs> if there’s nothing inside

This tool is designed primarily for SVG’s exported from Sketch, but I’d love to see it add support for renaming styles inside other SVG’s. For example, last week I hit a weird issue where multiple SVG files defined styles with the same name, .cls-1, When I added these inline, they would conflict causing the icons to display wrong. The solution, in this case, was to open each one individually and do a find and replace on the cls-1 selectors.

Exploitbox: WordPress Unauthorized Password Reset Vulnerability

On the Exploitbox site Dawid Golunski shares a 0 day vulnerability in the WordPress core affecting all versions:

The vulnerability stems from WordPress using untrusted data by default when creating a password reset e-mail that is supposed to be delivered only to the e-mail associated with the owner’s account.

They include the following code sample from the core:

------[ wp-includes/pluggable.php ]------

...

if ( !isset( $from_email ) ) {
        // Get the site domain and get rid of www.
        $sitename = strtolower( $_SERVER['SERVER_NAME'] );
        if ( substr( $sitename, 0, 4 ) == 'www.' ) {
                $sitename = substr( $sitename, 4 );
        }

        $from_email = 'wordpress@' . $sitename;
}

Because SERVER_NAME can be modified, an attacker could set it to an arbitrary domain of his choice e.g: “attackers-mxserver.com” which would result in WordPress setting the $from_email to “wordpress@attackers-mxserver.com” and thus result in an outgoing email with From/Return-Path set to this malicious address.

If you are running Apache, you can patch this yourself by adjusting the UseCanonicalName Directive or ensuring the from_email is always set.

On the Dewhurst Security Blog they outline what it takes to be vulnerable:

From what we can see, this vulnerability can only be exploited against the default virtual host. The virtual host (domain) the web server will default to. You are vulnerable if your domain running WordPress is the only domain on the server, or, if your domain is the default one. That coupled with the exploitation requirement for the victim to somehow respond to the email, we believe it is pretty unlikely that this will be a major issue affecting WordPress users. Nevertheless, under the correct circumstances, there is a risk here.

For more information, you can read CVE-2017-8295 here and I’m sure a WordPress core update will be out soon.

Update: May 5, 2017WP Tavern has an article covering this vulnerability with a code fix that you can add to a plugin:

add_filter( 'wp_mail_from', function( $from_email ) { return 'wordpress@mysite.com'; } );

Airbnb acquired Deco and the Deco IDE will be Open Sourced

Deco is an app I first heard about a year ago and it looked great for those working with React Native. The company behind it, Deco Software, has just been acquired by Airbnb.

Today, we are excited to share that the entire Deco Software team is joining Airbnb where we will continue to advance tooling for designers and engineers. While we will no longer officially support Deco IDE as a product, it will live on as a free and open source project.

Looking at the Github repo of the IDE it appears the app hasn’t been updated in a while, I didn’t see any commits from 2017, so it appears to me that the project will be no longer under active development and will rely on the community but no specifics are added around who will be in control of handling issues, pull requests, etc. So I’m lead to believe it’ll be no longer actively developed.

SVG icons of popular brands

Simple Icons is an open source project that includes over 300 SVG icons for popular brands.

This project will be great for your next design when you want to add social or sharing icons. What is great is that it also includes icons for popular open source projects like Gulp, Vue.js, CodeIgniter, Laravel, Cake PHP, and more.

The repo claims a Creative Commons Zero v1.0 Universal license but I’d just be careful in the ways you use some of these since most logos are trademarked or copyrighted by the companies.

Markdown Powered Presentations with GitPitch

GitPitch is a slide deck service built for developers that allows you to create your presentation in Markdown and it’s automatically turned into a slide deck.

Here is an example of one I quickly put together:

The way it works is by utilizing a Git repo in any of the traditional services, Github, Bitbucket, or Gitlab. Then you create a “PITCHME.md” file that is used as the content of the slide deck. Finally, once you’ve pushed you can access it via the following URL:

https://gitpitch.com/user/repo/

What stands out to this app is the options available. Instead of being restricted to the included six themes, you can create your own, customize the CSS yourself, and even export for offline use.

Outside of that, it includes all the major features you will need for your next conference talk, a speaker notes window, the ability to embed it to your site, and even Google Analytics support to see how many people looked at your slide deck.

For more information check out the official site and their wiki with all the configuration options. I think this app has a lot of potential with its customizations that some of the paid for Markdown presentation apps lack.

Learn Flexbox with the Free Flexbox Zombies course

flexbox zombies

Flexbox Zombies is a brand new training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies. Check out this video Dave Geddes, the course creator, posted for the launch:

//platform.twitter.com/widgets.js

Having just started diving into Flexbox this course couldn’t have come at a better time. It’s an interesting take on learning and should help reinforce memorizing all the different types of Flex options that are available.

The course is free with three chapters available, with the goal of having twelve available in the future. It’s free to start the course but it does require registration.

Github Now Allows You To Limit Who Can Delete Repos

Today, Github announced a new feature for organization owners that gives them the ability to limit who can delete repositories.

The setting is enabled by default, allowing organization members with admin permissions for a repository to delete it. When the feature is disabled, only organization owners will be able to delete the repository.

You can find this new setting under the organization settings page and “member privileges” tab.

github repository delete privileges

In the announcement, Github also said, “The next GitHub Enterprise release will include the same organization setting for repository deletion. In addition, there will be an appliance-level override that will limit repository deletion to only site-administrators.”

This is just a small change but will be beneficial for working in team environments.