Developer Tools – Page 2

May 5, 2017

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.

May 3, 2017April 15, 2019

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.

May 2, 2017

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.

April 30, 2017

Vue Loop – Infinite Content Looping for Vue.js

Vue Loop is a component for Vue.js that allows you to create an infinite content loop for your site. It features full page content looping, a contained content loop, and horizontal & vertical options.

Here is a demo of the component in action:

Getting started is simple. Just add it to your project via NPM:

npm install vue-loop --save

Then in your JavaScript:

import VueLoop from 'vue-loop'

new Vue({
    el: '#app',

    components: {
        VueLoop
    }
})

<vue-loop :full="true" :horizontal="false">
    
        1
    
    
        2
    
    
        3
    
    
        4
    
</vue-loop>

For more information on Vue Loop see the Github Project or the live demo.

April 29, 2017

PortalVue – Render Vue.js components anywhere in the DOM

PortalVue, created by Thorsten Lünborg, is a portal component for Vuejs that allows you to render DOM elements outside of a component.

Typically when are working with things like tooltips, drop downs, and modals you need to rely on events to communicate between disconnected components. That can lead to complexity in your app and that is where PortalVue comes in.

Here is a simple example that is taken from the docs to highlight how it works:

<portal to="destination">
  <p>This slot content will be rendered wherever the <portal-target> with name 'destination'
    is located.
  </p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anwhere in your App.
  The slot content of the above portal component will be rendered here.
  -->
</portal-target>

You can even mount items outside of the Vue-App:

<body>
  
    
      
        PortalVue will dynamically mount an  instance of  in place of the Element
        with `id="widget"`, and this paragraph will be rendered inside of it.
      
    
  
  
    new Vue({el: '#app'})
  
  <aside id="widget" class="widget-sidebar">
    This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
  </aside>
</body>

For more information on this component check out the Github Repo and the official documentation. It looks to be a great solution for keeping your code clean and manageable.

April 27, 2017

Easily Extract Colors from any Picture with Pictones

Pictones is a web app that allows you to extract colors from any picture. It works almost instantly and can be useful for a lot of use cases. I think it would be perfect for designing a color scheme around a base image.

Once you drag and drop your image it gives you the CSS, Sass, and/or Less, plus the colors can be output in Hex or RGB.

What is impressive is how quickly the image is uploaded and the colors are extracted, I am on a fast connection and it feels instant.

April 26, 2017

Open Sourced React Based Timekeeper

Finding a good JavaScript time picker is almost impossible. It seems like everyone I’ve tried always ends up being a pain to implement and has a horrible user experience. A new project by Catalin Covic aims to make this easier with a new React based Timekeeper based on the style of Android Google Keep.

The picker supports selecting the time in various ways which make it a really flexible tool. As an example, when you are selecting the hour you can click the numbers on the clock, or click the hour number and it turns into a select list. The leader screen shot shows the various ways this can be done.

Usage is also simple and no styles are needed because they are inlined with Radium. Here is the example JavaScript to get started:

import React from 'react';
import TimeKeeper from 'react-timekeeper';

class YourComponent extends React.Component {
    render(){
        return <TimeKeeper />;
    }
}

Take a look at the Timekeeper site for a demo and installation instructions. The project site also includes documentation on the API.

April 25, 2017

Airbnb Releases a React Sketch.app

Airbnb released a new open-source library named React-sketchapp that allows you to write React components that render to Sketch documents.

They said they’ve built this tool because managing the assets of design systems in Sketch is complex, error-prone and time-consuming. Sketch is scriptable, but the API often changes. React provides the perfect wrapper to build reusable documents in a way already familiar to JavaScript developers.

Getting started with this new tool is easy. Just be sure you are running Sketch 43+ and have a recent install of NPM. Then install it and run it with the following:

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

npm run render

Even the code output from their example is not horrid like you might expect from a tool like this:

import { render, Text, Artboard } from 'react-sketchapp';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
      { props.message }
    </Text>
  </Artboard>
);

export default (context) => {
  render(<App message="Hello world!" />, context);
}

For more information check out their announcement and Github repo.

April 20, 2017

Generate Seed Data with the Star Wars API

Need sample data for your next app? Tired of using boring fake data? The Star Wars API is the solution for you, and it’s the first quantified and programmatically-formatted set of Star Wars data.

After hours of watching films and trawling through content online, we present to you all the People, Films, Species, Starships, Vehicles and Planets from Star Wars.

The data is available in JSON and exposed through a REST API that allows you to grab the data you need easily. Here is an example from grabbing the user object from http://swapi.co/api/people/1 which returns Luke Skywalker:

{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "http://swapi.co/api/planets/1/",
    "films": [
        "http://swapi.co/api/films/2/",
        "http://swapi.co/api/films/6/",
        "http://swapi.co/api/films/3/",
        "http://swapi.co/api/films/1/",
        "http://swapi.co/api/films/7/"
    ],
    "species": [
        "http://swapi.co/api/species/1/"
    ],
    "vehicles": [
        "http://swapi.co/api/vehicles/14/",
        "http://swapi.co/api/vehicles/30/"
    ],
    "starships": [
        "http://swapi.co/api/starships/12/",
        "http://swapi.co/api/starships/22/"
    ],
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "http://swapi.co/api/people/1/"
}

Utilizing this data in product demos or your development environment will be a lot more fun than just generic fake data. I imagine an integration with the PHP Faker library would very popular.

For full details check out the official site, and it also includes a list of helper libraries for most programming languages.

March 15, 2017April 14, 2019

Write better with Grammarly

You may not know this, but I have a secret weapon that helps me write better. I use it daily to audit blog posts, emails, issue comments, and more. Anywhere I need to write my digital editor, Grammarly, keeps me in check.

I first found this service over a year ago and installed the free version to help me write blog posts. The goal was to stop making fundamental mistakes that affect the quality of my writing.

After a few short weeks, I moved to the premium service which enabled features like grammar checking, punctuation, structure, and style. Since then I haven’t looked back, and Grammarly is now an essential part of my workflow.

Grammarly comes as a browser extension, a standalone app, an MS Office add-on, and a web-based text editor. I use the browser extension for Safari and Chrome, which fits my workflow best.

Having it in the browser means it checks as I write in any textarea. For example, writing an email in Gmail, publishing a post through WordPress, and even auditing my Github replies.

Here is an example of how it shows you what is wrong with a simple paragraph:

Plus it can go deeper with checking multiple parameters of your writing like passive voice, punctuation, sentence structure, and style.

Grammarly Deeper Insights — Deeper Insights

Another feature that I find helpful is double clicking a word will bring up its definition and a synonym checker.

Even these features alone make it worth using, but Grammarly has a final feature that I love. A weekly email that informs you about your previous week of writing by showing the total words checked, mistakes made, and vocabulary.

Grammarly Weekly Insights — Weekly Insights

As you can see from all these features, it’s a powerful app and for those of us who can’t afford editors, it’s the next best thing.

My only complaint is that with the Mac app installed it can’t auto check when I write in desktop writing apps. I believe this is because Apple requires sandboxing of all apps, which means they can’t communicate or embed with others. Even with that minor annoyance I recommend trying this app out.

The basic version is free and Grammarly offers premium plans to give you all the features. Try it out and improve your writing today.