Matt West’s Blog

Blog

  • The Relationship Between Design and Code

    Helen West (a.k.a. my Mum) has run a jewellery business for my entire life. She designs and makes individual pieces and sells them through her retail store. If you were to visit her workshop you’d find a wonderful array of tools and machines, but she didn’t decide to become a designer so that she could bend metal or hammer intricate patterns into a piece of silver all day. Helen’s a jeweller because she wants to express her creative ideas in the pieces she makes. Her satisfaction is not found in the swing of a hammer, but in the creation of an object that brings joy to it’s owner.

    That said, Helen has a deep understanding of her tools. It’s a requirement in order to bring her ideas to life. She needs to know which set of pliers to use to bend the metal in just the right way, or which technique will allow her to create the finish she’s after.

    I think the relationship between design and coding is very similar. 

    Code is merely the tool I use to bring my ideas to life. I don’t draw pleasure out of writing code all day. My satisfaction is found in designing and building something that’s more useful than that which came before it.

    Not all designers want to bring their designs to life themselves. That’s okay. It doesn’t make them a “bad” designer, they just need to find someone they can trust to do that for them. 

    I’ve worked with some excellent designers that don’t code. I sometimes wonder if the absence of coding skills actually frees these designers to create more innovative products. Due to their limited knowledge about todays tools, they are not constrained by their limitations. They often create designs that force our tools to evolve. Of course, designers that code can do this too, it just take a little more conscious effort to break free of these constraints.

    So should designers code? 

    Learning to code is a necessity if you want to bring your designs to life yourself. If you work with a great developer who you trust to respect your design decisions, it’s okay to delegate the coding to them.

    Some jewellers design and make everything themselves, others hand off their designs to skilled craftspeople who bring those designs to life. Either approach is okay, it just depends on how you want to work.

    Caveat: When I talk about coding in relation to the “should designers code?” question, I’m referring to interface design and frontend development (HTML, CSS, and JavaScript). Software engineering and backend development are specialised fields that I don’t think every designer needs to understand in depth.

  • Joining Wildbit

    Joining Wildbit

    Folks that are following along on Twitter might have noticed that I left No Divide a few weeks ago. Ryan and Dan were an absolute pleasure to work with, they’ve helped me grow both personally and professionally over the past 18 months and I’m extremely grateful for all their support. 

    Back in my freelancing days, I handled design and development for most of the projects I worked on. A lot of my clients were small businesses with small budgets so it just made sense for me to do everything. Despite this, I always considered myself more of a developer than a designer. When I took a job at No Divide where I would only be doing development work I didn’t think that I would miss the design stuff. I was wrong.

    Over the past year I’ve come to realise that my true passion lies in design. I love the journey of conceiving a fragile idea and shaping it into a final product.

    Much like a carpenter needs her tools to create a beautiful piece of furniture, development is simply the tool I need to create software. While a carpenter might get excited about a new hammer or chisel, it’s not what she lives for. I feel the same about code. I enjoy experimenting with new web technologies but it’s not what get’s me out of bed in the morning. I live to design things that help people.

    It was time to switch my focus, but I knew this decision would bring an end to my time at No Divide.

    I’m a bit picky when it comes to choosing a place to work. If I’m going to spend a significant amount of time working somewhere, I want to be sure that I’m surrounded by like-minded people who care about their work as much as I do. 

    Rather than trawling job boards I decided to make a list of companies who have values that align with mine. There were a few other requirements too, like the ability to work remotely and an openness to flexible working hours.

    I ended up with a short list of just five companies. Three of them were hiring.

    I wasn’t in a hurry to leave No Divide so I took my time with the applications and then patiently waited for any responses.

    After interviewing with Wildbit I knew straight away that this was the company for me. It was clear that they truly live their values, and the role would allow me to switch my focus to design. After a couple of interviews and a small test project I got an offer. I accepted.

    Last Monday I started at Wildbit as a designer on the marketing team. I’ll be focussing on raising awareness of Wildbit and their suite of products, Postmark, DeployBot and Beanstalk. I’m only a week in but things are going great so far. I’m hopefull that this is the start of an exciting new chapter.

  • The Future of Web Forms

    The Future of Web Forms

    Web forms are the evolution of their paper counterparts. A collection of labels, boxes and circles designed to constrain input and make it easier for data to be processed.

    After all, a forms purpose is to collect data so an operation can be performed. To perform that operation the data we collect needs to be uniform. We place constraints on the interface to ensure this uniformity. Forms are designed to meet the needs of the process, not the user.

    Forms often feel cold, inhuman. As a result, our responses are often cold and inhuman too. We leave out details. Things we might have mentioned if asked the same question by a friend, but this is a computer. All it wants is data. It doesn’t care. It’s like talking to someone that isn’t listening to you. Why bother when your words are not heard?

    Image by Ken Teegardin.

    As with many digital things, forms have been heavily influenced by their analog predecessors. We have square boxes for writing in because that’s what we had on paper.

    Paper, a form factor where the primary input method was a pen or pencil. Things have changed, yet we allow ourselves to be confined by the same constraints put in place hundreds of years ago.

    Technology has freed us from these constraints. We’ve been given the tools to create more human interactions between people and computers.

    Spike Jonze’s film “Her” provides an interesting prediction for how we might interact with computers in the future.

    We are rapidly approaching a time when speech recognition, natural language processing and artificial intelligence are at a level for humans to hold meaningful conversations with technology. Even now, our tools are good enough to start building some of these experiences.

    So I bring you back to forms. How can we use these tools to make forms more human?

    We need to break away from our preconceived notions of what defines a form interface. To focus on building a more natural experience and using technology to mask, not remove, the constraints needed to perform operations.

    A conversation with Facebooks chat bot “Poncho”.

    Over the past few years we’ve seen the introduction of a bunch of new products that aim to make our interactions with technology more natural. Siri, Alexa, chat bots, these are all moving us in the right direction but we’re yet to see these innovations bleed into the browser viewport in a significant way.

    There’s so much potential for more conversational interfaces on the web and yet we still default to building forms out of a bunch of inputs and dropdowns when we need to collect data.

    Some people are pushing forward with this. The insurance service Jack, recently launched with an impressive page for collecting the details needed to provide an insurance quote.

    The “Get a Quote” page from withjack.co.uk

    While the responses are still constrained, the design of the data collection process creates a much more enjoyable and friendly experience.

    It would have been easier to just present the user with a standard web form, but by making the interaction with the user more like a conversation, Jack have managed to create something that feels far more natural.

    Adrian Zumbrunnen’s conversations website azumbrunnen.me

    Adrian Zumbrunnen captured the webs attention a while back when he released his conversational personal site. Adrian designed an interface that uses a selection of canned responses to guide the user on a tour of his work in the UI/UX field. Cleverly, Adrian’s website takes into account how the user reached his site and uses this as a signal to understand the user’s context.

    We’re moving in the right direction but it still feels like something is missing. To build a truly conversational interface the technology needs to have an understanding of the user’s intention and context that goes beyond canned responses and cleverly positioned text fields. We need to build on the work done in the chat bot space and develop interfaces that people can interact with using natural language.

    The interface should know who we are before we even start. The fundamental technology is already there for this. It’s called browser autofill. All of your details saved in one place, made accessible to a website with a simple request.

    The interface should adapt itself based on the context of the situation. Did you start a conversation from the support page of a website or the homepage of the marketing site? These signals can help us to understand the user’s context and therefore tailor the systems responses appropriately. This is something that Adrian’s website does well.

    Let’s experiment with how we might replace a sign up form with something more conversational.

    What would the sign up flow look like if we moved beyond forms?

    We have the data to do this today, but bringing it all together to create such a natural experience is really hard.

    Consider the implications for accessibility, privacy, multi-language support, emotional and compassionate design. These are all challenges we need to overcome if we’re going to introduce a new era of more meaningful interactions with technology.

    We’ve made incredibly progress so far but there’s still more work to be done. The future is just around the corner, but only if we’re brave enough to create it.

    This post originally appeared on Medium.

  • Forget About Fashion

    Forget About Fashion

    As humans we’re obsessed with the new. The must-have gadget that just hit the market. The latest style paraded down the fashion show catwalks.

    Every time Apple releases a new iPhone there are queues a mile long of people wanting to get their hands on the latest package of glass, silicon and metal.

    It is in our nature to want what is new and shiny.

    In our personal lives this behaviour is harmful on our bank balance, but when it comes to building products it can do much more damage.

    Subscribing to the latest design trend or adding the latest fashionable technology to your product only enters you into the perpetual cycle of having to re-invent your product every time something new comes along. You may gain some short-term wins but your product will quickly seem out-dated. You’re constantly running to catch up with the new trend.

    Remember how QR codes got really popular a few years ago? Seeing one today makes me cringe.

    Dare I mention the whole skeuomorphic design trend?

    Focus on the things that don’t change.

    When planning out your product roadmap forget what’s fashionable. Focus on the things that won’t change. 

    Amazon pours huge amounts of cash into building more distribution centres so that they can reduce the time it takes for an order to hit your doorstep. Nobody is ever going to wish that it took longer for their order to arrive.

    Basecamp works hard to reduce the page load times for their project management software because nobody is ever going to think, “hmm, I wish this page took longer to load”.

    Don’t look for excuses to use the latest trends in your product. They only have a place if they solve a genuine problem.

    It’s okay not to be an early adopter.

    Apple is famous for being late to the game with new technologies. 

    There were hundreds of MP3 players on the market before the iPod entered the mix.

    Apple Pay launched years after NFC-enabled payments debuted in Android devices.

    Smart watches date back to the 90s, long before the Apple Watch joined the fight for our wrist space.

    Apple use what’s needed to build the product they want to build. They don’t cram some cool new technology into the latest iPhone just so the marketing department has something new to shout about. They’re not battling to match the feature lists of competitors.

    Adding things that aren’t needed leads to a bloated product, and that will be a death sentence in the long run.

    Great products are born from focus and simplicity. 

    Forget about fashion and concentrate on the things that matter.

  • Grasping Opportunities

    Every once in a while an opportunity arises that will push you out of your comfort zone. That has the power to challenge your understanding of the world, and to inspire you to grow in ways you never thought possible.

    Back in 2012 I was freelancing as a web designer and got involved in the early community of Treehouse students. Treehouse had setup a Facebook group where students could hang out and one day I logged on to find this post from Treehouse CEO Ryan Carson.

    This post changed my life.

    Until this point I had always hated writing. It was high on my list of activities to avoid at all costs. Somehow I forgot this as I fired off an email to register my interest in becoming an author.

    I had an opportunity to take the knowledge and experience I had gained as a freelancer and help others get started in the web industry. I had to give this a shot.

    Over the next few days I worked hard putting together a proposal for the book. I knew nothing about the publishing industry so searched online for any advice I could find about how to write a great proposal.

    Later that week I got a call from Wiley. They loved my proposal. I got the job. I was set to be a published author and hadn’t even turned 20 yet.

    After six months of intense writing, John Wiley & Sons published HTML5 Foundations in November 2012.

    What started as a simple Facebook post had lead me on a journey that pushed me far beyond what I ever thought I was capable of. 

    It would have been so easy to just dismiss that post. To concede that there was someone much smarter and more qualified than me to write the book. To not even bother trying. But as Wayne Gretzky famously said: “You miss 100% of the shots you don’t take”.

    Look out for opportunities that challenge you to break out of your comfort zone. You never know where they might lead you.

  • Why Time Tracking Kills Creativity

    Time tracking can be useful. It helps you keep track of billable hours, gives you a detailed overview of what people are working on, and shows you which projects are falling behind schedule. But time tracking can also have unforeseen impacts on your team’s culture.

    Time tracking can make your team feel like they’re being watched. The pressure to account for everything they do kills creativity and drains the fun from the work. 
    It can also lead an individual to question their abilities.

    “Am I a bad programmer because Brian can build this feature in two hours when it took me five?”

    The pace at which work is produced doesn’t represent the quality of the work. I’d rather have a great piece of work that took five hours, than an okay piece that took two. (Sorry Brian)

    By far the most destructive thing about time tracking is that it shifts the focus away from the work itself. Valuing the amount of hours someone logs above the quality of their work is insane. Billable hours don’t mean a thing if they were spent producing shoddy work.

    So think twice before you start tracking time. It might not give you the results you were hoping for.

  • (Re)discovering Myself

    I hesitated to write this post for a while. I think mainly because I don’t consider myself ‘fixed’. I don’t have a solution to share that will help people in a similar situation to get back on track. I think that’s okay though. The purpose of Geek Mental Help Week is to create a discussion around mental health in the tech community, not necessarily to provide all the answers.

    I had always considered myself a happy and optimistic person. Someone that could see the silver-lining in a bad situation. The type of person that is confident in themselves.

    Over the past twelve months that driven and ambitious person that many of my friends would recognise has slowly faded. My ability to enjoy life and experience happiness has become increasingly suppressed. My curiosity has dulled. It’s like I’ve become detached from the world around me. Left to observe, but not truly experience the joys of life.

    It’s taken me a long time to understand what I’ve been feeling. The past twelve months have been far from settled. A change in job, move to a new town, and the passing of my niece (as well as two grandparents) have all presented new challenges to overcome.

    With so much going on, it’s easy to rationalise feeling a little unsettled. I would convince myself that everything would go back to normal if I could just get through the next challenge. The problem is, there will always be a new challenge on the horizon. That normal I’m referring to is in the past now.

    My experiences over the past twelve months have changed me. I will never again be the person that I was, but that’s good. In order to grow we need to change. We need to experience new things, new challenges. After all, who we are as a person is the sum of our experiences in life.

    I believe that it is my resistance to change that has caused me to lose touch with who I am. This sounds so simple that I feel somewhat embarrassed that it took me so long to figure out.

    However, this realisation alone is not enough to ‘fix me’. It’s not a silver bullet that will cause me to wake up tomorrow feeling as good as I used to. It’s going to take time for me to rediscover who I am. To get my curiosity back. To find a new normal.

    I don’t have a solution to share with you today. For me, I’ve only just identified the problem. But for the first time in months I feel like I’m making progress. Things are getting better.

    I have a tendency to portray a perfect version of myself online. I play it safe and only share things that highlight my strengths. This may satisfy my own personal fears and anxieties, but it does no good for those around me that are tackling similar challenges. It’s easy to feel alienated when everyone else appears perfectly fine. So I’m making it my goal to speak more openly about my struggles. 

    Despite what the internet might have you believe, not everyone is okay. You are not alone.

  • Guidelines for the Human Perception of Speed

    It’s important to remember that measured performance and perceived performance do not always align. The brain is a strange organ that has a habit of distorting the reality around us.

    In his book High Performance Browser Networking, Ilya Grigorik sets out some guidelines for the humans’ perception of speed. Keep these in mind when performance testing your websites.

    • 0”“100ms – Instant
    • 100”“300ms – Small perceptible delay
    • 300”“1000ms – Machine is working
    • 1000+ms – Likely mental context switch
    • 10,000+ms – Task is abandoned

  • On Being ‘Unemployable’

    Until recently I had spent almost my entire working life doing my own thing. Starting companies, consulting for clients, writing tutorials. I had complete control over what I worked on and how I went about my day.

    Enjoying that kind of freedom for five years re-wires your brain. The thought of taking a regular job made me nervous. I had convinced myself that working for yourself for an extended period of time makes you unemployable.

    I gave up my place at university to start my first real business so I had the extra pressure that I didn’t have a degree. On paper, I wouldn’t look too interesting to a recruiter. I felt that I had to make things work with the business otherwise I’d be out of a job with little chance of finding a new one.

    This is a feeling that I hear from other entrepreneurs too. Going your own way gives you a lot of freedom, but with that freedom comes a pressure that’s not always visible to those around you. I think it’s this pressure that leads us to think that if we don’t build the next Facebook then we’ve failed. That our peers will view us as a failure.

    This is ridiculous.

    Just because you’ve had a shot (or a few shots) at starting your own thing doesn’t make you unemployable. You can get a job that gives you just as much freedom and makes you just as happy (if not more so) than you are now. I know because I’ve done just that. 

    Being an entrepreneur doesn’t make you unemployable. In fact, it’s quite the opposite. Having full control over your life teaches you how you want to live. Remember this whilst your looking for a job. It is possible to find a company where you can do great work whilst maintaining the freedoms you enjoy.

  • Changing Pace

    The past five years have been a rollercoaster of amazing highs and crushing lows. Running your own business is immensely rewarding, but at the same time incredibly stressful. 

    Over the past few months I’ve been reviewing a lot of aspects of my life. I’ve been so caught up in the day-to-day tasks of running two companies that I’ve taken my eye of the things that really matter to me most. It’s time for a change of pace.

    I’ve always enjoyed my work. I love working with clients to produce things that help to propel their businesses forward. I feel incredibly lucky to have a skillset that can help to make other people’s dreams come true. There’s an immense amount of responsibility that comes along with that power. A responsibility to always do my best work. To exceed the expectations of those I’m working for. To always do the right thing, no matter how difficult it might be.

    Ever since I left school I’ve always had this belief that in order to change the world you need to be the person at the front. The one leading the way into the unknown. That’s not a belief that I hold anymore.

    You don’t have to be the CEO to change people’s lives. You only need the drive to do great work. To care about the things you make. To care about the people that use them.

    So I’ve made some changes.

    I have closed down my agency Koji Labs and I’m stepping down as CTO of Your Big Pitch.

    I started at an agency called No Divide a few weeks ago and I’m absolutely loving working with the team there. It’s exactly the sort of company I wanted to work for and I feel like I’m finally starting to claw back some work/life balance.

    I am, and always will be, an entreprenuer at heart. It’s just time for me to take a new adventure.

  • Advice to My Teenage Self

    An old friend of mine (@ShelleyBear92) wrote an interesting post on her blog yesterday about some of the things she would tell her teenage self. I thought I’d follow her lead and give it a go too.

    Have Audacious Goals

    Big, far-out, seemingly unachievable goals. Aim so high that those around you think you’re nuts, then go and prove them wrong.

    Your goals will likely change as you grow older. But don’t let that stop you from dreaming.

    Don’t worry too much about formulating a detailed plan of how you’re going to achieved these goals. Things rarely go according to plan.

    Grasp at Opportunities

    Don’t be afraid to go for an interesting opportunity, even if it doesn’t immediately seem like it’s going to help you achieve your goals. You never know where it might take you.

    You cannot connect the dots going forward, only looking back.

    Break Away From the Status Quo

    The current education system leaves little room for anyone that doesn’t wish to follow the status quo. High schools are set up to move you on to university, and universities spit you out into industry. If you’re not brave enough to step off the treadmill you might wake up one day and realise you’re leading a life you had no intention of living.

    Don’t be afraid to break out and go your own way. Parents will protest, teachers will give up on you, and your friends may think you’re slightly crazy. But none of that matters. What matters it what you think. You’re old enough to make decisions for yourself. Have the courage to go your own way.

    Work Hard, Really Hard

    Isn’t it funny how people that work hard also seem to be lucky. It’s not a coincidence. Luck can be manufactured. All you have to do is work really hard.

    That’s all I have to say on this, I’ll let Gary Vaynerchuk finish up:

    Cool Kids Don’t Stay Cool For Long

    Take some comfort in knowing that the cool kids that are bullying you and making jokes right now will be the same people serving you in the grocery store in few years time. Their defalted facial expressions recognition of a decade of poor decisions.

    Let them enjoy their few years of being the big fish in a small pond, few of them can cope when they’re released into the ocean.

    Education Doesn’t End Once You Leave School

    Learning is a life-long pursuit. It doesn’t end when you leave high-school or graduate from university. Keep pursuing the topics that interest you.

    You may even find that some of the subjects you hated in school actually turn out to be topics you’re really passionate about later in life. It’s amazing how your perspectives can change once you’re afforded the freedom to learn in your own way.

    Final Thoughts

    Being a teenager isn’t easy. You’re trying to find your way in the world whilst the whole time being bombarded by people telling you how you should live your life. Listen intently to what they have to say, but then make your own decisions.

    It’s your life, live it on your terms.

  • Dailies

    It’s easy to fall into a routine of doing the same thing day in, day out without being conscious of making progress either personally or professionally.

    I combat this by having a list of tasks that I aim to do every day, my dailies. Some of these tasks I have to do, some are reminders to focus, and others are there to help me form habits. Here’s my list:

    • Check-in on Product People
    • Take a multi-vitamin
    • Track weight and BMI
    • Help someone
    • Be a good friend
    • Be present
    • Meditate for 10 minutes
    • Write in journal

    I first got the idea for dailies from watching a talk Jack Dorsey gave at startup school. Jack stores his list in the Notes app on his iPhone. It doesn’t matter where you put your list, as long as it’s somewhere you’ll see it everyday.

    I use the Reminders app on my iPhone to prompt me to certain tasks throughout the day. This is especially useful for items like Be present, which is more about focussing the mind than accomplishing a tangible task.

    My list has evolved over time, adding and removing items as habits form and I find new ones I want to develop.

    If you ever feel like you’re just treading water in life, then maybe writing a list of dailies will help you to progress as it has me.

  • My Favourite Books on Business

    We live in a world where you can go online and watch a talk from pretty much any prominent individual from the past two decades. That’s pretty amazing, but I still find magic in the written word.

    In this post I wanted to share some of the books I’ve read over the years that have helped me develop in business. I’m not including biographies here, that’s a whole other post.

    In no particular order, here goes.

    Onward

    Onward by Howard Schultz, ceo of Starbucks Coffee Company, is one of the few books I’ve read more than once. It’s about how Starbucks navigated the stormy waters of the economic downturn in 2008 by recognising that their problems could not be blamed on what was happening in the markets. Instead, they were the result of many years of complacency and a focus on increasing shareholder value.

    This is the best book on leadership, focus, and corporate strategy I’ve ever read.

    The Innovator’s Dilemma

    The Innovator’s Dilemma by Clayton Christensen is a modern day classic. The book explores the theory behind sustaining vs disruptive innovation. How small companies can outmanoeuvre their larger competitors, and how large corporations are often unable to achieve true innovation.

    Delivering Happiness

    Delivering Happiness by Tony Hsieh is a great story of how Zappos”“and the legendary Zappos culture”“came to be. This book is a manifesto for how to bring happiness into the lives of your customers and employees. Business is only boring if you let it be.

    Rework

    Rework by Jason Fried & David Heinemeier Hansson talks about an alternative strategy for running a business. The founders of the popular project management tool Basecamp, challenge many of the accepted business norms like working long hours and growing as fast as possible. This refreshing outlook is sure to give comfort to many entrepreneurs who just want to run a small, sustainable business.

    If you’re going to read any of the books on this list, make it this one.

    A Book About Innocent

    I stumbled across A Book About Innocent when I was researching the Innocent brand for a project I was working on. The book explores the story of how Innocent drinks came to exist and what the company does to make it’s employees and customers happy. This is the second best non-BS business book I’ve ever read (second only to Rework).

    Pick up the physical copy of this one if you can. The illustrations really come to life on the beautifully thick paper stock.

  • Choosing the Best Client-Side Storage Technology for Your Project

    With all the different client-side storage options available today, it’s easy to get confused about which one is best suited for your project. In this post I’m going to take you through the most popular client-side storage technologies; highlighting their usage, benefits, and drawbacks.

    Let’s get started.

    Cookies

    Cookies are small text files stored in the user’s browser. Each cookie consists of a simple key/value pair which gets sent to your server with every HTTP request.

    There’s two main types of cookies. Cookies that only exist for the lifetime of the user’s session, and permanent cookies that exist for a set amount time. Once expired these permanent cookies get deleted by the browser.

    It’s also possible to use a special type of secure cookie that is only sent to the server if a secure connection is present. For example, when a website is served over HTTPS.

    // Create a cookie (on the client-side).
document.cookie = "name=Matt West";

    The main advantage to using cookies is that they’re well supported by browsers. Cookies have been around a long time, and therefore it’s unlikely that your application would encounter a browser which doesn’t support cookies. Keep in mind however, that the user can explicitly disable support for cookies in their browser.

    A drawback of using cookies is that you’re limited to storing a small amount of text data (around 4K per cookie). This is something to bear in mind if you’re building an application that handles a lot of client-side storage.

    Another drawback is that cookies are sent along with every request made to the server. This means that the more cookies you have, the longer it will take for a request to complete, as the browser has to send all this extra data to your application.

    Cookies are best used for storing small amounts of data like tracking IDs for analytics software, or authentication tokens to monitor whether a user is logged into your application.

    localStorage and sessionStorage

    The localStorage and sessionStorage APIs are similar to cookies in that they allow you to store simple key/value pairs on the client. However, they conquer many of limitations that developers experience when using cookies.

    As with cookies, you have the ability to control whether the data should be stored permanently, or only for the user’s current session. Any data stored using the localStorage API will remain on the client until deleted, whereas data stored using sessionStorage is cleared out at the end of the user’s session.

    // Add data to localstorage.
localStorage.setItem('name' 'Matt West');

// Retrieve data from localStorage.
var name = localStorage.getItem('name');

    Data stored in localStorage is not sent to the server as part of the request payload. It’s the developer’s responsibility to transfer data to the server through query parameters or POST data. This means that using localStorage rather than cookies can help to reduce request times, and therefore increase the overall performance of your application.

    Using localStorage also gives you access to more storage capacity. The exact amount of storage varies between browsers, but you can generally assume you’ll have access to at least 2.5MB.

    As with cookies, you’re limited to storing text data when using localStorage. Of course you can get clever and start converting objects and arrays to JSON strings and then store that. However, you will better off using IndexedDB if you need to store structured data sets. (more on IndexedDB in a moment)

    The added freedoms given to localStorage and sessionStorage make them a great alternative to using cookies. While some older versions of IE (7 and below) don’t support these APIs, most browsers do.

    If you just want to store simple key/value pairs, localStorage is the best option available right now. It’s great for storing things like names and emails from contact forms. Allowing you to pre-fill those fields if the user views the form again.

    Find out more about localStorage

    IndexedDB

    IndexedDB is the power-house of client-side storage. It allows you to store structured data and then perform queries against those datasets.

    This added functionality comes at a price however. The IndexedDB API is complex and can be daunting to those just starting out.

    Browser support for IndexedDB isn’t quite as good as that for localStorage. Safari only just added support in version 8 (which is currently only available with the Yosemite beta), and Internet Explorer has limited support for the API.

    IndexedDB is the way to go if you’re building an application that needs to store structured data. Just be aware of the steep learning curve when you’re getting started.

    Find out more about IndexedDB 
    View a demo app

    Introducing localForage; The Best of Both Worlds

    Before we end, I want to run through another option you have when working with client-side storage.

    The wonderful folks at Mozilla have developed localForage, a handy little library that aims to take the pain out of client-side storage.

    The localForage API has the simplicity of localStorage but gives you access to all the benefits of a complex API like IndexedDB. Behind-the-scenes, localForage checks to see which storage technologies are supported by the user’s browser, and then chooses the one that offers the best functionality.

    // Storing data.
localForage.setItem('name', 'Matt West');

// Retrieving data.
var name = localForage.getItem('name');

    The API mirrors that of the localStorage API with regards to its methods and properties. The key exception being that you can store complex data types like arrays and objects (hurray!). Of course you’re still bound by the same limitations on storage capacity that are imposed on the underlying storage technology.

    // Storing an array.
localForage.setItem('users', ['Matt West', 'Joe Balochio', 'Fred Smith']);

    Using a library like localForage abstracts away the complexity of doing client-side storage, so you can focus on building a great application.

    Find out more about localForage 
    Download localForage

    Summary

    In this post we’ve looked at some of the different client-side storage technologies that are available to you when building web applications. You should now have a better idea of the benefits and drawbacks of each, and when to use on over another.

    If you’re still unsure about which technology is best suited to your project, post a comment below with some details about what you’re working on. I’ll jump in and help out the best I can.

  • Registering Protocol Handlers to Intercept Special Links

    A cool (and somewhat unknown) browser feature is protocol handlers. These give you the ability to register your web application as a handler for protocols like mailto or webcal. Then whenever a user clicks a link with the specified protocol, they’re sent off to your app to complete some action.

    Of course you can’t just override the user’s current preferences. They first have to tell the browser they want your application to handle certain protocols.

    Once you’ve registered a protocol handler, an icon will appear in the address bar when the user visits your app.

    User permissions dialog for protocol handlers.

    Clicking this icon shows an option to set your application as the default handler for the specified protocol. Once the user clicks allow, you’re all good to go.

    Registering a Protocol Handler for Your Web App

    So how does this all work?

    To register a protocol handler you need to use the navigator.registerProtocolHandler method. This method isn’t supported in all browsers yet so you’ll want to do a quick check to see if it’s available first.

    if ('registerProtocolHandler' in navigator) {
  // Yay! The user has a decent browser.
} else {
  // Seriously, quit using IE already.
}

    The registerProtocolHandler method takes three arguments:

    • protocol – The protocol that you want to handle (for example mailto, tel, or webcal)
    • url – A URL within your application that can handle the specified protocol.
    • title – The title of your application.
    navigator.registerProtocolHandler(protocol, url, title);

    When a user clicks a link with the specified protocol, the contents of the links href attribute gets passed to your application through a URL. You can specify where in the URL you want this data to feature using the %s placeholder.

    For example, the Gmail web app registers a handler for the mailto protocol. Once activated, whenever a user clicks a mailto link they get sent to the compose window. Gmail then uses the email address from the href attribute to pre-fill the To field in the compose window.

    Here’s an example of how you could create the same behaviour:

    navigator.registerProtocolHandler(
  'mailto',
  'https://mail.google.com/mail/?view=cm&to=%s',
  'Gmail'
)

    Limitations and Caveats of Protocol Handlers

    An important caveat to note is that the browser sends the entire contents of the href attribute to your app. This includes the protocol, so you’ll need to clear out that out before doing anything with the data.

    You need to register your protocol handler from the same domain as the one specified in the URL argument.

    You can only send text, as the data gets transferred via a URL.

    The communication between the sender and your application is one-way. This means you can’t pass a message back to the sender to notify them you’ve taken a certain action.

    Creating Your Own Protocols

    Handling mailto links is useful, but you also have the ability to create your own custom protocols too.

    You can define pretty much any name for your protocol you’d like as long as it starts with web+. This helps to differentiate custom protocols from standardized ones.

    Let’s take a look at an example of a custom protocol.

    On your travels around the internets you may have encountered these ‘tweet me!’ callouts designed to make it easier for people to share key points from blog posts. You could use protocol handlers to do something cool here.

    Thanks to Boagworld for the example.

    Say we created a custom protocol, web+tweet, that takes some text data and sends the user off to compose a tweet on twitter.com.

    navigator.registerProtocolHandler(
  'web+tweet',
  'https://twitter.com/intent/tweet?text=%s',
  'Twitter'
)

    Having this custom protocol makes it super easy for a website owner to create special tweet links. I don’t know about you, but I can never remember the twitter share URL without having to look it up.

    <a href="web+tweet:You should definitely tweet about this post">Share the love</a>

    Of course this approach is flawed. For it to work, every twitter user would need to allow the twitter website to handle the web+tweet protocol. This just isn’t realistic.

    Custom protocols have a purpose within some applications, but don’t expect others to adopt your protocol. The web is an open ecosystem with a wide array of recognized standards. Stick to them whenever possible.

    Browser Support for registerProtocolHandler

    Protocol handlers aren’t exactly new. The registerProtocolHandler method has been around since Firefox 3 (circa 2008!). Internet Explorer and Safari are the only two holdouts.

    • IE – Not Supported
    • Firefox – 3+
    • Chrome – 13+
    • Safari – Not Supported
    • Opera – 11.6+

    Summary

    Now you know how to register protocols handlers for your web application. Useful stuff if you ever find yourself building a web-based email client or calendar.

    Be careful with those custom protocols though, there’s times when they can come in handy, but don’t reinvent the wheel. Use standardized protocols whenever possible.