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.
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= />
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
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.
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.
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.
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).
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.
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.
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.
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 content … all 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:
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.
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.
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.
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).
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.
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.
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.
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.
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 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 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 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 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.
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.
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.
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 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 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!
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.