Here’s my new tool called intervals


Play with it here.

Learn about the theory behind it here.

The code for the tool.

What does it do?

Generates a random music interval, shows it on the musical staff. You try to guess it. Clicking on the staff reveals the answer. You can also play the interval.

How was it built?

It’s a React app. What’s React? Get the best React book and find out 🙂

But these days you don’t need to start a React app from scratch (as described in the book), you have create-react-app which generates a new app and sets up all auxiliary tools you need. Furthermore, you don’t need to start a new app from an empty canvas, you can start building off of a template, thanks to CRAFT.

The template used is flashcards.

So to get an app like this off the ground you go:

$ npm i -g create-react-app
$ npm i -g craftool
$ craft intervals
$ cd intervals
$ npm install .
$ npm start

Tada! Sudden flashcard app, ready to go. All you need to do is implement the functions getAnswer() and getQuestion().

This is a bit of a specialized app, so no need to go into the gory details of the Questions and Answers. But overall:

  1. generate a random first note. e.g. F♯ on the third octave
  2. generate a random interval, e.g. a perfect forth
  3. use teoria to give you the correct second note, given a start note and an interval
  4. draw the two on the staff using Vex
  5. play the notes
  6. random pretty-printing and conversion from my note conventions to teoria to vex

Weirdness and hacks


Vex wants to draw an SVG inside a DOM element. (AFAIK. There may be better APIs I did not uncover.)

So I draw the SVG in a hidden div then copy it over to React, like so:

  <div dangerouslySetInnerHTML= />

Ooooh, danger!


Sometimes (rarely!) in all this randomness either teoria or vex deserts me. I think I worked out most of the kinks but still… I have a try-catch that simply generates another random question. This is pretty bad as it can theoretically freeze the browser if it fails to generate a valid question but in my testing it hasn’t happened. And sometimes you gotta do what you gotta do 🙂

Playing audio

No WebAudio, just the ole new Audio(url).play(). I play the first note, subscribe to its ended event, play the second, subscribe to its ended and play both. Awesome. Here it goes.

Except iPhone still refuses to play without human intervention, so I just play both together when iPhone is detected.

Thanks for reading!

I hope you learned a quick and easy way to create quiz apps. And also learned there’s a place you can go to practice them intervals.


Google Analytics Data Studio

I’ve said a number of times in the past:

I wish I could just check a checkbox and make certain Google Analytics data public.

I get that analytics can be a very private thing for some sites. I think there are just as many sites where that data just doesn’t need to be private. Not only would it be interesting, but insight might be gleaned from having more eyeballs on the data, and it could contribute to a wider data set of analytic trends.

Anyway, there is no such checkbox. But Zach Aten pointed out to me there is a thing called Data Studio that allows you to build custom visual reports, and you can make them public with the same kind of sharing controls you find in other Google products (like Google Docs).

I slapped together a quick dashboard for just raw traffic data. Not the most useful thing to look at, but sometimes the most fun. I’d embed it here, but…

Can I embed charts on other sites?

No. Data Studio is currently a stand alone product.

Embedding a Data Studio report in an iframe is blocked by Chrome as a potential security risk.

So here’s a link to it and a picture:

Sorry about the awful design. It just, you know, proves it’s authentic. Their templates are much nicer, and all the tools are there to do as good of a job as you’d like.

Of course, you can do a way better job of not only building more beautiful and useful charts but also of collecting more useful data. If you’re using Google Analytics, doing a little bit more than using the default snippet goes a long way. Remember we have an article and video on that subject.

Google Analytics Data Studio is a post from CSS-Tricks

via CSS-Tricks

Freebie: Clothing Icons (40 Icons, 9 Styles, AI, EPS, SVG, PNG)



Winter means getting out your scarf and a cozy hat to brave the cold — if you’re located in the Northern hemisphere that is. For all those occasions when your projects may need to get dressed up a little, we are happy to present to you the free Clothing Icon Set created by the design team at Creativebin today. The set includes 40 icons with everything ranging from shirts, pants and dresses to a blazer, hat and even a scarf. Available in nine styles and four formats (AI, EPS, SVG and PNG).

Freebie: Clothing Icons (9 Styles, AI, EPS, SVG, PNG)

Please note that this icon set is licensed under a Creative Commons Attribution 3.0 Unported. You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms is not cool. Please provide credits to the creators and link to the article in which this freebie was released if you would like to spread the word in blog posts or anywhere else.

The post Freebie: Clothing Icons (40 Icons, 9 Styles, AI, EPS, SVG, PNG) appeared first on Smashing Magazine.

via Smashing Magazine

Let’s Encrypt Everything

I’ll admit I was late to the HTTPS party.

But post Snowden, and particularly after the result of the last election here in the US, it’s clear that everything on the web should be encrypted by default.


  1. You have an unalienable right to privacy, both in the real world and online. And without HTTPS you have zero online privacy – from anyone else on your WiFi, from your network provider, from website operators, from large companies, from the government.

  2. The performance penalty of HTTPS is gone, in fact, HTTPS arguably performs better than HTTP on modern devices.

  3. Using HTTPS means nobody can tamper with the content in your web browser. This was a bit of an abstract concern five years ago, but these days, there are more and more instances of upstream providers actively mucking with the data that passes through their pipes. For example, if Comcast detects you have a copyright strike, they’ll insert banners into your web contentall your web content! And that’s what the good guy scenario looks like – or at least a corporation trying to follow the rules. Imagine what it looks like when someone, or some large company, decides the rules don’t apply to them?

So, how do you as an end user "use" encryption on the web? Mostly, you lobby for the websites you use regularly to adopt it. And it’s working. In the last year, the use of HTTPS by default on websites has doubled.

Browsers can help, too. By January 2017, Google Chrome will show this alert in the UI when a login or credit card form is displayed on an unencrypted connection:

Additionally, Google is throwing their considerable weight behind this effort by ranking non-encrypted websites lower in search results.

But there’s another essential part required for encryption to work on any websites – the HTTPS certificate. Historically these certificates have been issued by certificate authorities, and they were at least $30 per year per website, sometimes hundreds of dollars per year. Without that required cash each year, without the SSL certificate that you must re-purchase every year in perpetuity – you can’t encrypt anything.

That is, until Let’s Encrypt arrived on the scene.

Let’s Encrypt is a 501.3(c)(3) non-profit organization supported by the Linux Foundation. They’ve been in beta for about a year now, and to my knowledge they are the only reliable, official free source of SSL certificates that has ever existed.

However, because Let’s Encrypt is a non-profit organization, not owned by any company that must make a profit from each SSL certificate they issue, they need our support:

As a company, we’ve donated a Discourse hosted support community, and a cash amount that represents how much we would have paid in a year to one of the existing for-profit certificate authorities to set up HTTPS for all the Discourse websites we host.

I urge you to do the same:

  • Estimate how much you would have paid for any free SSL certificates you obtained from Let’s Encrypt, and please donate that amount to Let’s Encrypt.

  • If you work for a large company, urge them to sponsor Let’s Encrypt as a fundamental cornerstone of a safe web.

If you believe in an unalienable right to privacy on the Internet for every citizen in every nation, please support Let’s Encrypt.

[advertisement] Find a better job the Stack Overflow way – what you need when you need it, no spam, and no scams.

via Coding Horror

Capture User Actions with FullStory

Have you ever wanted to know exactly what a user did while on your website? Have you ever thought about the sheer importance of that data? It may just change the way you think about web design.

Using FullStory, you’ll get all the user action data you’ve ever wanted. No more guessing at where to place that “Buy Now” button. This tool will show you how users react to your site – giving you the knowledge to make the right design decisions.

Capture User Actions with FullStory

No More Mystery

FullStory provides you with every (and I do mean every) action a user has taken on your website. Clicks? Yep. Swipes? Absolutely. Scrolling? Pauses? Check and check.

Use FullStory’s pixel perfect session playback capabilities to see exactly what each user did while browsing your site. From there, you can aggregate sessions based on things like actions or events. This will help you see the pain points users are having (and maybe even where you’re brilliant ideas are paying off).

Capture User Actions with FullStory

Reference Live or Past Sessions

If you’re interested in looking back to see how Black Friday sales went, simply look at the session archive for that day. With this DVR-like feature, you’ll see their behaviors in ways that will help you to improve for next year.

Using FullStory’s Go Live feature, you can actually co-browse your site with a user in real time. It’s a great way to troubleshoot problems as they happen. Even better, there are no extra software or plugins to download – it just works. GoLive is also a great way to conduct training sessions as well.

Simple, Yet Powerful, Search

Searching for specific user actions or events is incredibly easy with FullStory. For example, maybe you just want to find interactions where a user added a product to their shopping cart. Using the OmniSearch feature, just search for “add to cart” and you’ll have those sessions right in front of you.

Capture User Actions with FullStory

You can also use OmniSearch to build funnels, find specific customers, access page analytics and more. It’s fast and easy – just like searching the web.

Create and Share Custom Segments

Knowing who your customers are and what they want is the key to online success. FullStory Segments lets you track new feature engagement, analyze conversion rates or find customers that fit specific criteria.

Share the Segments you’ve created with your team to make sure that everyone is on the same page. Take it a step further by using the FullStory JavaScript API to add your own application-specific data into your user sessions.

Never Miss a Magic Moment

If you don’t know how users are interacting with your site, you’re leaving it to chance. Plus, you’re probably leaving money on the table. Not knowing is no longer an acceptable answer.

Try FullStory for FREE today and stop guessing!

This post has been sponsored by Syndicate Ads.

The post Capture User Actions with FullStory appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

13 UI Kits for Beautiful Mobile Apps

A UI kit is a great way to get started with the design for your next app. Each one comes with a complete set of assets for every part of your app’s user interface, along with original PSD Photoshop files for easy customization. Make your app or game stand out with one of these kits.

In this article, I’ll introduce you to some of the beautiful, professionally-designed UI kits available for mobile apps on GraphicRiver. Whether you’re looking for a sprite set for your next game, a set of high-resolution app icons, or simply a complete app design with background and other assets, there is a kit for you on GraphicRiver.

Complete Designs

Let’s start with all-in-one UI kits that can be used for any mobile app. Each of these kits comes with a large collection of designs for commonly-needed screens.

Bajing UI

Bajing UI kit sample screens

Bajing is a complete UI kit designed to help you design and prototype your apps faster than ever before. The kit comes complete with a set of 33 PSD files with layouts for common app screens. You’ll find designs for login screens, user profiles, media players, and navigation bars. With the layered PSDs, you can customize or remix any one of these for use in your own app. 

Next eCommerce UI Kit

Next eCommerce UI Kit sample sale and checkout screens

Next eCommerce is optimized for e-commerce apps. With 35 distinct and stylish options for page layouts, you’re sure to find something here that works for your next app. And nothing is left out: you’ll find product pages, landing pages, as well as common screens like login or signup pages. One feature that sets this kit apart is that it includes Sketch design files as well as Photoshop PSDs. Not only that, but all shapes are vectors and can be completely customized.

Dark UI Kit

Dark UI Kit profile screen and dashboard

Dark UI Kit is a stylish light-on-dark UI design. With a flat design style, this would make a great starter for your next iOS app. The kit includes 12 PSD files, each one representing a different kind of screen and having editable layers as well as vector icons, buttons and shapes.


Limitless login media player and calendar screens

Limitless is an attention-grabbing, high contrast UI design that will make your app stand out in the app store. With a flat design and bold graphics, this app is modern, clean, and visually impactful. The UI kit comes with 20 different layouts for common screen such as a calendar, timeline, profiles, inbox, and music player. All the layouts are Retina-ready, all the shapes are vectors, and the PSDs are organized so it will be easy to customize the colour scheme.

Photo App UI Kit

Photo App UI Kit sample views

Photo App UI Kit is a clean, modern dark-on-light design that is perfect for building a photography or social media app. The UI kit is designed to look right on iOS or Android and includes 20 different PSD files for galleries, feeds, profiles, and navigation bars. Free fonts from Google complement the design and help set it head and shoulders above the pack.

Paycar App

Paycar App sample views

The Paycar App UI Kit has one goal: to help you design a great car sharing or booking app. With beautiful, full-screen map views, and layouts for all the screens a car-sharing app could need, Paycar can help make your app beautiful. 


Profile UI kit light and dark themes
Profile UI kit is a stylish and engaging design for a social media application with two themes: dark and light. With ready-made layouts for screens such as user profiles, engagement tracking, and news feeds, Profile gives you a leg up on the design of a social media app. The UI kit comes with customizable, well-structured PDF files, as well as a custom pack of 70+ social media icons. All assets are vectors, and the layout colours can be easily changed to match your client’s branding.

Game Kits

So far, we’ve looked at some pretty serious app designs: car sharing, photography, and e-commerce. Let’s lighten up a bit and look at some fun assets that you could use for your next mobile game!

Game of Kings

Game of Kings sample level

Game of Kings is a giant collection of assets for a fantasy game in flat relief style. This kit includes sprites, icons, monsters, tilesets and four luscious, seamlessly scrollable backgrounds. With bright colours and a bold but simple style, these assets are sure to dazzle and engage your users. Best of all, the images are all provided as vectors and can be resized, coloured or edited to your heart’s content.

Top Down Racing Game Creation Kit

Top Down Racing Game Creation Kit cars and track
The Top Down Racing Game Creation Kit is a popular asset package that has everything you might need to build a racing game. Instead of a flat, vector aesthetic, this kit opts for photorealistic cars and landscapes, including tileable terrain, modular track segments, and highly-detailed cars with transparent lighting effects.

If the included cars aren’t enough for you, the author has created an expansion kit with even more vehicles!

Sweet Game Asset

Sweet Game Asset title and level background
Satisfy your sweet tooth with Sweet Game Asset. This game kit comes with a seamless background and enough candy sprites to fill a jack o’lantern. Not only that, but it also comes with a set of UI elements: popups for completing levels, colourful, candy-like buttons, and an easy-to customize game logo. This kit contains everything you need to create a candy-themed game—toothbrush not included.

Flat Jetpack

Flat Jetpack sample game with sprites and level background

Flat Jetpack is a platformer game template with a fresh and colourful style. This kit has a full tank of assets, including seamless game backgrounds with parallax, animated character and enemy sprites, terrain, animated water, effects and more. Not only that, but it comes with a complete pack of user interface elements. This game kit will launch your next app into the stratosphere!


Wireframing is a vital part of the UI design process. Not only do wireframes help you understand your app better and plan its implementation, they also let you communicate your app design idea to the client.  

App Wireframes UI Kit

App Wireframes UI Kit is a tool for sketching simple, beautiful mobile app wireframes. Just drag and drop elements within the included template to create clean, attractive user behaviour flow charts. These charts and simplified screens will help you map out your app and it will help your clients understand the planned content and layout of each page.

Simple Mobile UI Wireframe Design Kit

Simple Mobile UI Wireframe Design Kit printable app design with comments

Simple Mobile UI Wireframe Design Kit has a creative approach to improving your UI design process. The kit includes a template with drag and drop screen elements. There are 57 of these included wireframe UI objects—just arrange them into an idea for an app screen. The template has a gridded background and is meant to be printed so you can pass it around to others for comments or corrections. Design. Print. Edit. Repeat!

Grab a UI Kit Today!

You can put one of the designs above to use right now, or check out some of the other UI kits available for sale on GraphicRiver. In addition to UI Kits, CodeCanyon also sells complete app templates. Learn more about them right here on Envato Tuts+!

via Envato Tuts+ Code

11 Courses to Help You Master PHP Frameworks

PHP frameworks can really speed up your development process. They provide you with a stable foundation to start from, so that you can spend time developing the important parts of your application rather than reinventing the wheel.

But the proliferation of different PHP frameworks also means that there’s a learning curve involved. As well as learning PHP, you need to learn the workings of each framework, or at least of the ones you’re planning to use.

So we’ve got you covered in this article, with details of 11 courses that will get you up to speed with Laravel, Lumen, Phalcon, Symfony, and a range of other PHP frameworks.

1. Get Started With Laravel 5

Laravel is a PHP framework for modern web apps. Recently upgraded to version 5, Laravel is a mature system that continues to win support due to its elegance and stability. Laravel ships with built-in support for database migrations, object-relational mapping, routing, and authentication, making it easier for developers to start and maintain their work.

In this course, you’ll start by learning the basics of the Laravel framework with instructor Jason Lewis. You’ll begin by preparing a dev environment and learning how to configure Laravel. Then you’ll move on to learn foundational topics such as routing and requests, responses, views, sessions, emails, forms, and using databases.


2. Build a CMS With Laravel

In this course, Jason Lewis will show you how to build a functioning content management system (CMS) with the Laravel PHP framework. You’ll understand some of the tasks and problems that are common to so many web development projects and explore different possible solutions to them. 

You’ll be starting your CMS from scratch—a great way to expand your knowledge of the Laravel framework. This course will teach you the fundamentals required to develop top-notch Laravel applications.


3. Authentication With Laravel

Authentication is extremely important, and as a result, authentication is extremely difficult to get right. But Laravel’s built-in authentication system makes it easier to protect the portions of your web application that need protecting.

In this course, Envato Tuts+ instructor Jeremy McPeak will show you how to use Laravel’s basic authentication system, and how to customize this system to fit your own application’s needs. You’ll see how to create users, user providers and guards to customize every aspect of Laravel authentication.


4. Get Started With Lumen

Lumen is the fast new PHP micro-framework from the Laravel project. It allows you to use the power of Laravel, including the Eloquent ORM and features such as routing, middleware and validation, with the flexibility and low overhead of a micro-framework. If you like Laravel, or just want to use a cutting-edge server-side platform for writing microservices and REST APIs, Lumen is a great choice.

In this course, Envato Tuts+ instructor Simon Bacquie will help you get started coding with Lumen. You’ll start with a blank, boilerplate Lumen app, and build it out into a full web app that manages books and authors. Along the way you’ll learn about some of the key Lumen features, such as Eloquent, routing, controllers and more!


5. Create a REST API With Lumen

In this course, Jeremy McPeak will show you how to get started building REST APIs with the Lumen framework. You’ll start by setting up a Lumen development environment and go on to build a complete API for a music store, including routing, MySQL database connectivity, and security.


6. Get Started With Phalcon

What makes Phalcon unique and exceptional is its speed and the way it loads and runs. The reason it is so fast is that it is implemented as an extension written in C language that will load into your RAM as a PHP module.

In this course, Manish Kumar will show you how to get started coding with the Phalcon PHP framework. You’ll get hands-on experience with most of Phalcon’s core features—think of it as breaking the ice between you and Phalcon. The course project will be to create a simple phonebook application.


7. Create a REST API With Phalcon

In this course, Manish Kumar will teach you how to get started with the Phalcon PHP framework by building a simple REST API. You’ll learn how to set up a development environment, how to define a database schema and API endpoints, and how to implement create, read, update and delete (CRUD) operations to persist data to an SQL database.


8. First Look at Slim PHP

Slim PHP is an excellent framework for building micro applications in PHP—the kind of app that does one thing, and does it well.

In this Coffee Break Course, Matthew Setter will give you a quick introduction to Slim and show you how a standard Slim application is built. You’ll see how to work with GET and POST routes, and how to retrieve data from the environment. Naturally, you’ll also learn how to use templates in Slim and how to manipulate template variables. 

Along the way, you’ll gain a thorough understanding of how a Slim app is put together, specifically configuring application settings, dependencies, and routes.


9. Getting Started With Symfony 2

Symfony 2 is one of the most popular modern PHP frameworks. It has the advantages of being modular, extensible, and full of useful features. 

This course is designed for first-time users of the framework, and will walk you through all its basic coding features. Andrew Perkins will cover everything you need to get started, such as bundles, templating with layouts, routing, building forms with validation, and how to build a full CRUD app with database interaction. 

By the end of the course, you’ll have the fundamental skills necessary to use the Symfony 2 framework to build basic, database-driven web applications.  


10. Build a CMS in Symfony 2

Building your own Content Management System (CMS) can be surprisingly simple. In this course, Andrew Perkins will show you exactly how to build a feature-packed content management system from scratch using the popular Symfony 2 PHP framework.  


11. Beginning Testing in Symfony 2

To continue our series of courses about the popular PHP framework, Symfony 2, this course will take you through all you need to know to get started with testing. 

Andrew Perkins will explore the basic concepts of functional and unit tests in the context of a Symfony 2 application with PHPUnit. Then you’ll dive into some practical examples of testing in action.


Start Learning With a Free Trial

You can take all of these and more PHP courses with a free 10-day trial of our monthly subscription. So get started today, and start getting up to speed with the PHP frameworks that will enable you to work smarter, faster, and better.

via Envato Tuts+ Code