SSL and HTTPS – Everything You Need to Know

What is SSL?

SSL (Secure Sockets Layer) is a standard security technology for establishing an encrypted link between a server and a client—typically a web server (website) and a browser (e.g., Chrome, Safari, Internet Explorer); or a mail server and a mail client (e.g., Outlook).

Originally HTTPS was designed to allow for sensitive information to be safely exchanged over the internet, today it is a best practice for all websites.

Here are the top four reasons why every new website being built today should be served over HTTPS:

  • SEO – Search engines have started to rank sites that are served over HTTPS higher than comparable HTTP sites
  • Trust & Security – HTTPS makes man-in-the-middle attacks much more difficult and establishes a level of trust with the server you are connecting to
  • Surveillance – The rise of government surveillance, both foreign and domestic
  • It’s easy! Setting up HTTPS is now generally easy to do and SSL certificates can now be purchased and installed for free

How SSL Works

The lack of encryption with http:// URLs makes it very unsafe to browse and interact with websites that contain sensitive information, like bank websites, shopping websites, or any website that you login to, and especially any website where you enter a credit card number.When you visit a website at an http:// URL, information is sent through the network (“over the wire”) unencrypted, and you have no guarantee that the server you are connecting to at the other end is actually the server you think it is.

The https:// protocol solves these problems by forcing the network packets to be encrypted and guaranteeing via a third-party that the server on the other end is the one and only valid server for that URL. HTTPS makes man-in-the-middle attacks far more difficult and establishes a level of trust with the server you are connecting to.

The Certificate Authority

The third-party that establishes this trust is the “Certificate Authority”. The Certificate Authority sells SSL certificates and creates the network “handshake” that happens when connecting to a website. This way you can be sure when browsing over HTTPS that the server you are connecting to is the server you are asking for, and that any network packets you pass back and forth will be encrypted.

How to Implement SSL

The process of purchasing and installing an SSL certificate is generally very simple, and many web hosts will both sell and install SSL certificates in one step. You can also purchase an SSL certificate yourself from a certificate authority like RapidSSL and then ask your host to install it for you.

Although SSL certificates can still be expensive when purchased through certain certificate authorities, a new initiative led by a group of the biggest internet companies in the world called Let’s Encrypt is promising to provide top notch SSL certificates for free. As of January 2016 this service is in public beta, but very soon it will be the go to place for acquiring free SSL certificates.

Standard vs. Wildcard SSL Certificates

The only decision a potential SSL certificate purchaser needs to make is whether to get a standard SSL certificate or a special SSL certificate called a wildcard certificate. Standard SSL certificates protect a single domain like mightyminnow.com but don’t protect subdomains like hello.mightyminnow.com, whereas wildcard certificates can protect one level deep into subdomains. If your domain name has any subdomains that you want to serve over HTTPS, you’ll want to purchase a wildcard certificate.

What Now?

If you want your website to be more secure, better trusted and better “liked” by Google – consider purchasing and configuring an SSL certificate.

Mm Plugin: Equal Height Columns

Making columns that have the same height without explicitly setting a height on each of them has always been a web design challenge. Doing this in a way that is full responsive so that content never overflows and the heights are equal on all screen sizes has always been an extreme challenge. We’re pleased to announce that this challenge has finally been solved with our Equal Height Columns plugin for WordPress.

Our Equal Height Columns plugin is simple but very powerful. Once it is activated it adds a settings page where you input a CSS selector for the elements you want to have the same height. You can also input a breakpoint below which you do not want the plugin to equalize the heights. Simple as that.

This information gets passed to a jQuery script that does all the magic. When the page loads the script measures the height of all the items that match the selector and sets each item’s height to match the height of the tallest item. Then it sets up some event listeners for window resize and orientation change and re-equalizes the heights whenever these events are triggered.

Equalizing the heights on page load and window resize was good, but we took it a step further and added some extra functionality to make it bulletproof:

– We check the selector that was input and catch any errors that happen if the selector is malformed so that we never stop JavaScript execution due to bad input. This plugin will never break your site!
– We added some debouncing on the resize and orientation change events so that the plugin only re-triggers once as you resize the window
– It supports multiple selectors at a time so that multiple collections if items can be equalized without affecting each other
– It always grab the items fresh from the DOM so that it will still work in situations where a new item has been added to the collection via AJAX or cloned with jQuery
– We added a custom event ‘equalheights’ that can be used to easily trigger the equalizing manually with jQuery’s trigger method like so:

There are also two jQuery methods that you can call directly, initEqualHeights() and equalizeTheHeights(). The difference between them is that initEqualHeights() sets up all of the event handlers for when the window resizes and when the ‘equalheights’ event is triggered on the window, but equalizeTheHeights() simply does direct equalizing of the heights without involving any events. Both methods can be used in the same way and support the same 3 args:

There is also a filter that allows you to programmatically set up the selectors and args you want to use, which allows you set certain elements to always equalize heights regardless of whether their selector has been entered on the settings page:

After many, many hours of refactoring and improving, we’re very happy with the plugin and are using it on many of the custom sites we build for our clients. Check it out on the WordPress Plugin Repository and on Github and let us know if you find it useful.

-Mm

Donate Your Old Devices to Our Device Lab

Mm-Device-Lab-Sm

The satisfaction of working and playing on the latest technology is hard to beat, and we love getting new gadgets. But what should you do with the old devices that are being replaced?

We’ve found a way to give those old devices a second life by creating an Open Device Lab at our office in Oakland. We use our Device Lab internally to test all of the client sites that we build, and as a service to all the freelancers out there we’ve opened up our Device Lab so that any developer or designer can come in and test their work on our collection of devices for free.

So far we’ve collected about 10-15 various old iPads, iPhones, Android tablets, Android phones, and Windows Tablets, but our collection is far from complete. If you’re interested in helping out our developers and all the freelancers out there, we would sincerely appreciate the donation of any old devices that you are no longer using.

We’ll gladly take anything you’ve got, and you’ll be helping us in our mission to create websites that are functional on all devices and helping the Bay Area freelancing community. Our Device Lab is currently missing Windows phones, retina display iPhones & iPads, Chromebooks, and newer Android tablets, but every new addition to our Device Lab is an important new way to test our work and we’ll happily accept any device that you’d like to donate.

To donate a device you can use our Device Lab Contact Form or e-mail us at info@mightyminnow.com.

And if you’re a freelancer and would like to come in and use our Device Lab, please do! We encourage you to reach out to us at any time and take advantage of our Device Lab and the other services that we offer to the web development community.

– MIGHTYminnow

WordCamp SF 2014 Review

The MIGHTYminnow team was out in full force for this year’s WordCamp SF, and what a great event it was! All of the presentations were excellent, we learned a ton about the exciting new features coming soon to WordPress, and the positive energy of the WordPress community was palpable throughout the entire weekend. The future of WordPress is brighter than ever!

We got so excited watching the presentations that we thought we’d go through a couple of our favorites and offer some of our thoughts in response. All of the WordCamp presentations can be viewed on WordPress.tv, including a great presentation by our own Senior Developer Mickey Kay, and we highly recommend giving them a watch. Without further ado:

Andrew Nacin: The Future of WordPress is Global

Nacin is one of the WordPress lead developers and a key figure in the WordPress community, and his talk on growing WordPress internationally was very interesting. In the last couple of years the WordPress core team has been working hard to make core 100% translatable into not just any language, but into any locale. They’ve done this by wrapping each of the 4,000+ strings that are unique to WordPress in an internal translation function, so that each string will always dispay on the screen in the language that the WordPress user has selected. Then they hooked the translation library up to GlotPress, a translation engine project maintained by Automattic that anyone can submit translations to, and with the help of the website translate.wordpress.org the WordPress community has already translated the platform into 40+ languages.

This is huge, because as Nacin pointed out, only 5% of the world’s population speaks English as a first language. With WordPress now ready to use in every major language on the planet, we can expect a massive amount of international growth in the platform in the near future, and that means more developers, more content creators, and more people involved in helping to make WordPress the best publishing platform on the web.

But the core team isn’t stopping there. The big announcement during Nacin’s presentation was that in addition to core being fully translatable, all plugins and themes in the WordPress.org repository are now translatable using the same process as core via the translate.wordpress.org website. This means that you can write a plugin or a theme, publish it in English to the official repo, and anyone else in the world can at any time hop on translate.wordpress.org and write translations for the unique strings in your plugin or theme. Then users of the plugin or theme who are using WordPress in another language can use your plugin or theme without you as the developer having to do any of the translation work!

This is going to be huge for WordPress, and we’re very excited to see the community grow as WordPress becomes the first truly global web platform ever.

Sam Hotchkiss: Data First – How APIs are Changing the Internet

There was a lot of discussion at this year’s WordCamp SF about the new WordPress API, which is slated to be merged into core in early 2015, and Sam’s talk was all about APIs. Although there have been solutions for externally working with WordPress data for a while, the new WP-API represents a huge step forward over the existing solutions and will enable a whole new generation of external apps to be built on top of WordPress. This is very exciting.

The goal with an API like this is to provide a way for the abstract data that is inside WordPress to be used outside of a WordPress install. Almost everything that you can do from within a WordPress install will eventually be possible to do from a completely separate app that can communicate with the WordPress install using the API.

This means that entirely new wp-admin back-end user interfaces or front-end user interfaces can be developed on top of the WordPress data model, allowing WordPress to be used only as a system for interacting with abstract data. In the near future, there might be several popular flavors of the wp-admin back-end to choose from, some tailored for bloggers and casual users and others for businesses with specific needs. It’s conceivable that every major use case for WordPress could eventually have a custom wp-admin, or even several competing wp-admins that offer different optimizations and workflows.

One of the possibilities that we are most excited about is the potential to create front-end UIs that behave like native applications. Popular JavaScript frameworks like Backbone.js could be used to create WordPress sites that respond to user input immediately and never need to refresh the page, and front-end UI wouldn’t even need to live on the same server as the WordPress install because it could communicate with the WordPress install using the API.

The future of the web is all about freeing data from the murky depths of databases and clunky UIs, and the new WordPress API will allow WordPress data to flow more freely around the internet than ever before. We’ll definitely be keeping our eye on the new WP-API.

Guillermo Rauch: Realtime Communication with Socket.IO and WordPress

The presentation given by Guillermo Rauch about using his socket.io real-time web engine with WordPress was simply incredible. He’s clearly thought a lot about how the web of the future will function, and by creating socket.io he has allowed us all to start building futuristic websites today.

Socket.io keeps a connection between the client and the server open after the initial page load, and this allows the page to keep updating itself in real time based on the user’s interaction with the page, or new data from the server, or both. It can be used to create things like a collaborative online whiteboard that multiple users can draw on at the same time, or a super-fast chat application, or a web audio synthesizer where multiple users are collaboratively making music together in real time.

The example integration with WordPress that Guillermo showed off during his presentation elicited disbelieving gasps from the audience. In just a couple of minutes he live coded a script that counts how many users are reading a post at the same time and sends this information to all of the users reading that post. As more people in the audience jumped on his demo site during his talk we could all see the number on the page rising and rising, all in real time. It was totally cool.

After seeing his presentation we’re more convinced than ever that the future web will be all about real time client server communication, and we’re very glad that people like Guillermo are out there building the tools to make it all possible.

Conclusion

There has never been a better time to be part of the WordPress community, and all of the great presentations that we saw at this year’s WordCamp and the enthusiasm and mutual respect that we felt from everyone all weekend really drove this point home. Being a part of an open source web project like WordPress is a very special thing, and we are more excited than ever to keep using WordPress for our client projects and to help contribute to the growth and success of the platform for many years to come.