JSON Feed Support

Adding JSON Feed support

Published by

Let’s face it. RSS and ATOM Suck. That’s not to say the format isn’t useful. But XML is a trudge, it’s not fun to work with at all.

Combined with the differing but similar formats. ATOM and RSS is just a bit of a confusing mess.

Enter JSON Feed.

A well throughout specification for RSS that uses a format developers love. Furthermore it’s really simple and FUN to implement.

It took me about an hour to add support to the Jekyll blog. But your time will be even quicker with my file as a handy reference!

---
layout: null
---
{
    "version": "https://jsonfeed.org/version/1",
    "title": "Thoughts On Frontend Development",
    "home_page_url": "https://vincentp.me",
    "feed_url": "https://vincentp.me/feed.json",
    "description" : "Web design including: UI, UX, HTML, CSS, JavaScript and Node",
    "icon" : "https://vincentp.me/images/vincentp-300.jpg",
    "favicon" : "https://vincentp.me/apple-touch-icon-76x76.png",
    "author" : [
        {
            "name" : "Vincent Pickering",
            "url" : "https://twitter.com/vincentlistens",
            "avatar" : "https://vincentp.me/images/vincentp-300.jpg"
        }
    ],
     "items": [
        {
            "id": "https://vincentp.me/articles/2018/06/15/way-pointing",
            "title" : "Way Pointing",
            "content_html": "{% include shapes/waypointing.html %}\n\nConsider building a house.\n\nAt first there is barren land. The foundations are dug, the walls erected and the roof created. Next, the rooms, plumbing and electrics are added. Finally the rooms are filled with things and the garden is created.\n\nThis is a simplified overview, but even in this broad strokes approach at each point in the process there is a visible milestone. Productivity is visible and progress by all who view the building being created can be seen.\n\nDuring this progress all those who work on the project can quickly assess their own work and assess how it fits with those around them. If a tradesman requires more space than was originally planned due to an oversight, others can adapt their work around them to fit correctly. Humans are built to quickly size up tangible things and understand how they fit in to their surroundings.\n\nFor a species that depends heavily on its senses to judge everything. When a task is virtual or imaginary it is hard to conceive a tangible step forward. Virtual things such as software lack a physical geography.\n\nYou can point to how many lines of code have been written, but is that only 1/10th of what needs writing or is it nearly all of it?\n\nDoes that even matter?\n\nHow much is done, and what is a warning sign to a manager that work isn't progressing as fast as predicted?\n\nAre we even building the right thing, what does it look like?\n\nThese types of questions promote stress and frustration in a team which can de-rail a project and slow down production, leading to a drop in quality or mistakes.\n\nTo allow the brain to comprehend progress, break down an idea in to small tasks. Set a fixed amount of time to tackle each one individually. This creates a framework enabling you to focus on details and create a polished solution. When a task is completed the progress made is visible in the task list; providing response and reassurance on progress and retaining enthusiasm.\n\nThis is the approach adopted by many modern team processes such as Sprinting, Agile and Scrum. Regardless of the approach your team decides to adopt, or if you find yourself on a team that does not practice any of these similar processes. Boil each larger task down to its smallest reasonable components and estimate your own timescales against them. Keep a record yourself. If a manager or other team member needs to understand your progress, or the tasks you believe you need to achieve you can quickly and easily contextualise where you are, what you have done and where you are heading.\n\nCommunicating these three concepts regularly with your team will orientate others as to where they need to be and what they need to achieve.\n\nNow consider you are a manger or leading a team. How do you co-ordinate your team and ensure they all perform their best and work as one cohesive unit, moving towards a united goal?\n\nThe military utilise way-pointing in an effort to meet their objectives. The commander will express a desire such as “we need to occupy that structure”.\nEach team leader receives this brief. They then co-ordinate between squad leaders where the teams need to be in order to take the structure. Each leader briefs their team on what their individual objective is. All teams are given control over their individual task. Team members are trusted that they can do their job and self-organise. But each task is broken down to a smaller tasks making it comprehensible (not abstract) and achievable. If anyone is unable to achieve their objective, it is immediately clear to everyone else where the problem has occurred and needs addressing.\n\nThis process of breaking down tasks and trusting team members to each do the job they specialise in. Promotes job satisfaction and trust in a team but keeps the larger team engine working. Not removing team members ability to think for themselves and allowing them to react to minor situations as they are encountered empowers team members and brings a team together.\n",
            "url": "https://vincentp.me/articles/2018/06/15/way-pointing/",
            "date_published" : "2018-06-15 07:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/articles/2018/06/14/introducing-change",
            "title" : "Introducing Change",
            "content_html": "{% include shapes/brain.html %}\n\nHumans on the whole, are uncomfortable with change and find the process unnerving. It is hard wired in to our being to keep us safe. What is familiar can be controlled, managed or manipulated, what we do not understand could yield danger.\n\nPeople create cyclical behaviours, set patterns that make their brain feel at ease and in control of their life. The weekly meal plan with the same 5 weekday meals re-occurring is a prime example of this. If you were unable to purchase the regular cut of beef for steak night, instead of abandoning the idea of steak entirely your brain will seek to change the meal as little as possible and look for another cut of meat that is as close to the original desire as possible. If you were unable to obtain beef at all breaking the usual cycle, stress begins and the brain spirals, latching on to anything else that may be familiar. A common trick the brain employs is to swap the days the meals occur and return for steak tomorrow instead, a subtle change to the week but overall not too jarring. Maintaining what is expected with the smallest of changes.\n\nAs the brain moves away from the familiar it gets more and more devious in trying to return to what is familiar. If the new change is too far removed from the usual pattern of behaviours, it will find a way back to its default pattern. It is only a matter of time.\n\nWhen introducing major change to a brain it will go through the following pattern:\n\n1.  Rejection - This is not familiar, I am unsure or do not like this at all.\n2.  Ambivalence - I don't care about this, or stay away from it.\n3.  Familiarity - This is how it is, I expect it to be this way.\n4.  Advocacy - This is how its always been. I feel comfortable.\n\nIt can take anywhere from 18 days to 254 days[^1] to reach step 3 and accept the change in to our lives.\n\nWebsites and Software are not exempt from this type of behaviour. Introducing change in to our interfaces can cause large amounts of stress to our users and possibly drive them away all together. The fabled ‘hot new look’ or ‘complete redesign’ are often rejected outright due to the way most people’s brains work.\n\nIt is not advisable to redesign an entire system or website in one release. Iterate small areas slowly over time and minimise the risk users will reject the change promoting a feeling of excitement and attention to detail as smaller improvements are introduced. If very small changes are made often, over time the brain will learn that visiting your website or using your software will mean a change has already occurred, in time they may even expect it to be a common trait. Meter out larger changes to a system or changes in workflows and primary actions, rather than introducing them all at once.\n\nFor high volume websites and systems, create a planned roll-out of new improvements to the system, stage smaller releases in between farther reaching changes. Where large change is going to occur, produce blog posts and news articles prior to the event informing users that the change is coming. Users may get upset at this point, be prepared to field questions as to why the change is occurring. Reasons for change help the rational part of the brain latch on to something, increasing familiarity. Be sympathetic, users needs should not be undone for aesthetic reasons or at the expense of removing functionality.\n\nWhen considering change, pave the cow paths. Users shouldn't have to learn 2 ways to do the same thing and they are more likely to embrace a change if it is already a mechanism they are familiar with.\n\nOnce a change has been implemented, it should be tested against the existing solution and the data measured (with agreed business criteria) to ensure it is performing as intended.\n\n[^1]:Lally, P., van Jaarsveld, C. H. M., Potts, H. W. W. and Wardle, J. (2010), How are habits formed: Modelling habit formation in the real world. Eur. J. Soc. Psychol., 40: 998–1009. doi:10.1002/ejsp.674\n",
            "url": "https://vincentp.me/articles/2018/06/14/introducing-change/",
            "date_published" : "2018-06-14 07:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/articles/2018/06/13/complexity",
            "title" : "Complexity",
            "content_html": "{% include shapes/complexity.html %}\n\nThe perfect house guest, stays for exactly the right amount of time and only asks for what the host can offer.\n\nWhile visiting a sandwich store I witnessed the following incident:\n\nThe shop assistant spoke smiling and welcoming\n\n> ‘What bread would you like sir?’\n\n> ‘I'll take the Italian please’.\n\n> ‘Sorry, we have run out of Italian’ the assistant replied.\n\nHis face visibly perturbed,\n\n> ‘OK. Herb and cheese then’.\n\nHer eyes darting around the room as if she was tracking a drunk fly desperately looking for an exit. She looked anywhere but the shoppers face.\n\n> ’I don't have that either I am afraid’. Her voice now strained by the exchange.\n\nNow the shopper was irate, he snapped back.\n\n> ‘WELL, WHAT DO YOU HAVE?’\n\nThe friendly outgoing demeanour of moments ago now a distant memory, the assistant through gritted teeth.\n\n> ‘I only have plain white or brown’.\n\nAnger swelling in the shoppers face, he decided it was time to assert his authority. Drenched in sarcasm he replied.\n\n> ’Out of the 8 types of bread you usually have...You only have 2?’\n\nThe assistant willing herself anywhere else in the world but this moment quietly said.\n\n> ‘Yes… Sorry’.\n\nFirmly in control of the situation, the shopper had her on the ropes. Sarcasm was working in his favour, he persisted.\n\n> ‘Why didn't you give me those options in the first place?’.\n\nBlushing, shrinking within herself by the second. She could barely see over the counter, the shop assistant quietly whispered.\n\n> ‘Sorry, I am supposed to ask you what bread you would like, it's the rules’.\n\nThe shopper delivered another sucker punch.\n\n> ’Never mind I'll go somewhere else...’\n\nThen unexpected the shopper delivered the knockout blow\n\n> ‘…And I would suggest EVERYONE else does too’.\n\nHe yelled to the onlookers as he walked out the store.\n\nThe line got significantly smaller as many others followed.\n\nOn considering user experience, be mindful that it is a dialogue between the system and the user, in the conversation above, had the shop assistant apologised upfront that they only had 2 types of bread available the customer could have made a quick decision early on in the process, and although their preferred option was not available the dissatisfaction they would feel is hugely diminished. Better still, put up a sign and let the shopper decide if they want to even join the line at all.\n\nIn the forced process of teasing salient information from the shop assistant the customer reaches a point of frustration where they are unwilling to accept anything less than what they originally wanted. Faced with disappointment at each level of disclosure (very little is going to placate them and at this point they will leave the situation frustrated) with the possibility of not returning again.\n\nIt is the job of the designer to anticipate the needs of the user upfront and provide shortcuts around common scenarios. Provide an environment for the user to feel that the solution they are engaged with is working for them and they are profiting from the transaction more than they are inputting.\n\nComplexity is rarely a friend to the designer and it should be minimised or expunged at almost every opportunity. If the designer is aware of a deficiency in the product, provide a way to circumnavigate the problem, minimise its exposure, or remove the feature entirely. If you offer the user only a partial, or poorly implemented solution of what they desired they will feel more cheated than had you never offered it at all.\n\nThere are rare occurrences where complexity should be designed in to a user interface or system; topmost is when safety is to be considered. For example, it should not be easy to get in to a medicine bottle because we do not wish children to accidentally take potentially harmful substances. Consider what would happen should the system design fail or be abused and assess the risk. Never assume users will not abuse the system.\n\nAnything that can be done or is possible will occur, it is the designers responsibility to ensure they have considered the implications fully and prepared for the consequences.\n",
            "url": "https://vincentp.me/articles/2018/06/13/complexity/",
            "date_published" : "2018-06-13 07:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/articles/2018/06/12/sanity-checking",
            "title" : "Sanity Checking",
            "content_html": "{% include shapes/sanity.html %}\n\nIf everything was created perfect the first time, the world would already be perfect.\n\nAccepting an answer at face value, can be detrimental to our research. Consider adding sanity checks to your tests to ensure data validity and weed out suspect responses.\n\nThe medical industry has been conducting sanity checking on results in questionnaires and academic surveys for a number of years.\n\nThe question:\n\n> “Have you ever used Derbisol?”\n\nWould appear along with questions about alcohol, cocaine, and marijuana usage on youth-risk surveys for students. Derbisol was a fictitious drug invented to highlight a suspect paper.\n\nIndividuals who would admit to taking Derbisol could have their papers marked questionable and the data disregarded from the study; presumed to be embellishing or lying with their answers. Falsified data could then be removed from the study giving a more accurate frame of reference.\n\nUpon reviewing data, filter results based on pre-agreed business goals for the project. If a website sold goods to the UK exclusively, data based on traffic originating in India may be disregarded in this instance as it is not a primary concern. That does not mean the data isn't useful for other business means. Only that for this given task, the data could skew resources unnecessarily.\n\nAfter conducting review sessions with users, sanity check their feedback.\n\nAsk questions whose answers corroborate or contradict previous data given. Try not to accept everything at face value. Cross-reference responses with answers to previous questions.\n\nLook for patterns in the data to suggest corroborative evidence. If possible plot your results on to a graph and identify common patterns or behaviours. Plotting data on a graph can also help you to easily identify subjects with suspect or inaccurate responses, whose data could be omitted from the study.\n",
            "url": "https://vincentp.me/articles/2018/06/12/sanity-checking/",
            "date_published" : "2018-06-12 07:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/articles/2018/06/11/issue-identification",
            "title" : "Issue Identification",
            "content_html": "{% include shapes/magnify.html %}\n\nKnowledge learnt on a subject does not bestow an ability to immediately solve a given problem on that topic. Previous learning provides a base from which a new solution can be formed, it does not provide a complete picture.\n\nCreatives may attempt to solve a problem by comparing similar solutions and regurgitating them with a tweak or superficial twist. This is not solving a problem correctly, it is more likened to hammering a jigsaw piece that nearly fits in to a hole it was not meant to go.\n\nExamine the problem as it has been presented to you. Discus with the stakeholder what they wish to see as a satisfactory outcome. During this discussion question why the outcome is desired. What benefit(s) does the outcome provide the stakeholder and what is motivating them to desire this result.\n\nTake a journey with the stakeholder in to understanding why they desire this outcome and their motivations will educate you about their business needs.\n\nFully equipped with a more complete picture of the task assigned. Assess if the problem once solved fully addresses the stakeholders needs or you if you must work with them to reframe the problem based on any new knowledge uncovered.\n\nAsking questions not framed within the context defined, could yield unreliable data which may skew a projects trajectory, or lead to incorrect conclusions.\n\nBusinesses seldom keep individuals employed that do not spend their money wisely and without a clear return on their investment.\n\nDefining success criteria in this way enables the project to focus on what really needs addressing for the stakeholder and ensures time and effort spent by all parties is beneficial.\n\nFinally it provides a clear path for a stakeholder to trace their ‘Risk vs. Return on Investment’. They help define the problem with you and can see the time and effort dedicating to applying the solution.\n",
            "url": "https://vincentp.me/articles/2018/06/11/issue-identification/",
            "date_published" : "2018-06-11 07:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/articles/2018/06/08/acoustic-kitty",
            "title" : "Acoustic kitty",
            "content_html": "{% include shapes/kitty.html %}\n\nFailure can happen at many points in a scenario, care must be taken to constantly re-evaluate a solution checking for weakness through testing.\n\nOn occasion it is not the outcome we must evaluate, it is our original input.\n\nDuring the cold war of the 1960's planting listening devices and bugging rooms was commonplace. The CIA would listen in on the Soviet embassies in the USA. The soviets aware that their buildings were bugged would exchange Intel by walking outside and have their conversations in the street. Masked by the hustle and bustle of the city, they only needed to step outside for a cigarette, exchange the information masked in polite conversation and discreetly walk away, bug free and the perfect cover.\n\nThe CIA aware that the KGB were exchanging information out in the open away from they're listening devices turned to the Directorate of Science & Technology who devised a cunning plan by enlisting the most unlikely spy of all, a cat.\n\nThe theory was reasonably sound, who would suspect an unassuming cat walking past two agents talking was actually listening in on their conversation?\n\nThe CIA believed they had the ideal listening tool, investing $25 million in creating the perfect \"Acoustic Kitty\" (That was actually the cats name).\n\nIn the 1960's before PETA existed or the RSPCA would have had any power to intervene, the CIA cut open a cat and implanted a battery and a microphone alongside its organs, finally they inserted an antenna into its tail. This equipment would allow the cat to innocuously record and transmit from it's surroundings while conversations took place near-by. Cats are not known as obedient animals, for good reason, directing a cat to do anything is nearly impossible. Cats pay little attention to their owners at all and certainly are not going to follow instructions. The CIA devised a way to crudely make the cat move in the desired direction using small electric impulses directed at the cats legs. Through this manner they could cajole the cat in to the path they wanted guiding it via remote control.\n\nIn 1966 the CIA was ready. The first Acoustic Kitty mission was to eavesdrop on two men in a park outside the Soviet compound situated on Wisconsin Avenue in Washington, DC. The CIA agents parked on the adjacent road and discreetly released the cat, guiding it to their intended target. The accompanying agents looked on waiting with anticipation to see how effective all that research and time creating the perfect eavesdropping device would be.\n\nThe cat walked out in to the road and was hit by a cab[^1] .\n\nIt doesn't matter how well an idea is planned or how much money is spent, a bad idea will always fail in the end. Test ideas to destruction, get feedback early and embrace criticism.\n\nAvoid being blind-sided by events or circumstances not considered in the context of what you are setting out to achieve. Be mindful that we cannot control environmental situations only the factors acting within. Plan any solution to embrace the restrictions of the landscape they reside within and not to fight them.\n\n[^1]:There is some debate over whether the cat was really hit by a cab or not. The former Director CIA's Office of Technical Service, Robert Wallace made a statement that the cat could not be trained successfully to behave as needed. He claims the equipment was removed, the cat re-sewn, and the rest is an urban myth.\n",
            "url": "https://vincentp.me/articles/2018/06/08/acoustic-kitty/",
            "date_published" : "2018-06-08 07:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/articles/2018/06/05/reflection",
            "title" : "Reflection",
            "content_html": "{% include shapes/split-circle.html %}\n\n<blockquote>\n    <p>I haven't met a designer alive that wouldn't revise their design thinking or approach if given an opportunity to repeat a project from scratch.</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nTo solve problems through design, shed the notion that failure is negative and understand that there is no perfect solution.\n\nDesign is a constant process to revise, rethink, hone or create the most viable solution we can comprehend; given the knowledge, tools and resources available at that moment in time.\n\nFailure is a process not a condition, when we fail in achieving a task we rule out one more answer in a vast array of possibility, narrowing our view to a workable solution. In this light, failure gives valuable insight or knowledge in to how a task is constructed.\n\nInsight and data collected can point the way or help us to understand how variables act upon a problem to revise our viewpoint.\n\nLearn to catalogue and observe the conditions that produced a misjudged approach. With this mindset your design process will always move forward, never stagnate and remain focused on the users needs.\n\nTo excel in your work, learn to embrace the cyclical pattern of ‘try and fail’ relieving ourselves of presumptions such as:\n\n- A perfect solution has been executed.\n- The job is finished.\n- The answer is correct first time.\n- The solution is correct based on a previous projects knowledge.\n\nTwo projects, with the same objectives and even in the same field, could have entirely different circumstances acting upon them that require a different approach or thought process. Use knowledge you have accumulated over time to inform a place in space that anchors your work, gives direction, and moves forward. Be mindful throughout to re-evaluate and test as you go.\n\nSet time aside with your team to reflect on past efforts. While it is important to identify problem areas or processes, that may have lead to misadventures in a previous effort, don't forget to think bigger, to illustrate:\n\n- Was the projects trajectory correct?\n- Did it utilise the right technologies?\n- Was research lacking in any area before development began?\n- Are there repeating patterns or issues emerging when compared with other projects?\n- Could the team skill-set have been better tailored to the tasks required?\n- Were there any personality conflicts during the project that need to be remedied?\n\nReflection is an important part in getting better as a team and individual. Without constant re-assessment of work against yourself and others you are unable to measure progress, improvements, skill and quality of work delivered and ongoing.\n",
            "url": "https://vincentp.me/articles/2018/06/05/reflection/",
            "date_published" : "2018-06-05 07:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/articles/2018/05/31/accidental-preconception",
            "title" : "Accidental Pre-Conception",
            "content_html": "{% include shapes/polygon.html %}\n\n<blockquote>\n    <p>I saw someone else do it; Is not a valid reason.</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nA partner in crime to [silent assumption]({{site.url}}/blog/silent-assumption) is ‘Accidental pre-conception’.\n\nAssumption can prove harmful to a project and nudge the direction towards a detrimental place.\n\nAccidental pre-conceptions are the Ninja of the self sabotage family. Introduced unknowingly on a wireframe. A rogue button placed without consideration to how it will perform or the effect it may have on the state of other page(s) and items. Stock icons and imagery used as a placeholder, influencing the art direction and colour palette of the application when no prior decisions have been made.\n\nAccidental pre-conceptions require a whole team to be vigilant and to trust each other. Questioning team members work could be taken as an assault on the members ability. Work hard to create an atmosphere in the team where everyone is working to achieve a shared goal. Changing or editing decisions should be a process of the design cycle and achieving that goal.\n\nFrame questions to others in a way as to not assign blame.\n\n> ”I don't understand what this button does, can someone explain to me please?\"\n\nImply that you are the one who is ‘behind’ everyone else and need to catch up. When others cannot sufficiently explain to you what the purpose of the query is; giving them space to own the problem in a safe way with room to fix it benefits everyone on the team.\n\nCreate time in the day to allow others to explain what they did and why. Not only can you learn from them but if they make a mistake, the act of talking aloud will alert them to this (as the impact of a decision is made real) and they can rectify it avoiding embarrassment.\n\nEncourage designers to share small updates (weekly is best) with teams. Create a feedback loop between the people implementing the design and those crafting the user experience. If the designer hits a problem the weekly sessions work great to fix the problem together, this is in essence, a version of [Jikoda](http://www.toyota-global.com/company/vision_philosophy/toyota_production_system/jidoka.html){:rel=\"external\"}. Many minds on a problem all at once may offer a solution far quicker than a lone individual trying to solve the problem on their own.\n\nTeamwork and vigilance are key to staying on top of accidental pre-conceptions and keeping the work free of assumption.\n",
            "url": "https://vincentp.me/articles/2018/05/31/accidental-preconception/",
            "date_published" : "2018-05-31 07:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/articles/2018/05/28/silent-assumption",
            "title" : "Silent Assumptions",
            "content_html": "{% include shapes/square-circle.html %}\n\n<blockquote>\n    <p>Critical thinking requires you to be critical in all things, not just what is convenient</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nLife is full of silent assumptions. Circumstances that are unknowingly or unwittingly accepted without question, in part due to human nature or ritual.\n\nFor example\n\n - Expense is not related to quality.\n - There is no pressure to follow trends.\n - Convention does not always dictate the pattern to replicate.\n\nTrain your mind to question everything it encounters. Seek answers to questions you do not have. Then act upon them. Previous knowledge informs future problems and tasks but it rarely provides the absolute answer in every circumstance or context. Investigate the problem specific to your project and draw from what you know as a resource but not the answer.\n\nIdentify user needs first. Understand how your business can fulfil those needs. Use rapid prototyping to test ideas with users, get feedback quickly adapting your approach to suit. Look for trends and patterns in your data or where comparable systems are falling short to deliver needs you have identified. Use the data you have collected to inform what you should build that is important to your users. Don’t assume because a competitor or similar product does something, that it applies to your use case. Act on data or business cases not whims or pre-conceived conventions.\n\nBe cognisant; responses to questions from users may have an expiry date. Answers received are dependant upon context and current knowledge possessed by that user. As user proficiency increases and their familiarity with your system is mastered, previous answers may in fact cause frustration with exactly the same users who requested them.\n\nPeriodically query prior \"facts\". Systems and their user-bases are fluid, it follows any data you collect is limited in relevance. A system and it's users are a delicate ecosystem. Every change you introduce can impact it in ways that may not be readily apparent.\n\n - Do you have a high user turnover rate, requiring a low complexity, low friction sign up process?\n - Are they long time users, wanting advanced features, complex patterns?\n - Is it a mix?\n - Something else?\n - Do you know what the typical life-cycle of your users are?\n\nMaintain healthy dialogues with existing users. Symbiotic in nature a system lives only because it's users need and want to use it. Incentivise users to provide feedback periodically and demonstrate progress.\n\n## Midrash\n\nHumans learn through stories. Stories teach us morals, stories teach us lessons and stories show us how to grow. Gossip is the clearest example of how we are all story tellers. A small piece of information told to another can change dramatically from one person to the next. Details are forgotten, embellished, omitted or added. The story tellers own views are woven in to the story as it is told. Parts deemed important are emphasised, other areas downplayed or skimmed.\n\nBias woven in to stories can be unconscious and unknowing. Complicated further by the participant(s) in the conversation. Should those conversing be close friends, details or knowledge can be assumed, views may be echoed or agreed. If participants are less familiar stories may be softened in their language, details or nature to appeal to a wider audience, and in this act, important details may be lost or new information added.\n\nStories are not only relayed to other individuals humans explain and rationalise the world around them through stories. Creating tiny stories to fill in gaps between known events or spaces in time.\n\nIn Judaism, scholars speculate via stories and information around the texts in the Torah. They debate what could have happened outside the fringes of the written text. Sentences or passages are used for inspiration and entire stories are written and shared with other scholars. This is probably the earliest example of ‘fan fiction’ and is prolific enough it has a name ‘Midrash’.\n\nTeam members create their own Midrash. Stories relayed to each other in an echo chamber to fill in the gaps between known knowns and unknowns. Care must be taken when statements are made, or assumptions taken. Do the research where money and time permit to avoid falling in to the trap of explaining away gaps in user behaviour based on personal preference without data to back up the claim.\n\nIf you find yourself or a team member rationalising a problem in a system without the data to act upon, you are creating your own stories to the events or motives taking place. Instead; use stories as a basis to test hypothesis and discover truer data than you had envisaged.\n",
            "url": "https://vincentp.me/articles/2018/05/28/silent-assumption/",
            "date_published" : "2018-05-28 08:20:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/precision",
            "title" : "Precision",
            "content_html": "{% include shapes/dot.html %}\n\n<blockquote>\n    <p>All ideas should have an elevator pitch. If you can't boil it down; the idea needs more work.</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nThe framing of an idea is critical in achieving a favourable response from others. Present the idea in the wrong context or to the wrong audience and it may well kill it outright.\n\nConsider the intended audience, write down bullet points on what benefits the solution brings to that audience. Use the points to write a brief pitch as a “high level” overview on what your efforts offer.\n\nThink in terms of:\n\n- Business benefits\n- Workforce benefits\n- Expenditure savings\n- Time efficiencies\n- User experience gains\n- Market perception\n- Unique selling points (USP)\n- Long-term efficiencies (make other work easier, later).\n- Savings to the business\n- Reducing complexity\n\nTake the pitch and distil it down further in to around 6 words.\n\nThis is your sound-bite and the starting point in any conversation. When talking to a person about the idea; starting with the sound-bite will give you a good steer on the audience you are pitching to. If they understand completely they are likely to be interested in hearing more, in which case you can proceed with the longer pitch. A negative reaction allows you to move on to another proposal or area of conversation and minimise the impact of a less than favourable reaction.\n\nPrepare a more detailed description, no more than a few paragraphs.\n\nThe act of writing a more concise description reinforcing the elevator pitch will focus your mind on the essential points and during delivery prevent you meandering off-topic without anything pre-prepared. A few paragraphs are all you need to plant a seed in a receptive individuals brain. Allow the idea to sit with them for a day before following up on anything. In that time they will have become more acclimatised to the proposal making discussion easier.\n\nProgressive disclosure of an idea in this manner helps to prepare the receiver in the conversation for the ideas that will come, involving them in a shared dialogue, especially if the proposal is unconventional. This in turn enables the designer who has nurtured the idea for some time to feel less discouraged if it is not embraced or realise they have not rationalised it correctly.\n\nReduce time spent describing ideas or content the other party is not embracing and more time on those ideas they are more receptive towards.\n\n\n",
            "url": "https://vincentp.me/blog/precision",
            "date_published" : "2018-05-22 08:25:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/dreamcatcher",
            "title" : "Dreamcatcher",
            "content_html": "{% include shapes/triangle.html %}\n\n<blockquote>\n    <p>The age of an idea does not relate to its value.</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nIdeas captured and caught in a moment are hard not to share with a colleague or friend; especially when a new possibility presents itself.\n\nTo create fully formed ideas necessitates keeping thoughts close to you and not immediately sharing them with others until the whole form is complete.\n\nWhen an idea is vocalised, the sub-conscious mind perceives it made real, despite the conscious mind knowing the difference. Once the sub-subconscious mind perceives the idea to be real, any weakness in said idea will immediately erode confidence in it. In-turn as confidence is lost it removes the impetus to develop the idea further and the idea fades in to obscurity.\n\nHold ideas close like an expectant mother until they are ready to enter the world. Ideas are the responsibility of the designer until they are made real and placed in the hands of others.\n\nI have accumulated knowledge over the years through observation, meditation on ideas and my own interpretations of knowledge taught to me.\n\nUpon setting out in my career as a web designer in 1999 I kept a notebook, affectionately referred to as my “Dreamcatcher”. Apart from the obligatory sketchbook designers keep close, my Dreamcatcher captured ideas as they came to me. The nature of these ideas and the form they took wasn't important, often they had no application to my current situation or context, but I understood that someday they may bear fruit. I recorded anything that made sense or had some value, periodically I would review what was written.\n\nReturning to ideas and viewing them with “fresh eyes” is a liberating experience. Something hastily scribbled in the moment and filed away is easily forgotten. Returning to those sparks after a period of time removes the pride attached to the idea when written. Ideas that still retain merit when reviewed were transferred to an ideas journal.\n\nIn setting out on personal projects or deciding upon my next step in life my idea journal(s) are the first step. I would skim through and look for ideas that caught my attention, had some relationship with my task given or could be cross-pollinated in an interesting manner. It is important to understand at this point I am not advocating an entire solution to a project or even a partial solution. Problems should be broken down and design processes followed. An ideas journal is an aid to allow you to change your perspective on a problem, amend existing trajectories to solutions and a starting point for personal projects.\n\n\n\n",
            "url": "https://vincentp.me/blog/dreamcatcher",
            "date_published" : "2018-05-21 09:30:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/puzzle-solving",
            "title" : "Solving Puzzles",
            "content_html": "{% include shapes/square-circle.html %}\n\n<blockquote>\n    <p>Inspiration is a muscle like any other, you must learn how to flex it.</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nInspiration can seem magical and intangible. It isn't.\n\nInspiration is arriving at a solution to a problem or taking an educated guess that later is validated as being incredibly accurate in your solution. In turn others deem the solution “Inspired” instead of “solved”.\n\nThere are 3 types of problem.\n\n### 1. Jigsaw\n\nThe problem has all the pieces of the solution available and you need to work out how they fit together.\n\n### 2. Obscured\n\nThe problem does not possess all the pieces. Some pieces are present, some are not. Requiring additional effort to understand what is missing and how they fit together.\n\n### 3. Elusive\n\nThe problem does not present any pieces to its solution. Requiring understanding in the shape and size of the solution along with the number of puzzle pieces and their method of fitting together.\n\nGiven this knowledge we can comprehend the possible ways solving the problem may be obstructed:\n\n- Our view in some way may be obscured from seeing all the pieces in their entirety and the solution as a whole.\n- The number of pieces available are unknown.\n- The size of the pieces are not known.\n- The size and reach of the problem is unclear.\n- The context of the problem is not correctly framed.\n- There is no data on what solutions are available.\n\nIt is unlikely you would win at a game you do not understand the rules for, but it is possible by accident or instinct to win. This could be referred to as “inspired” but often is called a “fluke” or “beginners luck”.\n\nPerspective obscures the truth here.\n\nInspiration in it's truest form is piecing together pieces of a puzzle others did not realise existed or could not see the path to a solution. It comes by working the problem in its entirety and exercising that knowledge to it's fullest.\n\nIf an individual is labelled inspiring, they are providing solutions to a problem:\n\n- In ways other individuals have not yet considered.\n- That other individuals had not realise existed.\n- Discovering puzzle pieces that others did not see.\n- Solving one problem that provides missing pieces to another problem.\n\nA puzzle contains:\n\n1.  Context.\n2.  An objective.\n3.  Information that is missing or inaccurate.\n\nLearn to break down a puzzle at the beginning in to what you do have and what you do not. By virtue of what is required to achieve your “success criteria” you can understand the shape and size of the problem to the best of your abilities. Build out from that starting point.\n\nRemember every failed solution is not a waste of time, the process of elimination provides vital clues on the path to the solution you require.\n\n",
            "url": "https://vincentp.me/blog/puzzle-solving",
            "date_published" : "2018-05-17 15:10:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/context",
            "title" : "Context",
            "content_html": "<blockquote class=\"twitter-tweet\" data-lang=\"en\"><p lang=\"en\" dir=\"ltr\"><a href=\"https://t.co/IsSXUUaj2t\">https://t.co/IsSXUUaj2t</a> versus <a href=\"https://t.co/dZ21dSbcEc\">https://t.co/dZ21dSbcEc</a> is kind of depressing. Both “sides” have valid concerns but neither is listening.</p>&mdash; Zach Leatherman (@zachleat) <a href=\"https://twitter.com/zachleat/status/994027250696818689?ref_src=twsrc%5Etfw\">May 9, 2018</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\nI share Zach's concerns.\n\n‪Be cautious over dogmatic “one way” approaches. Context is key. ‬\n\n‪Approach the solution based on the teams skill-set and their desired objectives within the context of  time and money.‬\n\n‪HTML’s primary purpose is to add context around content. That content is then styled using CSS. Due to the nature that we all think in different ways. We need to share content in ever differing approaches. Some areas may be standardised but even subtle differences can change context entirely. This uncertainty in delivery leads to the fact that CSS must adapt in many ways to accommodate content in a design that can be entirely unique. Now layer interaction on top and it can alter the context of the content further.‬\n\n‪In a scenario where a team must deliver unique content in an innovative way (because marketing) with fixed time and money constraints, there will never be “one way”. ‬\n\n‪Best practice approaches only become best practice when X and Y and Z all align. Which is not always the case.‬\n\n‪We need to move the conversation away from‬ ‪“which is better”.\n\nCode has a limited shelf life.\n\nInstead think about the following when starting out:‬\n\n- ‪Is it easy to maintain by our team?‬\n- ‪How easily can we hire new team members with the required skill-set?‬\n- ‪Can you add new features simply?‬\n- ‪What are the code base pain points. Can you live with them?‬\n- ‪How quickly can a junior learn their way around the system and is this an acceptable time frame to you?‬\n- ‪Are any of the primary dependencies likely to stop being supported or go out of business anytime soon?‬\n\n‪Remember tools are exactly that. Tools. Use the right tool for the right job at the right time.‬\n",
            "url": "https://vincentp.me/blog/context",
            "date_published" : "2018-05-11 09:10:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/google-duplex",
            "title" : "Google Duplex",
            "content_html": "On [the Google blog](https://ai.googleblog.com/2018/05/duplex-ai-system-for-natural-conversation.html) explaining how Google Duplex works, this line jumps out at me.\n\n<blockquote>\n    <p>... To obtain its high precision, we trained Duplex’s RNN on a corpus of anonymized phone conversation data ...</p>\n    <footer>\n       <cite><a href=\"https://ai.googleblog.com/2018/05/duplex-ai-system-for-natural-conversation.html)\">Google Blog</a></cite>\n    </footer>\n</blockquote>\n\nA number of concerns arise from this statement:\n\n- How did Google acquire phone data?\n- Anonymised or not, the data must still be real conversations, with real people talking to each other or it would be useless to them.\n- In order to continue training the code to pretend to be human in other circumstances Google will need to acquire ever more phone conversation data. This feels quite a contentious issue, especially around consent.\n\nPersonally, I would always want to know when I am talking to a machine and when it is a human.\n",
            "url": "https://vincentp.me/blog/google-duplex",
            "date_published" : "2018-05-09 18:40:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/site-update",
            "title" : "Site Updates",
            "content_html": "You might have noticed a few changes on the website recently. As part of my move towards supporting the [Indie Web](https://indieweb.org/){:rel=\"external\"} I have made it easier to write long and short form blog posts, categorised separately.\n\nI've also tried to enhance the reading experience on mobile, by reducing the header. This feels much cleaner and easier to dive in to.\n\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout){:rel=\"external\"}  is now adopted throughout the site, which has cut the code down considerably.\n\nJavascript has been completely removed from the site. I used to still have code for my [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API){:rel=\"external\"} running, having previously removed the tracking scripts and other JS code. It was fun to write a service worker, but I don't think it fits the use case for a blog. Content changes regularly requiring a highly complex system to flush the cache and ensure the user it viewing the latest version of the website. Given how much JavaScript it required to download in order to make this happen, it felt unnecessarily punishing for users wanting to read a quick article on mobile and downloading a lot of JavaScript they would never use again.\n\nService Workers are a great technology but I don't think (at this time) it makes sense to implement one in this context.\n\nFinally, I've stopped using Feedburner for my feeds. You may need to resubscribe to the RSS links (at the bottom of the page) using your chosen type XML/JSON.\n\nMoving forward this site will be the sole owner of the content on it, and syndicated to other platforms, but more on that in a future update :-)\n",
            "url": "https://vincentp.me/blog/site-update",
            "date_published" : "2018-05-01 14:20:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/no-js-carousel",
            "title" : "Carousel No JS",
            "content_html": "More \"No JS Widgets\", I also put together a carousel without JavaScript.\n\n<p data-height=\"300\" data-theme-id=\"19182\" data-slug-hash=\"ELxwjw\" data-default-tab=\"css,result\" data-user=\"vipickering\" data-embed-version=\"2\" data-pen-title=\"Carousel - NoJS\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/vipickering/pen/ELxwjw/\">Carousel - NoJS</a> by Vincent Pickering (<a href=\"https://codepen.io/vipickering\">@vipickering</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n<script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n\nIf this interests you, I am also collecting the \"No JS  Widgets\" in a Codepen collection [here](https://codepen.io/collection/XqzmMm/){:rel=\"external\"}.\n",
            "url": "https://vincentp.me/blog/no-js-carousel",
            "date_published" : "2018-04-20 13:01:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/no-js-tabs",
            "title" : "Tabs No JS",
            "content_html": "Continuing on my \"No JS Widgets\" path, I also put together a tabbing system without JavaScript.\n\n<p data-height=\"300\" data-theme-id=\"19182\" data-slug-hash=\"PeozMQ\" data-default-tab=\"html,result\" data-user=\"vipickering\" data-embed-version=\"2\" data-pen-title=\"Tabs - NoJS\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/vipickering/pen/PeozMQ/\">Tabs - NoJS</a> by Vincent Pickering (<a href=\"https://codepen.io/vipickering\">@vipickering</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n<script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n\nIf this interests you, I am also collecting the \"No JS  Widgets\" in a Codepen collection [here](https://codepen.io/collection/XqzmMm/){:rel=\"external\"}.\n",
            "url": "https://vincentp.me/blog/no-js-tabs",
            "date_published" : "2018-04-20 13:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/no-js-modal",
            "title" : "Modal No JS",
            "content_html": "In general a modal as a UX mechanisim is bad, but there are a few edge cases where they serve a viable purpose on your website.\n\nRecently I had to create a modal for a client that required no JavaScript. Here is how I solved it.\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"wmVpXv\" data-default-tab=\"css,result\" data-user=\"vipickering\" data-embed-version=\"2\" data-pen-title=\"Modal - NoJS\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/vipickering/pen/wmVpXv/\">Modal - NoJS</a> by Vincent Pickering (<a href=\"https://codepen.io/vipickering\">@vipickering</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n<script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n\nEssentially, I am using a radio button to act as the mechanisim to show/hide an overlay. In this case an SVG blur is drawn over the content to prevent clicking, and its content is stacked above it.\n\nI haven't found an issue with this working in modern browsers, or mobile browsers yet. It may be a solution you find useful.\n",
            "url": "https://vincentp.me/blog/no-js-modal",
            "date_published" : "2018-04-16 16:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/conversation",
            "title" : "Conversation",
            "content_html": "{% include shapes/polygon.html %}\n\n<blockquote>\n    <p>Man or machine should matter not. Conversational mechanisms are universal.</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nDesign systems exist to facilitate communication between man and machine. Fulfilling this thought to conclusion dictates that good system design must encompass clear concise conversation with one or multiple participants.\n\nThrough code, facilitating machines communicating with machines is easily achievable. A designed system will fail when neglecting the human element. Crafting systems that converse with humans clearly and understand feedback received is the primary goal. To achieve this goal we must first analyse how humans speak to each other.\n\nIn “[Designing for Conversation](http://pangaro.com/designing-for-conversation.html)” [Dr. Paul Pangaro](http://www.pangaro.com/) and [Hugh Dubberly](http://www.dubberly.com/about) model[^1] human conversation in to the following components:\n\n{% include diagrams/cybernetics-conversation-model.html %}\n\nThey model conversation in to five key areas:\n\n#### 1. [Context](#context)\nUpon commencing a conversation with another, first the receiver's context must be understood. Calling a friend on the phone during an important meeting would most likely result in the call being ignored. At that current moment in time the conversation isn't relevant to the receiver. Both participants must share the same context for meaningful conversation to take place.\n\n#### 2. [Shared Language](#shared-language)\nConversation participants must both speak the same language.\nThis not only equates to a spoken language such as English, French or German. Shared language also encompasses the short hand language that develops with individuals through past experiences. Facets such as a shared sense of humour or position on topics are weaved throughout conversation between individuals with a past history. A complete stranger does not bring with them a shared language, they have yet to create it. As history is created between individuals sharing a conversation, the more efficient their conversations will become.\n\n#### 3. [Exchange or Engagement](#exchange-or-engagement)\nBoth participants in a conversation must engage in an information exchange or be engaged in what the other person is saying in order for the conversation to be meaningful. If one of the participants is dismissive of what is being said or not paying attention, then the conversation quality degrades or ceases completely.\n\n#### 4. [Agreement](#agreement)\nA productive conversation ends with both parties agreeing on the focal point of the conversation, even if that point is to agree to disagree. If both parties cannot agree on a shared consensus then the conversation breaks down.\n\n#### 5. [Action or Transaction](#action-or-transaction)\nEvery conversation should end by participants deciding between them on an agreed action to move the conversation forward. Each party should understand what action is required from them to achieve the conversation goal.\n\n## Context\n\n<blockquote>\n    <p>If we don't understand why, where and how. What hope do we have in solving the problem at all?</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nA system that wholly embraces the context for which it is intended does not stray (<abbr title=\"The Point Of A System Is What It Does\">POSIWID</abbr>) in to areas that are not its primary use case.\n\nWhen tasked to create a system, there are many factors to take in to account and consider impact.\n\n### Engagement duration\n\nResearch the average length an interaction with the system is expected to take. If the interaction will be prolonged, permit the user to save the engagement and return later. Alternatively, break the engagement down in to smaller transactions.\n\nEngagement duration is related to system complexity. The longer an engagement with the system is prolonged, the greater the number of exchanges between the user and system. Therefore as we increase engagement duration hidden system complexity also rises.\n\nComplexity is not only in the interface of the system or language used. Complexity is also a key part in how the user engages your system.\n\n### Imposed Factors\n\nWhen a user initiates a system exchange it should be always ready. Under rare circumstance when the system is under-going maintenance or has suffered a fatal error, politely direct the user to a time or date they can return.\n\nThe system initiating an information exchange is more problematic. Craft the system to be sensitive to the users context. Attempting to request information for an exchange between 00:00 and 07:00 has a high chance that the user is in bed and will not respond. Similarly, push notifications or emails throughout the users day can be overly antagonistic. Better to allow the user to configure their times when they are available and most likely to respond to a transaction.\n\nTry to save instant notifications for important or time critical information, such as:\n\n- A package has been dispatched.\n- A system requesting information before a deadline.\n- An emergency situation.\n\n### Familiarity\n\nUpon making friends or meeting new people initial conversations will be light. Personal information may be shared if the participants feel at ease with each other such as their name, partners name, or number of children. Most initial conversations with a new person are about understanding if the person is someone you wish to get to know better and establishing common ground to base that relationship.\n\nKeep initial engagements light with the user. Avoid bombarding them with information and allow them to engage with the system at their own pace.\n\nJust as you may become friends with another person through a series of conversations and shared experiences spanning a period of time, endeavour to create a system that builds a relationship with the user that gets stronger the longer they choose to interact with the system. Relationships are earned through trust and respect so your system should follow these principles.\n\nContext is critical in polite conversation. It is considered rude to ask a person how much they weigh or for sensitive information like their bank account details. If the conversation began in a bank speaking to a teller on the other hand, requesting your bank account details is perfectly acceptable. When designing systems only request information that is acceptable given the circumstances the system is operating within.\n\n### Physical\n\nPhysical interaction can be a contextual differentiator if that physical type is largely removed from a desktop device. Users can control systems in a variety of ways such as:\n\n1. Voice and Audio.\n2. SMS.\n3. E-mail.\n4. Mechanical interaction (e.g. switches, buttons).\n5. Touch screen.\n6. Machine readable written document.\n7. QR and bar codes.\n8. Physical environment (temperature, humidity).\n9. Biometric input (fingerprint, retinal scanner, blood type, facial scanner, breathalyser).\n10. None Interaction.\n11. Spacial movement (motion control, acceleration etc).\n12. Spacial placement (location, elevation, coordinates, orientation).\n13. Physical dimensions.\n\nEvery new method of interacting with the system changes a users context and affects complexity. Take time to understand a typical workflow for the user and embrace their unique factors to select an input type that will yield the highest quality conversation available.\n\n### External Influences\n\nUsers may not be able to control external factors while interacting with the system. Research should be undertaken before designing the system to understand the impacting environmental factors.\n\nSuch as:\n- Slow network connection\n- Internet access\n- Acceptable environment noise level\n- Restricted mobility\n- Restricted system access\n- Imposed device selection\n\nEnvironmental factors will rule out certain interaction types, and inform you on limits when selecting other interaction types.\n\nFor example, you would be unlikely to attempt a complex discussion while in a loud room with a colleague, it can be difficult to understand the other participant or be heard yourself. Given this scenario you may choose to only communicate key information in short bursts. Saving a more engaged nuanced conversation for a better time. Likewise you would not build a system with voice interaction as the primary input mechanism for a users who spent their time working on a construction site.\n\n## Shared Language\n\n<blockquote>\n    <p>Previous interactions with a system, shape the path of future engagements.</p>\n    <footer>\n       <cite><a href=\"http://vincentp.me\">Vincent Pickering</a></cite>\n    </footer>\n</blockquote>\n\nDesign systems to reduce future conversation time. Learn preferences for repeat questions and information, reducing complexity and the number of exchanges a system requires.\n\nIn terms of the shared language of the system itself we must consider the visual language and ensure interactions are consistent throughout. For instance, if a user clicks on a blue underlined word on a website they would expect to link to another page. Any other action which occurs is unexpected and will begin the breakdown in conversation between the user and system. Attempt to construct a system that embraces consistent user responses to input, and in which, responses are easy to digest and unambiguous. How we indicate responses in our system and communicate them to the user effectively should allow the user to understand what has happened and why.\n\nWhere systems are concerned it is relatively easy to make them speak the correct native language, but often context within is lost. If supporting a market foreign to your own, extensively research use of colours, patterns , language use, and specific design tropes. Avoid unfamiliar patterns (even if they seem natural to your usual market) and ensure colours and symbols used are familiar to the regions and not offensive.\n\nWhen a user attains a determined level of maturity in using a system. Offer keyboard short-cuts, common gesture types and other input mechanisms to reduce conversation time. Allow the user to determine when they wish to use short-cuts as they feel more comfortable engaging with the system.\n\nThe more the user engages with the system, the more information we can reuse in other scenarios. As a point when inferring user data, always present the information with an option to change or update it, don't assume. The user may not wish to submit previous data in a given scenario, the data could have changed, or the user may simply wish to review and ensure no errors. Let the user remain in charge of their information and facilitate their wishes in a trouble free manner. A good analogy would be to order goods on behalf of a friend without checking where they would like them delivered or at what time. There could be no one available to collect the order or worse still, they could have moved house.\n\nIf the system understands the users place of origin or location resided, a more nuanced way to enrich the experience is to offer regional dialect modifications to language in the system. A small change like this can introduce familiar patterns promoting further trust and understanding from the user.\n\nGive the user options, if possible, for 3<sup>rd</sup> party systems to provide additional information about the user to your system. Allow the user to control what is shared, and the degree of privacy they are comfortable with. Use methods of enriching the users experience and reducing information submitted to multiple applications, rather than a cynical marketing data grab. Respect in relationships is two-way. A loss of respect or any abuse in a relationship will result in a breakdown of communication or complete disengagement.\n\nEarn the users trust and keep it. Don't abuse it.\n\n### Etiquette\nDigital systems do not understand etiquette. Rules must be created to dictate the time or place it is considered appropriate to ask for sensitive information. At the point the system needs information it also does not grasp the correct manner and language it should use to obtain the information. Rules are needed to mitigate this problem. A misstep in this area can quickly result in a user ending the session and never returning to the system.\n\nIf the system requires information that could be deemed sensitive, consider at what point the information should be requested. In general, only ask for the information at the point it is required and reassure the user it wont be saved or used in any other way unless they grant permission.\n\nUse language appropriate to the user and the situation you are dealing with, don't become overly familiar or use slang.\n\n### Clarity\nHumans must be clear in their language during conversation, similarly, a designed system must be able to resolve complex messages in to clear, concise, requests and responses. Furthermore, if the system fails in its clarity, the user must be able to request further information or context to the message.\n\nDesigned system's should accommodate patterns in dealing with situations when they have gone awry. If a user repeatedly submits bad form data, stating the same error over and over is a hostile method in dealing with a mis-understanding. A more humanistic approach would incorporate a flexible dialogue system that deals in clarity rather than a 1-1 relationship between request and response. People not only repeat statements but re-phrase a response, or place additional emphasis on the key information being communicated to increase clarity. Some scenarios may require more than one form of response, such as example data or imagery to increase the clarity of the system response or request.\n\n### Behaviour\nHumans do not react favourably to unexpected behaviour. Complicating the issue further, acceptable behaviour is predicted based on a changing set of contextual circumstances such as:\n\n- Where the conversation takes place.\n- When the conversation takes place.\n- Whom the conversation is between.\n- The amount of shared history between participants.\n- The nature of the conversation.\n\nDesign systems to be sensitive to factors before producing a response. A system can know who it is addressing and the time and date the conversation is taking place. If the system is a fixed kiosk, or delivered in another restricted medium this will provide further context as to where the transaction is occurring. Finally the system should have access to all the shared history the user has accrued. Use the data available to inform you on how the system should respond appropriately. For example, if a kiosk was in a museum or library, you would not want loud commanding responses booming out from the device, or personal information read aloud. It would cause embarrassment towards the user, resulting in them terminating the transaction. Better to rely upon on-screen prompts to direct their attention.\n\n## Exchange or Engagement\n\nThe interface must facilitate a successful exchange between the user and the system, it must also make allowances for the transaction to be paused while the user attends to another task.\n\nTo facilitate a successful exchange or engagement with a user embrace these principals.\n\n1. Clear system requests when information is required.\n2. The outcome on sent information should be obvious.\n3. Requesting information should be trivial in nature.\n4. Exchanges must easily be paused.\n5. Paused transaction states must clearly display their current status.\n\n## Agreement\n\nSuccessful transactions result in the user achieving their goal from the system. The system must also retrieve what it needs from the user during this transaction so that it can facilitate the users direction. If both proponents on this transaction get what they need we can consider this 'agreement'.\n\nThe system is working correctly when the user is able to interact with the interface and produce an appropriate response to their action or query. Clearly label user feedback, make it prominent and clear, using unambiguous language so that a user is always aware on the state of their transaction.\n\nAn agreement state can be achieved when one of the following criteria are met:\n\n1. The outcome response of the action should be clear when concluded.\n2. If further conversations are required, it should be easily linked together and scheduled.\n3. It should be clear how to end the conversation in negative agreement, such as cancel or delete.\n\n## Action or Transaction\n\nA good interaction with the system should result in the system and user obtaining the information they require to complete the transaction. Ensure outcomes are clearly labelled in the system and provide a way for the user to retrieve successful transactions at a later date.\n\nProductive conversation is a cornerstone in creating a successful system. Once a high level is achieved, interactions become effortless and second nature on behalf of the user. Facilitating conditions to allow the [flow state](https://www.ted.com/talks/mihaly_csikszentmihalyi_on_flow?utm_campaign=tedspread--b&utm_medium=referral&utm_source=tedcomshare) to occur.\n\n### In Summary\n\n- Context is key. Never loose sight of <abbr title=\"The Point Of A System Is What It Does\">POSIWID</abbr>.\n- Respect is a two way street.\n- Customer data is an earned privilege not a right.\n- The system should embrace the user's needs and circumstances to enrich the conversation.\n- Follow the key points of the Conversation Model in all transactions that engage with the user.\n- The nature of information submitted by a user is related to their external circumstances at that time.\n- If you want your system to be loved. It needs to be follow basic human etiquette and earn respect over time.\n\n<div class=\"f-mono black f7 ttu\" data-type=\"notes\"><span>Notes</span></div>\n[^1]: Reference: [http://pangaro.com/presents/Pangaro_IXDA_2017_v5_distro.pdf](http://pangaro.com/presents/Pangaro_IXDA_2017_v5_distro.pdf)\n",
            "url": "https://vincentp.me/blog/conversation",
            "date_published" : "2017-10-11 08:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/cybernetics-and-the-modern-web",
            "title" : "Cybernetics And The Modern Web",
            "content_html": "{% include shapes/circle.html %}\n\n## Design in all forms is transaction facilitation\n\nCrafting usable, transparent interfaces for websites and software is forged in the facilitation of a shared dialogue between the user and the system.\n\nTo build great user experiences we must understand how to communicate effectively.\n\nLucky for us, smarter minds have already done the hard work. We only need embrace it and apply to our matters.\n\n## History\n\nPopularised by the American Mathematician and Philosopher Norbert Wiener in 1948, the inter-disciplinary field of Cybernetics[^1] defines itself as: ***“The study of systems, such as mechanical, physical, biological, cognitive, and social systems”***.\n\n## The Information River\n\nCyberneticians view the world through the flow of information, communication channels and its organisation.\n\nGenerally it is applied when the system incorporates a closed signalling loop. In essence, where action by the system generates some change in its environment, resulting in a change to the system in some manner, triggering a system change. This is sometimes referred to as a \"circular causal\" relationship.\n\n{% include diagrams/feedback-loop-basic.html %}\n\nCybernetics is only concerned with modelling systems. It does not care about “how” or “why”.\n\nNorbert Wiener focused on the relationship between message and response as a key element of Cybernetics, whether in humans or machines:\n\n<blockquote>\n    <p>When I communicate with another person, I impart a message to him, and when he communicates back with me he returns a related message which contains information primarily accessible to him and not to me… </p>\n    <p>When I give an order to a machine, the situation is not essentially different from that which arises when I give an order to a person.</p>\n    <p>In other words, as far as my consciousness goes I am aware of the order that has gone out and of the signal of compliance that has come back.</p>\n    <p>To me personally, the fact that the signal in its intermediate stages has gone through a machine rather than through a person is irrelevant and does not in any case greatly change my relation to the signal.</p>\n    <p>Thus the theory of control in engineering, whether human or animal or mechanical, is a chapter in the theory of messages.</p>\n    <footer>\n       <cite><a href=\"https://en.wikipedia.org/wiki/Norbert_Wiener\">Taken from “The Human Use of Human Beings: Cybernetics and Society” - By Norbert Wiener</a></cite>\n    </footer>\n</blockquote>\n\nSuch an overarching field as Cybernetics encompasses many areas. Primarily, in our field of designing usable systems, we are most concerned with the modelling of messaging, understanding the flow of information and control theory.\n\nThe most basic example of a circular causal relationship is a thermostat. The thermostat has one purpose; to maintain its temperature at a pre-determined setting. When an external influence alters the temperature of the room the thermostat will either turn on and increase the temperature or turn off to reduce the temperature until it's predetermined setting is achieved.\n\n{% include diagrams/cybernetics-thermostat.html %}\n\nThe result after output from the controlling system is fed back into the controller, informing its next action. This behaviour endlessly loops checking if the thermostat value is not correct and applying its logic in an inversely proportional manner to readdress the balance.\n\nA close analogy from a web point of view is a form. The form will endlessly default to false, looping back to update the UI states, until the criteria is met. Once met, the system signal success and returns to its original state.\n\n{% include diagrams/cybernetics-simple-form-model.html %}\n\nThis basic behaviour is called a “closed signalling loop” and is the foundation for [Control Theory](https://en.wikipedia.org/wiki/Control_theory).\n\n### Requisite Variety\n\n<blockquote>\n    <p>Variety is a concept inseparable from that of ‘information’.</p>\n    <footer>\n        <cite><a href=\"https://firstlaw.wordpress.com/2011/10/18/ashbys-law/\">William Ross Ashby</a></cite>\n    </footer>\n</blockquote>\n\nCyberneticians consider variety as an alternative way to think about information. Variety describes the number of potential states a system can take. If all possible states in a system are known, complete knowledge of its behaviour is secured. Uncertainty occurs when all possible states are not known. Resulting in the system producing unanticipated output states.\n\nThe term “Requisite Variety” is used in Cybernetics which means “Required Information”. When this term is used it implies there is a required amount of quantifiable information necessary for a task.\n\n<blockquote>\n    <p>If a system is to be stable, the number of states of its control mechanism must be greater than or equal to the number of states in the system being controlled.</p>\n    <footer>\n        <cite><a href=\"https://en.wikipedia.org/wiki/W._Ross_Ashby\">William Ross Ashby</a></cite>\n    </footer>\n</blockquote>\n\nThis is known as “The Law Of Requisite Variety” or “Ashby’s Law”. It is considered “The First Law Of Cybernetics”.\n\nAshby’s Law implies that the degree of control over a system is proportional to the amount of information available. You cannot control what you do not understand and the control you exert over a system must compensate for all outputs the system can attain.\n\nConsider projects you have worked upon \"go live\" only later to discover:\n\n- Dead end user flows.\n- States with unstyled components.\n- Logic with undetermined outcomes.\n- Duplication in user patterns with differing outcomes (e.g. Resetting passwords or creating accounts by multiple different methods).\n\nThe team building these projects were not in control of their system nor did they understand the outcomes it could produce.\n\nWhen complete control of the system is not secured; exerting control and modifying behaviour (such as modified states of components or outputs) will produce unknown-able outcomes.\n\nComponent libraries, user flows and team communication provide information we need to assert a measure of control over the systems we create, but they are not the whole picture.\n\nIn a later articles I will explore how to model the flow of information through your system and the benefits it provides.\n\n### In Summary\n\n- Consider the flow of information through your site or application.\n- The user/machine dialogue is a shared experience. It is no different to communicating with another human.\n- Our system should adapt to prevent failure.\n- You cannot control what you do not understand and the control you exert over a system must compensate for all outputs the system can attain.\n- Understand Variety in your application.\n- Model your system to adapt to external changing conditions such as environment and users.\n\nCybernetics is a vast topic. I have tried to touch on a few key points to demonstrate cross-pollination and shared goals. Future articles  will investigate the topic in greater depth.\n\n<div class=\"f-mono black f7 ttu\" data-type=\"notes\"><span>Notes</span></div>\n[^1]: [Cybernetics](https://en.wikipedia.org/wiki/Cybernetics) pre dates the internet, terminators, cyborgs or anything like that. It is from the Greek word kybernētēs which means \"steersman\".\n",
            "url": "https://vincentp.me/blog/cybernetics-and-the-modern-web",
            "date_published" : "2017-10-10 08:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/git-panic",
            "title" : "Git Panic",
            "content_html": "Sometimes you need to quickly create a unique branch and save your code in a pinch. It could be a fire alarm, your laptop might be about to die. Any number of reasons why you may need to quickly save your code to Git and get it off your machine.\n\nSo I had the idea for a fun alias to solve this:\n\n{% highlight bash %}\nalias panic=\"branchName='$(date +%Y-%m-%d-%H-%M)' && git checkout -b panic-'${branchName}' && git add -A && git commit -m 'panic' && git push --set-upstream origin panic-'${branchName}'\"\n{% endhighlight %}\n\nThe alias just means if at any time you type ```git panic``` it will immediately create a new branch, date and time stamped, commit all your code on that branch and push it up to your Git repository.\n\nThe code is also available on a [Gist](https://gist.github.com/vipickering/f2e275cd7ceeb047eb66b9e52d5b0034).\n",
            "url": "https://vincentp.me/blog/git-panic",
            "date_published" : "2017-09-05 14:00:00 +0100",
            "date_modified" : "2017-09-05T14:55:00+01:00"
        },
        {
            "id": "https://vincentp.me/blog/site-updates",
            "title" : "Site Update",
            "content_html": "It takes time to understand how to represent yourself through design. It takes even more time if you consider that the code you produce must also be a true representation of your abilities. Harder still, if  you want to write as little code as possible.\n\nIn redesigning the site I made the following decisions:\n\n- It must be faster to download than before.\n- Overall payload per page must be smaller.\n- The visual aesthetic needs to improve greatly and better represent myself.\n\nI think I managed to achieve all three.\n\nThe size of the CSS is down to 1.5kb (Gzipped). I achieved this by rolling my own functional CSS approach similar to [Tachyons](http://tachyons.io). I could reduce this further by replacing the Jekyll rendering with my own that supports my CSS. But at this point it feels like the amount of effort required might not be worth 0.5kb.\n\nFunctional CSS has totally won me over as a method to deliver CSS. It is smaller, compact and doesn't suffer from bloat that traditional BEM &amp; OOCSS approaches have.\n\nOverall average payload is down to 12kb per page, which is extremely fast over a slow connection.\n\nI Implemented CSS grid in a few places which reduced my code. Edge support is dropping any time now and I don't support IE11 with this site, so it seemed like a good time to use the new tech.\n\nI found CSS grid to be pretty good, but there are a few caveats. I always mark my page up correctly, then apply the CSS. Using CSS Grid you can't pass through or ignore a div, which can lead to some frustrating situations when you want to apply a grid to the whole site but those pesky ```<main> ``` ```<header>``` ```<footer>``` tags get in the way.\n\nIt seems at the moment the solution is to roll several smaller grids, which seems like a poor compromise to me. It  is definitely a step forward, but not quite far enough.\n\nBehind the scenes I am still playing with aspects of [The Indie Web](https://indieweb.org/) and a number of other technologies deciding what I want to implement. It is important to live with a new tech for a while before rolling it out when confident or implementation can become a mess.\n\nI've added a new sections [Tips]({{site.url}}/categories/tips). Where byte sized information will live whenever I have something that I think is helpful but doesn't warrant a full post. ~~I will also push the Tip out to my Twitter account~~.\n\nTwitter account is now deactivated.\n",
            "url": "https://vincentp.me/blog/site-updates",
            "date_published" : "2017-07-06 08:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/fluid-type",
            "title" : "Fluid Type",
            "content_html": "Make type scale in proportion to the viewport size\n\npx width is the min font size.\n\nvw unit is your scale.\n\n{% highlight css %}\nh1{ font-size: calc(16px + 3.5vw); }\n{% endhighlight %}\n",
            "url": "https://vincentp.me/blog/fluid-type",
            "date_published" : "2017-07-03 22:02:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/guetzli",
            "title" : "Optimising images with guetzli",
            "content_html": "Continuing from my [last post]({{site.url}}/blog/jekyll-blog-speed) on reducing the time to meaningful first paint on the blog. I got some time to spend testing Google's latest image optimiser [Guetzli](https://github.com/google/guetzli).\n\nI believed I had already squeezed my image file sizes as small as I could get them. But I wanted to see if the latest offering by Google could do any better.\n\nGuetzli specialises in compressing JPGs but it will also do PNGs. It won't do transparency however, so if you want to compress PNG's with transparency you are better off with other options.\n\nGuetzli is a different type of image compressor it tries to remove all the data from an image the eye can't see.\n\nInstalling on a mac was pretty easy. It is available as a [Homebrew package](https://brew.sh/), and the instructions are on the Guetzli repository.\n\nOnce installed, you can run from the command line and modify the quality filter. Playing around with this I could go down to the lowest recommended setting (84) and the images looked identical with a significant drop in file size.\n\nHere are some of the results of my test. I've linked to each image below.\n\n- **Test 1** [original]({{site.url}}/images/blog/2017-05-23/apple-touch-icon-152x152-precomposed-original.png) - 44k\n- **Test 1** [optimised]({{site.url}}/images/apple-touch-icon-152x152-precomposed.png) - 4kb (**40k smaller**)\n\n- **Test 2** [original]({{site.url}}/images/blog/2017-05-23/blueprint-original.jpg) - 93k\n- **Test 2** [optimised]({{site.url}}/images/blog/2013-11-11/blueprint.jpg) - 61k (**32k smaller**)\n\n- **Test 3** [original]({{site.url}}/images/blog/2017-05-23/pils-original.jpg) - 53k\n- **Test 3** [optimised]({{site.url}}/images/blog/2013-11-19/pils.jpg) - 39k (**14k smaller**)\n\nThese are some significant savings, particularly the apple touch icon (40k!!) and based on these results, I would highly recommend giving Guetzli a pass on any project you work on.\n\nIt's not all perfect however there are some caveats that should be mentioned.\n\nGuetzli is serious resource hog. The installation instructions recommend:\n\n> You should provide 300MB of memory per 1MPix of the input image.\n\nand\n\n> You should count on using about 1 minute of CPU per 1 MPix of input image.\n\nI needed to shut down any running programmes while optimising my images. This is a bit of a pain for multi-tasking, but you could get around it by scripting the command line and leaving it running overnight if you have some particularly big images to compress or only have access to a low end machine.\n\nThere were two instances where Guetzli ballooned my images to several times their original size. Both of these were simple vector PNGs and not resembling a traditional photograph in anyway, so if you have images [like this]({{site.url}}/images/blog/2017-01-03/govuk-stats-apr-2013-jan-2017.png) I would probably find another compressor.\n\nOn the whole I've been really impressed with Guetzli, and I can already see a small bump in rendering times as a result of smaller assets.\n",
            "url": "https://vincentp.me/blog/guetzli",
            "date_published" : "2017-05-23 23:20:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/json-feed-support",
            "title" : "JSON Feed Support",
            "content_html": "Let's face it. RSS and ATOM Suck. That's not to say the format isn't useful. But XML is a trudge, it's not fun to work with at all.\n\nCombined with the differing but similar formats. ATOM and RSS is just a bit of a confusing mess.\n\nEnter [JSON Feed](https://jsonfeed.org/).\n\nA well throughout specification for RSS that uses a format developers love. Furthermore it's really simple and **FUN to implement**.\n\nIt took me about an hour to add support to the Jekyll blog. But your time will be even quicker with [my file]({{site.data.author.github.url}}/vincentp/blob/master/feed.json) as a handy reference!\n\n{% highlight json %}\n---\nlayout: null\n---\n{\n    \"version\": \"https://jsonfeed.org/version/1\",\n    \"title\": {{ site.title | jsonify }},\n    \"home_page_url\": \"{{site.url}}\",\n    \"feed_url\": \"{{site.url}}/feed.json\",\n    \"description\" : \"Web design including: UI, UX, HTML, CSS, JavaScript and Node\",\n    \"icon\" : \"{{site.url}}/images/vincentp-300.jpg\",\n    \"favicon\" : \"{{site.url}}/apple-touch-icon-76x76.png\",\n    \"author\" : [\n        {\n            \"name\" : \"{{site.data.author.name}}\",\n            \"url\" : \"{{site.data.author.twitter.url}}\",\n            \"avatar\" : \"{{site.url}}/images/vincentp-300.jpg\"\n        }\n    ],\n     \"items\": [{% for post in site.posts %}\n        {\n            \"id\": \"{{site.url}}{{post.id}}\",\n            \"title\" : {{ post.title | jsonify }},\n            \"content_html\": {{ post.content | jsonify}},\n            \"url\": \"{{site.url}}{{ post.url }}\",\n            \"date_published\" : \"{{ post.date }}\"{% if post.modified %},\n            \"date_modified\" : \"{{post.modified  | date_to_xmlschema}}\"{% endif%}\n        }{% if forloop.last != true %},{% endif %}{% endfor %}\n    ]\n}\n{% endhighlight %}\n\nThe biggest gotcha, is that by using the jsonify filter in your liquid tags, you don't need the quotes. They are added automatically.\n\nFinally, you will need to ensure you add commas if there are more items in your list and not output a comma if it is the final item.\n",
            "url": "https://vincentp.me/blog/json-feed-support",
            "date_published" : "2017-05-20 11:15:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/jekyll-blog-speed",
            "title" : "Jekyll Blog Speed",
            "content_html": "<p>I decided to set myself a challenge.</p>\n\n<p>Over the past few weeks, I have spent pockets of time reducing the overall page weight as much as I possibly can and decreasing the <a href=\"https://github.com/tdresser/time-to-first-meaningful-paint\" title=\"read more about time to meaningful first paint\">Time To Meaningful First Paint</a>.</p>\n\n<p>My current score on Google’s <a href=\"https://developers.google.com/web/tools/lighthouse/\">Lighthhouse</a> plug-in was 84 out of 100. This wasn’t a bad score, but I knew I could easily get to 100 out 100 by adding a service worker.</p>\n\n<p>I’ve been wanting to implement a Service Worker on my site for some time now.</p>\n\n<p>I spent some time reviewing other people’s work. Service Workers are not a new technology and I knew others would already have solved most of the major problems. <a href=\"view-source:https://adactio.com/serviceworker.js\">Jeremy Keith</a> has a really nice implementation I liked, but it felt a little overkill for what I required. My basic need was to cache a few pages for offline use, and for any other requests to be directed to an offline page.</p>\n\n<p>After further digging I decided to use <a href=\"https://csswizardry.com/sw.js\">Harry Roberts</a> implementation and tweak a few things. This made sense as Harry also has a Jekyll blog and his needs are much the same as my own.</p>\n\n<p>After implementing the service worker I achieved the 100 score on the Lighthouse plug-in. But I knew I could go further.</p>\n\n<p><del>## Simple Jekyll Cache Busting</del></p>\n\n<p><del>Firstly I wanted to ensure that assets got cached if they hadn’t changed and users only downloaded newly updated content.</del></p>\n\n<p><del>There is a really simple way to do this using Jekyll global variables. Open up your <code class=\"highlighter-rouge\">_config.yml</code> file and add the following line:</del></p>\n\n<p>~~</p>\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\">version : 100</code></pre></figure>\n<p>~~</p>\n\n<p><del>Next any asset you want cached add a question mark followed by an equals sign then call the Jekyll site variable like so</del></p>\n\n<p><del>In essence (this is telling the browser that by using the query parameter in the URL)  if URL has changed the content has changed so fetch it again.</del></p>\n\n<p><del>Now every time you update any of your assets, remember to update this variable in the config file and when the site is republished the browser will know to fetch the latest assets.</del></p>\n\n<p><strong>I have replaced</strong> this with a much simpler method to output the current date/time as a parameter.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-html\" data-lang=\"html\"><span class=\"nt\">&lt;link</span>  <span class=\"na\">rel=</span><span class=\"s\">\"stylesheet\"</span> <span class=\"na\">href=</span><span class=\"s\">\"{{site.url}}/css/application.min.css?v={{ \"</span><span class=\"na\">now</span><span class=\"err\">\"</span> <span class=\"err\">|</span> <span class=\"na\">date:</span> <span class=\"err\">\"%</span><span class=\"na\">Y-</span><span class=\"err\">%</span><span class=\"na\">m-</span><span class=\"err\">%</span><span class=\"na\">d-</span><span class=\"err\">%</span><span class=\"na\">H-</span><span class=\"err\">%</span><span class=\"na\">M</span><span class=\"err\">\"</span> <span class=\"err\">}}\"</span><span class=\"nt\">&gt;</span></code></pre></figure>\n\n<h2 id=\"adding-cache-control-on-netlify\">Adding Cache Control on Netlify</h2>\n\n<p>If you wanted to control your cache headers you would usually need to include a <code class=\"highlighter-rouge\">.htaccess</code> file. My blog is hosted by <a href=\"https://www.netlify.com/\">Netlify</a> who use a <a href=\"https://www.netlify.com/docs/headers-and-basic-auth/\">slightly adapted interpretation of this</a>. Instead of creating the <code class=\"highlighter-rouge\">.htaccess</code> file, create a <code class=\"highlighter-rouge\">_headers</code> file.</p>\n\n<p>While we are creating the file. Don’t forget to modify your Jekyll <code class=\"highlighter-rouge\">_config.yml</code> file to include a file with an underscore, or it won’t be built correctly on the Netlify servers. We can do this simply like so:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\">include:\n  - <span class=\"s2\">\"_headers\"</span></code></pre></figure>\n\n<p>So my <code class=\"highlighter-rouge\">_config.yml</code> file in complete looks like this:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\"><span class=\"c\"># Markdown</span>\nmarkdown : kramdown\n\n<span class=\"c\">#Syntax Highlighting</span>\nkramdown :\n  hard_wrap : <span class=\"nb\">false</span>\n  <span class=\"c\"># syntax_highlighter : rouge</span>\n\n<span class=\"c\"># Outputting</span>\npermalink : /blog/:title\ntimezone: Europe/London\n<span class=\"c\"># paginate: 20</span>\n\n<span class=\"c\"># Site Variables</span>\ntitle : Thoughts on frontend development\ndescription : Web design including UI, UX, HTML, CSS, JavaScript and Node\nurl : https://vincentp.me\nversion : 800\navailable: <span class=\"nb\">true</span>\n\n<span class=\"c\"># Exclude Files</span>\nexclude:\n  - <span class=\"s2\">\"postcss.config.js\"</span>\n  - <span class=\"s2\">\"Gemfile\"</span>\n  - <span class=\"s2\">\"Gemfile.lock\"</span>\n  - <span class=\"s2\">\"package.json\"</span>\n  - <span class=\"s2\">\"node_modules\"</span>\n  - <span class=\"s2\">\"LICENSE\"</span>\n\ninclude:\n  - <span class=\"s2\">\"_headers\"</span></code></pre></figure>\n\n<p>Now we have the blank <code class=\"highlighter-rouge\">_headers</code> file added and building correctly lets add some cache control and basic header protection:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\">/<span class=\"k\">*</span>\nX-Frame-Options: DENY\nX-Content-Type-Options: nosniff\nX-XSS-Protection: 1<span class=\"p\">;</span> <span class=\"nv\">mode</span><span class=\"o\">=</span>block\nCache-Control: public, max-age<span class=\"o\">=</span>31536000</code></pre></figure>\n\n<p>This does the following:</p>\n\n<ul>\n  <li>Line 1 prevents other people loading our site inside their content. This protects against malicious actions.</li>\n  <li>Line 2 prevents a browser from changing the content from text/html as it is declared.</li>\n  <li>Line 3 prevents cross site scripting attacks.</li>\n  <li>Line 4 is the length of time we should cache any assets the browser downloads from our site.</li>\n</ul>\n\n<p>Line 4 is all you need for the caching performance, but as a general rule the first three lines of code are a sensible precaution to include on any site.</p>\n\n<p>So far so good. I’ve managed to bring repeat render time trips down considerably by caching the content using a Service Worker and implementing a caching strategy for assets.</p>\n\n<h2 id=\"css\">CSS</h2>\n\n<p>A key concern in ‘Time To Meaningful First Paint’ is the CSS.</p>\n\n<p>I’ve done a large amount of work optimising my CSS and so far gotten it to 5kb in size. Linking from a CSS file will mean 1 additional round trip for the browser. It would need to fetch the HTML page and then go and request the CSS file and finally it would be delivered. The round trip costs time, the time to then read the code and render it out also takes time.</p>\n\n<p>My current implementation was to inline all the CSS, this is quite a simple thing to do in Jekyll. Instead of exporting your compiled CSS/Sass/Less in to a <code class=\"highlighter-rouge\">css</code> folder export the file in to the <code class=\"highlighter-rouge\">_includes</code> folder.</p>\n\n<p>Then to include the CSS inline do this in your HTML file, the same as your would include any other file in the <code class=\"highlighter-rouge\">_includes</code> directory:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-html\" data-lang=\"html\"><span class=\"nt\">&lt;style&gt;</span><span class=\"p\">{</span><span class=\"err\">%</span> <span class=\"err\">include</span> <span class=\"err\">filename.css</span> <span class=\"err\">%</span><span class=\"p\">}</span><span class=\"nt\">&lt;/style&gt;</span></code></pre></figure>\n\n<p>The file size is small so I assumed this would be the fastest way to deliver the content. But I wanted to explore another method I had used before on a large scale site and see if this could speed things up further.</p>\n\n<h2 id=\"http2-server-push\">HTTP2 Server Push</h2>\n\n<p>Server Push is a relatively new technology. It allows us to declare when a browser requests a HTML file that <strong>you will need</strong> the following other assets so I’m sending them now along with the HTML file.</p>\n\n<p>Traditionally what happens is that the HTML file is requested then parsed. Once it’s parsed the browser identifies external asset links and requests those files be sent. This can amount to alot of “chatty” requests on the network even for a simple webpage.</p>\n\n<p>If you use:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-html\" data-lang=\"html\"><span class=\"nt\">&lt;script </span><span class=\"na\">src=</span><span class=\"s\">\"someURL.js\"</span><span class=\"nt\">&gt;&lt;/script&gt;</span>\n<span class=\"nt\">&lt;link</span> <span class=\"na\">rel=</span><span class=\"s\">\"stylesheet\"</span> <span class=\"na\">href=</span><span class=\"s\">\"someCSS.css\"</span><span class=\"nt\">&gt;</span>\n<span class=\"nt\">&lt;img</span> <span class=\"na\">src=</span><span class=\"s\">\"image.jpg\"</span><span class=\"nt\">&gt;</span></code></pre></figure>\n\n<p>or anything else that requests a separate resource, this requires the browser to request the asset(s), the server to respond and deliver the assets. Finally the browser has to render the page.</p>\n\n<p>Certain assets such as JavaScript can block the rending of the page. If they are requested the browser will not render the page until the assets has been retrieved. This is because JavaScript can modify the <abbr title=\"Document Object Model\">DOM</abbr> so the browser waits to retrieve the file before it tries to render the page.</p>\n\n<p>By using Server Push, we can tell the browser. <strong>Your definitely going to need this file</strong> so I’m sending it to you now. The files are sent in parallel to avoid slowing down the page load and it eliminates the additional round trips a browser will need to render the page.</p>\n\n<p>Implementing Server Push on Netlify is pretty easy. The following code is from <a href=\"https://github.com/KeksiLabs/http2-server-push-demo/blob/master/_headers\">KeksiLabs</a>.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\">/\n  Link: &lt;/style.css&gt;<span class=\"p\">;</span> <span class=\"nv\">rel</span><span class=\"o\">=</span>preload<span class=\"p\">;</span> <span class=\"nv\">as</span><span class=\"o\">=</span>stylesheet\n  Link: &lt;/main.js&gt;<span class=\"p\">;</span> <span class=\"nv\">rel</span><span class=\"o\">=</span>preload<span class=\"p\">;</span> <span class=\"nv\">as</span><span class=\"o\">=</span>script\n  Link: &lt;/image.jpg&gt;<span class=\"p\">;</span> <span class=\"nv\">rel</span><span class=\"o\">=</span>preload<span class=\"p\">;</span> <span class=\"nv\">as</span><span class=\"o\">=</span>image\n  Cache-Control: private,max-age<span class=\"o\">=</span>0\n/subpage/\n  Link: &lt;/style.css&gt;<span class=\"p\">;</span> <span class=\"nv\">rel</span><span class=\"o\">=</span>preload<span class=\"p\">;</span> <span class=\"nv\">as</span><span class=\"o\">=</span>stylesheet\n  Link: &lt;/main.js&gt;<span class=\"p\">;</span> <span class=\"nv\">rel</span><span class=\"o\">=</span>preload<span class=\"p\">;</span> <span class=\"nv\">as</span><span class=\"o\">=</span>script\n  Link: &lt;/image.jpg&gt;<span class=\"p\">;</span> <span class=\"nv\">rel</span><span class=\"o\">=</span>preload<span class=\"p\">;</span> <span class=\"nv\">as</span><span class=\"o\">=</span>image\n  Cache-Control: private,max-age<span class=\"o\">=</span>0\n...</code></pre></figure>\n\n<p>Stepping through this line by line.</p>\n\n<ul>\n  <li>The slash, says all top level pages requested should to the following.</li>\n  <li>The next three lines show how to PUSH a CSS, JS or image file.</li>\n  <li>The 4th line dictates the caching rules to follow.</li>\n  <li>The subpage line shows how we can override the above rules for pages that are an exception.</li>\n</ul>\n\n<p>It is important that we only send the absolute vital content this way. The aim is to render the page above the fold as quick as possible. Don’t flood this file with anything that isn’t absolutely vital. Keep the requests few and the files as small as possible.</p>\n\n<p>A good technique to increase rendering speed is to move only the essential CSS content needed above the fold to an inline file. The rest of the CSS content is put in an external file. You then use Server Push to send the external file at the point the page is requested. Critical styles inline mean the page is rendered almost instantly and anything out of the viewport is rendered quickly without the round trip delay.</p>\n\n<p>I implemented Server Push, inline only my critical resources and tested my site using <a href=\"https://www.webpagetest.org/\">Webpagetest.org</a>.</p>\n\n<p>To my surprise I found that I had actually increased my Time To First Paint by 300ms!!</p>\n\n<p>I’ve concluded that this is down to my total payload of the HTML + all my CSS inline being under 15kb (15kb is the maximum that can be sent back in the initial request).</p>\n\n<p>I am deferring my service worker until after the page is loaded. Any request for a resource happens, after the initial 15kb is received and processed, but before the server has finished sending any additional assets. Due to the files being so small I could see in multiple tests on <a href=\"https://www.webpagetest.org\">Webpagetest.org</a> that resource were being sent twice. Once from the header and once requested from the page.</p>\n\n<p>I’ve used this technique with larger sites before to great success. So I believe this is definitely down to the overall payload being under 15kb, unless someone can point out a flaw in my logic?</p>\n\n<h2 id=\"recap\">Recap</h2>\n\n<p>So to recap what I have done.</p>\n\n<ul>\n  <li>I implemented a service worker.</li>\n  <li>I adding caching to my assets by using a query parameter.</li>\n  <li>I added cache control to my headers file.</li>\n  <li>I inlined all my CSS due to its small file size.</li>\n  <li>I tried to use Server Push, but didn’t see any benefit. Again possibly due to my smaller file sizes.</li>\n</ul>\n\n<figure>\n  <figcaption>And here is the benchmark result on Speed Test</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2017-05-20/result.png \" width=\"740\" alt=\"A Screenshot Of The Speed Result Benchmark\" />\n</figure>\n\n<p>All my code is <a href=\"https://www.github.com/vipickering/vincentp\">available on my repository</a>. So feel free to dig through it and ask me any questions.</p>\n\n<h2 id=\"here-be-dragons\">Here Be Dragons</h2>\n\n<p>Given this exercise and my conclusion to inline all my CSS there is now one small, tiny problem. Each page now contains a reasonable chunk of CSS that isn’t required per page.</p>\n\n<p>A future (and potentially mad) exercise is to only import the styles I need in to each template. I’ve been mulling over various implementations with Jekyll for this and potentially ditching PostCSS and moving back to Gulp to facilitate a more complex set-up.</p>\n\n<p>The complexity of implementing different CSS files per template, versus any speed difference noticed by the end user for such small margins could be a rather fun blog post for the future.</p>\n",
            "url": "https://vincentp.me/blog/jekyll-blog-speed",
            "date_published" : "2017-05-20 10:15:00 +0100",
            "date_modified" : "2018-05-16T16:50:00+01:00"
        },
        {
            "id": "https://vincentp.me/blog/increasing-uptake",
            "title" : "Increasing Uptake",
            "content_html": "<p>I find physical exercise a good way to work through my thoughts. While ripping out weeds from my garden, my mind drifted back to my last contract working for the <abbr title=\"Department of Work and Pensions\">DWP</abbr>.</p>\n\n<p>I had worked on a service that was focused on mobile users. During the Alpha stage we had been privileged enough (thanks to great leadership and foresight) to demo a  basic prototype with real users and enlist feedback. We went through several rounds of iteration. It helped quickly identify problems we hadn’t considered and address them. This phase was a success. People were enthusiastic about the service and the prototype seemed to be satisfying the basic user need.</p>\n\n<p>After receiving <abbr title=\"Government Digital Service\">GDS</abbr> approval we progressed to private beta and built the software for real. This time we tested again with real people, but met with low levels of take-up. Some of this was down to technical issues that were identified and fixed but the Beta take-up was still low.</p>\n\n<p>During the Alpha phase we had offered people the use of our own iPhone on a secure network so we could regulate the access. Once we moved to Beta with the real system we requested that people use their own smart phone. There was a working idea (at least when I departed) that asking people on benefits if they had a smart phone was perceived as if the Government was trying to catch people  out. The theory was that if you were claiming benefits <strong>and</strong> had a smart phone you must be on the fiddle and would get investigated. Regardless of the fact that this was not true at all and that most people even on low incomes own or have access to a smart phone from another family member. People would act disinterested in the service or pretend they didn’t own a smart phone at all.</p>\n\n<p>While I think this idea has merit. There is something else that I think got missed.</p>\n\n<p>In the initial Alpha phase people would be offered the use of the service when they visited the job centre, they could skip the queue and have their claim addressed within 48 hours instead of (up to) 4 weeks. We were giving people all positives and no negatives. Once we switched to asking people to use their own smartphone we were removing the incentives for them to try the service and replacing them with a large negative (in their mind), that the Government might take their benefit away.</p>\n\n<p><abbr title=\"Government Digital Service\">GDS</abbr> emphasise user need in all their work. Rules which the other Government agencies try to adhere to. It is no doubt yielding world class services that work and matter. But the nagging at the back of my mind, the thing that I think is getting missed in the all encompassing quest to ask:</p>\n\n<p>“What is the user need?”</p>\n\n<p>Is:</p>\n\n<p>“What would make the user <em>want</em> to engage in the service?”</p>\n\n<p>Because something is better for you does not imply you will do it. So because your service is more convenient doesn’t mean people will engage. This isn’t new knowledge, some people always seem to want to go to the job centre, rather than fill in a form online. But what could make them change their behaviour, what could really incentivise them to really engage?</p>\n\n<p>That’s what I’ve been mulling over.</p>\n\n<p>Being an amateur cybernetician. The flow of information is something I take a particular interest in. So a book I <strong>love</strong> is <a href=\"https://www.amazon.co.uk/Contagious-Build-Word-Mouth-Digital/dp/1471111709/ref=sr_1_1?ie=UTF8&amp;qid=1493930216&amp;sr=8-1&amp;keywords=contagious+why+things+catch+on\">Contagious</a> by Jonah Berger. In the book, Jonah explains how information is actually shared between people using the scientific method. There is an absolute ton of information in this book, and many myths are also dispelled. I would recommend it as mandatory reading for User Researchers and Product Owners.</p>\n\n<p>In the book Jonah discusses the notion of social currency, people trade in social currency. We share things to make ourselves look better than our peers, we want to be the person “in the know” who knows things others don’t.</p>\n\n<p>Why you ask?</p>\n\n<p>So we can be the one to share it. We get the kudos, the recognition and increase in social standing. Good information is worth sharing. Especially if it gives you an advantage you think others don’t have.</p>\n\n<p>A digital service on its own, regardless of its convenience is not enough of an incentive to overcome formed habits or social pressures. When a service is created and its time for people to engage, consider if there is something you can tell people, something that might pique their interest and incentivise them to do the thing even more. This isn’t a bribe. It doesn’t have to be monetary savings in any way, it could be something as simple as a way to make a persons life easier. Think Direct Debit “once and done” you don’t need to remember to do it.</p>\n\n<p>Despite the great effort made on the <a href=\"https://www.gov.uk/register-to-vote\">Register to Vote</a> site (seriously, its really quick and painless) people still don’t register to vote. But did you know that <strong>registering to vote can <a href=\"https://www.theguardian.com/money/2010/apr/10/register-vote-improve-credit-rating\">actually increase your credit rating</a>?</strong></p>\n\n<p>Given this thought process, how would I pitch a potential user of the service I mentioned at the start of this post?</p>\n\n<p>How could I try an incentivise them to use the service on their own mobile phone?</p>\n\n<p>Something else we can use explored in Jonah’s book are mental triggers. Mental triggers function at a situational point and make whatever you want to share “top of mind”. So if you don’t want to forget your bag before you leave, the best place to put it is next to the door. At the point you leave and ask yourself</p>\n\n<p>“Do I have everything?”</p>\n\n<p>The bag is right there and you don’t forget it.</p>\n\n<p>Instead of a User Researcher asking people when they enter a job centre or leave a doctors surgery if they want to use the service. A better option might be for the doctor (or receptionist!) to say to the person when receiving their doctors note “If you do it online, you will get text messages telling you when you have your money. And you save yourself a stamp”.</p>\n\n<p>There is a cost involved but stickers are also a quick way to get across a message such as this and they can be attached to any note regardless of the vendor. Or perhaps the doctors surgery could send anyone receiving a doctors note an automated text message prompting them to do it online.</p>\n\n<p>The key here I think for Government services is to be “Top of Mind” at the point when a person is most ready to engage, and then to provide them with reasons to engage.</p>\n\n<p>Think</p>\n\n<p>“What’s the user need?”</p>\n\n<p>Then think</p>\n\n<p>“What would make the user <em>want</em> to engage in the service?”</p>\n\n<p>Then do it.</p>\n",
            "url": "https://vincentp.me/blog/increasing-uptake",
            "date_published" : "2017-05-05 08:50:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/dynamic-type-support",
            "title" : "Improving Accessibility With Dynamic Text Support",
            "content_html": "<p>Today I got some spare time to spend fixing the small issues I have had with the typography on the site.</p>\n\n<p>During testing I resized the text on iOS using the Accessibility slider.</p>\n\n<p><code class=\"highlighter-rouge\">(General -&gt; Accessibility -&gt; Larger Text)</code></p>\n\n<p>I noticed the text didn’t resize. Whoops. It seems I forgot to support Dynamic Text.</p>\n\n<p>If your unfamiliar with Dynamic Text on iOS this is Apple’s accessibility solution to resizing text across native apps. Change the text in one place and it increases across all the apps that support it in one go. Pretty neat.</p>\n\n<p>A lesser known fact is that this <a href=\"https://webkit.org/blog/3709/using-the-system-font-in-web-content/\">works in Safari</a>. In the past it was problematic to add support in this way due to the way Dynamic Text is implemented. Let me explain.</p>\n\n<p>We can support Dynamic Text by writing any of the following in our CSS:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-body</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-headline</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-subheadline</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-caption1</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-caption2</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-footnote</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-short-body</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-short-headline</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-short-subheadline</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-short-caption1</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-short-footnote</span><span class=\"o\">;</span>\n<span class=\"nt\">font</span><span class=\"o\">:</span> <span class=\"nt\">-apple-system-tall-body</span><span class=\"o\">;</span></code></pre></figure>\n\n<p>You will notice this is the short-hand method. It is actually setting multiple properties under the hood dynamically:</p>\n\n<ul>\n  <li>font-family</li>\n  <li>font-weight</li>\n  <li>font-size</li>\n  <li>font-style</li>\n  <li>font-variant</li>\n</ul>\n\n<p>Attempting to hard-code the individual properties will start to override the values Dynamic Text will assign. When supporting Dynamic Text in the past you would be enveloped in a Jenga-like series of Stylesheets and rules to try and apply all your desired font rules.</p>\n\n<p>To provide a high level of accessibility and legibility I already use a font stack that supports native fonts:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nd\">:root</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-family</span><span class=\"p\">:</span> <span class=\"n\">-apple-system-body</span><span class=\"p\">,</span> <span class=\"n\">BlinkMacSystemFont</span><span class=\"p\">,</span> <span class=\"s1\">\"Segoe UI\"</span><span class=\"p\">,</span> <span class=\"n\">Roboto</span><span class=\"p\">,</span> <span class=\"n\">Helvetica</span><span class=\"p\">,</span> <span class=\"n\">Arial</span><span class=\"p\">,</span> <span class=\"nb\">sans-serif</span><span class=\"p\">;</span>\n<span class=\"p\">}</span></code></pre></figure>\n\n<p>All I needed to do was update my stack to override my pre-set values if Dynamic Text has been turned on.</p>\n\n<p>These days it is much easier using <code class=\"highlighter-rouge\">@supports</code></p>\n\n<p>All I had to do was add the following code at the end of my file.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"k\">@supports</span> <span class=\"p\">(</span><span class=\"n\">font</span><span class=\"p\">:</span> <span class=\"n\">-apple-system-body</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n    <span class=\"nd\">:root</span> <span class=\"p\">{</span>\n        <span class=\"nl\">font</span><span class=\"p\">:</span> <span class=\"n\">-apple-system-body</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n<span class=\"p\">}</span></code></pre></figure>\n\n<p>This ensures if the user has turned on Dynamic Text then pre-set values will be overridden and the Dynamic values used.</p>\n",
            "url": "https://vincentp.me/blog/dynamic-type-support",
            "date_published" : "2017-04-21 16:15:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/better-automated-testing",
            "title" : "Better Automated Testing",
            "content_html": "<p>I’m a stickler for automated testing and being consistent in writing good code. When I work in a company environment I always imbue good testing practices and habits in the colleagues around me.</p>\n\n<p>Part of my rhetoric is to define project specific automated tests that are configurable.</p>\n\n<p>There are a plethora of tests you <em>may</em> want to do in a project, my tests stub starts with the following:</p>\n\n<ul>\n  <li><a href=\"https://mochajs.org\">Mocha</a> or whatever your preferred test coding framework is.</li>\n  <li><a href=\"https://github.com/gotwarlost/istanbul\">Istanbul</a>  for code coverage tests.</li>\n  <li>JavaScript coding style checks, <a href=\"http://eslint.org\">ESLint</a> is my preferred option.</li>\n  <li>Sass coding style checks, <a href=\"https://stylelint.io\">stylelint</a> is my go to tool.</li>\n  <li>HTML validation tests with <a href=\"https://github.com/jamesseanwright/valimate\">Valimate</a></li>\n  <li><a href=\"https://github.com/stevenvachon/broken-link-checker\">Broken Link Checker</a>.</li>\n  <li>Accessibility Checks with <a href=\"http://pa11y.org\">Pa11y</a></li>\n  <li>Screenshot software, I like <a href=\"https://github.com/sindresorhus/pageres-cli\">Pageres</a>.</li>\n  <li><a href=\"https://textlint.github.io\">Textlint</a> to check for typos and writing style.</li>\n</ul>\n\n<p>I create two bash scripts. One that runs through the tests and one to create screenshots of the site at different sizes.</p>\n\n<p>Screenshots form a focal discussion point with designers, developers and usability people.</p>\n\n<p>Screenshots are helpful for circulating to non-technical stakeholders in the business. This allows stakeholders to see the outcome of new features and prompts them for feedback.</p>\n\n<p>Run the test script through Jenkins (or your preferred alternative). I also run linting and validation tests hooked up to a task runner, sharing the same configuration rules. This process ensures simple coding style check results get to the coder at the right time. In case a rebel developer doesn’t play by the rules, Jenkins would catch them later.</p>\n\n<p>In environments where companies don’t use a build server. Add the script to a git hook.</p>\n\n<p>Here is a sample script. I will step through some of the important points.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\"><span class=\"c\">#!/bin/bash</span>\n<span class=\"c\"># Runs ALL TESTS</span>\n\n<span class=\"c\"># Define list of urls for tests</span>\n<span class=\"nv\">urls</span><span class=\"o\">=(</span>page1 page2 page3 page4 page5<span class=\"o\">)</span>\n\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Please Note: An internet connection is REQUIRED for all tests to run successfully\"</span>\n\n<span class=\"c\"># Mocha unit tests</span>\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Starting Mocha tests\"</span>\nnpm run <span class=\"nb\">test</span>\n\n<span class=\"c\"># Start Node in test mode in background</span>\nnpm run testing <span class=\"nt\">--scripts-prepend-node-path</span> &amp;\n\n<span class=\"c\"># Wait for the Node Server to start up</span>\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Waiting for Node to start...\"</span>\n<span class=\"nb\">sleep </span>5\n\n<span class=\"c\"># Javascript Lint checks</span>\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Starting esLint...\"</span>\neslint <span class=\"nt\">-c</span> testing/configs/.eslintrc.json <span class=\"k\">*</span>/<span class=\"k\">*</span>.js\n\n<span class=\"c\"># Sass Lint checks</span>\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Starting Sass Lint...\"</span>\nsass-lint <span class=\"nt\">-c</span> testing/configs/.sass-lint.yml <span class=\"s1\">'assets/scss/*.scss'</span> <span class=\"nt\">-v</span> <span class=\"nt\">-q</span>\n<span class=\"c\"># open -g testing/linting/sass-lint.html</span>\n\n<span class=\"c\"># Run Valimate HTML validation tests</span>\n<span class=\"nb\">cd </span>testing/configs\nvalimate\n\n<span class=\"nb\">cd</span> ../\n\n<span class=\"c\"># Run Broken Link Checker</span>\n<span class=\"k\">for </span>i <span class=\"k\">in</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"nv\">urls</span><span class=\"p\">[@]</span><span class=\"k\">}</span><span class=\"s2\">\"</span>\n<span class=\"k\">do\n    </span>blc http://localhost:3000/<span class=\"nv\">$i</span>\n<span class=\"k\">done</span>\n\n<span class=\"c\"># Pa11y accesibility checks</span>\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Starting Pa11y...\"</span>\n<span class=\"k\">for </span>i <span class=\"k\">in</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"nv\">urls</span><span class=\"p\">[@]</span><span class=\"k\">}</span><span class=\"s2\">\"</span>\n<span class=\"k\">do\n    </span>pa11y http://localhost:3000/<span class=\"nv\">$i</span> <span class=\"nt\">--reporter</span> html <span class=\"o\">&gt;</span> accessibility/<span class=\"nv\">$i</span>.html\n    <span class=\"c\"># open -g accessibility/$i.html</span>\n    <span class=\"nb\">echo</span> <span class=\"nv\">$i</span> processed\n<span class=\"k\">done\n</span><span class=\"nb\">echo</span> <span class=\"s2\">\"Finished Pa11y\"</span>\n\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Tests Complete\"</span>\n\n<span class=\"c\"># Kill the running processes afterwards</span>\n<span class=\"nv\">Node_port</span><span class=\"o\">=</span>3000\nlsof <span class=\"nt\">-i</span> tcp:<span class=\"k\">${</span><span class=\"nv\">Node_port</span><span class=\"k\">}</span> | <span class=\"nb\">awk</span> <span class=\"s1\">'NR!=1 {print $2}'</span> | xargs <span class=\"nb\">kill</span></code></pre></figure>\n\n<p>This is how to define an array in a bash script. A useful technique to create a single point of truth for common objects to test.</p>\n\n<p>I define key pages to test at the start of the script, for accessibility testing and broken link checks.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\"><span class=\"c\"># Define list of urls for tests</span>\n<span class=\"nv\">urls</span><span class=\"o\">=(</span>page1 page2 page3 page4 page5<span class=\"o\">)</span></code></pre></figure>\n\n<p>When I start Mocha I use an <a href=\"https://docs.npmjs.com/cli/run-script\">npm run script</a>. The test command code is in my package.json file. The more site specific code we can move to one place, such as the package.json file, the better. The test script will be more portable which is always a good thing.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\"><span class=\"c\"># Mocha unit tests</span>\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Starting Mocha tests\"</span>\nnpm run <span class=\"nb\">test</span></code></pre></figure>\n\n<p>This is a snippet from a package.json file. Running <code class=\"highlighter-rouge\">npm run test</code> will call the Istanbul script and run mocha.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\"> <span class=\"s2\">\"scripts\"</span>: <span class=\"o\">{</span>\n    <span class=\"s2\">\"start\"</span>: <span class=\"s2\">\"NODE_ENV=dev node ./bin/server.js\"</span>,\n    <span class=\"s2\">\"dev\"</span>: <span class=\"s2\">\"NODE_ENV=dev node ./bin/server.js\"</span>,\n    <span class=\"s2\">\"prod\"</span>: <span class=\"s2\">\"NODE_ENV=prod node ./bin/server.js\"</span>,\n    <span class=\"s2\">\"test\"</span>: <span class=\"s2\">\"istanbul cover node_modules/.bin/_mocha -- testing/mocha/**/*\"</span>,\n    <span class=\"s2\">\"testing\"</span>: <span class=\"s2\">\"NODE_ENV=test node ./bin/server.js\"</span>\n  <span class=\"o\">}</span></code></pre></figure>\n\n<p>The broken link checker is inside a loop. Assign each item to a variable and pass it in to the <abbr title=\"Uniform Resource Locator\">URL</abbr>.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\"><span class=\"c\"># Run Broken Link Checker</span>\n<span class=\"k\">for </span>i <span class=\"k\">in</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"nv\">urls</span><span class=\"p\">[@]</span><span class=\"k\">}</span><span class=\"s2\">\"</span>\n<span class=\"k\">do\n    </span>blc http://localhost:3000/<span class=\"nv\">$i</span>\n<span class=\"k\">done</span></code></pre></figure>\n\n<p>Loop through the <abbr title=\"Uniform Resource Locator\">URL</abbr>s. Save each report in to a folder named “accessibility”. Named the <abbr title=\"Uniform Resource Locator\">URL</abbr>.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\"><span class=\"c\"># Pa11y accesibility checks</span>\n<span class=\"nb\">echo</span> <span class=\"s2\">\"Starting Pa11y...\"</span>\n<span class=\"k\">for </span>i <span class=\"k\">in</span> <span class=\"s2\">\"</span><span class=\"k\">${</span><span class=\"nv\">urls</span><span class=\"p\">[@]</span><span class=\"k\">}</span><span class=\"s2\">\"</span>\n<span class=\"k\">do\n    </span>pa11y http://localhost:3000/<span class=\"nv\">$i</span> <span class=\"nt\">--reporter</span> html <span class=\"o\">&gt;</span> accessibility/<span class=\"nv\">$i</span>.html\n    <span class=\"nb\">echo</span> <span class=\"nv\">$i</span> processed\n<span class=\"k\">done\n</span><span class=\"nb\">echo</span> <span class=\"s2\">\"Finished Pa11y\"</span></code></pre></figure>\n\n<p>Prevent the process running after the tests have completed.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-bash\" data-lang=\"bash\"><span class=\"c\"># Kill the running processes afterwards</span>\n<span class=\"nv\">Node_port</span><span class=\"o\">=</span>3000\nlsof <span class=\"nt\">-i</span> tcp:<span class=\"k\">${</span><span class=\"nv\">Node_port</span><span class=\"k\">}</span> | <span class=\"nb\">awk</span> <span class=\"s1\">'NR!=1 {print $2}'</span> | xargs <span class=\"nb\">kill</span></code></pre></figure>\n\n<p>I run text linting in a separate script. Writing is subjective so it shouldn’t fail the build.</p>\n\n<p>My <a href=\"https://github.com/vipickering/vincentp/blob/master/.textlintrc\">text-lint config</a> is on GitHub and a list of tech terms validated against on the blog in <a href=\"https://gist.github.com/vipickering/73c14510fd40b0ec4ba6b5c5d323bee4\">this Gist</a>.</p>\n\n<p>Running bash scripts such as this  will catch fixable problems. Leaving you free to ponder over the trickier issues that need attention.</p>\n",
            "url": "https://vincentp.me/blog/better-automated-testing",
            "date_published" : "2017-03-30 18:00:00 +0100"
        },
        {
            "id": "https://vincentp.me/blog/optimising-my-jekyll-workflow",
            "title" : "Optimising My Jekyll Workflow",
            "content_html": "<h2 id=\"jekyll-netlify-and-https\">Jekyll, Netlify and HTTPS</h2>\n\n<p>Over the last 2 years I have experienced the greatest degree of happiness and change in my life. I got married, blessed with a beautiful child and started my own business. It’s been an intense couple of years and It’s fair to say the blog has been a little unloved as a result.</p>\n\n<p>I decided to begin by refocusing the site around user need. What can I provide to the user and how should I achieve it.</p>\n\n<p>This question, caused me to look at every aspect of the site down to the smallest detail.</p>\n\n<h2 id=\"https\">HTTPS</h2>\n\n<p>I started with serving the site over HTTPS. Granted this blog is a static site built on Jekyll, there isn’t a whole lot to secure. But there are great speed benefits in serving over HTTPS and anything to assure the user they are in safe hands is a good thing.</p>\n\n<p>Prior, I served this site using GitHub pages. It is no secret I found the process a little messy, but it was always better than dealing with FTP clients and the alternatives. This thought process lead me to the wonderful <a href=\"https://www.netlify.com/\">Netlify</a>.</p>\n\n<p>I found Netlify easy to set-up and get underway.</p>\n\n<p>Netlify works by granting access to your code-base on GitHub. It then watches your chosen branch and every-time you push to the branch (it acts like <a href=\"https://jenkins.io\">Jenkins</a>) and builds then deploys it.</p>\n\n<p>Netlify allow you to configure HTTPS and some basic controls over your domain, which are all most people need.</p>\n\n<p>This process is simple to adapt in to your workflow and feels much more like a professional set-up. Code is wrote on the develop branch then merged to master locally and pushed when I want to deploy. Netlify handles the rest and at the time of writing <a href=\"https://www.netlify.com/pricing\">their Pro tier is free</a> for all open source projects.</p>\n\n<p>When working on Netlify make sure your Jekyll repository is in the root, and not contained within a folder. This ensures the watcher knows where to find the code.</p>\n\n<p>I looked at all the other content I was loading in to the page. Anything that wasn’t basic site structure or content was up for scrutiny.</p>\n\n<h2 id=\"custom-fonts\">Custom Fonts</h2>\n\n<p>Previous iterations of this site used custom fonts loaded via CSS. I decided to serve a native font stack without the need for the extra loading and page weight.</p>\n\n<p>Font blocking is a primary source of page slowdown and is noticeable on mobile. Anything we can do to mitigate against this (and maintain good legibility in our type) is a good thing.</p>\n\n<h2 id=\"sass-and-css\">Sass and CSS</h2>\n\n<p>I took a look at the current Sass I was using. it wasn’t written well, coded to get the site up and running. It did the job well enough (for what it was) but it wasn’t reflective of my abilities or had any care put in to it. I started again.</p>\n\n<p>The goal of good CSS is to write as little as possible. Make code maintainable, easy to read and avoid continually adding to the code base. That last point is important. We don’t wish to continually add to the code base.</p>\n\n<p>Create CSS flexible enough to work with future code additions. Not overly prescriptive to need specific patterns for future additions.</p>\n\n<p>It’s a fair assumption that anyone reading my blog is in the web industry, and thus, not a leap to assume they are using a modern browser. I decided for this blog to embrace cutting edge web standards and just write CSS.</p>\n\n<p>Sass can be a needless abstraction these days and distance you from writing good code. I settled on using <a href=\"http://pleeease.io/\" rel=\"external\">pleeease</a> a Post CSS plugin.</p>\n\n<p>Pleeease allows me to write vanilla CSS. But it also provides modern Post CSS tooling such as:</p>\n\n<ul>\n  <li>Autoprefixer</li>\n  <li>File concatenation</li>\n  <li>Minification</li>\n  <li>Comments stripping</li>\n</ul>\n\n<p>This affords me the modern tools I need without abstraction and keeps me closer to my code.</p>\n\n<p>Sass certainly still has a place in some projects, but it is no longer my way to solve the issues it sets out to remedy.</p>\n\n<p>I started by writing my own <code class=\"highlighter-rouge\">normalise.css</code> file. As I mentioned before, the aim is to write as little code as possible, then not need to add any code at a later date. The first step to doing this is to write your own file that resets and normalises elements to suit your own needs.</p>\n\n<p>Apply border-box to all elements, we get a lot of mileage out of declaring this and save writing it out over and over.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"o\">*</span> <span class=\"p\">{</span>\n    <span class=\"nl\">box-sizing</span><span class=\"p\">:</span> <span class=\"n\">border-box</span><span class=\"p\">;</span>\n<span class=\"p\">}</span></code></pre></figure>\n\n<p>Set-up our CSS variables. Assigning all our variables at the root level applies to all cascading elements.</p>\n\n<p><strong>Update 17-02-2017</strong> :  Since posting this, I spotted a small error. Edge 14 doesn’t support CSS variables, the Edge team are <a href=\"https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csscustompropertiesakacssvariables/\" rel=\"external\">working on it</a>.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nd\">:root</span> <span class=\"p\">{</span>\n    <span class=\"py\">--black</span><span class=\"p\">:</span> <span class=\"n\">rgba</span><span class=\"p\">(</span><span class=\"m\">17</span><span class=\"p\">,</span> <span class=\"m\">17</span><span class=\"p\">,</span> <span class=\"m\">17</span><span class=\"p\">,</span> <span class=\"m\">1</span><span class=\"p\">);</span>\n    <span class=\"py\">--grey</span><span class=\"p\">:</span> <span class=\"n\">rgba</span><span class=\"p\">(</span><span class=\"m\">35</span><span class=\"p\">,</span> <span class=\"m\">35</span><span class=\"p\">,</span> <span class=\"m\">35</span><span class=\"p\">,</span> <span class=\"m\">1</span><span class=\"p\">);</span>\n    <span class=\"py\">--blue</span><span class=\"p\">:</span> <span class=\"n\">rgba</span><span class=\"p\">(</span><span class=\"m\">213</span><span class=\"p\">,</span> <span class=\"m\">232</span><span class=\"p\">,</span> <span class=\"m\">243</span><span class=\"p\">);</span>\n    <span class=\"py\">--lightGrey</span><span class=\"p\">:</span> <span class=\"n\">rgba</span><span class=\"p\">(</span><span class=\"m\">138</span><span class=\"p\">,</span> <span class=\"m\">138</span><span class=\"p\">,</span> <span class=\"m\">138</span><span class=\"p\">,</span> <span class=\"m\">0.5</span><span class=\"p\">);</span>\n    <span class=\"py\">--white</span><span class=\"p\">:</span> <span class=\"n\">rgba</span><span class=\"p\">(</span><span class=\"m\">255</span><span class=\"p\">,</span> <span class=\"m\">255</span><span class=\"p\">,</span> <span class=\"m\">255</span><span class=\"p\">,</span> <span class=\"m\">1</span><span class=\"p\">);</span>\n    <span class=\"py\">--red</span><span class=\"p\">:</span> <span class=\"n\">rgba</span><span class=\"p\">(</span><span class=\"m\">200</span><span class=\"p\">,</span> <span class=\"m\">53</span><span class=\"p\">,</span> <span class=\"m\">57</span><span class=\"p\">,</span> <span class=\"m\">1</span><span class=\"p\">);</span>\n    <span class=\"py\">--paleGrey</span><span class=\"p\">:</span> <span class=\"n\">rgba</span><span class=\"p\">(</span><span class=\"m\">128</span><span class=\"p\">,</span> <span class=\"m\">128</span><span class=\"p\">,</span> <span class=\"m\">128</span><span class=\"p\">,</span> <span class=\"m\">0.08</span><span class=\"p\">);</span>\n    <span class=\"py\">--column-width</span><span class=\"p\">:</span> <span class=\"m\">35em</span><span class=\"p\">;</span>\n    <span class=\"py\">--heading-font</span><span class=\"p\">:</span> <span class=\"n\">-apple-system</span><span class=\"p\">,</span> <span class=\"n\">BlinkMacSystemFont</span><span class=\"p\">,</span> <span class=\"s1\">\"Segoe UI\"</span><span class=\"p\">,</span> <span class=\"n\">Roboto</span><span class=\"p\">,</span> <span class=\"n\">Oxygen</span><span class=\"p\">,</span> <span class=\"n\">Ubuntu</span><span class=\"p\">,</span> <span class=\"n\">Cantarell</span><span class=\"p\">,</span> <span class=\"s1\">\"Fira Sans\"</span><span class=\"p\">,</span> <span class=\"s1\">\"Droid Sans\"</span><span class=\"p\">,</span> <span class=\"s1\">\"Helvetica Neue\"</span><span class=\"p\">,</span> <span class=\"nb\">sans-serif</span><span class=\"p\">;</span>\n    <span class=\"py\">--body-font</span><span class=\"p\">:</span> <span class=\"s1\">\"Menlo\"</span><span class=\"p\">,</span> <span class=\"s1\">\"Monaco\"</span><span class=\"p\">,</span> <span class=\"s1\">\"Lucida Console\"</span><span class=\"p\">,</span> <span class=\"s1\">\"Liberation Mono\"</span><span class=\"p\">,</span> <span class=\"s1\">\"DejaVu Sans\"</span><span class=\"p\">,</span> <span class=\"s1\">\"Mono\"</span><span class=\"p\">,</span> <span class=\"s1\">\"Bitstream Vera Sans Mono\"</span><span class=\"p\">,</span> <span class=\"s1\">\"Courier New\"</span><span class=\"p\">,</span> <span class=\"s1\">\"monospace\"</span><span class=\"p\">,</span> <span class=\"nb\">serif</span><span class=\"p\">;</span>\n<span class=\"p\">}</span></code></pre></figure>\n\n<p>Style the branches of the tree not each individual leaf. You will write a lot less code and be better for it.  If you style at the topmost level and let CSS naturally cascade down, you shouldn’t need to  assign things more than once.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nd\">:root</span> <span class=\"p\">{</span>\n    <span class=\"nl\">font-family</span><span class=\"p\">:</span> <span class=\"n\">var</span><span class=\"p\">(</span><span class=\"n\">--body-font</span><span class=\"p\">);</span>\n    <span class=\"nl\">background-color</span><span class=\"p\">:</span> <span class=\"n\">var</span><span class=\"p\">(</span><span class=\"n\">--white</span><span class=\"p\">);</span>\n    <span class=\"nl\">color</span><span class=\"p\">:</span> <span class=\"n\">var</span><span class=\"p\">(</span><span class=\"n\">--black</span><span class=\"p\">);</span>\n    <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12px</span><span class=\"p\">;</span>\n    <span class=\"nl\">text-rendering</span><span class=\"p\">:</span> <span class=\"n\">geometricPrecision</span><span class=\"p\">;</span>\n<span class=\"p\">}</span></code></pre></figure>\n\n<p>If the screen size is over 640px, increase the baseline font size, which will cascade to other elements.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"k\">@media</span> <span class=\"n\">all</span> <span class=\"n\">and</span> <span class=\"p\">(</span><span class=\"n\">min-width</span><span class=\"p\">:</span> <span class=\"m\">640px</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n    <span class=\"nd\">:root</span> <span class=\"p\">{</span>\n        <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">15px</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n    <span class=\"o\">...</span>\n<span class=\"p\">}</span></code></pre></figure>\n\n<p>The other notable point is the grid.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nt\">body</span><span class=\"o\">,</span>\n<span class=\"nc\">.grid</span> <span class=\"p\">{</span>\n    <span class=\"nl\">display</span><span class=\"p\">:</span> <span class=\"n\">flex</span><span class=\"p\">;</span>\n    <span class=\"nl\">flex-flow</span><span class=\"p\">:</span> <span class=\"n\">row</span> <span class=\"n\">wrap</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n\n<span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"nl\">padding</span><span class=\"p\">:</span> <span class=\"m\">40px</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n\n<span class=\"nt\">body</span> <span class=\"o\">&gt;</span> <span class=\"o\">*</span> <span class=\"p\">{</span>\n    <span class=\"nl\">display</span><span class=\"p\">:</span> <span class=\"nb\">block</span><span class=\"p\">;</span>\n    <span class=\"nl\">padding</span><span class=\"p\">:</span> <span class=\"m\">0</span><span class=\"p\">;</span>\n    <span class=\"nl\">flex</span><span class=\"p\">:</span> <span class=\"m\">1</span> <span class=\"m\">100%</span><span class=\"p\">;</span>\n    <span class=\"nl\">min-width</span><span class=\"p\">:</span> <span class=\"m\">240px</span><span class=\"p\">;</span>\n    <span class=\"nl\">max-width</span><span class=\"p\">:</span> <span class=\"m\">620px</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n\n<span class=\"nc\">.grid-header</span> <span class=\"o\">&gt;</span> <span class=\"o\">*</span> <span class=\"p\">{</span>\n    <span class=\"nl\">display</span><span class=\"p\">:</span> <span class=\"nb\">block</span><span class=\"p\">;</span>\n    <span class=\"nl\">width</span><span class=\"p\">:</span><span class=\"m\">100%</span><span class=\"p\">;</span>\n<span class=\"p\">}</span></code></pre></figure>\n\n<p>Flexbox makes writing grid systems lightweight.</p>\n\n<p>Screen sizes below 640px have the running order on the footer containers re-arranged.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"k\">@media</span> <span class=\"n\">all</span> <span class=\"n\">and</span> <span class=\"p\">(</span><span class=\"n\">min-width</span><span class=\"p\">:</span> <span class=\"m\">640px</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n    <span class=\"nt\">body</span> <span class=\"o\">&gt;</span> <span class=\"o\">*</span> <span class=\"p\">{</span>\n        <span class=\"nl\">margin</span><span class=\"p\">:</span> <span class=\"nb\">auto</span><span class=\"p\">;</span>\n        <span class=\"nl\">max-width</span><span class=\"p\">:</span> <span class=\"m\">740px</span><span class=\"p\">;</span>\n        <span class=\"nl\">min-width</span><span class=\"p\">:</span> <span class=\"m\">620px</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n\n    <span class=\"nc\">.grid-header</span> <span class=\"o\">&gt;</span> <span class=\"o\">*</span> <span class=\"p\">{</span>\n        <span class=\"nl\">flex</span><span class=\"p\">:</span> <span class=\"m\">2</span> <span class=\"m\">50%</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n\n    <span class=\"nc\">.grid-footer</span> <span class=\"o\">&gt;</span> <span class=\"o\">*</span> <span class=\"p\">{</span>\n        <span class=\"nl\">flex</span><span class=\"p\">:</span> <span class=\"m\">3</span> <span class=\"m\">33%</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n\n    <span class=\"nc\">.grid-footer</span> <span class=\"o\">&gt;</span> <span class=\"nt\">nav</span> <span class=\"p\">{</span>\n        <span class=\"nl\">order</span><span class=\"p\">:</span> <span class=\"m\">2</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n\n    <span class=\"nc\">.grid-footer</span> <span class=\"o\">&gt;</span> <span class=\"nt\">address</span> <span class=\"p\">{</span>\n        <span class=\"nl\">order</span><span class=\"p\">:</span> <span class=\"m\">3</span><span class=\"p\">;</span>\n        <span class=\"nl\">text-align</span><span class=\"p\">:</span> <span class=\"nb\">right</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n\n    <span class=\"nc\">.grid-footer</span> <span class=\"o\">&gt;</span> <span class=\"nt\">small</span> <span class=\"p\">{</span>\n        <span class=\"nl\">order</span><span class=\"p\">:</span> <span class=\"m\">1</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n\n    <span class=\"nc\">.grid-footer</span> <span class=\"o\">&gt;</span> <span class=\"nd\">:nth-child</span><span class=\"o\">(</span><span class=\"nt\">0n</span><span class=\"o\">+</span><span class=\"nt\">1</span><span class=\"o\">)</span> <span class=\"p\">{</span>\n        <span class=\"nl\">text-align</span><span class=\"p\">:</span> <span class=\"nb\">left</span><span class=\"p\">;</span>\n    <span class=\"p\">}</span>\n<span class=\"p\">}</span></code></pre></figure>\n\n<p>Simple rules such as this can go a long way and reduce your page weight, while keeping you close to your real CSS output.</p>\n\n<p>You can see all my CSS code used on the blog <a href=\"https://github.com/vipickering/vincentp/tree/master/_css\" rel=\"external\">here</a>. <strong>I managed to reduce the entire CSS code-base down to 5KB</strong> down from 20KB in the previous version.</p>\n\n<h2 id=\"google-analytics\">Google Analytics</h2>\n\n<p>User tracking seems like a given. On all the professional sites I work on there is a business need to analyse what is happening.</p>\n\n<p>Previous versions of this site had Google Analytics implemented. My reasoning being it would be helpful to understand browser stats and usage. When I examined this logic in more detail I found it faulty.</p>\n\n<p>During the time the blog has been running I have viewed the Google Analytics a handful of times. Viewing the data has not informed me of anything relevant to my needs.</p>\n\n<p>Slowing down the users experience at the expense of tracking when I didn’t have a user need for their data was wrong. This lead me to delete the code.</p>\n\n<p>In the future, if I feel the <em>need</em> for Google Analytics then I will revisit my decision. Degrading the user experience doesn‘t seem an honest approach to designing sites.</p>\n\n<h2 id=\"summary\">Summary</h2>\n\n<p>By taking the time to question seemingly innocuous decisions made years ago on a small blog such as this. Yielded a better, tighter code-base and resulted in a faster experience for the end-user. I would encourage the reader to look again at previous decisions and see what else they can improve.</p>\n",
            "url": "https://vincentp.me/blog/optimising-my-jekyll-workflow",
            "date_published" : "2017-02-16 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/mobile-usage-exceeds-desktop-on-gov-uk-for-the-first-time",
            "title" : "Mobile Usage Exceeds Desktop On GOV.UK For First Time",
            "content_html": "<p>I find the <a href=\"https://gov.uk\" rel=\"external\">GOV.UK</a> site an endless resource of great knowledge on a cross-section of ‘real’ users in the United Kingdom, so while browsing the GOV.UK <a href=\"https://www.gov.uk/performance/site-activity/device-type#from=2013-04-01T00:00:00Z&amp;to=2017-01-01T00:00:00Z\" rel=\"external\">performance stats</a> today I spotted this:</p>\n\n<p><img src=\"https://vincentp.me/images/blog/2017-01-03/govuk-stats-dec-2016-jan-2017.png\" width=\"612\" alt=\"GOV.UK Browser usage - DEC 2016 - JAN 2017\" /></p>\n\n<p>I think this is an important moment. <strong>For the first time the paradigm shift from desktop to mobile is significant enough that GOV.UK and its services needs to think mobile first</strong>. It would appear to be almost at the tipping point in the UK where we access the internet more on smartphones than desktops.</p>\n\n<p>Techies have waxed lyrical for years that mobile outstrips desktop. This data is on average relationship to tasks associated with micro-transactions, or limited attention tasks. I have found the UK government site a good counter-point to this data. Most UK residents will have to use the site at some point to do meaningful things that can affect their life in a significant way.</p>\n\n<p>It struck me this data might be a minor blip, so I zoomed out and looked at the data in a wider context. I rolled the stats back to Apr 2013 (the earliest permitted) and saw 2 interesting things:</p>\n\n<p><img src=\"https://vincentp.me/images/blog/2017-01-03/govuk-stats-apr-2013-jan-2017.png\" width=\"612\" alt=\"GOV.UK Browser usage - DEC 2016 - JAN 2017\" /></p>\n\n<p>1) The rise of mobile and decline of desktop is evident here over the near 3 year time frame.</p>\n\n<p>2) Another thing that caught my eye. The bump that happens <em>every</em> December without fail. Desktops decline and mobiles rise. Ideal speculation on my part is that this is the percentage of users accessing at work on a desktop machine, that instead use their mobile over the Christmas holidays while not at work. This could mean the current state of mobile exceeding desktop will drop next month, but if the pattern continues it will be almost an even split by the end of 2017. 2018 being the year mobile exceeds desktop outright.</p>\n\n<p>3) Tablet device usage seems almost ‘stuck’ and receiving a minor bump. This also seems significant, but I am not sure what to make of it. Considering the government services are informational or form driven, tablet seems a good device to use for this. Tablet uptake is low over the 3 years.</p>\n\n<p>This data dispels some myths I often hear, proving:</p>\n\n<p>1) There is no real scenario that something is ‘so important’ users will do it at a desktop machine to ‘do it properly’. Users feel mobile is up to the task and are doing these tasks successfully.</p>\n\n<p>2) There isn’t really anything a user won’t do on a mobile phone if they can. Enable them and get out of the way so they get it done.</p>\n",
            "url": "https://vincentp.me/blog/mobile-usage-exceeds-desktop-on-gov-uk-for-the-first-time",
            "date_published" : "2017-01-03 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/use-cases-for-calc",
            "title" : "Use Cases For CSS Calc",
            "content_html": "<h2 id=\"vertical-centre\">Vertical centre</h2>\n\n<p>If you know the height of the element, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/calc\" rel=\"external\">CSS Calc</a> can make it super simple to position an element vertical centre <em>and</em> respect a responsive layout.</p>\n\n<p>By using this simple equation:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nt\">calc</span><span class=\"o\">(</span><span class=\"nt\">50vh</span> <span class=\"err\">–</span> <span class=\"nt\">1</span><span class=\"o\">/</span><span class=\"nt\">2</span> <span class=\"nt\">the</span> <span class=\"nt\">height</span> <span class=\"nt\">of</span> <span class=\"nt\">element</span><span class=\"o\">);</span></code></pre></figure>\n\n<p>50vh is always half the height of the viewport, so we position the element half way down the screen. But this isn’t the absolute centre because we haven’t taken in to account the height of the object. So we need to remove half the height of the object from the distance to get the final result.</p>\n\n<h2 id=\"100-fluid-width-next-to-a-fixed-element\">100% fluid width next to a fixed element</h2>\n\n<p>This is my most common use of calc, often used on layouts with main area and a sidebar, for example. When dealing with a responsive layout and we need one area to fill the space and the other to be a fixed width (which could also be controlled via media queries for extra flare).</p>\n\n<p>Element 1, our fluid container, is simply calculated using the following formula:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nt\">calc</span><span class=\"o\">(</span><span class=\"nt\">100</span><span class=\"o\">%</span> <span class=\"nt\">-</span> <span class=\"nt\">width</span> <span class=\"nt\">of</span> <span class=\"nt\">element2</span><span class=\"o\">);</span></code></pre></figure>\n\n<p>So long as you are also using border-box, then adding padding, margins etc will also be taken in to account by the 100% width and automatically adjusted accordingly.</p>\n\n<h2 id=\"background-positioning-from-the-right-side\">Background positioning from the right side</h2>\n\n<p><a href=\"https://css-tricks.com/a-couple-of-use-cases-for-calc/\" rel=\"external\">Chris Coyer</a> has already covered this, but it’s worth mentioning if you haven’t seen it, since it can be useful occasionally.</p>\n\n<p>Sometimes you want a background image to sit near but not absolutely in the bottom right corner of a container. Since background positioning is calculated from the top left corners, other work around or additional containers were needed to add the padding.</p>\n\n<p>Calc can save this simply by doing the following:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nt\">calc</span><span class=\"o\">(</span><span class=\"nt\">100</span><span class=\"o\">%</span> <span class=\"nt\">-</span> <span class=\"nt\">padding</span> <span class=\"nt\">desired</span><span class=\"o\">);</span></code></pre></figure>\n\n<p>So in the example below, we use calc to position the image all the way to the right then remove 50px and all the way to the  bottom then remove 20px to emulate the padding.</p>\n\n<h2 id=\"100-container-equally-distribute-multiple-containers-within-the-box-and-account-for-tweaks\">100% container, equally distribute multiple containers within the box and account for “tweaks”</h2>\n\n<p>A quite common design decision is to have multiple containers within a wrapping container. The inner containers will be a percentage width of the outer container, so are equally spaced. Given this scenario, you would usually just assign <code class=\"highlighter-rouge\">width:33%;</code> to each container and move along. But sometimes, you want extra flexibility for those containers. For example, if you want each box to have a border, you then have to take this in to account as well.</p>\n\n<p>Calc to the rescue again!</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nt\">calc</span><span class=\"o\">(</span><span class=\"nt\">100</span><span class=\"o\">%</span> <span class=\"o\">/</span> <span class=\"nt\">number</span> <span class=\"nt\">of</span> <span class=\"nt\">boxes</span> <span class=\"err\">–</span> <span class=\"nt\">total</span> <span class=\"nt\">margin</span> <span class=\"nt\">size</span><span class=\"o\">);</span></code></pre></figure>\n\n<p>This means that the 3 containers will all be equally spaced within their parent container, and account for additional box modifications such as border.</p>\n\n<h2 id=\"100-fluid-width-accounting-for-negative-margins\">100% fluid width accounting for negative margins</h2>\n\n<p>There are times when you want a child element to be 100% width of its parent container which has a negative margin. This is a pain, because the 100% width will not account for the negative margin and remove it from the calculation, thankfully calc can help:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nt\">calc</span><span class=\"o\">(</span><span class=\"nt\">100</span><span class=\"o\">%</span> <span class=\"o\">+</span> <span class=\"nt\">margin</span> <span class=\"nt\">width</span><span class=\"o\">);</span></code></pre></figure>\n\n<p>This simply makes the width a bit bigger than 100% to account for the negative value.</p>\n\n<h2 id=\"quick-and-dirty-grid-system\">Quick and dirty grid system</h2>\n\n<p>This is a development only technique and certainly isn’t advisable for a live system, but if you need to put together a quick demo or technical proof of concept for your colleagues, calc can very quickly apply a rudimentary grid system in a few lines:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nt\">calc</span><span class=\"o\">(</span><span class=\"nt\">100</span><span class=\"o\">%</span> <span class=\"o\">/</span> <span class=\"nt\">total</span> <span class=\"nt\">columns</span> <span class=\"nt\">on</span> <span class=\"nt\">a</span> <span class=\"nt\">row</span> <span class=\"o\">*</span> <span class=\"nt\">columns</span> <span class=\"nt\">it</span> <span class=\"nt\">should</span> <span class=\"nt\">span</span><span class=\"o\">)</span></code></pre></figure>\n\n<p>so we can simply do:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-css\" data-lang=\"css\"><span class=\"nc\">.col-1</span> <span class=\"p\">{</span> <span class=\"nl\">width</span><span class=\"p\">:</span><span class=\"n\">calc</span><span class=\"p\">(</span><span class=\"m\">100%</span> <span class=\"p\">/</span> <span class=\"m\">5</span><span class=\"err\">*</span><span class=\"m\">1</span><span class=\"p\">);</span> <span class=\"p\">}</span>\n<span class=\"nc\">.col-2</span> <span class=\"p\">{</span> <span class=\"nl\">width</span><span class=\"p\">:</span><span class=\"n\">calc</span><span class=\"p\">(</span><span class=\"m\">100%</span> <span class=\"p\">/</span> <span class=\"m\">5</span><span class=\"err\">*</span><span class=\"m\">2</span><span class=\"p\">);</span> <span class=\"p\">}</span>\n<span class=\"nc\">.col-3</span> <span class=\"p\">{</span> <span class=\"nl\">width</span><span class=\"p\">:</span><span class=\"n\">calc</span><span class=\"p\">(</span><span class=\"m\">100%</span> <span class=\"p\">/</span> <span class=\"m\">5</span><span class=\"err\">*</span><span class=\"m\">3</span><span class=\"p\">);</span> <span class=\"p\">}</span></code></pre></figure>\n\n",
            "url": "https://vincentp.me/blog/use-cases-for-calc",
            "date_published" : "2015-09-23 00:00:01 +0100"
        },
        {
            "id": "https://vincentp.me/blog/it-time-for-a-change",
            "title" : "It’s Time For A Change",
            "content_html": "<p>Yesterday, a tweet by <a href=\"https://twitter.com/LeaVerou/status/442809870476386304\" rel=\"external\">@leaverou</a> popped up in my stream.</p>\n\n<p>There are several layers to this tweet, which Lea may not have realised.</p>\n\n<h2 id=\"workshops\">Workshops</h2>\n\n<p>As someone who had paid for workshops in the past and also attended conferences that sit alongside them, when I attend a workshop I would expect to be paying a premium for hands on one-to-one time with an expert. I understand this is not the same thing as consultancy, you may only get 5 minutes here and there, but still some time speaking to the individual running the workshop would be expected. I would also hope to learn more around whatever subject the workshop is based, and learn a new insight or way of working I hadn’t considered before. At the very least, I would expect to solidify my current knowledge on that topic and spend some time working with others.</p>\n\n<p>I wouldn’t expect to spend time debating the talk that had happened the previous day (as Lea is suggesting here). Workshops are expensive, very expensive. Attendees to a workshop are expecting a knowledge exchange for their money and time. You teach, they listen and can ask questions, this is certainly a good format for small discussions, but not a focal point of the day. It can become frustrating when attending a workshop that gets side-tracked or one person monopolizes the teacher’s time, you literally sit there thinking how much money all the wasted time is costing you, and leave upset or frustrated.</p>\n\n<h2 id=\"further-debate\">Further Debate</h2>\n<p>So workshops are not the way to handle further debate, but Lea is right. When you attend a conference, many new ideas can be raised or radical approaches to current ideas can be offered. Often we wish to discuss these ideas with our peers and take them to the next step.</p>\n\n<p>Currently our industry is terrible at this. We have conferences, which are great for voicing ideas and getting them out in the open, workshops and hackathons for teaching and working together, but nothing to take ideas further or develop them. What we do is the same silly approach to developing ideas that mathematicians or physicists do, disappear in to a room and try to work it out on your own.</p>\n\n<p><a href=\"http://polymathprojects.org\" rel=\"external\">Polymath</a> is a project started as an effort for mathematicians to stop working individually on problems and come together to share their knowledge on previously unsolved equations. It’s already solved many equations previously deemed unsolvable and is a fantastic example of coming together using group knowledge to achieve the previously unachievable.</p>\n\n<h2 id=\"stop-being-dumb\">Stop Being Dumb</h2>\n\n<p>As an industry, we advocate rapid prototyping, agile methodologies and teamwork. But we don’t practice what we preach at all, in an effort to be <strong>“The First”</strong> often ego’s get in the way of solving problems and working together.</p>\n\n<p>Let’s piece together how we work as an industry, and look at it from a productive point of view.</p>\n\n<ul>\n  <li>New ideas are voiced on blogs and at conferences.</li>\n  <li>Workshops help teach others about approaches and techniques</li>\n  <li>Hackathons aim to produce products in a small time frame and develop skill-sets.</li>\n</ul>\n\n<p>When we lay it out like this, the missing part is quite clear. We don’t have a forum to develop ideas, we all spend time generating ideas and then hope someone will be able to take it to the next step, we sit and wait for the next magical blog post or talk to tell us how we proceed.</p>\n\n<h2 id=\"work-smarter\">Work Smarter</h2>\n\n<p>What’s needed is a lightning rod to draw people together and discuss ideas after a conference, to raise problems we all have and work smarter to solve them. You see, humans work better together when they can have <a href=\"http://vincentp.me/blog/meaningful-debate\">meaningful conversation</a> face to face. We are more industrious and iterate faster.</p>\n\n<p>In February, at Hey! Stac <a href=\"https://speakerdeck.com/vincentp/the-need-for-conversation\" rel=\"external\">I presented my vision</a> for how this type of event (I am calling Summit) could work.</p>\n\n<h2 id=\"the-pitch\">The Pitch</h2>\n\n<p>What I am proposing in the slides is a 2 part idea, comprised of a site and day event. It works as follows:</p>\n\n<h2 id=\"the-site\">The site</h2>\n\n<p>The site would be a mechanism for people to raise questions and ideas that warrant further discussion. These are categorised and up voted to show demand.</p>\n\n<p>Think of it as a mash-up between <a href=\"http://stackoverflow.com\" rel=\"external\">Stack Overflow</a> and <a href=\"http://share.blog.us.playstation.com/ideas/status/ideas-in-action/\" rel=\"external\">Sony Share</a>. What we are doing here is peer reviewing the suggestions and making sure the most needed, desired and valid ideas float to the top.</p>\n\n<h2 id=\"summit\">Summit</h2>\n\n<p>Summit events are run following a standard format, whereby they select a skill type to base the event on. For instance, they would only tackle CSS based questions. This both allows the attendees to understand if they would be able to contribute (a die hard Ruby developer may have little interest in attending a CSS based event) and ensure we are focusing our skill in one area at a time.</p>\n\n<p>The organiser can pick a list of questions from the Summit site to tackle for the day.</p>\n\n<p>When attendees arrive they are arranged in to small groups at random <sup><a href=\"#groups\">1</a></sup> The organiser will then set the groups the (same) first question to solve.</p>\n\n<p>Groups are then assigned a fixed tight time schedule to deal with this, say 30 minutes. Once the 30 minutes are up, a spokesperson for a couple of the groups will do a quick show and tell, on what they have achieved so far. After the quick presentations, people return to their groups and tackle the problem again for another 30 minute sprint.</p>\n\n<p>There are many nuanced ways as to why I have devised this format, let me break them down:</p>\n\n<ul>\n  <li>We should be practising what we preach, and learning by rapid prototyping. So we should be utilising a clever try and throw-away approach to reach a suitable solution as quickly as possible.</li>\n  <li>Enforcing the strict timings ensures no group can spend too long going in the wrong direction before getting feedback or seeing what others have done.</li>\n  <li>We are building a feedback mechanism in to a rapid design approach</li>\n  <li>We are staging many meaningful conversations at one time. It is easy to have a meaningful conversation when there are fewer people involved at one time (hence the groups). This means we try out many different approaches all at once. Rather than one after the other, thereby shortening the time it takes to reach a viable solution.</li>\n  <li>Sharing with others that you have failed in the last 30 minute sprint and what you did wrong still helps others avoid pitfalls or exclude another possible approaches that a group may be considering. So no time is ever wasted.</li>\n  <li>When a group begins to hone in on a good solution others are peer testing this approach as they go.</li>\n  <li>Everyone is involved all the time.</li>\n</ul>\n\n<p>At the end of the day, all the problems solved or part-solutions devised are uploaded to the site, with all attendees names attached. This way we are allowing unsolved questions and progress to be fed back to the site and help others who may be working individually on the solution as well.</p>\n\n<p>In essence, what we are doing is creating a smart, productive, feedback loop, with peer review built-in, we raise questions on the site, filter them and disseminate them to the events taking place (worldwide). The events then feedback to the site with answers and development for all to see. Anyone can get involved and dedicate as much or as little time as they have but nothing should be lost, or contribution should be undervalued, because it’s inherently a positive productive format focused on problem solving.</p>\n\n<h2 id=\"taking-summit-to-its-conclusion\">Taking Summit To It’s Conclusion</h2>\n\n<p>Taking the idea further and my ultimate aim for the idea would be to build the site as an open source project. Anyone could download the code and modify it for their problem type, and upload it to their server. It could be any industry,  not just web standards, imagine if this was how we decided political policies, or made decisions in any industry. The site then allows events to take place and filter results back to it. If you ran a large worldwide company, you could even run your own Summit events and site internally to raise problems with the company or fix existing issues in a positive format.</p>\n\n<p>We work smarter, when we work together. That’s why I am not arrogant to believe what I have proposed being the perfect solution, or indeed think I can make this work better all on my own. I am in the process of writing the site specification and event format. Once I have the general format, I will put it out on my GitHub for general feedback and suggestion ideas.</p>\n\n<p>Summit, its site code and format is intended to always be open source and open for all to hack and use as they see fit. <del>If you are interested in learning more you can ask me yourself on Twitter @vipickering or follow @summit_event for updates on our progress, there should also be a site soon!</del></p>\n\n<p>Let’s make the future great together.</p>\n\n<h2 id=\"references\">References</h2>\n\n<ol>\n  <li><span id=\"groups\"></span>I have a reliable method to combine making friends and creating groups that will be revealed when the documentation is complete.</li>\n</ol>\n\n",
            "url": "https://vincentp.me/blog/it-time-for-a-change",
            "date_published" : "2014-03-10 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/meaningful-debate",
            "title" : "Meaningful Debate",
            "content_html": "<p>Recently I read the article <a href=\"http://coding.smashingmagazine.com/2013/11/20/reinventing-the-tech-conference-experience/\" rel=\"external\">Reinventing The Tech Conference Experience</a> on Smashing Magazine, and it felt like a classic case of mis-diagnosing a problem.</p>\n\n<p><strong><em>Have you ever been to the doctor convinced you had a problem in one part of your body only to be told it is actually originating somewhere else?</em></strong></p>\n\n<p>The original article posited the statement that frequently conference participants are unhappy with the event they attended citing:</p>\n\n<blockquote>\n  <p>“…The content or the interaction<br />could have been better in some way”.</p>\n</blockquote>\n\n<p>In order to solve this problem the author (Wesley Hales) has created some open source software called Onslyde which allows you to vote in real time as the speaker addresses the audience. Let me be clear, I wholeheartedly appreciate this effort, in-fact my hope, is that my response to this conversation will help re-inform the software perhaps in a direction I haven’t considered, or spark more debate and inspire others to tackle this issue in a unique way. The conversation has just begun and we have a lot to talk about.</p>\n\n<p>My rebuttal has a simple premise, I don’t believe real-time sentiment tracking is the right way forward, but in order to frame my analysis to the original problem posed by Wesley first we need to to apply some design thinking to what is happening when a speaker is on stage addressing the audience.</p>\n\n<p>Consider the question:</p>\n\n<p><strong>Does the problem as stated represent the problem we should observe?</strong></p>\n\n<p>When a speaker addresses the audience, they are starting a 1 to many conversation, so in order to diagnose the problem let’s first understand how a conversation works and at what points it breaks down.</p>\n\n<p>There has been a great deal of research done on the conversation model, in particular Dr Paul Pangaro has done a <a href=\"http://vimeo.com/43677920\" rel=\"external\">large amount of work</a>in this area, de-constructing the effective conversation model in to it’s constituent components so that we can understand and write software to have meaningful conversation.</p>\n\n<p>Dr Paul Pangaro uses the acronym <strong>C-L-E-A-T</strong> which is broken down in to these parts:</p>\n\n<ol>\n  <li>Context</li>\n  <li>Shared Language</li>\n  <li>Exchange or Engagement</li>\n  <li>Agreement</li>\n  <li>Action or Transaction</li>\n</ol>\n\n<p>Let’s just recap over those:</p>\n\n<h2 id=\"context\">Context</h2>\n<p>When you strike up a conversation you need to understand the receivers context. If your friend was in a meeting, and you gave them a call they would probably not pick up, because at this precise point in time your conversation isn’t applicable to them. Both participants need to share the same context for a meaningful conversation to take place.</p>\n\n<h2 id=\"shared-language\">Shared Language</h2>\n<p>Conversation participants need to both speak the same language. This doesn’t just equate to a spoken language like English, French or German, but is also related to the way you think about the world. For example, when you send a message or speak with a friend you already infer some context because you understand their sense of humour or position on the topic to be discussed before beginning the conversation, a complete stranger does not bring with them this shared language so you have to establish a baseline.</p>\n\n<h2 id=\"exchange-or-engagement\">Exchange or Engagement</h2>\n<p>You have to have an exchange or be engaged in what the other person is saying in order for the conversation to be meaningful. If one of the participants is dismissive of what is being said, or not paying attention then the conversation quality degrades.</p>\n\n<h2 id=\"agreement\">Agreement</h2>\n<p>A productive conversation ends with you agreeing on something, even if that point is to agree to disagree.</p>\n\n<h2 id=\"action-or-transaction\">Action or Transaction</h2>\n<p>The conversation should end by deciding between the participants on an agreed action.</p>\n\n<h2 id=\"sorry-im-not-that-sentimental\">Sorry I’m Not That Sentimental</h2>\n\n<p>When we break down the 1 to many conversation a speaker initiates like this we can quickly identify that the speaker and the audience share context, but when attendees cite:</p>\n\n<blockquote>\n  <p>“…The content or the interaction<br />could have been better in some way”.</p>\n</blockquote>\n\n<p>The conversation has broken down because they do not have a shared language. It is true that we would expect the speaker and audience to share some common language, but it’s often the case at speaking events with people from many disciplines not to share the same ability level on a given topic, the larger the audience the greater this is to occur, thus some of the audience immediately feel a disconnect and cannot re-engage with some talks.</p>\n\n<p>While discussing this subject, it seems reasonable to conclude that this is why popular web celebrities are often better received at speaking events. Many of the audience participants are already familiar with “where they are coming from”, they have read the speakers blog, perhaps seen them on web videos or heard them on podcasts. When you attend a conference with this prior knowledge of a speaker you bring your frame of reference with you to the talk.</p>\n\n<p>In this environment the popular speaker has far less work to do in establishing a shared language, hence the audience reaction that it was a more “quality engagement” and the event co-ordinators belief that the celebrity is a “bankable” speaker worth hiring in future. This starts to become a self perpetuating loop that’s hard to break which actively dismisses a section of people who may have other valid topics to raise and put forward but rarely get the chance because they are less likely to draw the crowds.</p>\n\n<p>My issue with sentiment tracking is that it has no understanding of the context of a person’s response to the question, and no way to frame the questions asked by the speaker that will be received and understood by the audience.</p>\n\n<p>Sentiment tracking responses are boiled down to binary choices. These binary choices are made by the speaker as they construct their talk, so by this very nature they are unintentionally directing the conversation down chosen areas and routes. In essence, they are rounding off the corners and controlling the audience responses so they can reduce the chance of a negative reaction.</p>\n\n<p>This is reducing the quality of the conversation to be had and alienating those who don’t respond with the majority. History is littered with great minds that have disagreed on a commonly held belief at the time and been ousted by their peers only to have their opinion gain favour long after death.</p>\n\n<p>If we are to truly have great speaking events, then we should never be openly dismissing others opinions without fair debate first. We should be working hard to establish a great conversation with our peers and find common ground on which to build on. Not boiling down responses to binary options and alienating those who disagree.</p>\n\n<h2 id=\"how-do-we-make-conferences-great\">How Do We Make Conferences Great?</h2>\n\n<p>So now we have a better understanding of what is happening when we stand and speak in-front of a crowd who can we actually improve the experience?</p>\n\n<h2 id=\"interference-on-the-line\">Interference On The Line</h2>\n\n<p>One of the key reasons why audience members can feel disconnected lands at the feet of the event organisers. It has become quite common these days for events to feature a wide range of speakers from several disciplines. The economic theory behind this is sound. If you cover various topics at your event then you can attract the widest audience, but when I see these events I often question to myself.</p>\n\n<blockquote>\n  <p>“Who is this event actually for?”</p>\n</blockquote>\n\n<p>This often equates to something like: 1 mobile designer, 2 JavaScript gurus, 1 CSS expert, a wireframing advocate and a keynote by someone in an alternative field.</p>\n\n<p>In the last few years, the industry on the web has changed dramatically. When I began as a “Web Designer” in 1999, I was simply expected to “do it all” Design, Typography, Wireframing, HTML, CSS, JS and PHP. These languages have expanded and the understanding within them that most people consider these disciplines completely separate, in fact many of the younger people working on web technologies simply don’t know some of these languages or disciplines at all. Every day I hear a new job title, that describes this language and that “thing” but not that other “thing” you might think it does.</p>\n\n<p>If our job landscape is expanding rapidly to such a degree why are we holding conferences where the participants will not be engaged, interested or able to share the same language as the speaker, how can we hope to get meaningful conversation as a result?</p>\n\n<p>Surely it would be better to ensure when creating a conference that it is for a particular goal within a profession or language type?</p>\n\n<p>Selecting a group of speakers around a shared set of problems to solve, will encourage like minded attendees, this massively reduces the issues around a shared language vocabulary, it promotes great thinking in a particular field and focuses the debate on real issues to solve. We can achieve a lot in a short space of time by saying very little. But when we talk about everything at once the problems are too vast and we end up saying nothing at all.</p>\n\n<h2 id=\"not-every-problem-is-a-square-peg\">Not Every Problem Is A Square Peg</h2>\n\n<p>The second problem I have identified is the ordinary speaker format. When a speaker gives a talk on a particular viewpoint it is nearly always a fixed time slot of an hour. This works neatly in to a schedule and package to sell to the public, but not every point needs an hour to be raised and framed. It’s been my observation over the years that when brief points are raised, at smaller speaker events, say under 30 minutes, that the audience is far quicker to offer opinion and strike up a conversation after the event than an hour long talk. I think this stems from the amount of information needed to digest and form a cohesive response. When information is fed to us in bite sized portions we are able to process it quicker and draw conclusions based on our existing knowledge. It seems imposing such a long period of time causes the speaker not to focus in on the key issues that are important to their point and as a result introduces many ideas in the talk duration where audience members can get lost or fall behind the discussion.</p>\n\n<p>Rapid prototyping has become the standard way to try out ideas and test ideas. It yields positive and negative feedback quickly and in a manageable fashion encouraging all parties to work for the same goal. You might not realise it, but when you engage in rapid prototyping with a client you are actually establishing a conversation with them that follows the <strong>C-L-E-A-T</strong> metaphor, you’re having a meaningful conversation.</p>\n\n<p>Smaller bite-sized tasks follow the same principle, get smaller ideas out there and get feedback quicker. Smaller ideas can be easily shaped and expanded in to much greater theories and solutions as more people join the discussion.</p>\n\n<h2 id=\"one-talk-is-not-a-debate\">One Talk Is Not A Debate</h2>\n\n<p>Following on from the thought that 1 hour long talks are not always the most constructive way to begin a discussion, we also need to consider that many discussions need to be had to arrive at a satisfactory conclusion. Layers of conversation are how humans come to accept things in the world, it’s our model for sharing knowledge and agreeing on things, weeding out the bad ideas and seeing what’s left standing.</p>\n\n<p>If we want to have meaningful conferences I think we need to:</p>\n\n<ul>\n  <li>Reduce the number of people involved in the conversation at one time.</li>\n  <li>Ensure those involved understand the context and language of the conversation.</li>\n  <li>Re-consider the length of speaking time versus the issue being raised.</li>\n  <li>Encourage audience participation.</li>\n  <li>Give the speaking day a common goal or theme.</li>\n</ul>\n\n<p>Considering these rules let’s begin to discuss original ideas for a different speaking format that could change the way we discuss our industry.</p>\n\n<p>Instead of numerous speakers on a day how about only having two speakers? One in the morning, the other in the afternoon.</p>\n\n<p>The format would involve the speaker giving a talk under 30 minutes on the issue to be discussed that morning. After the talk, participants are split in groups and discuss the issue raised, forming their own group opinion. In the afternoon, the second topic is started.</p>\n\n<p>The point of doing this is to:</p>\n\n<ol>\n  <li>Try and ensure context by having a singular topic, so those attending will be familiar with the chosen field.</li>\n  <li>Decrease the number of people having a discussion at one time so it becomes quicker to establish quality conversation and reach a conclusion.</li>\n  <li>Rapidly exploring multiple avenues in a brief space of time.</li>\n</ol>\n\n<p>By having many small debates at once, we are generating many outcomes to a problem to test while reducing the problems around the audience losing context or understanding the shared language.</p>\n\n<p>After the groups opinions are formed, a speaker is elected from each to put forward their group’s opinion. Once all the groups opinions have been heard, they will inevitably spark further debate where the attendees can return to their groups and discuss it further and try things out.</p>\n\n<p>The findings of the day can be shared with the wider community online and further discussion or speaking events can be held to continue the debate.</p>\n\n<p>It’s time we re-evaluated the current conference scene and began to consider additional formats, let’s kick off this conversation and find a more meaningful way of communicating together.</p>\n",
            "url": "https://vincentp.me/blog/meaningful-debate",
            "date_published" : "2013-12-18 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/a-smarter-jekyll-workflow",
            "title" : "A Smarter Jekyll Workflow",
            "content_html": "<p>I selected <a href=\"http://jekyllrb.com\" rel=\"external\">Jekyll</a> as the platform for my blog after trying out many other options. It’s a great blogging platform, and its balancing between code flexibility and simple blogging software really hits my sweet spot.</p>\n\n<p>One of the major selling points with Jekyll, is the tight integration with <a href=\"http://pages.github.com\" rel=\"external\">GitHub Pages</a>. The easy deployment and removal of dealing with terrible hosting companies, FTP servers and all the usual deployment issues are a huge boon, especially when most people blog in their spare time. The last thing you want to deal with at 1AM is a server that has exceeded its bandwidth and gone down.</p>\n\n<h2 id=\"life-is-always-messy\">Life Is Always Messy</h2>\n\n<p>The problem where this falls down is around the separation of development and live environments, it’s fairly common to be working locally on material you are uncomfortable publishing to live because it isn’t finished while working on a patch for a bug. During your free time you want to be productive because you get so little of it, so unlike your day job you might blog a bit, then code a bit, whatever takes your fancy.</p>\n\n<h2 id=\"all-your-plans-unravel\">All Your Plans Unravel</h2>\n\n<p>The recommended approach for using Jekyll with GitHub is to do all your development on a separate branch because your site is hosted on the master branch.</p>\n\n<p>The theory goes that you develop a separate branch, but only commit the compiled code in to the master branch to be served. But when you start to apply that to a personal time-sensitive environment unless you remain incredibly disciplined, having eleventy-billion branches on the go becomes the norm as you try things out, some things work, some gestate and others are failed experiments, but it does become a headache and will inevitably lead to hours of manually merging code later.</p>\n\n<p>It starts to feel like the recommended approach is a bit of a bastardization of the GitHub branching methods to satisfy two environments on one repository.</p>\n\n<h2 id=\"time-to-fix-this\">Time To Fix This</h2>\n\n<p>I hate bad workflows, and I do not want to give up my ability to play with code and release often and still blog without getting tangled in which branch needs to be merged in what order to, ugh <strong>kill me now</strong>.</p>\n\n<p>So I came up with a simple stripped down way to have my cake and eat it.</p>\n\n<p>I tried quite a few approaches to making this work (even looking at git sub-modules) but ultimately settled on two repos. Now I know that make some developers frown to have your code in two places but bear with me the logic is reasonably sound and it makes things much easier to manage.</p>\n\n<p>I have a development environment, this is my standard Jekyll environment and repository. I created a sub folder called site and run Jekyll here so that I can add elements to the repository (such as a README that will not get compiled by accident). In here I develop locally, play with code and try things out, I commit often but I don’t have to worry if I swap and change between an unfinished blog post, code fix, update or anything else, I just write and commit, nothing gets lost, I can pick it up on another machine and carry on without getting myself tangled in knots.</p>\n\n<p>My second repository is my live site. This is my GitHub pages site and only contains the compiled live code, plus things like a CNAME file and various live only files.</p>\n\n<p>The final piece to the puzzle is that I have a very simple <a href=\"#automater\">Automater</a> script that watches the _site compiled folder and copies the data in this to the live site repository. Automater is one of those tools that is quite powerful and often gets overlooked. It worth learning it can save you quite a lot of time in the long run, think <a href=\"http://gruntjs.com\" rel=\"external\">Grunt</a> but for system tasks.</p>\n\n<p>When it comes to deploying code from dev to live, I use Jekyll’s inbuilt method of hiding files on compile. If you are not sure how this works all you simply need to do is add an underscore in-front of each file or folder you don’t want live, these are then ignored by Jekyll when compiling.</p>\n\n<p>Once I have done this I simply delete all the Jekyll files from the live repository, regenerate the site and commit.</p>\n\n<p>The entire process becomes very quick, it keeps your commits clean and targeted so you are always aware what is and isn’t in your committed code and not a branch swap in sight, everything is in the master. The beauty of this approach also means if you really want to use a branch on the development repository you still can, it’s not getting in the way of your usual use of GitHub it’s just abstracting the live deploy from the branching mess you had to begin with and giving you the freedom to use GitHub to it’s full power.</p>\n\n<p>You also get the added bonus that your live site is self-contained so should you ever decide to not host it on GitHub you can just upload it where ever you like and keep using your dev environment set up as is.</p>\n\n<h2 id=\"automater\">Building The Automater Workflow.</h2>\n\n<p>If you haven’t used Automater before on a Mac, it allows you to automate (duh) repetitive system tasks and one of these is to watch files and then perform an action. Its really easy to set-up. So if you want to watch a folder and automatically copy to another location, just follow these steps:</p>\n\n<ul>\n  <li>Open the Automater in Applications</li>\n  <li>Go To <code class=\"highlighter-rouge\">File -&gt; New</code></li>\n  <li>Select “Folder Action” and press choose.</li>\n  <li>In the bar across the middle it should say “Folder Action receives files and folders”.</li>\n  <li>click the Choose Folder drop-down and select your <code class=\"highlighter-rouge\">_site</code> folder location in your Jekyll development repository.</li>\n  <li>In the top left there is a search field type “copy” in the field and add the “Copy Finder Items” to your workflow.</li>\n  <li>It should appear on the right, workflows start at the top and flow down the screen, so if you choose to customise this later adding a workflow above this would happen before our action, below would be after the action occurred.</li>\n  <li>In  “Copy Finder Items” select your live repository, and tick “Replace existing files”.</li>\n  <li>Go To <code class=\"highlighter-rouge\">File -&gt; Save</code></li>\n  <li>Your done. Try copying any file in to your <code class=\"highlighter-rouge\">_site</code> folder and watch it magically copy across on its own.</li>\n</ul>\n\n<p>This will continue to run on the folder until you disable it. You can disable it by browsing to the folder the action is applied to and right clicking and selecting “Folder Actions Set-up…” Then un-ticking, the box next to the chosen folder.</p>\n",
            "url": "https://vincentp.me/blog/a-smarter-jekyll-workflow",
            "date_published" : "2013-11-20 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/strano-popup",
            "title" : "Strano Popup Restaurant",
            "content_html": "<p>Strano (meaning strange in Italian) is a relatively new concept restaurant idea that takes place at a secret location every few months in Leeds. The theory is that eating out should be an event and bring all the theatre that comes with that. The set-up is really great, you pay a fixed price for your dining evening, but you have no clue what the food will be, only that you won’t have eaten it before. There is always a general theme that the evening will follow, but beyond that it’s a jump in to the unknown. FUN!</p>\n\n<p>My partner and I are big foodies and love trying new eating experiences. So when I got wind of Strano on Twitter I pounced on some tickets as soon as they were available and it didn’t disappoint.</p>\n\n<p>The night took place at Jam in Headingly, we were greeted at the door and escorted to a fantastic make-shift bar filled with an eclectic mix of suitcases, plush sofas and stone tables. The sound of Bossa Nova in the air, also earned them bonus points.</p>\n\n<figure>\n  <figcaption>The whole event had a fantastic decor and set the tone</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-11-19/bar.jpg \" width=\"612\" alt=\"Decor\" />\n</figure>\n\n<p>At the bar, we had a choice of some interesting wines, fantastic beers and sparkling wines. I opted for some Madonna Pils, an Italian take on Czech Pilsner which was a total triumph, much softer than traditional Czech lager but still had the punch. My partner opted for a glass of sparkling wine which also went down very quickly!</p>\n\n<figure>\n  <figcaption>beer served in wine bottles. I could get used to this.</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-11-19/pils.jpg \" width=\"612\" alt=\"Madonna Pils\" />\n</figure>\n\n<p>After drinks, <a href=\"http://www.youtube.com/embed/uqvTK-PE3jA\" rel=\"external\">we were shown a short video</a> to illustrate the theme of the evening, which was clearly the inspiration for our first course.</p>\n\n<p>We were then shown to our seats ready for the theatre to begin.</p>\n\n<figure>\n  <figcaption>I liked the mobile phone rests, a fun addition.</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-11-19/phone-rest.jpg \" width=\"612\" alt=\"Quirky Phone Rests\" />\n</figure>\n\n<p>Each course was served along with accompanying music, which was a fun addition.</p>\n\n<h2 id=\"dont-bite-the-hand-that-feeds-you-2\">Don’t Bite The Hand That Feeds You #2</h2>\n\n<p>The first course was a fun twist on the previous events course by the same name, where food was served on <a href=\"http://ataleoftwosittings.wordpress.com/2013/09/21/pop-up-evening-strano-leeds/\" rel=\"external\">porcelain hands</a>. On each table were a bib and a plastic glove, when the food arrived the waiter smiled and with a wink of the eye said “You Know What To Do”. And with that walked off. It was around this time we realised we didn’t have any cutlery and they weren’t going to bring us <em>any</em>.</p>\n\n<p>Once we had put on our bibs and plastic gloves we got stuck in to the first course. It was a bowl of spaghetti, topped with sweetbreads and lamb belly. Incredibly soft. I’ve never eaten spaghetti by hand before and it was quite a fun way to set the tone for the evening.</p>\n\n<p>The rest of the evening we was allowed to use cutlery, which was probably for the best!</p>\n\n<h2 id=\"pane-di-risotto-milanese\">Pane Di Risotto Milanese</h2>\n\n<p>To follow the first course, we were served Pane Di Risotto Milanese on a long tray to share.</p>\n\n<figure>\n  <figcaption>Colaturo butter, fresh bread and a bone marrow topped with risotto milanese bread.</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-11-19/bread.jpg \" width=\"612\" alt=\"Colaturo butter, fresh bread and a bone marrow topped with risotto milanese bread.\" />\n</figure>\n\n<p>This was the most “traditional” course of the evening, but still had some fantastic flavour combinations. It consisted of freshly baked bread. Colaturo butter and bone marrow topped with risotto milanese bread. I had never had colaturo butter before and the waiter informed me it was a traditional Roman recipe, which contained anchovy drainings.</p>\n\n<h2 id=\"quatroruote-tunabanana-44\">Quatroruote (Tuna/Banana 4×4)</h2>\n\n<p>Next up was the course I think everyone in the room raised an eyebrow at, it was certainly one that divided the room.\nWe were served seared tuna with banana 4 ways.</p>\n\n<figure>\n  <figcaption>Tuna and Banana. Together at last?</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-11-19/tuna.jpg \" width=\"612\" alt=\"Tuna and Banana. Together at last?\" />\n</figure>\n\n<p>Plain banana, banana chocolate, banana fritter, and banana sorbet.\nThe tuna was cooked to perfection and melted in the mouth, I have to admit I didn’t enjoy the plain banana, banana chocolate or sorbet with the tuna, and neither did my partner… However, the fritter did win me over, the extra sweetness added more to the combination and if ever banana with tuna is to work I’d pursue that avenue, but I guess the verdict is still out.</p>\n\n<h2 id=\"cinema-paradiso\">Cinema Paradiso</h2>\n\n<p>Course number 4 was probably my favourite of the night, it was a ham hock ravioli, chicken liver pate, asparagus and asparagus veloute served with popcorn and a toffee sauce.</p>\n\n<figure>\n  <figcaption>Ham hock ravioli</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-11-19/ham-hock.jpg\" width=\"612\" alt=\"ham hock ravioli chicken liver pate, asparagus and asparagus veloute served with popcorn and a toffee sauce\" />\n</figure>\n\n<p>The combination at first seemed a bit out there to me until my rather clever partner pointed out that honey glazed ham is a regular staple, so it’s not too big a jump to pair ham, pasta and toffee together. The porcorn added a bit of texture to the dish that was welcome.</p>\n\n<h2 id=\"the-ambassadors-venison\">The Ambassadors Venison</h2>\n\n<p>With <strong>that</strong> title what else could be coming? Course 5 was venison cooked to perfection accompanied by wilted greens, parsnip puree, hazelnuts and creme caramel…And a deep fried Ferraro Rocher.</p>\n\n<p>My partner, originally from Scotland liked the idea of the twist on a deep fried Mars bar, but wasn’t the biggest fan when it came to eating it, she complained it was too sweet. I on the other hand loved it, I’m not entirely sure if it went with the rest of the dish, which was buttery smooth perfection but it was a fun distraction and certainly part of the reason why I came.</p>\n\n<h2 id=\"the-elvis\">The Elvis</h2>\n\n<p>The final course of the night was a desert made from all the things that killed Elvis, served to the track “Easy Come Easy Go” it was ice cream flavoured with peanut butter and topped with a rasher of crispy bacon, strawberry and toffee jellies, peanut butter cubes and croutons. It was a fantastic end to the night.</p>\n\n<h2 id=\"strano-links\">Strano Links</h2>\n\n<ul>\n  <li><a href=\"https://twitter.com/stranoleeds\" rel=\"external\">Twitter</a></li>\n  <li><a href=\"https://www.facebook.com/StranoLeeds\" rel=\"external\">Facebook</a></li>\n  <li><a href=\"http://ataleoftwosittings.wordpress.com/2013/09/21/pop-up-evening-strano-leeds/\" rel=\"external\">Last Month’s Event</a></li>\n</ul>\n",
            "url": "https://vincentp.me/blog/strano-popup",
            "date_published" : "2013-11-19 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/forefront-leeds",
            "title" : "Forefront Leeds",
            "content_html": "<p>Yesterday I spoke at <a href=\"http://forefront.cc/forefront-no1-18th-november-2013/\" rel=\"external\">Forefront Leeds</a> a recent speaking event for frontend developers in the Leeds area, run by Russell Poulter of <a href=\"http://flodesign.co.uk\" rel=\"external\">Flodesign</a>.</p>\n\n<p>Russ chose a great place for the venue. <a href=\"http://www.brewerytapleeds.co.uk\" rel=\"external\">The Brewery Taps</a>, which is only a short walk from the station.</p>\n\n<p>There was really flexible format to the event, 3 speakers each has a maximum of 15 minutes to talk about anything frontend related, then some beers and socialising. It’s a format I found worked really well on the night and I met quite a few new people, I also found the talks were a great way for people who might be a little nervous to feel they could approach you and strike up a conversation, based around what you have just heard.</p>\n\n<p>I spoke first on Structured Data, 15 minutes isn’t a huge amount of time to teach people too much so I concentrated on spending the time introducing people to the ideas around Structured Data, it’s concepts and the technologies involved, hopefully I gave some of the attendees a starting point for them to grow their understand and confidence in using Structured Data in the future.</p>\n\n<p><a href=\"http://speakerdeck.com/vincentp/a-brief-overview-on-structured-data\" rel=\"external\">Here are my slides if your interested</a></p>\n\n<p>Next up was <a href=\"http://twitter.com/_andyfitch\" rel=\"external\">Andy Fitch</a> of <a href=\"http://parall.ax\" rel=\"external\">Parallax</a> who gave a talk about the processes they use internally at Parallax. It always interesting to hear how others work and Andy did a great job explaining it all.</p>\n\n<p>To close the talks, <a href=\"http://twitter.com/stanton\" rel=\"external\">Paul Stanton</a>gave a great introduction to <a href=\"http://bower.io\" rel=\"external\">Bower</a> Twitters automated package manager, which is a fantastic piece of software.</p>\n\n<p>It was a great opening event, and a fantastic start to something I hope will go on for quite some time.</p>\n",
            "url": "https://vincentp.me/blog/forefront-leeds",
            "date_published" : "2013-11-19 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/disarming-problem-clients",
            "title" : "Disarming Problem Clients",
            "content_html": "<p>As designers, we go through quite a hazing when setting out on client work. At first, it seems exciting, all the ideas exploding in your brain, all the possible things you could do, all those opportunities. And then reality strikes, you present your ideas to the clients and they don’t like them, furthermore as the process goes on the clients opinion and yours move further apart, sometimes the relationship even breaks down entirely, by the end you wonder why you should even bother at all. Some time passes and once the dust has settled, you convince yourself the customer was in the wrong all along and move on to the next project.</p>\n\n<p>Sound familiar? This is a pattern some designers never seem to break out of. Others repeat this process every so often, but not many manage to avoid it all together. The reality of the situation is some clients are problematic, but most aren’t. They’re great people who want the best for their product or service.</p>\n\n<p>Some of these problems stem from the creative process, it’s hard to grasp by those who are not creative, they struggle to understand it. This is compounded further by the fact the thing you are designing is also a virtual object (sites are the worst for this).</p>\n\n<p>Human beings have evolved over centuries to understand a thing by how it feels, how much it weighs and how often they have seen it. These factors help an individual subconsciously weigh up a thing and determine its worth to them. If you built them a physical object made of carbon fibre that was really tall, they could understand where the money was spent in achieving the task because they could see the physical size of the object and all the rare materials used in its construction. Defining something virtual is much harder, much of the work is hidden away, that’s part of the reason why designers show wire-frames and mock-ups and anything else during the creative process to try to help anchor the ideas and creative thought in “worth”.</p>\n\n<p>While I believe we need to touch on points with the client on showing them the design process, they often don’t really understand wire-frames and can’t picture in their head (as you can) the vision of what is unfolding. That’s why for years mock-ups have been the touch point between clients and designers, the closest thing the designer could use to demonstrate the idea, without delivering the project. Obviously mock-ups don’t tell a larger part of an interactive piece leading to much more work down the line on the implementation and that’s why we now use many other tools like wire-framing and interactive prototypes to try to poly-fill these gaps and reassure the client:</p>\n\n<blockquote>\n  <p>It’s going to be all right I haven’t spent your money with nothing to show for it at the end.</p>\n</blockquote>\n\n<p>My issue with these processes is that they are tools for us, not the client. More often than not they help us refine our idea but to a non-creative they can be just as mind boggling as showing them a static mock-up. All these things we do to help ourselves aren’t really helping the client understand the process, they are more about us spending their money wisely (which is a good thing) but they don’t solve the problem of understanding.</p>\n\n<p>This is why clients get nervous, their grasp on the understanding of what is happening unsettles them, they remember how much money they have paid for this process (which is probably a lot to them) and they panic. At this point they begin making suggestions in order to try to bring some control back to them, they feel once they are in control that they will get what they want, of course once they wrestle this control back it inevitably spins further out of control, a monstrosity is born and communications break down, mission failed.</p>\n\n<blockquote>\n  <p>This is not what we wanted to happen, but it happens too often.</p>\n</blockquote>\n\n<p>Speaking to clients is a skill, some designers are good at this, some are not. But under either circumstance you need to understand how to:</p>\n\n<ul>\n  <li>Handle issues when they arise.</li>\n  <li>Remain in control of the creative process and still let the client feel in control of the project.</li>\n  <li>Remedy the situation where both yourself and the client disagree on how to solve a problem.</li>\n</ul>\n\n<p>Let’s look at how to solve these issues:</p>\n\n<h2 id=\"handle-issues-when-they-arise\">Handle Issues When They Arise</h2>\n\n<p>When an issue happens, and at some point it will, I give it a priority, I stick with low or high (keep it simple). If it’s a low priority issue unless it’s going to hold anything up I schedule it for the next call/meeting with the client. It’s important not to worry the client unnecessarily it will shake their confidence that you can deliver.</p>\n\n<p>If it’s a high priority issue, you next need to assess the urgency, can you sit on it for 10 minutes? It’s amazing how many issues that are urgent get escalated to a client, and then disappear moments later because a mistake was made or something mis-understood. Check through the issue again before contacting the client, and make sure before speaking to them to boil it down to a concise problem with options for answers and a recommended approach, don’t call them if you are panicked or agitated, calm yourself down and show your are in control but the client has the power to make the final decision.</p>\n\n<p><strong>For example:</strong></p>\n\n<p>We have noticed that on mobile the contact form for the clients site doesn’t fit.</p>\n\n<p>Break the problem down in to the options available and do your best to remove as much tech speak as is necessary unless the client is really comfortable with it, like so.</p>\n\n<p>We can either:</p>\n\n<ul>\n  <li>Re-design the form to fit. This will impact the delivery by 1 day, and incur a small fee.</li>\n  <li>Remove the form completely on mobile, and replace it with a clickable email link. This will remove the problem entirely and not influence the delivery date, but will mean you receive free form emails that don’t fit the required fields on the site.</li>\n</ul>\n\n<p>Next consider each option and make a recommendation for the approach, be brief and justify your reasoning, Keep it logical, you have arrived at this recommendation because in your professional opinion you have weighed up the options and made a decision, which is partly what the client is paying you for:</p>\n\n<p>We would recommend re-designing the form and give the users the same experience off-line and on-line, reducing confusion for your workforce over mixed email types. If costs are a problem at this time, we could remove the form at launch and use one of your support days to implement it after release.</p>\n\n<p>Notice at the end of the response I also gave the client a way to have their cake and eat it. This is the approach I actually expect them to take, but it is also sub-consciously doing something else. It’s getting the client use to change, encouraging them to think it’s OK to make a change to a live site. It sends the message that change can and will happen on the new site and that’s OK.</p>\n\n<p>Not only does this now show you are in control of the project but it keeps the client feeling that they are are also in control  and that they are affecting change and contributing, they are less likely later to try and interject something to assert control because you are presenting facts and options and doing your best to extract the tech speak.</p>\n\n<h2 id=\"project-control\">Project Control</h2>\n\n<p>This is the hardest thing to change in your process, because it’s changing your own behaviour, something you must work hard at to change. It is about your personal way you conduct business.</p>\n\n<p>You have to remember at all times that you being paid by the client to achieve a given task. If you have a high horse, get off it you can have an opinion but don’t get opinionated. Pick and choose battles to win, you will rarely (if ever) get everything your way, and that’s OK. You want to build a working relationship with this client, so if they make a decision you disagree with or force you down a path you aren’t comfortable with, unless it’s a moral or legal issue you should view it as a point to update later. Try to think, all they are doing is exploring in their mental process the option they would like to pursue. You may be further down this process than them. In the end they are creating more work for you to do further down the line, so try not to get too hung up if it happens, your still winning too. Of course there is always the possibility that they are right and you are wrong, so don’t be closed to that outcome either!</p>\n\n<h2 id=\"solving-disagreements-in-a-way-that-everybody-wins\">Solving Disagreements In A Way That Everybody Wins</h2>\n\n<p>My observations over the years on dispute is that first issues take the form of differences of opinion, this is OK, people view things differently and often there is more than one way to tackle a problem. The difference of opinion sometimes then escalate and can causes conflict because unless one party quickly cedes to the other on the approach that will be taken, both parties argue their way is superior and an impasse is reached.</p>\n\n<p>Eventually one side shouts louder than the other and a direction is taken, with one party losing out. Hardly ideal, the nature of human interaction then dictates that the party hard done by are now going to try and “win” in other areas so they don’t feel taken advantage of, this imbalance that occurs is what erodes a perfectly healthy relationship until the trust is gone. The trick is to remove the personal opinions from the whole dispute and everybody feels they won.</p>\n\n<p>Let’s say a client disagrees with the button layout you have chosen for a form on the site. They come to you with their concern and want the button moved to another placement. You disagree with their reasoning.</p>\n\n<p>At this point, if you have a good logical or creative process with reasoning for your decision write down the process and read through it a couple of times, so long as you are happy you made the right decision and still disagree with the proposed direction. Pick up the phone and politely talk the client through why you made this decision. Sometimes they will be happy once its been explained and drop the issue, but sometimes they will insist on still changing it. At this point you have 2 choices, or you risk conflict and losing the clients trust.</p>\n\n<ol>\n  <li>Do what the client asks - You can’t win every difference of opinion, and unless you feel it may fundamentally de-rail or undermine something major, agree with the client on their approach and make a note as something to review later as you may need to implement your original solution later down the line.</li>\n  <li>Set up a test. Tell the client it’s interesting you both have a different way to solve the problem and why don’t we set up an A/B test to trial both solutions over a fixed time period. After that period you will implement the one that gets the largest amount of users using it.</li>\n</ol>\n\n<p>Setting up an A/B test is really great in this situation because you remove all personal opinion from the matter and it’s instantly resolved by science. These issues often mean a lot at the time but later on you can feel that (for example) perhaps you argued to heavily over using “that” shade of red when it didn’t matter to much.</p>\n\n<p>Run the test over a sensible period 1-2 months should suffice and report back to the client on the results. Later on when reviewing the A/B tests you’ll find your more interested in the results and making the site/App etc better than who’s opinion was right, which had seemed so important at the time.</p>\n\n<p>Defusing problems like this as soon as possible keeps the project on schedule and everyone happy, not only that, but A/B testing to solve disagreements can yield far better results for the client’s project and help to build your relationship with the client.</p>\n\n<p>Everybody wins.</p>\n",
            "url": "https://vincentp.me/blog/disarming-problem-clients",
            "date_published" : "2013-11-12 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/my-mobile-application-process",
            "title" : "My Entire Mobile Application Process",
            "content_html": "<p>Intended as a companion piece to my previous post on my frontend process, this post discusses my App design processes, there is some overlap so I recommend if you enjoy reading this post you should also <a href=\"http://vincentp.me/blog/my-front-end-development-process-start-to-finish\">check out</a> the other one.</p>\n\n<p>Unlike many App designers, I do not focus exclusively on iOS and have created Apps in the past for multiple platforms and designed some Apps to work across many platforms. This type of App design presents many different challenges you may not be familiar with, which can become especially complex when focusing on mobile Apps and their different interaction methods, App store submission processes, resolution sizes or when you have to design an App that must support multiple platforms.</p>\n\n<h2 id=\"dont-guess-actually-use-the-platforms\">Don’t Guess, Actually Use The Platforms</h2>\n\n<p>The majority of designers tend to use either an iPhone or Android for their daily life and whatever is your platform of choice you would be reasonably comfortable if tasked to design an App on that device, and while there is some overlap between Android and iPhone, what about a Symbian or a Blackberry? What about being asked to design a desktop App for Windows 8?</p>\n\n<p>Not only are each of the interaction models different between these platforms they have their own quirks and nuances, its second nature for an iPhone user to double tap the home button and close an App running in the background, but a Windows Phone user designing on iPhone may not know this.</p>\n\n<p>My daily phone of choice is an <a href=\"http://www.apple.com/iphone\" rel=\"external\">iPhone</a>, but while this has won out in the feature set for me, I try to remain open minded:</p>\n\n<blockquote>\n  <p>My requirements and means are not the same as someone else’s.</p>\n</blockquote>\n\n<p>This philosophy should carry through when you design on a platform you do not use on a daily basis. If I have to work on a Windows Phone I spend a few days interacting with a Windows Phone before I start the design process. If I have access to a device I take it home and try to do many of the normal tasks I would do with my phone, if I can’t get access to a device from work, I ask a friend who owns that device to show me a few things, or go down to a mobile phone shop (or a PC world if it’s a Windows 8 desktop App) and simply play with the demo models. The important thing is to refresh your brain and stop thinking in your platform’s default interaction mode, retrain your thinking temporarily. Just because you have settled on one platforms method doesn’t mean you should force others down the same path. If you get this right on the platform, the users will love you for it.</p>\n\n<p>On a related note, it’s commonplace for designers to laugh at platforms other than iPhone and Android, deriding the feature set over their ‘ superior ’ platform choice. Try to get out of this habit and view each platform as an opportunity to be <strong>the great App</strong> on that platform. If all the competition is terrible, it should be far easier for you to score a home run right?</p>\n\n<p>I’ve designed Apps in the past before on Symbian that have outperformed Apps on iPhone and Android in download numbers simply because Symbian is huge in lower income countries like India and the number of great Apps to download are far more limited. In a sea of great iOS and Android Apps you have to be exceptional to get noticed and even then the App may not get much use due to all the choice available to the user. If there are only a few good ones, not only will you get larger download numbers but the App itself will be more frequently used, a double win.</p>\n\n<h2 id=\"mobile-apps\">Mobile Apps</h2>\n\n<p>Mobile Apps are a bit more complicated to assemble effectively, not only do you have to decide on navigation within the App screen layout and the user state(s) you also have to think about external factors interacting with the device. Mobile phones have a wealth of peripheral sensors that can give you incredibly interesting data, especially when you use them in an unexpected way.</p>\n\n<p>Bringing harmony and order to this initial chaos is the part I enjoy most in the App design process, feeling the way through to the solution that seems just right. I start by listing my success criteria, in the form of:</p>\n\n<ul>\n  <li>User should be able to XXXX.</li>\n  <li>User should not be able to XXXX.</li>\n</ul>\n\n<p>I then break them down further in to User Stories and Use Cases. It’s important at this stage to try to catch all the success criteria in the App and define what the App will <em>not</em> do just as much as what it will. Remember if this is the initial App creation do not get too ambitious, focus on core values and principles and make them great. Ultimately all the features in the world won’t save you if the initial idea and approach aren’t right for the user-base. Anything I capture in this stage that I decide will not make the initial release I keep in a separate list that I can present to the client later. Having a roadmap for new features and timings to add they can be essential to the growth of the App and building the working relationship with your client. The more the client can plan costs, measure success and see a return, the more likely they will fund your ideas and trust you when you want to take a chance on something radical. I think of it as:</p>\n\n<blockquote>\n  <p>When your spending someone else’s money make sure you can pay them back</p>\n</blockquote>\n\n<h2 id=\"be-flexible-in-your-approach\">Be Flexible In Your Approach</h2>\n\n<p>After I have assembled the Use Cases my approach to design the App is flexible based on the platform(s) it will need to support, so I’ll expand each approach and its reasoning individually.</p>\n\n<h2 id=\"single-platform-apps\">Single Platform Apps</h2>\n\n<p>Single platform Apps are probably what you are most familiar with and the most popular. They not only allow you to focus on only one platforms challenge and quirks but give you a much wider set of goalposts to aim for.</p>\n\n<p>I favour a rapid design approach. App design yields far better results when you actually use the software and test it in a real world scenario. There is something special that happens when you physically hold the design in your hand not only do you learn very quickly what is working and not working for yourself and other users but it can help you discover additional functionality or a new direction in your design you may not have considered.</p>\n\n<p>So to this end, I start with an blank notebook and quickly begin sketching labelled boxes, don’t worry about sizes, straight lines or being neat in general, at this point all we are doing is trying to establish general areas of functionality to satisfy our Use Cases within the App. This work will most likely change a lot so don’t focus too much on it being perfect. In order to work out what feels right we need to try all the wrong things first and the quickest way to get closer to that is to <strong>just put it somewhere</strong> it’s far easier to move things around than to stare blankly at a page and get frustrated, think of it as a jigsaw, you have all the right pieces, you just need to put them together in the right way.</p>\n\n<figure>\n<figcaption>Using UI Stencils to add some fidelity to a wireframe</figcaption>\n<img src=\"https://vincentp.me/images/blog/2013-11-11/ui-stencil.jpg\" width=\"612\" alt=\"An image of a UI Stencil next to some wireframes\" />\n</figure>\n\n<p>Once I have something I am roughly OK with, I begin to add more fidelity using a <a href=\"http://www.uistencils.com/products/iphone-stencil-kit\">UI Stencil</a> they are a great way to focus on a higher fidelity mock-up and not get too distracted by the look and feel but at the same time keeping it neat and fast to draw.</p>\n\n<p>I map out the screens one at a time until I think I have them all, then at this point I create an information map. An information map is like a site-map mashed up with a functional diagram, it’s a great way to map out key functions in Apps. Depending upon the complexity of the App you can map out individual Use Case routes or display all the key routes on one diagram.</p>\n\n<p>The reason I create the information map after mapping out the screens is because this part is always an iterative process, mapping out the screens help you define how a Use Case is going to be implemented, and the information map allows you to understand the UX at a high level. You will inevitably change and tweak things at this point, so having a reasonable level of definition in the wire-frames helps to ensure things will work and flow in a user friendly way.</p>\n\n<p>Once the core functionality has been defined and worked out in the wire-frames and information map, I then move on the Error Cases. This is often a part that is overlooked, but it is essential before you begin the designs to understand:</p>\n\n<ul>\n  <li>What a user will be able to do, and how it is handled by the system.</li>\n  <li>What a user will not be able to do, and how it is handled by the system.</li>\n  <li>Where the user can carry out each task within the geography of the system.</li>\n</ul>\n\n<p>Once you have these three cornerstones everything else will slot to place around them.</p>\n\n<p>Now I document this entire process and create the living doc that will require sign off from the client at various points in the process.</p>\n\n<p>I create a Functional Specification document. Building software of any type is complicated. Hard and challenging for both you and the client. You need to ensure throughout the process everyone is happy and working in the same direction. If someone is unhappy they have points in the process to be heard and their concern or suggestion addressed. The single largest point for Apps failing is the breakdown in the relationship between the client and the creators. Creating the Functional Specification document not only protects your work with a written traceable document should a problem arise later, but it also protects the client against your going off in the wrong direction and keeps you honest!</p>\n\n<p>I have tried many ways in the past to manage this document and this largely depends upon the client, some prefer an on-line version, others prefer a Word document, the important point to note is that the client needs to actually interact with the document or the process falls down so I keep mine in Markdown and convert to the format I need depending upon the clients wishes.</p>\n\n<figure>\n<figcaption>Blueprint, my rapid prototyping objects for keynote</figcaption>\n<img src=\"https://vincentp.me/images/blog/2013-11-11/blueprint.jpg\" width=\"612\" alt=\"a screen shot of my rapid prototyping software Blueprint\" />\n</figure>\n\n<p>Now comes the fun part, I take the Information Map with the sketched wire-frames and re-create them in [Keynote] using <a href=\"https://github.com/vipickering/Blueprint\">my Blueprint rapid prototyping framework</a>. This allows me to very quickly make high fidelity wire-frames. I then export the screens to [Flinto] and link them up to test. This is a very powerful and prominent part of the process, not only can you iterate very quickly and discover mistakes, dead-end ideas and things you got wrong. It’s a great touchstone point with your client. Once you have teased out the large bugs and clangers, get the prototype in the client’s hand early on, get them playing with it, excited about the App and their feedback on your direction, choices etc.</p>\n\n<p>Now all the initial UX work is done we can start designing!</p>\n\n<p>I follow the same process for collecting visual inspiration and deciding artistic direction as <a href=\"http://vincentp.me/blog/my-front-end-development-process-start-to-finish\">I do with sites</a>.</p>\n\n<p>While in my work designing on the web I have been unable to ditch Photoshop yet, I have recently transitioned to [Sketch] for my App designing. It’s a fantastic tool to work with and has a ton of great tools to speed up App design. While designing I also use [Skala Preview] with <a href=\"https://github.com/marcisme/sketch-preview\" rel=\"external\">this plugin</a> to allow me to see the design taking shape in real-time on the phone. Adding this context really helps you get sizing and proportions right. Things that seem a great idea on killer large iMac screen don’t always seem the best idea on a small iPhone 4 screen later.</p>\n\n<p>In my opinion, there still is a gap in the market for a great designer version of <a href=\"http://www.github.com\" rel=\"external\">GitHub</a>. It always makes me nervous when designing that I may loose something I really want to revert or keep later. I have tried <a href=\"http://www.adobe.com/uk/creativecloud.html\" rel=\"external\">Adobe Creative Cloud</a>, which is basically <a href=\"http://www.dropbox.com\" rel=\"external\">Dropbox</a>, with more storage as standard, but goes down constantly and is pretty unreliable. <a href=\"http://www.layervault.com\" rel=\"external\">Layervault</a> was a better alternative, but I also ran in to issues with content not being saved properly and a lot of slowdown every time my computer loaded.</p>\n\n<p>So to recap, now we have:</p>\n\n<ul>\n  <li>User Stories</li>\n  <li>Use Cases</li>\n  <li>Wire-frames</li>\n  <li>Error Cases</li>\n  <li>An Interactive Prototype</li>\n  <li>Designs</li>\n  <li>A Functional Specification document detailing all the interactions, measurements and design implementations.</li>\n</ul>\n\n<p>It may seem like a lot of work upfront, but it’s amazing how much time is lost or spent with developers having to make their own decisions on how to implement something poorly defined or asking for guidance from the client. These “on the hoof” decisions often miss out something or fail to take things in to consideration, leading to a larger bug fixing stage or a disconnect between the initial App design, wire-frames and the finished product. You want to allow the developer to get on developing the App and writing code, when a designer has no content they are the first person to complain it’s holding up the process, so treat developers fairly and give them everything they need to do their job too.</p>\n\n<h2 id=\"multi-platform-apps\">Multi-platform Apps</h2>\n\n<p>Building Apps that span more than one platform is quite an extensive problem when you are tasked with making them. The initial problem is that the user flows and UX on each device will be different meaning you have to take these in to account when you design the initial App UX. Given that money is always limited and time is especially limited, depending upon the type of platforms you have to support you are left with 3 approaches:</p>\n\n<ul>\n  <li>Use the native controls and keep things generic.</li>\n  <li>If you have to support iPhone and Android only you can create a custom UI that shares many similarities with minor deviations for their native design patterns.</li>\n  <li>Create a completely bespoke UI and ignore all the design conventions for each platform.</li>\n</ul>\n\n<p>Once you have chosen your way the next headache is screen size and resolutions. When you design your Apps consider the movable space between the elements, build in tolerances to these areas so they can take a bit of movement, it will save you money and time that you can then spend on the edge cases which may require more bespoke work. If you have to design for Android, spend time understanding how 9 sliced PNG’s work, it will save you a large amount of time later dealing with none-standard screen sizes.</p>\n\n<blockquote>\n  <p>I once worked on an App for a major mobile phone company in the UK. It had to support all the handsets they sold at the time. 70 different devices across iPhone, Android and Blackberry, and all the screen sizes that come with it.</p>\n</blockquote>\n\n<p>When you are dealing with screen sizes as small as 240px wide and low powered, all the way up to a huge Samsung S3 and everything in-between a fixed interface doesn’t cut it, similarly a bespoke App creates its own set of headaches. If you are ever faced with this mammoth task as I was you will need to do to manage the task a bit differently to the usual approaches.</p>\n\n<p>Split everything in to two categories the low powered devices and the high powered ones. This will most likely give you a pretty decent split in the screen sizes as in general, the bigger the screen the more powerful the phone driving it. For the disobedient few phones that don’t fall in to this category try to downgrade them unless there is a valid reason to include them in the higher powered category. You’re working on a complex problem and you shouldn’t make it more complex unless you have to.</p>\n\n<p>Once you have your split, apply the native controls and interface to the low powered phones. The reason to do this is because you are most likely to run in to the more complex problems (or lengthy) to solve on a low powered phone than a new one so use the pre-built tool-kits to give the users as much functionality as possible. Users of these devices will be happy they got included at all so try not to sweat the small stuff over pixel perfection here, you’ll only burn all the money on unseen problems you made yourself that both clients and users can’t appreciate.</p>\n\n<p>For high powered devices, I would craft a bespoke interface that will work across all the high powered devices. This way you are boiling down a highly complex design and UX task in to 2 smaller jobs. A fancy posh UI and a lower grade functional one.</p>\n\n<h2 id=\"native-or-html\">Native or HTML?</h2>\n\n<p>The eternal debate roles on over which is better, personally I am not going to try and tell you which you should develop on, however what I can tell you is that in my own experience I have seen the following:</p>\n\n<p>I have worked with clients that have created HTML Apps under the idea it is written once and applied to all platforms, which should work out cheaper than creating Apps natively. The theory is sound. The issues always arise that certain sensors are not available on some platforms and they are on others. Often direct access to native software is not available on one platform where another is completely open. This uncertainty causes a lot of hold ups in development leading to costly and expensive work around(s) and features being unavailable on certain devices. What tends to happen is that the initial cost works out the same or slightly cheaper than the native implementation, but the code-base is much harder to maintain due to all the work arounds and additions. What this means is that over time the App becomes burdened by past decisions or requires substantial re-factoring exercises to keep it easy to work with and the costs ramp up with each release. The other problem with a HTML approach is that re-creating a native look and feel is at present fighting a losing battle meaning you will always need to create a bespoke interface so it doesn’t look out of place on the device.This isn’t down to just the look and feel though. Browsers running on a mobile device have a small amount of latency in the response time, it’s detectable to humans and we notice it is slightly not the same as a native implementation.</p>\n\n<p>That said, its easier to find a few JavaScript developers and have them all be familiar with one code-base so they can do any task than have individual programmers for each discipline and be heavily dependent upon them to all deliver the same consistent quality on each device. Weigh up the pro’s and cons for what you want to achieve and most definitely check before starting that the HTML approach supports the hardware functionality you need if you want to do it that way.</p>\n\n<h2 id=\"design-debugging\">Design Debugging</h2>\n\n<p>When it comes to debugging design issues further down the line, I utilize a combination of Dropbox and Instashare to take screenshots and share them for comparison between designs and the finished product.</p>\n\n<h2 id=\"app-store-submission\">App Store Submission</h2>\n\n<p>Finally, a short note on App stores approval. This is often something that gets overlooked until then end of the process, but I encourage you to make this one of the first things to research and plan. The main reason behind this is that each platform has a slightly different App approval process, for example if you are creating an App for Symbian or Windows Phone you must submit all your design documentation for sign-off by Microsoft/Nokia before submitting your final App code, where they will request changes should you not be following the design interaction guidelines, it catches a lot of designers out. Make sure you know at the start of the process what you must deliver at what time and things will run a lot more smoothly for all involved.</p>\n\n<h2 id=\"misc-productivity--planning-tools\">Misc Productivity &amp; Planning Tools</h2>\n\n<ul>\n  <li><a href=\"http://pinboard.in\" rel=\"external\">Pinboard</a></li>\n  <li><a href=\"http://www.moleskine.com/gb/collections/model/product/squared-soft-notebook-extra-large\" rel=\"external\">Moleskin</a></li>\n  <li><a href=\"http://www.uistencils.com/products/iphone-stencil-kit\" rel=\"external\">UI Stencils</a></li>\n</ul>\n\n<h2 id=\"coding-tools\">Coding Tools</h2>\n\n<ul>\n  <li><a href=\"http://layervault.com\" rel=\"external\">Layervault</a></li>\n</ul>\n\n<h2 id=\"app-design--wireframing-tools\">App Design &amp; Wireframing Tools</h2>\n\n<ul>\n  <li><a href=\"http://bjango.com/mac/skalapreview/\" rel=\"external\">Skala Preview</a></li>\n  <li><a href=\"http://instashareapp.com\" rel=\"external\">Instashare</a></li>\n  <li><a href=\"http://www.bohemiancoding.com/sketch/\" rel=\"external\">Sketch</a></li>\n  <li><a href=\"http://www.adobe.com/uk/products/creativecloud.html\" rel=\"external\">Adobe Creative Cloud</a></li>\n  <li><a href=\"http://www.apple.com/uk/keynote/\" rel=\"external\">Keynote</a> with <a href=\"https://github.com/vipickering/Blueprint\" rel=\"external\">Blueprint</a></li>\n  <li><a href=\"https://www.flinto.com\" rel=\"external\">Flinto</a></li>\n</ul>\n",
            "url": "https://vincentp.me/blog/my-mobile-application-process",
            "date_published" : "2013-11-11 00:00:01 +0000"
        },
        {
            "id": "https://vincentp.me/blog/my-front-end-development-process-start-to-finish",
            "title" : "My Entire Front End Development Process From Start To Finish",
            "content_html": "<p>I’m a productivity fiend, and constantly hone my process to suit my needs. To that end, increasingly, I have become more of a keyboard jockey and tools that allow me to continue using the keyboard rather than reaching for the mouse allow me to stay in the flow and keep my thought pattern uninterrupted.</p>\n\n<h2 id=\"productivity\">Productivity</h2>\n\n<p>A while back my good friend (and excellent designer) <a href=\"https://twitter.com/the_pgb\" rel=\"external\">Paul Bamford</a> introduced me to <a href=\"http://www.alfredapp.com\" rel=\"external\">Alfred</a>. It has become a cornerstone of my work flow. <a href=\"http://www.alfredapp.com\" rel=\"external\">Alfred</a> allows you to set-up a shortcut key and just type the name of the “thing” you want to do and hit enter. It’s effortless and amazing.</p>\n\n<p>Need to launch an application?</p>\n\n<p>Hit the short-cut</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Alt</span> <span class=\"o\">+</span> <span class=\"n\">Space</span></code></pre></figure>\n\n<p>type the name, hit enter done. The mental processing this saves while working is worth the price alone. There is nothing worse than stopping mid-flow to spend 10 minutes hunting for <strong>that</strong> file you can’t remember where you put.</p>\n\n<p>On the topic of being productive, I keep my thoughts ordered and on top of the TODO list with my trusty <a href=\"http://www.moleskine.com/gb/collections/model/product/squared-soft-notebook-extra-large\" rel=\"external\">Moleskin</a> and the <a href=\"http://www.bulletjournal.com\" rel=\"external\">Bullet Journal System</a>. When it comes to an organised system of getting things done an analogue approach has always fit best with my work-flow. Digital systems have always fallen down for me because when I am at a computer there are so many other things competing for my attention and using the system is nearly always dependent upon the internet. Both point of failure that can and will happen when simply trying to take some quick notes. I also feel (personally) if you sit at a laptop in a meeting with a client or colleague and take notes on it, it gives the impression you are not paying attention. On the other hand clients welcome you taking notes in your moleskin and are pleased that you are paying attention and taking notes. I suppose because a notebook is very open and obvious to all what you are doing but a laptop isn’t always so clear, you only need to be sat opposite a client with your laptop and you have created a physical barrier between yourself and the client along with writing words the client can’t see, you could in theory be writing <strong>anything</strong> which puts them on edge.</p>\n\n<h2 id=\"inspiration-and-resource-gathering\">Inspiration and Resource Gathering</h2>\n\n<p>When it comes to resource gathering I use a combination of mobile and desktop tools. For iPhone, <a href=\"http://cloud.feedly.com\" rel=\"external\">Feedly</a> is my <abbr title=\"Really Simple Syndication\">RSS</abbr> reader of choice, which I combine with Prismatic to discover new and interesting content, interesting feeds are then rolled back in to my <a href=\"http://cloud.feedly.com\" rel=\"external\">Feedly</a> stream. It’s a good cyclical process that keeps my reading content board, and yet focused, and avoids the creative tunnel vision that can happen, when you just rely on one source of information. Anything that piques my interest in particular is sent to my <a href=\"https://pinboard.in/u:monkeymajiks/\" rel=\"external\">Pinboard</a> account, where I store blog posts, resources, information and anything that interest me. I augment this when on my laptop / desktop with <a href=\"http://aki-null.net/shiori/\" rel=\"external\">Shiori</a>, which is a fantastic frontend interface to <a href=\"http://pinboard.in\" rel=\"external\">Pinboard</a> and works in much the same way as <a href=\"http://www.alfredapp.com\" rel=\"external\">Alfred</a>.</p>\n\n<p>In terms of visual inspiration, in the past I have tried Zootool, Iceber.gs and many other visual bookmarking services. All the web based solutions ended up suffering from the same problem, as your library starts to get quite large the service would become slower and slower. I can add quite a few images each day to my stream, so web based services were not ideal for my needs. Eventually I settled on Ember. Its combination of screen capture, <abbr title=\"Really Simple Syndication\">RSS</abbr> feed reader (Where I store all my visual <abbr title=\"Really Simple Syndication\">RSS</abbr> feeds) and image catalogue are ideal.</p>\n\n<h2 id=\"blogging-tools\">Blogging Tools</h2>\n\n<p>Preferring to spend down time when travelling doing something productive, (on a crowded train, sometimes it’s not practical to get the laptop out and start blogging) I like to use writing software that is not device dependent and can always access my content. Given that I use <a href=\"http://jekyllrb.com\" rel=\"external\">Jekyll</a> for the blog, the ability to write &amp; save the text in <a href=\"http://daringfireball.net/projects/markdown/\" rel=\"external\">Markdown</a> is a big plus. To that end <a href=\"https://ia.net/writer\" rel=\"external\">IA Writer</a> is usually my tool of choice. In actual fact, I do the initial write-up and first pass to every blog post in <a href=\"https://ia.net/writer\" rel=\"external\">IA Writer</a>. Once it is complete, I move the post in to <a href=\"https://www.sublimetext.com\" rel=\"external\">Sublime Text</a>, switch to Full Screen Distraction Mode</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Alt</span> <span class=\"o\">+</span> <span class=\"n\">Cntrl</span> <span class=\"o\">+</span> <span class=\"n\">Shift</span> <span class=\"o\">+</span> <span class=\"n\">F</span></code></pre></figure>\n\n<p>and add the YAML data before doing my final pass and edit.</p>\n\n<h2 id=\"wireframing-sites\">Wireframing sites</h2>\n\n<p>When it comes to designing sites I have been refining my process over quite a few years. My aim is always to answer the brief given, its important to me not to<br />re-invent the wheel, you only have a finite resource to spend on most projects so the key is to use your time in the most efficient approach. Iterating over various solutions quickly using pencil and paper yields results quickly. I try to lock myself away somewhere (so I can’t be disturbed). Turn off the iPhone, set 1 hour on my stopwatch and begin. It may seem a little odd, but over the years I have learnt that I perform well under pressure, it helps my brain focus in on what really matters. The other ‘fun’ but ultimately timely endeavours that may have distracted me in the past gets purposely relegated to when I have time left over in the project and don’t cause the project delivery to suffer. This also permits the initial delivery to really focus in on the core of the idea. Remember a project is usually a moving target and subject to change, ultimately ideas will always evolve in the clients mind (and once it’s been delivered to the public) taking you further from the agreed deliverables, so it is best not to try and dazzle them with other possibilities at this stage.</p>\n\n<p>I create a mood-board in Ember and collect my thoughts. I then usually write some basic Use Cases to help satisfy the brief. Once the Use Cases are done I move on to wire frame sketching. I find a pencil and paper the most helpful here. It allows me to iterate very quickly over and over until it feels like an idea is coming together.</p>\n\n<p>Once the wire frames and site-map are complete. I use <a href=\"http://www.apple.com/uk/keynote/\" rel=\"external\">Keynote</a> to quickly create them. Keynote is such an unbelievably intelligent piece of software to create mock-ups and prototypes in. It also affords a large amount of control over fidelity. Certain clients will not be happy with a Balsamiq hand drawn approach. Others will want to see a stripped back minimal pass for fear of spending money on going to far the wrong way. Keynote allows you to add a layer styling rapidly using the copy &amp; paste styling meaning you can go from boxes on a page to full fidelity wire frame minutes.</p>\n\n<h2 id=\"designing--sites\">Designing  sites</h2>\n\n<p>With the wire frames and site-map agreed I move on to creating the designs. My tool of choice is still Photoshop. I have tried many other tools in the hope of replacing it someday and it’s never felt the perfect tool to design sites. The closest alternative is <a href=\"http://www.pixelmator.com\" rel=\"external\">Pixelmator</a> which is closing in on Photoshop’s feature set fast. In recent times, it’s clear Adobe has realised they may no longer be the only software choice and have begun upping their game adding quite a few features to keep web designers happy, in particular the server and asset generation tools.</p>\n\n<p>I am a big fan of <a href=\"http://macrabbit.com/slicy/\" rel=\"external\">Slicy</a> and it slots in to my work flow perfectly, however more recently instead of using Slicy I have been using Photoshop asset generation tools. The tools are pretty similar to Slicy, in that they do automatic image exporting based on layer naming. Slicy can still come in handy however when you want to use its image mapping feature, so it still gets used pretty regularly.</p>\n\n<p>My process to create a site has been honed over some time until I have boiled it down in to a flexible yet robust approach.</p>\n\n<h2 id=\"always-start-with-the-typography\">Always Start With The Typography</h2>\n<p>99% of the time your site is primarily textual content, it is the cornerstone of your site, so choosing the right typeface can make or break your site. If the project does not have an existing brand I start by listing out the emotional responses the site should make. Once I am satisfied with the list I begin selecting typefaces that match those emotional responses. This stage is the most undefined, deliberately, because over time you begin to understand which typefaces work under what conditions, eventually you will gravitate to 3 or 4 that work under most circumstances (this can take years of working with multiple faces) and fit in with your design sensibilities. I mix and match the typefaces I have chosen until I am happy with the combinations, at the same time I will begin looking at suitable text sizing for body copy, headings and sub-headings. Once I have decided upon those factors the rest slots in to place quite neatly.</p>\n\n<h2 id=\"choose-a-scale\">Choose A Scale</h2>\n\n<p>Now we have a rough idea on typefaces and sizing, I pick a scale to unify the design. It’s important to maintain as closely as possible to the sizes within the scale so elements don’t look out-of-place or proportion. Usually during this period the original sizes selected will change, that’s OK. Good design feels out the problem and discovers the true solution, rather than applying a fixed pattern to all. For creating a proportional scale, this can be any 2 numbers related by a ratio. You could select the size of the body copy and width of the site for instance, then use the golden ratio 1.618 to tie them together. If you’re new to creating proportional scaling I recommend using Tim Brown’s excellent <a href=\"http://www.modularscale.com\" rel=\"external\">Modular Scale</a> as a resource. Once you become proficient at this, you might even start creating your own, based on the width of the spacing around the company logo, or the size of a corporate asset that has to be in place on each page. Anything to unify the design styling and typography will make the design feel connected and “just right”.</p>\n\n<h2 id=\"define-a-colour-scheme\">Define A Colour Scheme</h2>\n\n<p>The type and scale in place defining a colour Scheme can also be a tricky thing to get right. Again I follow a similar process to select my type. I refer back to my list of emotional responses and begin creating swatches that I feel match those responses in to two categories:</p>\n\n<ul>\n  <li>Primary: The most critical responses.</li>\n  <li>Secondary: The warm fuzzy feelings that accompany them.</li>\n</ul>\n\n<p>It is then a case of mixing and matching the primary and secondary selections until I have a contrast and mix that feel right. Again this is about feeling your way. If you don’t have an existing colour Scheme to work from you need to iterate reasonably quickly to a solution but also discover the proper path rather than arbitrary picking your favourite hue, pairing it with a contrasting colour and moving on. You want your work to reflect the content and avoid falling in to the trap of designing sites that all look the same. Respond to your subject matter and content, not your own wants.</p>\n\n<h2 id=\"create-the-style-tiles\">Create The Style Tiles</h2>\n\n<p>Once the colour Scheme and text have been chosen and the wire-frames done. I create <a href=\"http://styletil.es\" rel=\"external\">Style Tiles</a> to iterate very quickly over my chosen selections. This step allows me to try out some of the choices I may have not wholly decided upon during the last few stages of the process. It’s a great way to quickly test that all my selections work as a cohesive whole and to try adding or subtracting some of my possible other selections and sanity check my decisions have been correct.</p>\n\n<p>At this point, I usually make 3 selections that I prefer and show them to the client. This is a great way to get feedback and correct anything in the process where my opinion and the clients have differed. It’s important to remember that as a designer you have been on a huge path of discovery up to this point, rejecting inferior ideas for superior ones. Your client on the other hand has not been on the same journey. Before you travel too far down the path on your own you need to ensure you are both on the same page. Using style tiles is a good approach because its still throwaway if you have got it wrong or your opinions differ to much but it is far less effort than mocking up individual pages to perfection and iterating endlessly upon those, which is often where the most time is lost on a project.</p>\n\n<h2 id=\"coding-sites\">Coding sites</h2>\n\n<p>Finally, creating the <abbr title=\"Hyper Text Markup Language\">HTML</abbr>, <abbr title=\"Cascading Style Sheets\">CSS</abbr> and JavaScript. Hand coding is essential, for production ready professional code and the best tool to create that is <a href=\"https://www.sublimetext.com\" rel=\"external\">Sublime Text</a>. It’s hands down the fastest and most feature rich tool to code in and has a huge variety of configurable options. <a href=\"http://vincentp.me/blog/sublime-text-setup\" rel=\"external\">I wrote about my Sublime Text set-up here</a>.</p>\n\n<p>As with most web professionals, I use <a href=\"http://github.com\" rel=\"external\">GitHub</a> to store and manage my code with the <a href=\"http://mac.github.com\" rel=\"external\">GitHub client for OSX</a>. I don’t mind using the terminal, but I’m not a masochist, I’d rather click the sync button than spend a few minutes remembering and typing in terminal commands if I don’t have to.</p>\n\n<p>Absolutely the fastest and most consistent way to build a site is to take apart all the constituent components and create a “component” page. This page usually consists of all the elements your site will be made up of, removing the grid, which can be added at the end.</p>\n\n<p>Building all the components on a single page yields a huge number of positive results:</p>\n\n<ul>\n  <li>It enforces consistency in the visual design.</li>\n  <li>It helps you to easily spot repeating patterns in the code.</li>\n  <li>It encourages re-usable code.</li>\n  <li>Reduces errors in the code or clashing naming.</li>\n  <li>Once the project is complete it provides all the documentation a new developer on the project needs.</li>\n  <li>Adding new components later quickly reveal bugs and errors.</li>\n</ul>\n\n<p>I work using a strict separation of development and live environments. The live environment and repository only contain the compiled production ready code, the development repository and environment contains all my debugging tools and un-compiled code.</p>\n\n<p>In the developer environment I use Philip Walton’s <a href=\"https://github.com/philipwalton/html-inspector\" rel=\"external\">HTML Inspector</a> which is a marvellous tool to catch <abbr title=\"Hyper Text Markup Language\">HTML</abbr> errors and more. Where it really comes in to its own is using the custom rules to create your own validation patterns. When you are working in a team, it’s a great way to establish a coding pattern and validate against it. While I dislike BEM there are many people who enjoy using it, and if your that way inclined, it also comes with some rules pre-built for BEM notation, including <a href=\"http://csswizardry.com\" rel=\"external\">Harry Roberts</a> <a href=\"http://inuitcss.com\" rel=\"external\">Inuit</a> which is all the rage with the kids these days.</p>\n\n<p>To complement HTML Inspector, I also use the excellent Holmes CSS Inspector. Holmes looks for errors in the <abbr title=\"Cascading Style Sheets\">CSS</abbr> and highlights them using visual cues, its pretty comprehensive and really helps to enforce good practices.</p>\n\n<p>On a side note, its also worth mentioning that occasionally I have to pick up a lengthy <abbr title=\"Cascading Style Sheets\">CSS</abbr> file(s) from another team or developer and if it is quite complicated or heavily compressed with no uncompressed alternative I turn to <a href=\"http://procssorapp.com\" rel=\"external\">ProCSSor</a>. It’s the best tool I have found to quickly format a <abbr title=\"Cascading Style Sheets\">CSS</abbr> file in to a readable format and have had no issues with it mangling code. If things are really mangled, before running the code through ProCSSor, I utilize the <abbr title=\"Cascading Style Sheets\">CSS</abbr> Comb plugin for Sublime to bring some order to the chaos.</p>\n\n<p>In order to keep things nimble I usually use a pre-processor for my <abbr title=\"Cascading Style Sheets\">CSS</abbr>, both <abbr title=\"Leaner Cascading Style Sheets\">LESS</abbr> and <abbr title=\"Syntactically Awesome Stylesheets\">Sass</abbr> are great for this and I lean towards Sass, due to the syntax and functionality matching my sensibilities fairly closely. I compile the <abbr title=\"Syntactically Awesome Stylesheets\">Sass</abbr> with <a href=\"http://incident57.com/codekit/\" rel=\"external\">CodeKit</a>, which also compresses my JavaScript and runs it against <a href=\"http://www.jslint.com\" rel=\"external\">JS Lint</a> for errors, double whammy!</p>\n\n<p>A caveat on pre-processors, while they are great and do save you time. Learn <abbr title=\"Cascading Style Sheets\">CSS</abbr> first before jumping in to pre-processors, they can encourage bad practices in the compiled code and if you don’t understand 100% what the pre-processor is generating you shouldn’t be writing it. Learn to walk before you run and you’ll be better for it.</p>\n\n<p>I would apply similar reasoning to jQuery and JavaScript, often a few lines more of Vanilla JavaScript over writing it in jQuery and loading the jQuery library removes a dependency and an additional browser call, hurray for portability.</p>\n\n<p>When writing your <abbr title=\"Hyper Text Markup Language\">HTML</abbr> it is important to remember that before adding the <abbr title=\"Cascading Style Sheets\">CSS</abbr> the relevance of the mark-up should imply what you are trying to create. To keep myself always thinking of the structure I regularly use <a href=\"http://microformats.org\" rel=\"external\">Microformats</a> and more recently, have also begun integrating <a href=\"http://schema.org/docs/documents.html\" rel=\"external\">Structured Data</a>. Following these formats helps you to constantly question if the mark-up is correctly reflecting the content. A further bonus is that it helps search engines parse the content more clearly and increase your search ranking.</p>\n\n<p>Once widgets are complete I create my typographic grid. To speed up the grid mathematics, I use the excellent <a href=\"http://www.acqualia.com/soulver/\" rel=\"external\">Soulver</a> which is fantastic for web based mathematics creations.</p>\n\n<p>Much has already been written on creating grids so I won’t go in to the mechanics of creating the actual <abbr title=\"Hyper Text Markup Language\">HTML</abbr> &amp; <abbr title=\"Cascading Style Sheets\">CSS</abbr> for the grid. When creating my grid, I always create my own preferring not to rely on other people’s solutions. The reasoning behind this is that just like everything else in the creation I want it to be tied to the scale I am working from, getting the grid right is the final piece to getting things looking balanced to the eye. That said, there is a rather dogmatic approach prevalent in web design at the moment over sticking to the grid without deviation, this is not recommended advice to follow in my opinion. Breaking from your grid can create tension, excitement and interest. The trick is learning when to do this and not to do it constantly without good reason or you risk losing the harmony in the design.</p>\n\n<h2 id=\"there-is-no-spoon\">There Is No Spoon</h2>\n\n<p>A question I am asked quite frequently is:</p>\n\n<blockquote>\n  <p>What framework do you use, and what would you recommend?</p>\n</blockquote>\n\n<p>My answer is something most developers aren’t ready to hear:</p>\n\n<blockquote>\n  <p>Why would you use a framework for a one-off site?</p>\n</blockquote>\n\n<p>The reply from the developer then follows the format of:</p>\n\n<blockquote>\n  <p>I don’t just use it for one site, I use it for all my sites!</p>\n</blockquote>\n\n<p>To which I would always respond:</p>\n\n<blockquote>\n  <p>How can you make decisions on the approach before understanding the project?</p>\n</blockquote>\n\n<p>At this point, the developer usually thinks I am being awkward and wonders off, which is certainly not the case, more often than not they missed the point I have been making.</p>\n\n<p>Frameworks are something I have been working on for around 8 years, where I would be working on a combination of small and extremely large projects every week. Around 5 years ago during this period I had an epiphany.</p>\n\n<p>Day-to-day most developers work on multiple projects of varying size. The solution to remove the mundane and repetitive tasks is to create a framework. As time goes on this framework evolves to incorporate other features, we wax lyrical about how this is such a <abbr title=\"Don't Repeat Yourself\">DRY</abbr> approach, and saves us time, however what is actually happening is you are revising the same design or variations on that design over and over homogenising your approach, rounding off the corners to the point of perfection. A classic example of this is the common criticism levelled at Bootstrap:</p>\n\n<blockquote>\n  <p>It all looks the same</p>\n</blockquote>\n\n<p>Bootstrap supporters will tell you that it’s perfectly feasible to make it look radically different and to a point they are right, but in essence you are carrying a lot of baggage to do that. When you use a framework, you are <strong>always</strong> tied to the ideas and decisions made in past projects by other individuals which can hamper creativity and new ideas.</p>\n\n<p>That is not to say frameworks are without merit or not worth pursuing. Frameworks are perfect when working on a large scale site or application and form a key part of maintaining your code base as a cohesive whole. You need to consider your personal requirements, do you spend your time working as a freelancer or in an agency? Chances are you jump between multiple projects that need to be creative and different. Under these circumstances, it’s arguable that a framework is not actually helpful to your process and is forcing you down pre-defined choices before beginning a project, hardly ideal. On the other hand, if you work on a large site or application like Facebook or Twitter then a framework is the perfect choice.</p>\n\n<p>So what do I use? When setting out on a large scale site or application project I usually create my own framework with the other developers based on someone else’s existing work, or we start from scratch, depending upon the requirements. However, for day-to-day smaller projects I don’t use a framework at all. I use a <em>tool kit</em>.</p>\n\n<h2 id=\"fit-for-purpose\">Fit For Purpose</h2>\n\n<p>My mantra for the last few years has been not to outwardly dismiss ideas, techniques and approaches but to carefully consider each when presented and try to understand if it is fit for my purpose. If it is not correct I look for another way. While in this mindset it became evident that over time when starting out each new project’s design process phase that I would be thinking ahead about how it would integrate with my existing code framework rather than focussing on being creative and solving the problem completely. I was slowly twisting decisions I had been taking based on previous projects outcomes, which in hindsight was pretty daft.</p>\n\n<p>To correct this I adopted a different direction, I took the components that re-occur in every project, the clearfix <abbr title=\"Cascading Style Sheets\">CSS</abbr>, the <abbr title=\"Syntactically Awesome Stylesheets\">Sass</abbr> grid equations etc. and created a tool kit of flexible stubs. The key here is not to go too far, you want to provide launching pads to begin coding and not a complete solution that’s ready to go, you want to provide as much flexibility as possible without making any design decisions.</p>\n\n<p>Once the code is complete, I run it through the <a href=\"http://validator.w3.org\" rel=\"external\">W3C Validators</a> as a final sanity check and amend anything that may not be correct.</p>\n\n<p class=\"updateHighlight\"><b>Update:</b> I should point out that all my development is done on a Mac</p>\n\n<h2 id=\"misc-productivity--planning-tools\">Misc Productivity &amp; Planning Tools</h2>\n\n<ul>\n  <li><a href=\"http://www.alfredapp.com\" rel=\"external\">Alfred</a></li>\n  <li><a href=\"https://ia.net/writer\" rel=\"external\">IA Writer</a></li>\n  <li><a href=\"http://pinboard.in\" rel=\"external\">Pinboard</a> with <a href=\"http://aki-null.net/shiori/\" rel=\"external\">Shiori</a></li>\n  <li><a href=\"http://cloud.feedly.com\" rel=\"external\">Feedly</a></li>\n  <li><a href=\"http://www.moleskine.com/gb/collections/model/product/squared-soft-notebook-extra-large\" rel=\"external\">Moleskin</a></li>\n  <li><a href=\"http://www.bulletjournal.com\" rel=\"external\">Bullet Journal System</a></li>\n  <li><a href=\"https://www.wunderlist.com/en/\" rel=\"external\">Wunderlist</a></li>\n</ul>\n\n<h2 id=\"coding-tools\">Coding Tools</h2>\n\n<ul>\n  <li><a href=\"http://github.com\" rel=\"external\">GitHub</a></li>\n  <li><a href=\"http://mac.github.com\" rel=\"external\">GitHub client for OSX</a></li>\n  <li><a href=\"https://www.sublimetext.com\" rel=\"external\">Sublime Text</a>. Also see <a href=\"http://vincentp.me/blog/sublime-text-setup\" rel=\"external\">my Sublime set-up</a></li>\n  <li><a href=\"http://incident57.com/codekit/\" rel=\"external\">CodeKit</a></li>\n  <li><a href=\"https://github.com/philipwalton/html-inspector\" rel=\"external\">HTML Inspector</a></li>\n  <li><a href=\"http://procssorapp.com\" rel=\"external\">ProCSSor</a></li>\n  <li><a href=\"http://validator.w3.org\" rel=\"external\">W3C Validators</a></li>\n  <li><a href=\"http://www.acqualia.com/soulver/\" rel=\"external\">Soulver</a></li>\n</ul>\n\n<h2 id=\"web-servers-and-technologies\">Web Servers and Technologies</h2>\n\n<ul>\n  <li><a href=\"http://www.mamp.info/en/index.html\" rel=\"external\">MAMP</a></li>\n  <li><a href=\"http://jekyllrb.com\" rel=\"external\">Jekyll</a></li>\n  <li><a href=\"http://anvilformac.com\" rel=\"external\">Anvil</a></li>\n</ul>\n\n<h2 id=\"design--wireframing-tools\">Design &amp; Wireframing Tools</h2>\n\n<ul>\n  <li><a href=\"http://www.adobe.com/uk/products/creativecloud.html\" rel=\"external\">Adobe Creative Cloud</a></li>\n  <li><a href=\"http://www.apple.com/uk/keynote/\" rel=\"external\">Keynote</a></li>\n  <li><a href=\"http://macrabbit.com/slicy/\" rel=\"external\">Slicy</a></li>\n  <li><a href=\"http://styletil.es\" rel=\"external\">Style Tiles</a></li>\n</ul>\n",
            "url": "https://vincentp.me/blog/my-front-end-development-process-start-to-finish",
            "date_published" : "2013-10-24 00:00:01 +0100"
        },
        {
            "id": "https://vincentp.me/blog/lists-done-right-in-photoshop",
            "title" : "Lists In Photoshop Done the Right Way",
            "content_html": "<p>I have lost count the number of times I have seen over a <a href=\"http://hoveringartdirectors.tumblr.com\" rel=\"external\">designers shoulder</a> and noticed them struggling with formatting lists in Photoshop.</p>\n\n<p>Let’s run through the ways not to do it:</p>\n\n<h2 id=\"how-not-to-create-a-list-in-photoshop\">How <em>not</em> to create a list in Photoshop.</h2>\n\n<ul>\n  <li>Draw the bullets individually and painstakingly align each one. This is obviously bad, because as soon as the text has to be moved it takes forever to re-align the bullets.</li>\n  <li>Copy the bullets from Word. This does work to a point, but lacks the flexibility in formatting and you are pasting odd invisible characters in to your PS file, which can lead to bad things. Plus you must have Word installed, and I wouldn’t wish that on anybody.</li>\n  <li>Creating the list in HTML and copy &amp; pasting it in to the file. This is just dodging the problem so someone else has to deal with it. Not cool.</li>\n</ul>\n\n<h2 id=\"correctly-create-a-list-in-photoshop\">Correctly Create A List In Photoshop</h2>\n\n<p>The objective here is to do this all in the text, that way the mock-up can always be easily reorganised with minimum fuss.</p>\n\n<p>Learn how to output a bullet point correctly in the font:</p>\n\n<p>On a Mac:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Alt</span> <span class=\"o\">+</span> <span class=\"mi\">8</span></code></pre></figure>\n\n<p>On a PC:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Hold</span> <span class=\"n\">down</span> <span class=\"n\">the</span> <span class=\"n\">ALT</span> <span class=\"n\">key</span> <span class=\"n\">and</span> <span class=\"n\">type</span> <span class=\"mo\">014</span><span class=\"mi\">9</span></code></pre></figure>\n\n<p>Go to:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Window</span> <span class=\"o\">-&gt;</span> <span class=\"n\">Paragraph</span></code></pre></figure>\n\n<p>and the top left box dictates your left margin.</p>\n\n<p>Using this you can simply do:</p>\n\n<ul>\n  <li>a minus value to exdent your margins (as I do on this blog)</li>\n  <li>any positive value to indent your lists.</li>\n</ul>\n\n<p>That’s great, but I want custom bullet points. Got you covered. To do this, you need to use an icon font and simply style the bullet with whatever you like.</p>\n\n<figure>\n  <figcaption>To indent or exdent your margins, change the value the arrow is pointing at</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-10-21/paragraph-panel.png\" alt=\"The paragraph panel in Photoshop\" />\n</figure>\n",
            "url": "https://vincentp.me/blog/lists-done-right-in-photoshop",
            "date_published" : "2013-10-21 00:00:01 +0100"
        },
        {
            "id": "https://vincentp.me/blog/fingerprint",
            "title" : "Bridging The Gap Between the Physical and Virtual",
            "content_html": "<p>For most of my life, I have had a small personal obsession over influencing the virtual world with the real world, where the physical and virtual spaces overlap and begin to mingle, coalescing with each other based on factors from each.</p>\n\n<p>This obsession has recently manifested itself in a small proof of concept project I like to call Fingerprint.</p>\n\n<h2 id=\"there-is-only-one-of-you\">There Is Only One Of You</h2>\n\n<p>Fingerprint was born from a passing thought I had one day while designing a login interface.</p>\n\n<blockquote>\n  <p>What if the interface that was presented to the user, changed based on their login details?</p>\n</blockquote>\n\n<p>As the thought expanded in my mind, I realised this is something that could go further, <em>much, much further</em>.</p>\n\n<blockquote>\n  <p>When a user enters data in to your site or app they are feeding you information unique to their account, it’s creating a digital legacy unique to them, so why not begin to shape the interface around that input?</p>\n</blockquote>\n\n<h2 id=\"leaving-your-mark\">Leaving Your Mark</h2>\n\n<p>Fingerprint demonstrates the basic idea. It takes two strings, in this case your first and last name, but you can input anything (try it out!). It then turns each strings in to an MD5 hash.\nThese hashes are then used in various ways to generate:</p>\n\n<ul>\n  <li>An identicon</li>\n  <li>A typographic scale</li>\n  <li>A fixed grid (following the same scale)</li>\n  <li>A colour Scheme.</li>\n</ul>\n\n<p>I find it quite addictive trying out various combinations and seeing how they look at a site. As a proof of concept, it encapsulates the reactive interface idea quite well, obviously for a customer facing site you could take it further: make the grid responsive, make the colour schemes more diverse, make the algorithm more complex and add more features.</p>\n\n<h2 id=\"reactive-interfaces\">Reactive Interfaces</h2>\n\n<p>At a basic level we can use user data to shape branding, logos, typography and layout to make an experience unique to each user. Taking this idea further you can begin to evolve the interface as more data is collected. Time has elapsed or perhaps other services are connected to the account to shape it further.</p>\n\n<p>For example:</p>\n\n<blockquote>\n  <p>If a user (over a period of defined time) interacts very little with a particular toolbar, why not de-clutter the interface by hiding the toolbar and informing the user where it is hidden should they need it?</p>\n</blockquote>\n\n<p>Age can also be something to consider (and will become a much larger issue in the near future):</p>\n\n<blockquote>\n  <p>A user enters their DOB and we calculate it to be over 60, we could assume they have poorer eyesight than the average user and offer them a larger default font-size and typography selection to increase readability.</p>\n</blockquote>\n\n<p>Or how about social services:</p>\n\n<blockquote>\n  <p>If a user is tweeting far higher than the average number per hour, their followers could get a button that appears, allowing them to “vote for you to stop” enough of those votes received and you could start reducing the amount of characters they could type for each tweet. If the user persisted, it could enforce a delay in the tweets to space them out.</p>\n</blockquote>\n\n<p>It feels like most sites and apps are generally built around input -&gt; output with very little intelligence in between. We should be making interfaces that react and tailors themselves to users needs, that delight and surprise them at every turn. Offering unique experiences and delighters that make them want to share their experience with others. It’s my belief it is time our interfaces became more intelligent, the technology is available and software is easy to write, hopefully I may have inspired you to think this way too.</p>\n",
            "url": "https://vincentp.me/blog/fingerprint",
            "date_published" : "2013-10-18 00:00:01 +0100"
        },
        {
            "id": "https://vincentp.me/blog/sublime-text-setup",
            "title" : "Sublime Text Set-up",
            "content_html": "<p>My personal set-up for <a href=\"https://www.sublimetext.com\" title=\"Sublime Text 2\" rel=\"external\">Sublime Text 2</a>.</p>\n\n<h2 id=\"preferences\">Preferences</h2>\n\n<p>I have to hot desk a lot and move around. I can’t always guarantee I will be on a Mac or PC, so I have stored my preferences on <a href=\"https://gist.github.com/vipickering/6375327\" rel=\"external\">this Gist</a>.</p>\n\n<p>Some explanation around some of these settings.</p>\n\n<p>This line makes the folders in the sidebar bold. Helpful as a visual cue, even if you rely on Cntrl+p most of the time.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"bold_folder_labels\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>I have tried quite a few themes and eventually settled (currently) on the Monokai Extended Theme, it adds support for Markdown which is important to me.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"color_scheme\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Packages/Monokai Extended/Monokai Extended.tmTheme\"</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>This line draws horizontal rules and is super helpful for visually checking your code indents are correct.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"draw_indent_guides\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>We don’t want to include white space in code if we can help it, so this line helps us see and address those issues.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"draw_white_space\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"selection\"</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>Andale Mono has been my coding font of choice for many years. It’s mono-spaced, easy to read at different sizes and has easy to distinguish characters such as 0 and o.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"font_face\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"s2\">\"Andale Mono\"</span><span class=\"p\">,</span><span class=\"w\">\n  </span><span class=\"s2\">\"font_size\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mf\">14.0</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>Highlights the selected line. Great because you never loose your cursor.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"highlight_line\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>This highlights a tab orange if it has unsaved content on it. A great visual cue if you tend to hop around files a lot and forget to save.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"highlight_modified_tabs\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>I default to a tab size of two spaces. This is because I often have to work in many different coding environments and I want my code to always look well indented. If I used tabs the code can look a mess on another persons machine, depending upon how they have their enviornemnt set up.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"tab_size\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">2</span><span class=\"p\">,</span><span class=\"w\">\n  </span><span class=\"s2\">\"translate_tabs_to_spaces\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>If you create an opening bracket, these line automatically add the closing bracket.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"match_brackets\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span><span class=\"w\">\n  </span><span class=\"s2\">\"match_brackets_angle\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span><span class=\"w\">\n  </span><span class=\"s2\">\"match_brackets_braces\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span><span class=\"w\">\n  </span><span class=\"s2\">\"match_brackets_content\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span><span class=\"w\">\n  </span><span class=\"s2\">\"match_brackets_square\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>I always find it really helpful when I open my code editor in the morning that what I was working on previously is open and ready to go.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"remember_open_files\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span><span class=\"w\">\n  </span><span class=\"s2\">\"remember_open_folders\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>I like being able to scroll past the end of a file so what I am working on is in the middle of the page, I’m picky like that.\nThe second line increases the scrolling speed a touch, I am impatient.</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-json\" data-lang=\"json\"><span class=\"w\">  </span><span class=\"s2\">\"scroll_past_end\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">true</span><span class=\"p\">,</span><span class=\"w\">\n  </span><span class=\"s2\">\"scroll_speed\"</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"mi\">2</span><span class=\"p\">,</span></code></pre></figure>\n\n<p>To update your user preferences to use the elements you like go to:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\">  <span class=\"n\">Preferences</span> <span class=\"o\">-&gt;</span> <span class=\"n\">Settings</span> <span class=\"o\">-&gt;</span> <span class=\"n\">User</span></code></pre></figure>\n\n<p>and paste the code from the gist. Remember, your user preferences don’t override the defaults so you should never break anything.</p>\n\n<h2 id=\"my-installed-packages\">My Installed Packages</h2>\n<p><a href=\"https://packagecontrol.io\" rel=\"external\">Install Package Control</a>, <strong>then add the following:</strong></p>\n\n<ul>\n  <li><a href=\"https://github.com/skuroda/Sublime-AdvancedNewFile\" rel=\"external\">AdvancedNewFile</a></li>\n  <li><a href=\"https://github.com/alienhard/SublimeAllAutocomplete\" rel=\"external\">All Autocomplete</a></li>\n  <li><a href=\"https://github.com/sindresorhus/sublime-autoprefixer\" rel=\"external\">Autoprefixer</a></li>\n  <li><a href=\"http://docs.emmet.io\" rel=\"external\">Emmet</a></li>\n  <li><a href=\"https://github.com/condemil/Gist\" rel=\"external\">Gist</a></li>\n  <li><a href=\"https://github.com/revolunet/sublimetext-markdown-preview\" rel=\"external\">Markdown Preview</a></li>\n  <li><a href=\"https://github.com/jonschlinkert/sublime-monokai-extended\" rel=\"external\">Monokai Extended theme</a></li>\n  <li><a href=\"http://net.tutsplus.com/articles/news/introducing-nettuts-fetch/\" rel=\"external\">Nettuts+ (Fetch)</a></li>\n  <li><a href=\"https://github.com/mischah/Sublime-Text-2-Settings/tree/master/Sass\" rel=\"external\">Sass</a></li>\n  <li><a href=\"https://github.com/titoBouzout/SideBarEnhancements/tree/st3\" rel=\"external\">Sidebar Enhancements</a></li>\n  <li><a href=\"https://github.com/SublimeLinter/SublimeLinter\" rel=\"external\">Sublime Linter</a></li>\n  <li><a href=\"https://github.com/P233/Syntax-highlighting-for-Sass\" rel=\"external\">Syntax Highlighting For Sass</a></li>\n  <li><a href=\"http://csscomb.com\" rel=\"external\">CSS Comb</a></li>\n  <li><a href=\"https://github.com/jisaacks/GitGutter\" rel=\"external\">Git Gutter</a></li>\n  <li><a href=\"https://github.com/facelessuser/BracketHighlighter\" rel=\"external\">Bracket Highlighter</a></li>\n  <li><a href=\"https://github.com/akrabat/SublimeFunctionNameDisplay\" rel=\"external\">Function Name Display</a></li>\n</ul>\n\n<h2 id=\"code-short-cut-reminders-osx\">Code Short-cut Reminders (OSX)</h2>\n\n<p>Search DOM really quickly:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Cntrl</span><span class=\"o\">+</span><span class=\"n\">p</span> <span class=\"n\">type</span> <span class=\"s\">\"@\"</span></code></pre></figure>\n\n<p>Go to Line number:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Cntrl</span><span class=\"o\">+</span><span class=\"n\">g</span> <span class=\"n\">is</span> <span class=\"n\">a</span> <span class=\"kt\">short</span> <span class=\"n\">cut</span> <span class=\"k\">for</span> <span class=\"n\">typing</span> <span class=\"n\">Cntrl</span><span class=\"o\">+</span><span class=\"n\">p</span> <span class=\"o\">-&gt;</span> <span class=\"n\">type</span> <span class=\"s\">\":\"</span></code></pre></figure>\n\n<h2 id=\"code-specific-settings\">Code Specific Settings</h2>\n<p>To set-up a code specific file in sublime open the type of file you want to edit (e.g. for a Stylesheet open a .CSS file) then go to Sublime Text 2 menu:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Preferences</span> <span class=\"o\">-&gt;</span> <span class=\"n\">Settings</span> <span class=\"o\">-</span> <span class=\"n\">More</span> <span class=\"o\">-&gt;</span> <span class=\"n\">Syntax</span> <span class=\"n\">Specific</span> <span class=\"o\">-</span> <span class=\"n\">User</span></code></pre></figure>\n\n<p>This will then be the file for the selected syntax ONLY. Otherwise it defaults to your preferences file.</p>\n\n<h2 id=\"markdown-settings\">Markdown Settings</h2>\n\n<p>For Markdown and Multi Markdown files I use the following Gists:</p>\n\n<ul>\n  <li><a href=\"https://gist.github.com/vipickering/6672778\" rel=\"external\">Markdown</a></li>\n  <li><a href=\"https://gist.github.com/vipickering/6672771\" rel=\"external\">MultiMarkdown</a></li>\n</ul>\n\n<h2 id=\"maintaining-code-consistency\">Maintaining Code Consistency</h2>\n\n<p>My configuration file for CSS Comb is <a href=\"https://gist.github.com/vipickering/6582514\" rel=\"external\">here</a>. I tend to order my files by most frequently edited properties grouped together near the start and less used near the end. My reasoning for this is that errors are usually spotted very quickly.</p>\n\n<h2 id=\"projects-set-up\">Projects Set-up</h2>\n<p>Because I can be working on multiple machines with different machine names I don’t like to include the project or workspace files in a Git commit, so I exclude them to avoid polluting someone else’s set-up.</p>\n\n<p>Projects are super simple to set up there are multiple methods, but my preferred method is to drag the project folder on to the Sublime Text icon in the dock, this should open up the project in the side bar.</p>\n\n<p>I then go to:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Project</span> <span class=\"o\">-&gt;</span> <span class=\"n\">Save</span> <span class=\"n\">Project</span> <span class=\"n\">As</span><span class=\"p\">..</span></code></pre></figure>\n\n<p>Type a name and save the project files in the root of the project.</p>\n\n<p>To switch projects really fast press:</p>\n\n<figure class=\"highlight\"><pre><code class=\"language-c\" data-lang=\"c\"><span class=\"n\">Cntrl</span><span class=\"o\">+</span><span class=\"n\">Alt</span><span class=\"o\">+</span><span class=\"n\">p</span></code></pre></figure>\n\n<p class=\"updateHighlight\"><strong>Updated:</strong> 4th September to include code short-cuts, project information and more process information.<br /><strong>Updated:</strong> 23rd October to include additional packages.</p>\n\n",
            "url": "https://vincentp.me/blog/sublime-text-setup",
            "date_published" : "2013-08-30 00:00:01 +0100"
        },
        {
            "id": "https://vincentp.me/blog/solving-twitters-mixed-metaphors",
            "title" : "Solving Twitters Mixed Metaphors",
            "content_html": "<p>It’s highly likely that you found this blog post through Twitter, or at the very least you use Twitter on a daily basis. As social networks go, it’s the one that has hit the sweet spot, indispensable for disseminating information and finding like minded people. Every day millions of people use it, every day somebody somewhere says something that grabs other peoples attention and at that point they reach for the “favourite” and “re-tweet” buttons…And that’s when UX people like myself start to get a bit ‘twitchy’.</p>\n\n<h2 id=\"whats-in-a-word\">What’s in a word?</h2>\n<p>Ever since the early days of Twitter the “favourite” button has bothered me, it’s a confused metaphor that doesn’t really know what it is. Try the following question to a group of people you know:</p>\n\n<p>When you click the favourite button on a tweet are you:</p>\n\n<ol>\n  <li>\n    <p>“Liking” the tweet, in the same way you use the Like Facebook button or +1 on Google Plus?</p>\n  </li>\n  <li>\n    <p>Bookmarking the tweet, saving it for later?</p>\n  </li>\n</ol>\n\n<p>I guarantee the answers will be mixed, especially if you ask a group of non-technical people. The problem really doesn’t lie in the question or the users, is the dual use of this button to do both things in the context of Twitter where the metaphor breaks down and users are confused.</p>\n\n<p>Extrapolating this further, let’s look at some Use Cases for people pressing the favourite button in its current format and why that might be a bad idea.</p>\n\n<h2 id=\"scenario-1-the-blogger\">Scenario 1: The Blogger</h2>\n\n<ul>\n  <li>User sees in their stream a series of controversial tweets from someone in the public eye. They disagree with them greatly and want to bookmark them for a blog post later.</li>\n  <li>The user clicks “favourite” on each tweet.</li>\n</ul>\n\n<p>Clicking “favourite” isn’t something that makes sense when you simply want to save something for later, the metaphor breaks down and is confusing, Twitter newbies are often unaware they can save a tweet at all.</p>\n\n<h2 id=\"scenario-2-public-relations\">Scenario 2: Public Relations</h2>\n\n<ul>\n  <li>A user is upset with a service and tweets at the company’s Twitter account of the product to register their dis-satisfaction while pointing out a problem with the service received.</li>\n  <li>The Public relations person, responds to the tweet to placate the customer but would also like to bookmark this conversation for future reference, so they “favourite” the tweets.</li>\n</ul>\n\n<p>In this scenario not only is the company “favouriting” a complaint against their own company, this favourite is publicly available on their Twitter stream for all their customers to see! It’s hardly an ideal scenario for a company (or individual for that matter) to be saying:</p>\n\n<p>“I like this complaint against me, so much I favourited it!”</p>\n\n<p>By now, it’s clear “favourite” and bookmark in a social context shouldn’t really be mixed. If you favourite something for bookmarking purposes on a publicly available channel can send mixed messages to friends, followers or even worse to clients, but re-tweeting is totally fine and makes sense, that’s still ok…Right?\nUm. No. Sorry, it’s also a muddled mess.</p>\n\n<h2 id=\"share-and-share-alike\">Share and Share Alike</h2>\n<p>Re-tweeting is an odd beast, the first instinct is to think that if someone in your stream re-tweets something that implies automatic buy-in to the tweet.</p>\n\n<p>“I like this, you should read it”.</p>\n\n<p>But this isn’t the case, people re-tweet controversial views or opinions diametrically opposed from their own, not with the intent of agreeing but to try and co-opt opinion that the tweeters view is wrong and attempting to gain public acceptance that their opposing view is correct.</p>\n\n<p>In essence, when debate happens opposing views are repeated by opposing parties as well as the people who hold that opinion, it’s a natural part of debate and conversation. Repeating a view doesn’t imply agreement with that view.</p>\n\n<p>Use Case time!</p>\n\n<h2 id=\"scenario-1-celebrity-faux-pas\">Scenario 1: Celebrity Faux Pas</h2>\n\n<ul>\n  <li>Female celebrity X tweets “If you’re not size zero, it’s time to hit the gym”.</li>\n  <li>Female celebrity x tweets “Double-D’s too, seriously girls get some”.</li>\n  <li>Women’s rights group re-tweets both messages.</li>\n  <li>Women’s rights group responds to female celebrity X “comments like that degrade women everywhere, be happy with who you are”.</li>\n</ul>\n\n<p>In this instance, the women’s rights group is implying the context of disagreement by who they are, but not everyone may be familiar with their organisation and understand their position unless they read the final tweet back to the celebrity. Re-tweeting isn’t implying agreement and context is unclear if all parts of the conversation are missing from a user’s stream.</p>\n\n<h2 id=\"scenario-2-the-big-announcement\">Scenario 2: The big announcement</h2>\n\n<ul>\n  <li>A popular band announces they are reforming for one last show.</li>\n  <li>Their followers all re-tweet the announcement.</li>\n</ul>\n\n<p>In this scenario users are implying “I like this tweet, I have to share it”. Re-tweeting in this scenario does imply agreement and a desire to share the “good news”.</p>\n\n<p>It’s not quite as straight forward as it should be is it? Both these buttons have dual implications. You can’t even rely on combining both buttons interactions as a valid context. It’s perfectly plausible to re-tweet something you disagree with and bookmark it for future reference but to your followers it appears as if you “like” it and have shared it with them. The complete opposite to your intention.</p>\n\n<h2 id=\"connecting-the-dots\">Connecting The Dots</h2>\n\n<p>What we need to do is:</p>\n\n<ul>\n  <li>Maintain all the existing functionality.</li>\n  <li>Remove the ambiguity around what “favouriting” is.</li>\n  <li>Add context to re-tweeting so intent is obvious.</li>\n</ul>\n\n<p>What we want to do is show intent when a user clicks, we can do this by separating out functionality of bookmarking a tweet and “liking”.</p>\n\n<figure>\n  <figcaption>The bookmark link has been added, and in return the favourite button has been removed</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-07-11/tweet-bookmark.jpg\" alt=\"A tweet with the bookmark link added and favourite button removed\" />\n</figure>\n\n<p>OK, so now we have our bookmark link <sup><a href=\"#point1\" class=\"reference--number\">1</a></sup>, but by removing the “favourite” link we have lost the liking functionality.</p>\n\n<p>Firstly we need to change the use of the term favourite, even with a bookmark link it is still an ambiguous word <sup><a href=\"#point2\" class=\"reference--number\">2</a></sup>. It’s also worth bearing in mind that in order to add context to a re-tweet we will also need an opposite button.</p>\n\n<h2 id=\"enter-sentiment-buttons\">Enter “Sentiment” buttons.</h2>\n\n<p>I mulled over the terms for these buttons for quite some time before arriving at these options. In the context of Twitter we want to show our feelings without causing offence. Conversation is a two way street and introducing terminology that punishes or isolates people’s opinions will only push those opinions somewhere else. Encouraging discussion moves society forward and that’s the positive we want from this.</p>\n\n<figure>\n  <figcaption>A quick and dirty mock-up to show how sentiment could work in a tweet.</figcaption>\n  <img src=\"https://vincentp.me/images/blog/2013-07-11/tweet-sentiment.jpg\" alt=\"A tweet to show how sentiments could work\" />\n</figure>\n\n<p>In the end, my thought process arrived at “Loved” and “Unloved”. These terms are used in normal conversation all the time and imply a term stronger than “like” or “dislike” but also allow room for perspective to change that viewpoint. The essence of how the buttons work is baked in to the terminology and should help to clarify each buttons purpose.</p>\n\n<p>It’s an obvious solution in some respects, but sometimes all that’s needed is a gentle nudge to make a good thing great.</p>\n\n<ol>\n  <li id=\"point1\" class=\"reference\">The bookmark link would save a tweet to a private list of tweets for reference later.</li>\n  <li id=\"point2\" class=\"reference\">Let's not forget the I.E. term for bookmarks is favourite.</li>\n</ol>\n",
            "url": "https://vincentp.me/blog/solving-twitters-mixed-metaphors",
            "date_published" : "2013-07-11 00:00:01 +0100"
        },
        {
            "id": "https://vincentp.me/blog/analysing-data-to-enact-real-world-change",
            "title" : "Analysing Data To Enact Real World Change",
            "content_html": "<p><span class=\"dt-updated\">\n    <strong>Updated <abbr class=\"value\" title=\"2017-03-20 16:17:00\">2017-03-20 at 16:17:00</abbr></strong> : to correct style\n</span></p>\n\n<p>The “Internet of things” is starting to become a reality. Interconnected devices like <a href=\"http://fitbit.com\" title=\"Fitbit\" rel=\"external\">FitBit</a>, <a href=\"http://www.withings.com/en/bodyanalyzer\" rel=\"external\">Withings Scale</a>, <a href=\"http://www.nike.com/Fuelband\" rel=\"external\">Nike Fuel Band</a>, <a href=\"http://www.google.com/glass/start/\" rel=\"external\">Google Glass</a> and even your mobile phone can give us real-time access to hard data about ourselves. Never has humanity had such an opportunity to be able to really try to understand our own behaviour and to use that data to help ourselves grow and improve.</p>\n\n<h2 id=\"being-realistic\">Being Realistic</h2>\n<p>The tools we have to analyse the data often start out with well-meaning developers trying to simplify peoples lives. They do this by breaking down the information and giving users bite-sized chunks of data. It’s unfortunately a slightly naïve way to solve the problem and quickly breaks down over time leading to a dashboard of “stats for the day”:</p>\n\n<figure>\n<figcaption>A fictitious dashboard of context-less data depicting tweets, Facebook likes, weight gained, distance walked and calories consumed</figcaption>\n<img src=\"https://vincentp.me/images/blog/2013-05-18/dashboard.png\" alt=\"A picture of a fictitious dashboard\" />\n</figure>\n\n<p>Dashboards are often presented using graphs that aren’t appropriate for the data you are viewing to be useful and only serve as visual eye candy in a desperate attempt to keep interest focused, but even eye candy won’t keep the user happy for ever.</p>\n\n<h2 id=\"learning-from-the-past-to-improve-our-future\">Learning from the past to improve our future</h2>\n<p>In order to really understand how to make sense of user data in a personable constructive way we need to go back a few years…</p>\n\n<p>In 2005 I worked on the design of a statistical analysis tool for the NHS, (at the time it was the worlds largest database of anonymous patient records) it gave real power to doctors to be able to truly cross analyse information and look for trends, causes of illness and disease.</p>\n\n<p>For example, if a doctor wanted to look for corroborating data and compare on patients with “Condition X” they could group the data and cross reference with many key factors such as: age, location, previous ailments, genetic traits, gender and much more. It was an incredibly powerful statistical tool to help doctors focus on their research and making a breakthrough.\nThe key to the tool’s usefulness was that every answer gave you an action on your query and a new perspective on a current line of thought. The main thing to focus on here is that you nearly always knew what to do next from the outcome.</p>\n\n<h2 id=\"context-is-key\">Context is key</h2>\n<p>Returning to the original problem, stating single facts lacks any context. Telling a user “Today you tweeted 27 times” is actually meaningless. There is no context for this statement. Is 27 good or bad? If you tweeted 789 times yesterday, does that actually mean 27 today is a good number or is it a bad number? There is literally nothing I can do with this fact that gives me anything constructive to do.</p>\n\n<p><strong>Instead give me a statistic with an action point, create intelligent queries and rules that have context to give meaningful results</strong>.</p>\n\n<p>For example, take the hypothetical situation:</p>\n\n<p>If I had a web app that could allow me to make queries in a similar fashion to <a href=\"http://www.ifttt.com/\" title=\"IFTTT\" rel=\"external\">IFTTT</a>. Then I could create a query to help keep my social network standing intact and ran when the following conditions were met:</p>\n\n<p>If I check-in to more than 3 bars between the hours of 19:00 and 00:00:</p>\n\n<ul>\n  <li>display all Twitter posts during the period.</li>\n  <li>display the change in my Twitter stats before 19:00 and after 00:00.</li>\n  <li>display all Instagram posts during the period.</li>\n  <li>display my weight difference from my weigh in before 19:00 and my weigh in the following morning.</li>\n</ul>\n\n<p>The next morning, using this query the system could automatically run the report and display to me the results so I could see that:</p>\n\n<ul>\n  <li>I tweeted a lot that night, but the quality of the tweets was poor and this caused my followers to drop.</li>\n  <li>The frequency of photos posted on Instagram increased dramatically.</li>\n  <li>My weight increased from all the alcohol and bad food I ate.</li>\n</ul>\n\n<p>This data now gives me actions on how to better prepare next time I go on a night out.</p>\n\n<ul>\n  <li>I could disable my Twitter access when on a night out to stop me annoying my followers with drunken tweets.</li>\n  <li>I could plan my diet by eating fewer calories during the day so the additional alcohol and food doesn’t impact on my weight so greatly.</li>\n  <li>I should log in to Instagram the next day and check I didn’t post anything offensive!</li>\n</ul>\n\n<p>When we give our data context it gives us the tools to act upon it and becomes infinitely more powerful. Without context to data, we are often unable to make it relevant to ourselves and our daily lives.</p>\n",
            "url": "https://vincentp.me/blog/analysing-data-to-enact-real-world-change",
            "date_published" : "2013-05-18 00:00:01 +0100",
            "date_modified" : "2017-03-20T16:17:00+00:00"
        }
    ]
}

The biggest gotcha, is that by using the jsonify filter in your liquid tags, you don’t need the quotes. They are added automatically.

Finally, you will need to ensure you add commas if there are more items in your list and not output a comma if it is the final item.