{"search":[{"url":"/blog/hello-world-first-blog-post/","title":"Hello World! First blog post.","text":"I’ve decided that 2016 is the year I start writing regular blog posts - and I just about made it, 2017 is just around the corner. I’ve never I’ve decided that 2016 is the year I start writing regular blog posts - and I just about made it, 2017 is just around the corner. I’ve neve","readabletitle":"hello world! first blog post.","keywords":"hello world! first blog post. i ve decided that 2016 is the year i start writing regular blog posts - and i just about made it 2017 is just around the corner. i ve never properly done it i ve written a few posts for my business websites’ blog but they came once in a blue moon - not good i know. why now some say that blogging is no longer relevant but for me i want to use it to improve my writing and also to document what i learn as a front-end developer maybe rant and ramble now and again. that s it i m not hoping for hundreds or thousands of readers i d be happy with two. :) what s the plan so over the years i have read a lot! a lot of it goes in and doesn t stick. so my plan is to take something i want to learn about for example flexbox read about it play around with it create some demos and write about what i have learned. simple right so this year i am going to learn javascript. so i will be writing about what i have learned but i also want to play around with flexbox srcset and loads of other exciting front-end techs. exciting times ahead. i ve decided that 2016 is the year i start writing regular blog posts - and i just about made it 2017 is just around the corner. i ve never properly done it i ve written a few posts for my business websites’ blog but they came once in a blue moon - not good i know."},{"url":"/blog/newsletters-for-front-end-developers/","title":"Newsletters for Front-end developers","text":"Because there is so much content and noise on the web about development theses days, its difficult to find great ressources - its also very Because there is so much content and noise on the web about development theses days, it s difficult to find great resources - it s also ver","readabletitle":"newsletters for front-end developers","keywords":"newsletters for front-end developers because there is so much content and noise on the web about development theses days it s difficult to find great resources - it s also very easy to miss hearing about new software or new techniques via social media and i find newsletters to be a great way of keeping up with the latest. you don t have to read every single article in every single newsletter but what you will find is that some links repeat across newsletters so you know it s worth reading it then. bellow is a list of all the newsletters that i am currently subscribed to. hopefully you will find some that you aren t subscribed to yet. let me know if there are other great newsletters that i should subscribe to and add to the list - send me a tweet or message. newsletters css animation weekly - https://cssanimation.curated.co/ css layout news - http://csslayout.news/ css tricks - https://css-tricks.com/ css weekly - http://css-weekly.com/ design systems - https://designsystems.curated.co/ front end front - https://frontendfront.com/ from the front - https://frontendfront.com/ frontend focus - http://frontendfocus.co/ paul jarvis - https://pjrvs.com/signup/ perchology - https://perchology.curated.co/ offline first - http://offlinefirst.org/news/ the smashing magazine - https://www.smashingmagazine.com/the-smashing-newsletter/ tobias van schneider - http://www.vanschneider.com/signup/ ui animation newsletter - http://valhead.com/newsletter/ ux booth - http://www.uxbooth.com/subscribe/ web tools weekly - http://webtoolsweekly.com/ webaim - http://webaim.org/newsletter/ because there is so much content and noise on the web about development theses days its difficult to find great ressources - its also very easy to miss hearing about new software or new techniques via social media. newsletters are still a great way to keep up with all thats happening in our industry and front end development."},{"url":"/blog/adding-svg-icons-to-a-sprite-with-perch-cms/","title":"Adding SVG icons to a sprite with Perch CMS","text":"Allow a Perch CMS user to add SVG icons to an SVG sprite and use them through out the website. Usually, SVG sprites are created by a develop I wanted to be able to allow a CMS user to add an SVG icon to a sites SVG Sprite. An SVG sprite is the new way of doing image sprites, like","readabletitle":"adding svg icons to a sprite with perch cms","keywords":"adding svg icons to a sprite with perch cms i wanted to be able to allow a cms user to add an svg icon to a sites' svg sprite. an svg sprite is the new way of doing image sprites like the old way of doing css image sprites - where you would put all your icons on one image files then use css to position that image to show the icon you needed this is essentially the same thing but instead it s a list of svg icons that can be used throughout a site. see this article on css tricks about creating an icon system with svg sprites usually svg sprites are created by a developer/designer when building a website and then never revisited unless the site has a redesign. the creation of a sprite is likely to be an automated process using a task runner like grunt or gulp js. but this process does not apply to a site once it s gone live and is managed by a content management system (cms). a similar technique inspired me to create this. see clive walker s post - using perch layouts and managing svg assets with perch . let s get into the code to start you need to create a php file which will list all the svg icons. this php file has to be included on all pages - but they will be hidden. this file is not in the root of the site and is not indexed by search engines. once you have that setup you can include the ability to add svg icons to your templates and all the user needs to do is insert the id of that svg. create a php file inside the /perch /includes/ - you don t have to create the includes folder but i like to keep these types of files separate. i called the page svgs.php but you can name it anything - icons.php may have made more sense. < php include($_server['document_root'].'/cms/runtime.php'); > &lt svg xmlns=&quot http://www.w3.org/2000/svg" xmlns xlink=&quot http://www.w3.org/1999/xlink" aria-hidden=&quot true" style=&quot display: none" class=&quot hidden"> < php perch_content('svgs'); > </svg> in this php file i have a perch_content tag called svgs - again this could be called anything. make sure you include the runtime.php as per usual and then go to that file on your website: websiteaddress.uk/cms/svgs.php - you can now edit that page via perch cms. you need to create a new template for adding icons to the svgs.php file. create the template in /templates/content/ and you can call it anything you want; i called mine svg_icons.html and use the following code: &lt perch before> &lt svg xmlns=&quot http://www.w3.org/2000/svg" xmlns xlink=&quot http://www.w3.org/1999/xlink" aria-hidden=&quot true" style=&quot display: none" class=&quot hidden"> </perch before> &lt symbol id=&quot svg-&lt perch content id=&quot id" type=&quot text" label=&quot id" requi red=&quot true" size=&quot m" />" width="&lt perch content id=&quot width" type=&quot text" label=&quot width" required=&quot true" size=&quot s" />" height="&lt perch content id=&quot height" type=&quot text" label=&quot height" required=&quot true" size=&quot s" />" viewbox="&lt perch content id=&quot viewbox" type=&quot text" label=&quot viewbox" required=&quot true" size=&quot m" help=&quot format: 0 0 0 0" />"> &lt title>&lt perch content id=&quot title" type=&quot text" label=&quot title" required=&quot true" title=&quot true" order=&quot 1" /></title> &lt perch content id=&quot text" type=&quot textarea" label=&quot svg paths" html=&quot true" editor=&quot markitup" /> </symbol> &lt perch after> </svg> </perch after> now log in to your perch cms and go to pages > svgs click on the icons region and select the new template - svg icons - make sure you check 'allow multiple items' so that you can add multiple icons. you need to include this code on all the pages that you want to be able to use the svg icons on - i would add it to you header layout - make sure it s placed just after the tag. < php perch_content_custom('svgs' array( 'page'=>'/cms/includes/svgs.php' 'template'=>'svg_icons.html' )); > let s go back to the svgs page - pages > svgs and let s add an icon. &lt img src=&quot https://res.cloudinary.com/juanfernandes/q_auto f_auto//v1579162293/svgs-1.png" alt=&quot adding an svg icon"> the svg_icons.html template gives you the following fields: title - if you are not hiding this icon for visually impaired users you should give it a title id - this has to be a unique name as it will be used to refer to the icon width and height viewbox and svg paths. fill all of these in - you get this information by opening the svg using your ide - like sublime text. save this. once saved that icon should now be in the svgs.php page - but it won t be visible because we are hiding the svg container. this is what the output will look like inside the &lt svg> tag in the svgs.php file: &lt symbol id=&quot svg-html5" width=&quot 150px" height=&quot 150px" viewbox=&quot 0 0 32 32"> &lt title&gt html5 icon</title> &lt path d=&quot m4.665 3.411l2.063 23.176 9.258 2.574 9.284-2.578 2.065-23.172h-22.671zm8.951 8.911l-0.068-0.763h7.107v2.842h-4.005l0.259 2.911h3.746v2.842h-6.341l-0.698-7.833zm22.518 14.665l-0.667 7.483-0.043 0.48-5.822 1.616-5.814-1.616-0.398-4.463h2.849l0.202 2.267 3.163 0.854 3.165-0.856 0.329-3.686h-3.485v-2.842h6.587l-0.069 0.763zm23.032 8.911l-0.129 1.441-0.057 0.639h-6.846v-2.842h7.1l-0.068 0.762z"></path> </symbol> include the following code on any template where you want the user to be able to add an svg icon from the sprite. &lt svg aria-hidden=&quot true">` &lt use xlink href="#svg-&lt perch content type=&quot text" id=&quot skill-icon-id" label=&quot icon id" required=&quot true" size=&quot m" help=&quot svg icon id name" />" /> </svg> by adding the above code in a template in perch you can use an svg icon from the svgs.php file. &lt img src=&quot https://res.cloudinary.com/juanfernandes/q_auto f_auto//v1579162293/svgs-2.png" alt=&quot adding an svg icon to your content"> you should now be able to add your own svg icons to your svg sprite via perch cms. this solution is what i am using on my own website and will be using in all future website that i create that use perch cms. what do you think of this solution can you see any way this can be improved i d love to get some feedback - this is the first time i have shared any code that i have used in perch. allow a perch cms user to add svg icons to an svg sprite and use them through out the website. usually svg sprites are created by a developer/designer when building a website and then never revisited unless the site has a redesign. the creation of a sprite is likely to be an automated process using a task runner like grunt or gulp js."},{"url":"/blog/2016-year-in-review/","title":"2016: Year in review","text":"My first ever year in review post, let s see how it went! 2016 was not a great year, in general for a lot of reasons They must have liked me at G2G3 Digital, because they offered me a permanent role, which I gladly accepted, but working out of their London","readabletitle":"2016: year in review","keywords":"2016: year in review they must have liked me at g2g3 digital because they offered me a permanent role which i gladly accepted but working out of their london office instead of sheffield. but shortly after this capita who owned g2g3 bought another agency and g2g3 was no more we became orangebus. ninety percent of the sheffield staff were made redundant. :( in september a colleague and i got to work on an awesome project - a hi-fidelity prototype proof of concept app for globecast . this was a really quick turnaround project but i got a chance to implement a basic serviceworker script so that the app would work offline. i plan on doing a case study for the globecast work. sadly myself and a few others from the london office were made redundant just before christmas and now i m back to working freelance full-time. health health has not been great and my long train journeys didn t help - it didn t leave me with much time left for doing any sort of exercise. the only exercise i managed was a 30m walk to the office each way i chose to walk rather than get the tube. my posture due to years of bad posture while working on computers for over 15 years has had a massive impact on my health. i have started seeing a physio about this and being more aware of my posture. i did start doing weights but this kind of fell through again due to lack of time so i m going to be picking this up again but after the physio says is ok to do this. i m going to start regular swimming and running! swimming will help with my posture and upper body health. running should help me improve my overall fitness. reading have read a lot of articles in 2016 due to my long train commutes but i realised i was consuming a lot but wasn t sure how much of it was sticking - a lot of reading and not a lot of practising what i was reading. this is something i want to change this year. feeling overwhelmed with all the unread articles i decided to delete 90% of my unread instapaper articles and was only left with articles dating back 1 year. i managed to read more fiction and i want to do a lot more of that next year. i ve set a target of 10 books i only managed to read 4 books in 2016. i ll also be reading a lot more non-fiction self-help types of books - like deep work and more. writing finally started blogging even though i only managed a few posts it s definitely a good start for me as it s something i ve never done but have always wanted to. i hope to use blogging as a way to remember what i have learnt and read about and hopefully others will find it useful. numbers i read a few year in review posts and some had posted number i liked this idea - so here are some numbers. i m going to do a better job of collecting this kind of data for next year s review. books read: 4 blog posts published: 3 coffees: 158 conferences attended: 1 client projects: 4 side projects: 3 games played: 2 minecraft firewatch tv shows watched: 24 11.22.63 agents of shield banshee blindspot childhood s end colony fear the walking dead humans mr robot outcast peep show plebs red dwarf revenge slasher the man in the high castle the strain the x-files undatable walking dead wayward pines westworld zoo znation films watched: 6 deadpool westworld the secret life of pets arrival finding dory the good dinosaur moana looking ahead i have quite a list of things i want to achieve this year - i hope it s not too many things as we all know if we try to achieve too many things at once it just sets us up for failure. i ve been thinking of starting a local community for a while either for web designers or for website owners - so either a meetup for web designers in the area or a home brew computer club. work establish my freelance business because i was made redundant i didn t have a plan for going full-time freelance and i am currently looking for work. depending on whether or not i find a freelance client in the next few weeks will determine whether or not this year is the year i go full-time freelance. but one thing is for sure i do not want to go back to working for someone else on a permanent basis. that is just not me. i will be looking at possibly going back into contracting just so i can get some savings in place for being able to go full-time freelance. health exercise more and eat healthier i have started the year with a '31 days of yoga' video course currently at day 9 and oh boy you wouldn t think yoga would be that hard but when you have spent years sat at the computer with bad posture you soon discover how inflexible your body has become. have started having smoothies for breakfast again then just a light snack for lunch. something else that i read about that i wanted to try this year - no caffeine or alcohol - yup! in 2016 i cut down the number of coffees i had a day to just 2 max because i started having double espressos i found that i rarely needed a second one throughout the day. but after reading a post by tobias van schneider - no alcohol no coffee for 27 months { http://www.vanschneider.com/no-alcohol-no-coffee-for-15-months-this-is-what-happened/ } - i realised i was having some of the effects of caffeine and had never attributed it to caffeine. giving up alcohol for me is just a health thing i ve had way too many beers and my belly is showing that! we ll see how long that lasts but i m not hopeful - i have a trip to madeira in the next few weeks to see my parents and its tradition to stop off at a bar on the way home from the airport to have a poncha . finally another new thing for me in 2017 - i have started meditation - it has become really popular over the years and i never thought it as something for me but after my wife went to a mindfulness meditation course and we spoke about it i have wanted to try it myself. let me know if you have reviewed your year i d love to read it. if you want to read a few more year in review posts - check out the year in review for makers website. my first ever year in review post let s see how it went! 2016 was not a great year in general for a lot of reasons"},{"url":"/blog/automatic-copyright-year-in-perch-cms/","title":"Automatic copyright year in Perch CMS","text":"How to auto update your copyright year with Perch CMS. In this short blog post I share a small code snippet that you can add to automaticall One of the things I still get asked to do a lot by clients, ones that don t have a site that is managed by a CMS - is to update their copyr","readabletitle":"automatic copyright year in perch cms","keywords":"automatic copyright year in perch cms one of the things i still get asked to do a lot by clients ones that don t have a site that is managed by a cms - is to update their copyright year on the footer. now this is fairly easy to do using php on its own just using this line of code: < php echo date(&quot y"); > but you if allow your cms users to edit the copyright text then you can t use php in a perch html template. after reading this article passing variables into templates i created this code snippet that sets a variable with the current year and then i pass this variable to the perch template. < php $curyear = date('y'); perchsystem::set_var('curyear' $curyear); perch_content_custom('footer' array( 'template'=>'footer.html' )); > this is the perch template i use to add the copyright text and year. &lt p class=&quot copyright">©2015 - &lt perch content id=&quot curyear" /> &lt perch content type=&quot text" id=&quot footer-copyright" label=&quot copyright text" required=&quot true" /></p> this may be a bit over the top i could simply just added the php code in the footer template and not allow the user change the copyright text but my copyright statement is part of a bigger template that needs to be cms managed. i hope you found this tip useful. let me know if you see any way i could improve this code. how are you setting the copyright year how to auto update your copyright year with perch cms. in this short blog post i share a small code snippet that you can add to automatically update your copyright year."},{"url":"/blog/website-design-process-working-with-me/","title":"Website Design Process - working with me","text":"This is my website design process. In this blog post I detail my process from initial client contact to the end of a project. In this blog post, I m going to break down my process from initial client query to project completion. Have you ever wondered what it is li","readabletitle":"website design process - working with me","keywords":"website design process - working with me in this blog post i m going to break down my process from initial client query to project completion. have you ever wondered what it is like to work with a website designer does it stop you hiring one because you don t know how they work - what if your ways of working don t align with theirs i hope that by sharing my process you might find we would work well together. let s get started after a potential client has been through the onboarding stage which we wont cover in this post we schedule a meeting - this meeting can either be face to face if you re local or a skype video call - i can travel to your offices if you prefer. the purpose of the meeting is for us to discuss your project in detail - this gives me an idea of the priorities overall goals and project complexity. whether its a new website or an existing one we will cover pages you need what functionality you want existing branding. we ll talk about colours typography and images - the look and feel you are after and logos websites you love and hate - all of this will help me when it comes to the design stage - it helps me visualise your project. after our meeting there are a few things that i will need you to do. i will need you to create a pinterest board or a word document and fill it with visual inspiration for your website complete the design questionnaire and have upload all your website content (text and photos) to the google drive folder i share with you. i will then work on your project proposal - this will detail how i intend on solving your problem in detail the cost and the contract - don t worry the contract is written in plain english and it s designed to help both of us in case we change our minds during the project. it will also explain what happens next. what happens next providing you are happy with the proposal contract and there are no amends needed - but you are free to suggest amends. a typical project is split into three stages design build and live - but before the first stage can start - i will need you to have signed and returned the contract as well as a down-payment of 50% of the total project cost. this enables me to schedule you in create a project plan and start working on the design. we will be in constant contact throughout all of the stages and you will have access to the project hub - a place where you can check the process of your website. while you are checking if you find any issues at this stage i will need you to log them on a spreadsheet that will be created for this project - this allows me to focus on getting things done and we wont lose track of any issues. finishing up we will catch up once more before the site goes live. if you have chosen a cms i will show you how to update your website we will go over the documentation to make sure it all makes sense and you are able to edit your site. after i receive the final payment the website goes live and you can start sharing your new website. but this isn t the end i will always be on hand to help you with your website if you get stuck or have any issues or decided to add more to it. my process is not set in stone and neither should yours - it should be constantly reviewed and changed to suit your needs. have you found this post useful did i miss anything out that you would like to know more about please leave a comment and i will be more than happy to get back to you or even add to this post. this is my website design process. in this blog post i detail my process from initial client contact to the end of a project."},{"url":"/blog/my-web-design-journey/","title":"My Web Design Journey","text":"I want you to know about my past, my journey as a website designer and how I can help you. I thought I’d write a post about how I got starte I want you to know about my past, my journey as a website designer and how I can help you. I thought I’d write a post about how I got start","readabletitle":"my web design journey","keywords":"my web design journey i want you to know about my past my journey as a website designer and how i can help you. i thought i d write a post about how i got started as a website designer and eventually becoming a freelance website designer. how it all started well let s take a journey back in time - if you ve met me you ll no doubt get that i m a bit of a geek! i went to college to study gnvq information technology at an intermediate level - i then moved onto the advanced version of the course the year after but a few months into it i realised that this wasn t for me - it was far too theory based and i was more into the practical side of technology. as well as my love of computers i d discovered the internet in my first it course but i wasn t just browsing websites - i wanted to know how they were built so i spent a lot of time looking at websites’ source code and copying everything i found that was ‘cool’. yes i had a geocities website - remember those unfortunately i don t have any screenshots of those early sites - phew! i decided to find out what courses taught web design but back then there wasn t a specific course for web design - so i did the next best thing - a higher national diploma in multimedia - a course that covered web design game design video and music production photography and programming. this course allowed me to get really creative and i knew i had found what i wanted to do for a living! part of the course was to work with a local business owner to design and develop a website for their business. this is what we did as a group: i ended up working privately with that client and he has been my client ever since. after the 2 years doing the hnd multimedia course we were given the option of staying on for a 3rd year to get a ba degree in multimedia - i stayed. i got a 2.2 for my ba - turns out i wasn t that great at researching and writing a 15000-word dissertation - it brought my mark down from a 1st for my practical work to a 2.2 - oh well! i can t remember the exact title of my dissertation but it was about looking into the impact that digital equipment was having on the music over analogue equipment for example vinyl vs cd etc. i remember being told that we should send out questionnaires - but for me sending out paper questionnaires seemed like an archaic thing to do so i built a website with my questions that saved the answers to a database - all very basic but it worked - shows you how interested i was in writing a dissertation. :d after i finished college and got my bachelors degree i tried to get a job as a website designer but back then there wasn t that many companies doing web design and the ones that were were too small to hire me because i didn t have any commercial experience and i couldn t get any commercial experience because i couldn t get a job - the ol' catch 22! so i got a job working at tesco! i started stacking shelves like everyone does and i had done before while at college - but after a month i moved up to stock control but i really did not like working in a store. i ended up getting an it job working for the nhs working as an it support analyst. soon after i ended up working with an it manager on a new project to refit all local doctors surgeries with brand new computers and servers it was just me and him - it was great. i loved this project so much this project was my first foray into self-employment - i know i wasn t self-employed but because it was just me and this manager we got to schedule our own time and workload. i ended up being the first port of call for all gp it issues. but even though i was loving my it job i was still doing web design work in the evenings after finishing my job - also known as 'moonlighting'. i teamed up with a colleague from my multimedia course who was also not having any luck getting a job as a web designer. we created a partnership and traded as multi creative media. this was our first website - my business partner was the creative genius! we carried on working together for a few years i then landed my first ever website designer job working at tesco compare - one of the first insurance comparison websites - yeah i know tesco again :d i was actually employed by rbs - tesco compare was a joint venture between rbs and tesco but after 2 years working there tesco bought the rbs half of the business and a year later they moved the business to scotland. i was offered my job up there but at that time i was recently married and we had our first child - we didn t want to move to scotland. it was time to move on my second website designer job was working for tui travel at crystal ski - i was working as a ux developer. this was a huge leap for me working in the ux department and as a front-end developer ( a new name for website designer). i got to work on some great projects some that were just for testing out new ideas to see if they would work and others actually got implemented. the last thing i worked on was the snow reports section on the crystal ski website and it still in use - yay! i found that job and company quite restrictive in the end i loved the people i was working with but the politics & rules of big companies really got to me. i moved onto to a new job - working as a front-end developer for a company called motortrak - they are an agency that specialises in building cms sites for the used car market. i got to work with some great people and some great brands including mclaren mercedes-benz land rover and tom hartley. i lasted about 2 years at this job this time. it was going great i started building an internal framework that was going to be used to build all websites and it was responsive but my very supportive head of technology left and things took a turn - the company really changed into something that i didn t like so it was time to leave. at that time i was working from home 3 days a week i was in the office monday and tuesday. i had moved to suffolk from surrey - i was driving down for the 2 days and then coming home. i decided to leave. i also decided that i was going to work for myself. no more big company rules and politics to deal with. i built this website it has changed a little bit since then for the purposes of finding work. after about 6 months i found my first contract job. i got a 3-month contract working in norwich with virgin wines - they were re-building their entire front end website and back-end. this was a great first contract but i felt like i wasn t good enough for it so i was always staying late - until about 8 pm which meant i d get home at about 10 pm and i did that for a few months. it was hard work but i learnt a lot. the setup was quite different there were 3 contractors and 3 perm staff we got given a room and for the duration of the project each developer was paired with a designer and we worked closely on the section we were designing and building. this was a great way of working. we were also using pattern lab and building out a style guide - this was amazing i had read so much about it to actually work this way and seeing how it was being used by other people in the company was great. i ve had a few more contracts since then but now i am trying to focus more on freelance work. this is the kind of work that i thrive on. i love solving problems i do like working with other people and i do if i need a new logo for a client website or if a client needs something that is beyond my skill set. but the majority of the time it is just me. when i started contracting i took my old name multi creative media and registered it as a limited company and i still use that company name but this year i decided that i was just going to trade as myself - juan fernandes freelance website designer. this felt like the right thing to do working as multi creative media i always felt that i gave the impression that i was bigger than i actually was - website copy referred to ‘we’ rather than ‘i’ etc. all in all i have about 12 years of experience as a website designer having gained that experience working in many roles and a few different industries. after my second contract working as an interaction designer with a great team up in sheffield i was offered a full-time position but based in their london office - i didn t think twice about accepting it but i should have. because i had worked with such a great bunch of people i forgot about my dislike for big companies i also thought that working from london would have been the same as it was when i worked in sheffield. things weren t the same and a lot of change happened within the company - 90% of the sheffield office were made redundant and then 6 months later i too was made redundant. so i decided to go back to contract work and also work on establishing myself as a freelance website designer. when i say i dislike working for big companies i m not saying there is anything wrong with them - i believe that i am not suitable to work for large companies. what i didn t realise all those years was that perhaps i was not suited to permanent work for companies and that i should have started working for myself all those years ago. but i have gained a lot of experience. i hope that by reading this quite long post you have gotten to know me a bit better and have learnt about my journey to becoming a company of ‘juan’ and establishing myself as a freelance website designer. i want you to know about my past my journey as a website designer and how i can help you. i thought i d write a post about how i got started as a website designer and eventually becoming a freelance website designer."},{"url":"/blog/twenty-seventeen/","title":"2017: Year in review","text":"My 2017 year in review post - what went well, what didn t go so well. I look into work, health, personal and look ahead for 2018. Last year was the first time I wrote a year in review post and I ve been looking forward to reviewing twenty-seventeen. It was a good year","readabletitle":"2017: year in review","keywords":"2017: year in review last year was the first time i wrote a year in review post and i ve been looking forward to reviewing twenty-seventeen. it was a good year for me work-wise and personally. i got more contract work experience - two contracts and i also landed a freelance client website. we got quite a lot of work done to the house and i have very nearly finished the treehouse i started building for my children! they will get to finally use it in the summer. what went well being very self-critical its hard to notice when you ve had a good year because its easier to remember the not so good things that happened - but i making a point of thinking about the things that did go well first. work i only got did two contracts this year and to some contractors (and recruiters) this seems to be a big deal - not for me being freelance/contract doesn t mean you have to work every day of the year - if i did that i would pay a huge amount of tax (i pay all the taxes i m required to pay) and never get to spend any time with my family. it s funny how some people react when you tell them you re taking 4 months off work. technically i never stopped working i still run a business and a lot of business tasks get left behind when i m working away on a contract. my first contract of the year happened right at the beginning of the year in january. i got to work with a great ux research team at ofgem. this was a great role - my job was to build interactive prototypes based on the research the team had conducted. the prototypes were then tested on real users people selected at random based on certain criteria that we needed to test and i got to watch them interact with the prototypes i had built and seeing how it worked or didn t. after each testing session we would then iterated the prototype ready for the next session. i really enjoy this kind of work. this was followed by a freelance website design project - a new website for a new business selling prestige cars - lusso prestige. the client approached me to design and build a website for his new business - the client has been selling supercars for romans internationals for a quite a few years and he has taken all that experience and set up his own business. the client approached me based on a recommendation and based on the work i did at motortrak - an agency that specialises in websites for used car dealers like tom hartley mercedes benz mclaren ferrari and many more. this took me until june with a few breaks sprinkled in between. i was then offered a contract at intelliflo based in kingston upon thames. i was hired as a ux/ui front end designer and i was brought in to take an existing design and apply it to a new app that was being built in-house. this is was what s knows as an spa or single page app - using the angular framework and bootstrap. the team were building an app store and a developer portal - the app store will feature apps developed for their saas software product - intelligent office. i took the existing design and built a basic design system using pattern labs with sass and gruntjs. once i had built all the existing pages that had been designed and for the prototype working i was able to redesign pages components and build new pages and user journeys much faster. this was originally a 3-month contract which was later extended to four - i was asked to redesign the app store developer hub landing pages and the documentation sections. ended the year doing a quick job for molo finance - i was asked to design and build a temporary landing page as they currently do not have a website. after 4 months of being away from home and family - i decided to take a break from contract work until the new year. i travelled down to surrey sunday nights and stayed until thursday then i drove back after work and had the weekends at home - surprising how tiring this gets after four months. health my health has improved in 2017 and i hope to continue improving it this year. while working away in surrey on my last contract - i actually went to the gym twice a week. this was the first time i d been to a gym in about 10 years! so you can imagine this took some willpower to get me to the gym after a day at the office. i was also watching what i eat and was eating healthier meals. i find it so much easier to do this when i am away from home but this is something i need to get better at when working from home. what didn t go well reading i continued reading web design/development but didn t stick to reading 2 per day - this means i ended up with a huge backlog of articles that i ll never get to read and i ended up deleting a huge amount of unread articles twice last year. i only managed to read six books - i d set my self a challenge of reading ten books so i was a bit short there. but i ve made a good start on stephen kings the dark tower currently on the 4th book. writing only managed four blog posts last year not great but better than last year. i had some sort of block i wasn t sure who i was writing for who is my audience. focus twenty seventeen lacked focus. i ended up with too many things on the go both work and personal projects which meant the year ended with quite a few unfinished tasks. so already the start of this year has been lacking focus so this is why focus is going to be my theme for 2018. numbers i really like collecting stats! here are some number from 2017. tv series not all are finished some i ve already carried on watching this year. the coffee numbers aren t all there i ve gone through a few phones this past year so being able to log my coffees hasn t always been an option. tv series (17) arrow blindspot castle criminal minds: beyond borders colony dexter outcast parks and recreation quantico red dwarf the a-team the flash the gifted the orville the walking dead znation zoo movies (7) allegiant e.t. the extra-terrestrial flatliners insurgent judge dredd (1995) the day the fault in our stars the green hornet the jungle book (2016) games played (7) destiny doom dying light fallout 4 gran turismo horizon zero dawn (ps4) minecraft contracts (3) ofgem intelliflo molo finance side projects: 1 blog posts published: 4 books read: 6 coffees: 208 what s ahead for 2018 this year i going to have a theme - and that focus - i want to be better at focusing on getting things finished streamlining my business so i don t spend time doing unnecessary tasks or end up working more time than i need to. a great example of this is my accounts - since i started freelancing all those years ago i ve been doing my own accounts and that meant spreadsheets. but since i started my limited company and got an accountant it turns out he doesn t use my spreadsheet - he just needs the bank statements with some notes on items that aren t obvious - so it turns out i ve been doing unnecessary work. health : i want to continue improving my health. i m going to make sure i continue with the gym when i m away on contracts and will be building my own mini gym at home once i ve cleared out the garage. work : i need to get to a stage where my contracts are seamless without any large gaps in between. i also want to get into remote work so that i can spend less time away from home. writing : continue writing blog posts - i ve decided (thanks to some useful advice) to focus on writing for me this will allow me to improve my writing and allow me to discover who my audience is. reading : continue reading at least two design/development articles per day. carry on reading my steven king and technical books - get a least 10 books read this year. video : i also want to start creating more videos - i did some personal gaming ones but i want to create some web design video content in 2018. that s it for my year in review post for twenty-seventeen. have you written a year in review post i d love to read it. my 2017 year in review post - what went well what didn t go so well. i look into work health personal and look ahead for 2018."},{"url":"/blog/tools-i-use/","title":"Tools I Use","text":"Love posts that show what designers developers use to do their job – so I thought I’d post my own Update: I now have a /uses page which will be kept upto date. I love these posts that show what designers and developers use to do their jo","readabletitle":"tools i use","keywords":"tools i use update: i now have a /uses page which will be kept upto date. i love these posts that show what designers and developers use to do their job - so i thought i d post my own. it s been a long while since i last wrote anything so thought this would be an easy one to get me back into writing. update: these are the tools i like to use it s ones i use when i can but as a contractor i am used to adapting and using what ever tools the client needs me to use. so don t feel that just because i like a macbook doesn t mean i can t use windows. 😊 web design editor my editor of choice is sublime text 3 using the seti theme & colour scheme with whole bunch of add-ons and custom settings . i m happy with st3 and i know there are other editors like the new vs code but st3 is not broken for me so i don t need to change it. terminal for terminal emulation i have just started using iterm 2 - previously when using ubuntu i just used the default terminal - i tried hyper but i didn t get on with it. i have always used bash but now on the mbp i m trying out fish shell and oh my fish . desktop apps for design i use gimp - adobe photoshop is far too expensive does not work on linux (which is what i ve used for the past 10 years) and i never used more than 10% of its features. i still have to use ftp for some clients filezilla has been my ftp client of choice for a long time. my development browser is chrome - it has great developer tools and it s faster than firefox. i have firefox and opera for testing. firefox is my main browser. for notes and writing i use simplenote . it s cross-platform which means all my notes are available on my phone on the internet and my laptop. slack and skype for communication. currently trying out franz - an app that houses other apps like hangouts facebook messenger skype and more all under one app. desk setup my development machine is a 15" macbook pro 2018 with 32gb of ram and its plugged into a 21" samsung monitor. i ve only had the mbp for about a month. my previous machine was a 15" toshiba satellite pro with 16gb ram - it was about 4 years old. other gear my phone is a oneplus 5t for testing responsive websites i build i use the following mobiles and tablets: iphone 4s iphone 5s lg nexus 4 lg g3 google pixel 3 oneplus 5t kindle fire 10 ipad mini not forgetting notepads pens and pencils! have you written a similar post i d love to read about your setup. love posts that show what designers & developers use to do their job – so i thought i d post my own"},{"url":"/blog/2018-year-in-review/","title":"2018: Year in review","text":"Twenty eighteen year in review post where I talk about what went well and what didn t go so well. Covering some work and personal stuff. Twenty Eighteen was a good year for me, but not so good for the UK, USA or politics, but we won t talk too much about that here! I made it","readabletitle":"2018: year in review","keywords":"2018: year in review twenty eighteen was a good year for me but not so good for the uk usa or politics but we won t talk too much about that here! i made it point of avoiding politics in 2018 and will continue to do so in 2019 - be it on social media or in real life. i can t change what politicians want to do and i don t know enough about it so it just infuriates me. social media in general had an interesting year - most people now know how much data facebook has on them and what they can do (and did) with it. lots of people have left facebook and even twitter - there s even a hashtag - #deletefacebook . i ve been wanting to leave facebook way before all of this happened - but the one thing that stopped me is that my mum is on there and she calls/messages me on messenger (turns out you can use messenger even if you have deactivated your facebook account). i ve also recently joined a couple of very good groups - i had left the majority of groups i was in and also unliked/unfollowed a lot of pages. update: i finally deactivated my facebook and instagram accounts on new year s eve! mastodon came along and loads of people left twitter for it but for a social network to work - it needs people and people didn t stick around long enough - oh well. in an attempt to make twitter better for me i have unfollowed a lot of people and companies and have also started using the mute words to clean up my timeline. it has improved a lot. the year had a great start with me getting a contract to start in february - which ended up being my longest contract to date (7 months). anyway following on from last years theme and my second 'year in review' post i m going to look at went well and what didn t. what went well work i was hired as a front-end developer to work with the chartered management institute (cmi) in corby northamptonshire originally on a three-month contract. i joined the digital team to help them clear their backlog of day to day jobs that had accrued over the last few months due to the team of three losing two team members. i had to learn how to use a cms i d never used before - sitecore - and unfortunately it wasn t a recent version - it was a very old version. i wasn t able to use any of the modern development tools i ve gotten accustomed to in the last few years - like sass grunt/gulp etc. my contract was extended twice - first to six months then to nine but it was cut 7 months due to a company restructure. i really enjoyed this contract - it was different to my previous contracts as i m normally hired to work on a specific project. but at cmi - it was 'day to day' to start off with - but then it progressed into working on smaller projects on the cmi website. i don t usually do long contracts and i still feel the same about them - i don t like them they start to feel a lot like a permanent role. but i stayed because i made really good friends there and its good to have a long contract under your belt so i m told. thanks go out to lee (my manager) and harry (junior dev) for a great few months and for putting up with my nagging about code standards and design systems. update : i finished this contract mid way throuch october as i had four weeks off during the contract it was already booked before i started the initial 3 month contract. after being away for 7 months i decided to take the rest of the year off to spend it with my family recharge my batteries (they re old and don t charge as quickly as they used to!) and did some diy work around the house and garden. on the freelance side of things - i finished one project. at the end of 2017 i was approached by the graham hughes international charity (ghic) to build them a website. this was an interesting project for sure and a first for me. the charity had originally hired a london based design agency to design and build them a wordpress website but they had some issues working together - the agency only delivered a static website at which point the charity decided to stop working with them. i was hired to take the static website which wasn t live build some extra functionality and add a cms to it as well so that the charity could add their own content. for this i chose to use perch as its what i know and love using for smaller projects plus it s easy for the clients to learn and use. they required a lot of changes and also a few new features - including a blog and a members area. the biggest hurdle with this project was the quality of the code i had to work with - i was only being paid for the agreed changes and new features so i had a hard time stopping myself from refactoring the entire codebase. but that was definitely not in the budget where ever i was adding to an existing section i would refactor code - as i couldn t work with it how it was. anyway i finished the project on time the client is happy and now i am still working with ghic as we continue to update (and refactor) the website and add new features. side projects this year i didn t build any web-based side projects - being away from home a 7-month contract (away mon-fri back for weekends) meant i just wanted to do non-screen based projects. so i finished my kids' treehouse! this project started as a proper treehouse - we finally had the perfect tree for it - but my neighbour decided to change his mind about allowing me to build it in line with the property line i did speak to him before i started it - but let s not dwell on this as it s still a sore point. but i m glad i have pretty much finished it - just need to cut in 2 porthole windows and add some perplex. i will do write up of this project - essentially a photo progress post. i also repurposed an old kids playhouse shed that we hadn t even put back together since we moved to suffolk 4 years ago. i needed to build a new chicken coop as the old one that came with the house was starting to fall apart so i decided rather than bin the playhouse i d turn it into a new chicken coop! i plan on getting some more chickens soon and now there is plenty of room for them. bullet journalling i ve been doing a basic version of bullet journaling for a few years now. but towards the end of the year i started following the bullet journaling methodology properly. i plan on expanding this further in 2019 and get a bit creative with it as well - being inspired by amandarachlee on youtube. health my health and fitness have continued to improve throughout the year. during most of my 7-month contract i was going to the gym two to three times a week and eating healthy food prepared from scratch rather than living off microwave meals staying away from sweets and cake also helped (this wasn t easy in an open office). at the of the year i signed up to do the body coach s 90-day plan (i m now on month 2 of 3). this is a high-intensity interval training (hiit) program and a healthy eating regime - but it s not a diet - the portions are huge! what i want to get from this is to be fitter - which i am now starting to see a change. i plan on continuing with the gym while i m away on contract - this is easier when i m away from home - but not sure how easy it will be if my next contract is in london - as its a 2hr commute each way - which will mean i ll be very tired. so we ll see what how that goes. family in 2018 we had a family holiday of a lifetime - the five of us went to orlando florida and spent three weeks going to all the disneyland and universal parks. that s three weeks of walking - a lot of walking - some days i did over 25k steps. but we loved this holiday - my wife and i preferred universal - but the kids loved all of it. we ve been planning for this holiday for a while - we had to time it right so that our youngest (6) would remember it but also our eldest (10) would still find it magical. this holiday was also the first time i have ever been on a rollercoaster! my eldest (also her first time) was the only one that was tall enough to ride but of course she needed to go with an adult and i was happy to step up! personal i wasn t sure whether i should mention some of these personal things for fear of it coming across as a bit of a show-off - that s not what i want. this year i treated myself to a few nice things - i ve worked hard and i believe i deserve these things. firstly i got my self a new laptop a macbook pro - the last laptop i had was a £400 toshiba that i bought five years ago - it has served me very well but it was starting to show its age. i ve been wanting to get an mbp for a while - especially since there is some mac-only software i ve wanted to use to for a while (i gave up waiting for them to release a linux version). secondly since i do a lot of driving when i am on contract - i got myself a newish car - a mercedes a-class 2017 plate - this is the nicest most expensive car i have ever owned - my previous car was a 10-year-old ford fiesta - which rattled a lot on the motorways and almost killed me in this year when it spun out and i ended up off road - luckily it stopped just before a massive 20ft drop. update : when i say i bought i don t mean outright - it s a lease i ll have it for 4 years and then i can choose to keep it or give it back or trade it for another. lastly i got myself a motorbike - it is a 125cc custom cruiser - i don t have my cbt yet that s happening in 2019 - but for my birthday i got a jacket and helmet just need boots gloves and trousers and i ll be set. my wife says i m having a mid-life crisis! i think if you can you should treat yourself especially if it makes getting to your job that little bit nicer! what didn t go so well blogging i didn t do much writing on my blog in 2018 - i only managed 2 posts three if you count the one that i should have published but didn t quite get to it. i was hoping to have posted a lot more as i had a great start in 2017. but i blame this on being away for a long contract and where i was staying i didn t have a proper desk so couldn t do much work. plus after a days work going to the gym and cooking my dinner i didn t have much time to spend on the computer. reading i wanted to have read ten books this year but i only managed two! i m still reading stephen king s the dark tower series - which have quite a few big books. i managed to finish a book that i struggled to get into - &quot you re my favourite client" - it s not my usual sort of book. i do need to read a lot more non-fiction books not just fiction and web design. i only managed to read 74 articles in 2018 - which can be seen as a good thing because i feel as though i ve done a lot of reading of technical articles but then i don t put anything i read into practice. side projects no personal digital projects this year. i have many ideas on paper - but lacked focus this year. something i will do better in 2019. a side project i started in 2018 - i started tinkering around with home automation - not sure if this is something will ever be finished. it has been an interesting and frustrating delve into this - i plan on writing about it. but let s just say if you want to do it properly it s not yet ready for the mainstream - it s getting there though. i started to redo my website to use eleventy - a static site generator but i didn t get it finished! sometime after designing and building my current website i added the perch cms so that i could use it as a testbed for new plugins and functionality. but since i m not doing many freelance projects that require a cms these days and i ve been wanting to dive into static site generators for a while now - i decided to give eleventy a go. learning i usually use side projects to learn something new but since i didn t do any i don t feel as though i ve learnt much. i started a few javascript courses but didn t get them finished. video streaming something i wanted to get into was streaming. i ve done a few gaming let s play videos and have streamed a few times (to an audience of zero!) but i ve been wanting to stream web design content - what i think stopped me was lack of focus on 'what' the streams should be about and lack of confidence. pets it wasn t a great year for our pets - we lost a few but the one that hurt me the most was losing our dog zack. we had him since he was a puppy - before we had our children - he watched our children grow up and they watched him grow old and frail. we said goodbye to him in the summer and he now rests peacefully in our garden. our cat had to have an operation on his right leg bone - where they had to cut off the top of his leg bone - this procedure is done instead of a hip replacement - it was a tough decision to make but a hip replacement is not as common as the other procedure plus the recovery time is much longer. it was hard enough to keep him under house arrest for two months as it was - if you have a bengal you ll know how much they love the outdoors. we also lost loads of our rabbits - we were on holiday when it happened (we had someone looking after them but it wasn t their fault - rabbits die pretty quickly if they get sick) we re down to 1 rabbit from 12. one of our chickens also died - so we only have 1 chicken and a cockerel left. at the beginning of the year i also lost my pet lizard - a bearded dragon named bernie - she was with us for a good 7 years but she became ill and the vets didn t know what was wrong with her and we eventually lost her. looking ahead to twenty nineteen in 2019 i want to focus on monthly goals instead of resolutions continuing learning javascript and learn sketch app and figma. i am attending the new adventures conference in january - its the first conference i ve been to in a few years. i ve heard so many good things about the past conferences - i m so glad its back as it s already looking like its going to be a great conference. fingers crossed i get to meet a few people in real life. last year i went with a theme word for the year which was 'focus' and that didn t work for me. maybe if i d had the word printed out in large text and stuck to the wall it would have been a constant reminder - but in 2019 i m just going to set monthly goals instead. these are the main things i want to focus on in 2019. work i want to get my first fully remote contract job in 2019. i ve had contracts that have allowed 1 or 2 days of remote work after i ve been there for a month or so. but i really want a contract that will be fully remote i m happy to go to the office 1 or 2 days per week for meetings. learning need to stop 'trying' to learn javascript and make a conscious effort to actually learn it. i find myself in a strange situation - i ve always been a front-end developer - but in all my permanent jobs someone else was the javascript person it was usually a backend developer that worked with js and all i needed to do was html css and jquery - so all of a sudden js is really popular and i missed all the boats. i m in the middle - i m not a js developer or a ux designer but i am somewhere in the middle. i believe i m more developer than a designer so this is why i m going to focus on learning js. i also want to dive into vue and gatsby - there has been so much love for both that you can t help wanting to get stuck in. plus i also read that learning gatsby will help with learning react which i ve tried but found too difficult because i don t know vanilla js. there s a whole bunch of other stuff i want to learn too - like css grid! side projects i think the main issue with me learning js is that i do a lot of reading and video tutorials but i don t do anything with it. sometimes i will use vanilla js instead of jquery but if i m busy - then i don t have time to figure out js so will just default to what i know. i need to build stuff and use js so i can learn it spend time making mistakes and figuring things out and i believe i can do this with side projects. what will i build i don t know yet but whatever it is it will be something for me and it may never see the light of day. i also plan on streaming as much as possible and hopefully actually get people to 'tune' in - i want to stream so that i can practice speaking to an audience learn to speak clearly while showing/doing demos/presentations etc. blogging gah. i really need to make this a habit. i like doing it and it helps with the learning side of things - if i write about something i ve learnt it helps commit it to long-term memory - so i want to do at least 1 blog post a month - i know it doesn t sound like a lot but when i only managed 2 in twenty eighteen - 12 will be a milestone! health after many many years of neglecting my health fitness and well being - i am making a conscious effort to fix this. it won t be easy but then you can t expect to fix years of damage in one quick hiit session can you i m going to finish the body coach s 90-day plan and then create my own plan to keep the exercise and healthy eating going. i m also going to try very hard not to have any sugar - which won t be easy - it means giving up things like chocolate cookies and cakes! i have already replaced sugar in my coffee with a plant-based alternative. well i think that s all i have to say for this year in review post (sorry it s a long one) - i hope you enjoyed reading it as much as i enjoyed looking back. let me know if you did and if you also wrote your own - i love reading these. here are the ones i ve read so far: ashley baxter dave rupert ana remy sharp charlie marie justin jackson twenty eighteen year in review post where i talk about what went well and what didn t go so well. covering some work and personal stuff."},{"url":"/blog/my-git-aliases/","title":"My Git Aliases","text":"Quick post to share my Git aliases. I love seeing other developers aliases - a lot of mine have been copied from others. So I thought I d sh I use Git via the command line and have always used it that way ever since it was introduced at a company I worked at a few years ago. But","readabletitle":"my git aliases","keywords":"my git aliases i use git via the command line and have always used it that way ever since it was introduced at a company i worked at a few years ago. but soon after using it git for a few days i started disliking the repetitiveness of the commands - so i did some googling and found that i could create shortcuts (aliases) in bash. so i started creating aliases for the commands i used several times a day and over the years i have added to them as i find other developers' own git aliases. how to create an alias you can create an alias in a .bash_profile or in . bashrc usually in the your users home directory. a bash alias takes on this format: alias alias_name=&quot alias_command" here are my aliases: you can see the list on this github gist bash the fish with my new laptop (macbook pro) i decided to try fish a bash alternative so creating aliases with fish is not done the same way - they are know as functions in fish. instead of adding them to a file you create them on the command line like so: alias x='exit' then save it using this command: funcsave x the functions are then saved in a folder: ~/.config/fish/functions/ - to see all the functions in a web based interface type the following command: fish_config functions i won t get too deep into fish as i m still learning it - maybe a future post. did you find this useful have you got a your own set of aliases - please share them. quick post to share my git aliases. i love seeing other developers' aliases - a lot of mine have been copied from others. so i thought i d share mine - in the hopes someone will find it useful."},{"url":"/blog/home-automation/","title":"Home Automation","text":"In this post, I talk about my adventures with home automation. Basic stuff as simple as using Alexa to switch on a lamp or lights in a room In this post, I m going to talk about my adventures with home automation. It may sound negative, but I m just painting a true picture of wh","readabletitle":"home automation","keywords":"home automation in this post i m going to talk about my adventures with home automation. it may sound negative but i m just painting a true picture of what i discovered. when i say home automation - i mean basic home automation - i m talking about using alexa to do simple things - like switching on a lamp or lights in a room. this isn t a how-to guide. there s so much out there and it varies depending on what tech you use and how you go about it. simplest approach the simplest way i think is the most expensive - to get started you could get a phillips hue lights kit - this comes with a controller and some wifi bulbs - you can then make alexa aware of these new devices and control them using voice commands - i.e. &quot alexa turn on living room lamp". with this approach you may end up with different controllers for different technology hence why i believe its more expensive. the cheapest way is to get wifi lightbulbs and use their own apps to set them up then add them to alexa. but this way you will end up with various different apps on your phone for all the different tech you automate. my current setup i opted to go down a different route i bought a controller that can use various different protocols - a veraplus controller and also opted to use the z-wave protocol. i have two amazon echo dots one in the kitchen and another in my office (this one used to be in the living room until we upgraded it to an echo) and an echo in the living room. i have two sonos play 1 speakers in the kitchen and a sonos amp in the living room connected to the surround sound speakers. the new living room tv is also connected to alexa via an alexa skill - this is a fairly new addition - we can ask alexa to pause/resume youtube/netflix etc without having to reach for the remote control and we can switch the tv on/off ( but don t tell the kids ). recently i got five smart plugs that control a lamp in the hallway our tortoises' vivarium an outside tree light my office heater and one for the christmas tree and outside lights ( which is now in the loft until december! ). these have all been added to alexa and can be controlled via the app or a voice command. i have also created routines for those devices - for example the hallway lamp comes on in the evening - saves us turning on the hallway lights ( about 10 spotlights! ). in the living room we have a lamp with a z-wave plus aeotec led wifi bulb - i tried a cheaper alternative before a tp-link but every time we wanted to use it it couldn t be 'seen' on the network. the echo dot in the kitchen is mainly used to tell alexa what music to play on the two sonos play 1 speakers which are set up in stereo mode. how it s going so far... so far this has been a stressful adventure into home automation and i ve only hit the tip of the iceberg of possibilities. why has it been stressful well i have this love/hate relationship with technology - i love when it works absolutely hate it when it doesn t work as it should. the most frustrating thing about home automation so far for me is that it s not 100% reliable. devices will sometimes stop working and you don t know whether the controller has a problem or its a problem with alexa. currently we can t turn the tv on/off via alexa - we don t know why alexa says to check network connection on the tv but that s fine because netflix works. it relies on wifi and an internet connection for alexa to be able to control a device that was set up via the controller it needs to do this via the internet - for some reason they don t do it through wifi even though it means they are in the same network. this isn t an issue for someone that lives in a city or town with really good internet - we live in the countryside and internet access is not the best. it s not ready for everyone... home automation is really popular at the moment but i don t think its ready for everyone yet. asides from it not being cheap to get started with it s also not very plug 'n' play and forget about it. one thing to consider when going down the home automation rabbit hole is how this will affect the other members of your household. for example i named the lamp in the downstairs hallway &quot hallway lamp" but none of the other household members knew that s what it was called - i ve heard them trying various different names. ideally i need a tablet with some sort of dashboard accessible to everyone so they can interact with the automation manually. this isn t as simple as you d hope. the vera controller app does not have great ux or a nice design also for some reason you can t do everything via the app - that you can if you connect directly to the controller via a web browser - not even to add a new device. finally to get into the more advanced side of home automation it appears you need to be an electrician. what s next my plan when i started this venture was to be able to switch on/off the main lights in some of the rooms and the hallways. this proved to be more difficult than i was hoping for because it involves electricity and i m not an electrician and looking at the wiring made no sense at all to me especially when you have a 3 way light switch on one side of the room and a 2 way on the other. i bought some of these z-wave fibaro single switch but they won t fit in a standard box behind the light switches. i also bought some of these z-wave tkb double relay wall light switches but again too complex for me to figure out. i d like to get some of the main lights automated - especially the outside lights but i m going to wait for the next time i have an electrician coming round and will get them to wire some of the fibaro modules in for me. i ll probably get a few more smart plugs but first i need to sort out my wifi - i think this is one of the main causes of issues. i ve bought a ubiquity wifi ap but there s a lot of moving of equipment that needs to happen before i can set it up. so have you ventured into the home automation rabbit hole yet let me know how it went. i know i know another post that isn t about web design stuff. i ve just not been doing much web design stuff worth mentioning or writing about. but now i m back to work and have a freelance project too i ll have more to write about. in this post i talk about my adventures with home automation. basic stuff as simple as using alexa to switch on a lamp or lights in a room"},{"url":"/blog/keeping-track-of-tasks/","title":"Keeping track of tasks","text":"Been thinking about how I keep track of changes requested by clients outside of project work. I maintain websites I ve built as well as webs I ve been thinking about how I keep track of changes requested by clients, outside of project work. Since I maintain websites I ve built as","readabletitle":"keeping track of tasks","keywords":"keeping track of tasks i ve been thinking about how i keep track of changes requested by clients outside of project work. since i maintain websites i ve built as well as websites i inherited and host i often get requests for minor changes fixes or updates. the problem i have with these is that they tend to arrive either via email phone call or even via messenger and then i lose track of these requests - because these tools were not designed for tracking changes. when i m working on a project i will have a trello board set up for that project with all the tasks as cards either for me or for the client - but only i have access to this board the cards for the client are usually just things i expect the client to provide i.e. assets etc. i use a to-do app on my phone for personal tasks i.e. pay car tax. but should i also use this for freelance tasks i don t like the idea of mixing my personal and business tasks. what should i do should i get into the habit of logging those requests into a trello board for non-project based work or should i introduce some sort of bug/task management application that will allow my clients to log any issues that require my attention themselves would my clients actually use it - we re talking about small business owners who are busy running their business and it s easier for them to just email or call. i wondered whether trello is the right tool for my clients web developers and designers get how to use trello - but do other people i m going to do a trial run with one of my clients - he is one of those clients that aren t afraid to try new technologies. i ve created a trello board for his website and will search through my emails and find the things he has asked me to do and add them as cards to the board - then i will invite him to have a look around and see if he can create a card himself. how do you manage your non-project based tasks have i missed something obvious or am i over complicating things been thinking about how i keep track of changes requested by clients outside of project work. i maintain websites i ve built as well as websites i host"},{"url":"/blog/multiple-blogs-with-perch-cms/","title":"Multiple blogs with Perch CMS","text":"Short post to show how you can create multiple blogs using the Perch CMS and the blog app using sections. An existing client asked me to move their blog from /self-help/blog/ to the root of the website - but they wanted to keep the self-help blo","readabletitle":"multiple blogs with perch cms","keywords":"multiple blogs with perch cms an existing client asked me to move their blog from /self-help/blog/ to the root of the website - but they wanted to keep the self-help blog as well as having a blog for general posts and a blog for media related articles ie press releases etc. i wondered if the perch blog app had a built-in way of doing this - it does but not in the way i thought it would. it does have perch_blog_section() which allows you to output a blog section onto a page. you can think of blog sections as virtual folders where you can store some blog posts. so you still write all your blog posts in the same way as before but you choose which section it belongs to. create the sections to get started you need to log into perch and create your new sections. once you re logged in: click on blog -> sections click the add section button add the title [image is not required] click save for my client i created the sections based on where they were going to be shown media and self-help . you can leave posts as the blog s default section. multiple blogs we can now create our multiple blogs. depending on the website you re working on you ll either need to create a new page or edit an existing one. for my clients' website i created a new page using the default template and then added the following code: < php perch_blog_custom([ 'section' => 'media' 'sort' => 'postdatetime' 'sort-order' => 'desc' 'template' => 'blog/media_post_in_list.html' ]); > if you already use perch then the above code will look fairly familiar but if you don t. line 3 - instead of getting all the blog posts we are calling just blog posts that belong to the media section lines 4-5 - we are sorting the blog posts in the date they were created and showing them in descending order line 6 - this specifies the template to use. this one is specific to my clients' website. you can just use your own one or the default post_in_list.html template. using the above code you can create your multiple blogs in different areas of your website. creating the content now that you have the code to show posts from different sections on different pages of your website you can create blogs posts and add them to each section. login to perch go to the blog app create or edit a post switch to the meta and social tab scroll down and select the section from the dropdown save now go to the page for that blog section on your website and see your posts for that blog section. if you re also moving a blog in my case i first moved the blog folder to the root of the website changed all the urls updated the settings for the blog app in perch settings and changed rewrites in the .htaccess file. short post to show how you can create multiple blogs using the perch cms and the blog app using sections."},{"url":"/stream/version-2-of-my-website-went-live-last-week/","title":"Version 2 of my website went live last week","text":"Published version 2 of my website. Rebuilt using 11ty, Nunjucks and hosted on Netlify and using NetlifyCMS for content. Last week I pushed version 2 of my website live. Not much has changed visually as the main change was replacing PHP and PerchCMS with Nunju","readabletitle":"version 2 of my website went live last week","keywords":"version 2 of my website went live last week last week i pushed version 2 of my website live. not much has changed visually as the main change was replacing php and perchcms with nunjucks eleventy (static site generator) and netlifycms as well it now being hosted by netlify. next phase will be design fixes. published version 2 of my website. rebuilt using 11ty nunjucks and hosted on netlify and using netlifycms for content."},{"url":"/blog/2019-year-in-review/","title":"2019: Year in review","text":"Another year gone but it was a very good year both professionally and personally, but there is room for improvement in twenty twenty. Another year gone but it was a very good year both professionally and personally, but there is room for improvement in twenty twenty. Work","readabletitle":"2019: year in review","keywords":"2019: year in review another year gone but it was a very good year both professionally and personally but there is room for improvement in twenty twenty. work this year i had a total of 4 contracts which meant i was working for most of the year without any big gaps. it was a year of 'firsts' for me; it was the first time i ended a contract early; first time i returned to working with a previous client; first time i got to work as an interaction designer for gov project using the gov.uk prototype kit. ending a contract early i started a contract working with a company in the self-catering uk short breaks holiday space - but i ended the three-month contract early after only being there for one month. it seemed like the perfect contract - it was only an hours drive from home which if you know where i live you know that is not bad at all and after 2 weeks i was able to work from home three days a week. so what went wrong i spent the first two weeks there without any work to do whatsoever. i was told to use that time to get familiar with the codebase - it didn t take that long to get familiar with it. so i had nothing todo just waiting for the backend developers to finish their work so that i could do the front-end work. the project was delayed and eventually it was put on hold indefinitely - this was the project i was brought in to work on - the redesign of the checkout process for booking a holiday. after that i was given 'business as usual' work - to start with i had 2 tasks to work on. this was to get changes from the development environment to their qa environment - easy right - normally just a case of creating a pull request to get your branch merged etc except they didn t use version control! well they said they did and what they meant was that their in-house 'cms' was their custom version control - that was it - you had different versions of pages but no source control no code changes were highlighted so you had no idea what code had changed between versions. imagine taking work previously worked on by three other developers that have since left without knowing what those changes were and no documentation - i had to go through work items and then figure out where the change was made and copy it over to qa then a bunch of stuff would break i d fix it and then something else would break or a previous change got undone - more stuff would break rinse and repeat! this on-top of how miserable the place was - the town the people at the company - i d arrive in the morning and say &quot good morning" and barely get a response most people were already on a 'call' so were unresponsive. everyone always seemed to be on a call at this place. i noticed that people were starting work early have a short lunch break at their desk so they could leave work early. i didn t expect it to be a party over there every day but this wasn t a nice working environment. i soon started doing the same having my lunch in my car - i did start having lunch in the staff area but everyone was always on their phones and no one ever said anything so i may as well sit in my car and listen to music. there was nothing to see in this town - no green spaces. it was a seaside town; but you couldn t even get to the beach! i was not happy there and it was having an impact on my work my mental health and also my family. i didn t like the idea of ending my contract early as i felt id be letting people down but after speaking to them several times about the lack of work and nothing changing i decided it couldn t stay any longer. moving on i took a short term contract six weeks in manchester - which was a lot further than i normally travel for work. but having left my contract early this had left me in a bit of a financial situation - i was still waiting to be paid from the contract i d just left and i had also made that mistake of not saving enough money to pay my corporation tax so there was that pressure too - which meant i had to take what ever contract came my way. apart from having to travel to manchester by train and staying there for the week it was a great contract - so much to learn - but most of all working with so many passionate and smart people - unfortunately it was a short contract with no chance for an extension because the company had already hired a full-time interaction designer who was working their notice and had a holiday planned before they would start their new job - i was a gap filler. after the short contract in manchester with the dfe i started a new contract working with signet in borehamwood north london. signet is the company that owns the h. samuel and ernest jones jewellers and this was initially to be a three-month contract but ended up being there for seven months. i was expecting quite a big team at the signet headquarters but was surprised to find that the entire it team was quite small - i joined a full-time front end developer and another contractor who was there as a senior front-end developer. he d been there for about 7 months and had been working on the front-end setup for the new cms and also setup a component library. at first i didn t think there was enough work to warrant another front-end developer - but eventually the work picked up and we started working on our first big project. the first project was the redesign and rebuild of the website header for both brands. both brands share the same html but have different designs. this proved to be quite the challenge and it meant we had to have more html and css than we would normally need to build out those components that made up the headers. the senior front-end developer built the complex navigation for ernest jones. whilst i built the rest of the components for the header - he also helped out with any javascript that was needed for the rest of the header. i wrote some of the basic javascript and he then improved it and got it working with his code for the navigation. after the ernest jones header went live - the senior front-end developer decided it was time to move on and i was then in charge of building the entire header for h. samuel. this was quite a bit of work due to not being able to change the html structure as it was the same code used for ernest jones which was now live - means any changes would impact the qa testing. then the final and biggest project was the redesign and rebuild of the product list pages and the product detail pages for both brands - for this they hired another three contractors and another permanent front-end developer came back after a six-month break. this was a huge undertaking in a small amount of time but we did it - not 100% perfect and even though not live a lot of the issues have now been fixed and will be released in the new year after the code freeze. my last contract of the year has taken me back to the chartered management institute (cmi). i first worked with cmi back in 2018 - another contract that that was initially 3-months and then got extended for seven months. this was the first time for me - returning to a company i had previously worked with - it s a great feeling and must mean i am doing something right. with freelance work it seems its more common to get repeat work from previous clients whereas i think that s not the same with contract work. freelance every year i say i m going to stop doing freelance work and just focus on contract work to make life less stressful and every year i fail at this - and 2019 was no different - this means i did a bit of freelance work got some new clients and also lost some. without looking for new freelance work i managed to gain two new clients through recommendations - so it was hard to say no to them but it always ends up with me having to do freelance work alongside a contract which means that after i finish a days work i end up going back to the hotel/airbnb and doing some freelance work. one of those new clients is a day nursery with three nurseries - they hired me to quickly get a new page up for their new nursery and change the website to have more content about the new nursery as they needed it to start showing on search results. as part of the initial meeting with the client we discussed the bigger piece of work they need - a redesign of their current website and a new cms. the other new client is an industrial design blog - they needed a front end developer to work with their backend developer to help implement new changes on the front-end - mainly helping out with html and css. losing a client but the year ended with me losing a client - i suspected this was going to happen but its never a great feeling when you lose a client. i have now heard back from them - i decided to email them and find out why they decided to abandon a perfectly good website and to get a new one. i was originally hired by them to take an unfinished static website finish it and add a cms to it. at the time they couldn t afford my time to add the cms to all pages so they chose which pages they wanted to be able to edit and the others would be done at a later date. after the website went live though they approached me with a new project - an online store. i was excited about this project as i d not done an e-commerce website in a very long time and it was an opportunity to move back into this line of work. it was all going well... the shop was built i had tested it and it was over to the client for them to test it and populate the shop with their products. this never happened - due to illness and people being busy they didn t add the products or test the site. after a while i needed to get on with other client work and i stopped chasing them. anyway they now have a brand new wix website created by the company they hired to help them manage their charity. personal at the end of the year i finally sorted out part of my pension plan - opened a lifetime isa - i didn t know about these - had i known i would have opened one sooner because you can only open one between the ages of 18-38 and pay into it until you re 40 - so that means i have 2 years to pay into it. a lot of people i spork to didn t like the idea of a lifetime isa because you get hit with a hefty penalty if you take the money out early - but this is a good thing for me as it will stop me taking that money out before i retire. so this forms part of my pension plan. also with a lifetime isa if you put in the maximum amount of £4000 a year the government will top it up with 25% - which makes it worthwhile doing. i opened an account with aj bell - there aren t many companies doing lifetime isas and because i did it just before the end of the financial year of 2018/2019 - means i have until april to put in the 4k to take advantage of an extra year of this free 25%. then i ll have 2 more years that i can pay into it before i turn 40. side projects my only tech side project this year was this website. i decided to join the jamstack trend and rebuild the backend of this website using a static site generator - eleventy. the previous backend was built in php and used perch cms - i decided to add perch to my site because at the time i was doing a lot of freelance work for clients that needed a cms and perch is my go-to choice. i used my website to test out new perch features or plugins so i could sell those onto my clients if they needed it. but i m doing a lot less work with perch these days that i didn t need my site to still be using it. i decided to treat my site rebuild as i would a project using a proper git workflow - rather than just working directly on the master branch including raising issues and working agaist those. as well as using eleventy as my static site generator i also moved the site hosting to netlify and for the cms i m using the netlifycms. again i don t need a cms but i wanted to learn more about static site cmss. i ve enjoyed learning more about the jamstack eleventy nunjucks and netlify - its been awesome. personal i finally finished a non-tech side project - it was close to not getting it finished - but my wife and i spent a few days before the new year getting it finished. my wifes help was required to stop me trying to create any kind of pattern. when we had our kitchen done in 2018 - we had this wall that other than having a small breakfast bar was very empty. i came up with an idea - lets cover the wall in pallets! no one could visualise this - nobody liked the idea but i persuaded my wife to let me put a few pieces of wood on the wall and she was convinced. so it turns out that dismantling about 30 wooden pallets takes a long time and it s hard. they have so many many nails holding them together - it was hard work taking them apart without breaking the wood. but it felt good to recycle (upcycle ) these discarded pallets - some of which i found washed up on the beach! (fyi water logged pallets are really heavy.) i already have my next non-tech project picked for 2020 - an outdoor kitchen with built-in bbq pizza/wood oven and maybe even a smoker. this project will involve me building some brick walls - something that i ve never done. looking ahead to 2020 i m lucky to be able to start the year with a contract in place already - which carried over from 2019 - this was due to end halfway through january but it has been extended until march. i don t do new year s resolutions because i believe you don t need to wait for a new year to do things or change how you do stuff - but there a few things i want to get done this year. i ll be continuing to learn javascript - i need to stop learning it though and start practising it this year. i have one course to finish and i also have wes bos' beginner javascript course to do. i want to start a tech side project where i can dive into javascript and put into practice what i have learnt so far. i still haven t had a fully remote contract and i want 2020 to be the year this happens - i think once i ve had that first fully remote contract it will be easier to get more. finish setting up my pension - the next stage of my pension plan is to set up a sipp (self invested pension plan) which i will after april. i just need to learn more about investing money! i want to read more this year i only just managed to finish 1 book out of the 10 i wanted to read. i also want to read more non-fiction books but necessarily tech ones. and continue working on this website and continue learning more about the jamstack ways including adding some more indieweb features like webventions now that i have removed analytics. happy new year and thanks for reading. year in review posts i ve read twenty nineteen - dave rupert 2010-2019 - dan davies 2019: a year in review - andy bell a year in review: 2019 - max böck yearnotes 2019 - alice bartlett 2019 in review - simon collison 2019 year in review - justin jackson another year gone but it was a very good year both professionally and personally but there is room for improvement in twenty twenty."},{"url":"/stream/new-adventures-2020/","title":"New Adventures 2020","text":"Really looking forward to New Adventures 2020 conference in a few weeks. Great way to start the year. Let me know if you re going. Really looking forward to New Adventures 2020 conference in a few weeks. Great way to start the year. Let me know if you re going. https://","readabletitle":"new adventures 2020","keywords":"new adventures 2020 really looking forward to new adventures 2020 conference in a few weeks. great way to start the year. let me know if you re going. https://newadventuresconf.com/2020/ really looking forward to new adventures 2020 conference in a few weeks. great way to start the year. let me know if you re going."},{"url":"/stream/replacing-my-phone-s-os/","title":"Replacing my phone's OS","text":"It s been a week since naconf and Laura Kalbag s talk on privacy - I ve been reviewing my own privacy since then. It s been a week since naconf and Laura Kalbag s talk on privacy - I ve been reviewing my own privacy since then. This is not my first fora","readabletitle":"replacing my phone s os","keywords":"replacing my phone s os it s been a week since #naconf and laura kalbag s talk on privacy - i ve been reviewing my own privacy since then. this is not my first foray into this but now its time to take up a notch or two - i ll be replacing my phones os with a privacy focused one - lineage os. #privacycontrol it s been a week since #naconf and laura kalbag s talk on privacy - i''ve been reviewing my own privacy since then."},{"url":"/stream/google-hangouts/","title":"Google Hangouts","text":"Almost ready to uninstall Google Hangouts from my phone. Almost ready to uninstall Google Hangouts from my phone. One out of two friends has switched to Telegram. privacycontrol","readabletitle":"google hangouts","keywords":"google hangouts almost ready to uninstall google hangouts from my phone. one out of two friends has switched to telegram. #privacycontrol almost ready to uninstall google hangouts from my phone."},{"url":"/stream/firefox-focus/","title":"Firefox Focus","text":"For a privacy focused browser, I was surprised to see Google as the default search engine. For a privacy focused browser, like Firefox Focus - I was surprised to see Google as the default search engine. privacycontrol","readabletitle":"firefox focus","keywords":"firefox focus for a privacy focused browser like firefox focus - i was surprised to see google as the default search engine. #privacycontrol for a privacy focused browser i was surprised to see google as the default search engine."},{"url":"/stream/native-disclosure-element-work-in-instapaper-app/","title":"Native disclosure element works in Instapaper app","text":"Reading an article about the native HTML disclosure element (details + summary) and was pleased to see that it works in the Instapaper app Reading an article by Scott O Hara, I was surprised to see the summary and details working perfectly in the Instapaper app on Android. Yay","readabletitle":"native disclosure element works in instapaper app","keywords":"native disclosure element works in instapaper app reading an article by scott o hara i was surprised to see the summary and details working perfectly in the instapaper app on android. yay for native disclosure widgets. https://www.scottohara.me/blog/2018/09/03/details-and-summary.html reading an article about the native html disclosure element (details + summary) and was pleased to see that it works in the instapaper app"},{"url":"/notes/eleventy-cloudinary-shortcode/","title":"Eleventy Cloudinary Shortcode","text":"Created a shortcode for @eleventy so I can use Cloudinary images within markdown files. I made a thing. I ve created a shortcode for @eleventy so I can use Cloudinary images within markdown files. This is something I discovered","readabletitle":"eleventy cloudinary shortcode","keywords":"eleventy cloudinary shortcode i made a thing. i ve created a shortcode for @eleventy so i can use cloudinary images within markdown files. this is something i discovered i needed while using forestry.io and markdown files. with a bit of help from @franktldr at forestry in identifying the solution i set off and created it. https://github.com/juanfernandes/eleventy-plugin-cloudinary created a shortcode for @eleventy so i can use cloudinary images within markdown files."},{"url":"/stream/created-my-first-npm-package/","title":"Created my first NPM package","text":"I just created my first NPM package and it was surprisingly easy to do it. I ve created my first NPM package and it was surprisingly easy to do. 🤓 Now I need to update the install instructions on the repo - I shou","readabletitle":"created my first npm package","keywords":"created my first npm package i ve created my first npm package and it was surprisingly easy to do. 🤓 now i need to update the install instructions on the repo - i should probably test it first though! https://www.npmjs.com/package/eleventy-plugin-cloudinary i just created my first npm package and it was surprisingly easy to do it."},{"url":"/notes/pi-hole-and-new-router/","title":"Pi-hole and New Router","text":"The next stage in my privacy control adventures is to setup Pi-hole at home. The next stage in my privacy control adventure is to setup Pi-hole at home. To do this I ve had to buy a new router to replace the BT Home","readabletitle":"pi-hole and new router","keywords":"pi-hole and new router the next stage in my privacy control adventure is to setup pi-hole at home. to do this i ve had to buy a new router to replace the bt home hub because it doesn t let you change the dns servers which you need to do in order to point it at pi-hole. new router has now been setup and the bt home hub is being used just for wifi. will be setting up the pi-hole this weekend. &quot the pi-hole® is a dns sinkhole that protects your devices from unwanted content without installing any client-side software." - https://github.com/pi-hole/pi-hole the next stage in my privacy control adventures is to setup pi-hole at home."},{"url":"/stream/estimote-lte-beacons-developer-kit/","title":"Estimote LTE Beacons Developer Kit","text":"My estimote LTE beacons developer kit has finally arrived (made to order) - so looks like I ll be tinkering with this at this weekend 🤓 My estimote LTE beacons developer kit has finally arrived (made to order) - so looks like I ll be tinkering with this at this weekend 🤓","readabletitle":"estimote lte beacons developer kit","keywords":"estimote lte beacons developer kit my estimote lte beacons developer kit has finally arrived (made to order) - so looks like i ll be tinkering with this at this weekend 🤓 my estimote lte beacons developer kit has finally arrived (made to order) - so looks like i ll be tinkering with this at this weekend 🤓"},{"url":"/notes/getting-rid-of-google-calendar/","title":"Getting rid of Google calendar","text":"Replacing Google calendar has been one of the hardest apps/services to replace. Replacing Google calendar has been one of the hardest apps/services to replace. We use a shared Google calendar at home and I couldn t find","readabletitle":"getting rid of google calendar","keywords":"getting rid of google calendar replacing google calendar has been one of the hardest apps/services to replace. we use a shared google calendar at home and i couldn t finding an app & service combo that is affordable. i looked at fastmail to replace email & calendar but it s very expensive for a family of 6. i wish they did a family plan. solution i opted for a webdav shared calendar using nextcloud on a digital ocean droplet. i then installed the davx app to synchronise with the calendar app on my phone. i now need to replicate this setup on the other family members' phones. but i still have to use the google calendar app on my phone because davx doesn t sync with other calendar apps it seems at least until i replace the android os. replacing google calendar has been one of the hardest apps/services to replace."},{"url":"/stream/google-pay/","title":"Google Pay","text":"Removing your Google account from your phone means Google Pay will stop working - derp Turns out that removing your Google account from your phone will cause Google Pay to stop working which then reminded me that I need to fin","readabletitle":"google pay","keywords":"google pay turns out that removing your google account from your phone will cause google pay to stop working which then reminded me that i need to find an alternative - any suggestions i m getting more & more tempted to get an iphone - is apple better than google when it comes to privacy #privacycontrol removing your google account from your phone means google pay will stop working - derp"},{"url":"/stream/off-facebook/","title":"Off Facebook","text":"My Facebook account has been deactivated for over a year and now I ve now asked for it to be deleted. My Facebook account has been deactivated for over a year and now I ve now asked for it to be deleted. It doesn t happen straight away. Just","readabletitle":"off facebook","keywords":"off facebook my facebook account has been deactivated for over a year and now i ve now asked for it to be deleted. it doesn t happen straight away. just need to get my parents to stop using messenger. #privacycontrol my facebook account has been deactivated for over a year and now i ve now asked for it to be deleted."},{"url":"/stream/switching-to-firefox-focus/","title":"Switching to Firefox Focus","text":"I ve now switched my default browser to Firefox Focus - a privacy focused browser. No cookies, ads, tracking or history. I ve now switched my default browser to Firefox Focus - a privacy focused browser. No cookies, ads, tracking or history. I still use Firefo","readabletitle":"switching to firefox focus","keywords":"switching to firefox focus i ve now switched my default browser to firefox focus - a privacy focused browser. no cookies ads tracking or history. i still use firefox for browsing websites i trust. #privacycontrol i ve now switched my default browser to firefox focus - a privacy focused browser. no cookies ads tracking or history."},{"url":"/stream/performance-what-performance/","title":"Performance? What performance?","text":"Just found an image on my clients website (added by a third party) that weighs in at, wait for it, a whopping 39.4mb 😬 Just found an image on my clients website (added by a third party) that weighs in at... wait for it... a whopping 39.4 mb 😬 performance wh","readabletitle":"performance what performance","keywords":"performance what performance just found an image on my clients' website (added by a third party) that weighs in at... wait for it... a whopping 39.4 mb 😬 #performance #whatperformance just found an image on my clients' website (added by a third party) that weighs in at wait for it a whopping 39.4mb 😬"},{"url":"/stream/new-pallet-project/","title":"New Pallet Project","text":"Started on a non tech project today. My office is a mini loft above our garage, and it has these gaps for storage that I don t need, so I m Started on a non tech project today. My office is a mini loft above our garage, and it has these gaps for storage but we don t need it. Cur","readabletitle":"new pallet project","keywords":"new pallet project started on a non tech project today. my office is a mini loft above our garage and it has these gaps for storage but we don t need it. currently it has these rubbish wooden sliding covers. so i m taking pallets apart and using the planks to cover it up. started on a non tech project today. my office is a mini loft above our garage and it has these gaps for storage that i don''t need so i''m covering them up with pallet wood planks."},{"url":"/blog/exploring-the-benefits-of-http-2/","title":"Exploring the benefits of HTTP2","text":"Since this website is hosted on Netlify they serve websites using the HTTP/2 protocol I ve started exploring the benefits of it Now that this website is hosted on Netlify and they serve websites using the HTTP/2 protocol I ve started exploring the benefits of it and","readabletitle":"exploring the benefits of http2","keywords":"exploring the benefits of http2 now that this website is hosted on netlify and they serve websites using the http/2 protocol i ve started exploring the benefits of it and what i need to change to take advantage of those benefits. http/2 is a major revision of the http network protocol. the primary goals for http/2 are to reduce latency by enabling full request and response multiplexing minimize protocol overhead via efficient compression of http header fields and add support for request prioritization and server push. - mdn web docs after some research i found out that when a website is being served via http/2 you no longer need to rely on the following techniques to improve the performance of your website: concatenated css and js inline css (criticalcss) use of a cdn (content distribution network) this website is fairly simple and does not rely on a lot of javascript but does use it for a couple of sliders one on the homepage for testimonials and another on each of the work pages. i used this tool from keycdn to find out if my website was being served via the http/2 protocol. the old way what i was doing before was to load jquery in the footer on all pages along with a global.min.js file - which was a concatenated file made up of my main.js and plugins.js files. the file was minified but it s still a lot of js to load on every single page even if it wasn t being used - and to top it all off i was also loading jquery. out with the old in with the new... way the first thing i decided to do was to get rid of jquery - there s nothing wrong with jquery i know its no longer flavour of the month but it still has its place and it s still used by a lot of websites but for my website it was overkill. so i replaced the jquery slider with a vanilla js alternative tinyslider . i spent some time researching to find a slider that was small in size as well as accessible. i m not an accessibility expert so i just made sure that the slider was navigable using a keyboard. this meant i could remove the code in the footer that loaded the jquery library from the jquery cdn and also stopped including the plugins.js file into the global.min.js file. it s a great start the global.min.js file was now smaller and i was no longer loading jquery. but i didn t stop there. one of the advantages of http/2 is that you don t have to worry about too many file requests. instead of including the javascript code for the slider on every single page. i decided to only include the slider js code in the slider partial - i m using nunjucks for this but you can do this with other templating languages. this is the code for the testimonials slider on my homepage: &lt link rel=&quot stylesheet" href="/assets/css/components/slider.css"> &lt script src='/assets/js/tiny-slider.js' defer></script> &lt script> document.addeventlistener(&quot domcontentloaded" () => { let slider = tns({ container: '.testimonials__slider' items: 1 autoheight: true speed: 400 loop: true autoplay: true autoplaybuttonoutput: false controls: false autoplayhoverpause: true nav: true navposition: &quot bottom" }); }); </script> at the same time i also included the css or the slider - just on the slider partial. the js and css files as well as the slider js code are included the at the end of the slider partial so that when the js runs the html for the slider has already been loaded by the dom. this change has improved my websites' overall performance score on lighthouse - but there is one more thing i need to fix before its perfect. this is all new to me and i may have made a mistake or misunderstood something if you spot something please let me know - send me a tweet may the 4th be with you since this website is hosted on netlify & they serve websites using the http/2 protocol i ve started exploring the benefits of it"},{"url":"/notes/recording-audio-input-from-other-apps/","title":"Recording audio input from other apps","text":"Turns out that you can t easily recorded audio from one app to another on a Mac, without some extra software and changing some preferences I ve been wanting to get back into recording gameplay, going to restart my Minecraft Let s Play series - but last time I did this, I was us","readabletitle":"recording audio input from other apps","keywords":"recording audio input from other apps i ve been wanting to get back into recording gameplay going to restart my minecraft let s play series - but last time i did this i was using a toshiba laptop running on ubuntu linux. so i ve been reconfiguring obs and working out the best screen size and testing sound... and for some reason obs was not recording the game sounds it said desktop audio is disabled. after a few searches i came across an article that explained how to solve this issue - turns out you need another piece of software ishowu to be able to capture the sounds from one app to another! here is the guide i followed - how to capture mac desktop audio with obs - but this has been deleted. here is a similar article you can follow - how to record desktop audio with obs turns out that you can t easily recorded audio from one app to another on a mac without some extra software and changing some preferences"},{"url":"/blog/using-defer-to-improve-performance/","title":"Using Defer to improve performance","text":"Using Defer to improve the performance of my website by only loading JavaScript and CSS on a per component/partial basis. In my last post, Exploring the benefits of HTTP2 , I wrote about removing jQuery and my global.min.js files in favour of loading JavaScript","readabletitle":"using defer to improve performance","keywords":"using defer to improve performance in my last post exploring the benefits of http2 i wrote about removing jquery and my global.min.js files in favour of loading javascript on a per component or partial basis so only when that component is included on a page it then loads the needed javascript code and library. which lead me to look into defer in javascript as another way to improve performance. &quot this boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed but before firing domcontentloaded. scripts with the defer attribute will prevent the domcontentloaded event from firing until the script has loaded and finished evaluating." - mdn web docs since the testimonials slider on my homepage is near the end of the page i don t need to load the javascript right away and since it s not used on every page it makes sense to only load it where the slider is being used. i read a few articles on async and defer to try and understand the difference between both and which was the correct one to use for the testimonials slider. so i figured i would just need to add the defer attribute to the &lt script> tag for the tinyslider javascript and that would be it... but i found that doing this it stopped the slider from working - i m still learning javascript so you will have to forgive me. i looked at the tinyslider example code i used and realised it was written so it would run as soon as the browser loads that part of the code. what i needed to do was change the code to only run when the dom had finished loading and this meant that the html code for the slider would have been loaded too. \t &lt link rel=&quot stylesheet" href="/assets/css/components/slider.css"> &lt script src='/assets/js/tiny-slider.js' defer></script> &lt script> document.addeventlistener(&quot domcontentloaded" () => { let slider = tns({ container: '.testimonials__slider' items: 1 autoheight: true speed: 400 loop: true autoplay: true autoplaybuttonoutput: false controls: false autoplayhoverpause: true nav: true navposition: &quot bottom" }); }); </script> using defer to improve the performance of my website by only loading javascript and css on a per component/partial basis."},{"url":"/blog/automated-open-graph-images-with-11ty-and-cloudinary/","title":"Automated Open Graph images with 11ty and Cloudinary","text":"I wanted to find a way to dynamically generate a unique Opengraph images for each blog post automatically using post data, Cloudinary API El I wanted to find a way to dynamically generate a unique Open Graph (OG) image for each blog post or note automatically using post data, the","readabletitle":"automated open graph images with 11ty and cloudinary","keywords":"automated open graph images with 11ty and cloudinary i wanted to find a way to dynamically generate a unique open graph (og) image for each blog post or note automatically using post data the cloudinary api and eleventy (11ty) for social sharing. the purpose of this solution is to save time by not having to manually create a blog post image for each post and make blog posts stand out more when shared on social media websites like twitter for example. previously i was using a generic image for posts or if i used a specific image for the blog post header then that would become the og image. but i wanted something unique for each post and something that would instantly tell people on social media what the post was about. there are many ways to achieve this for example drew mclellan wrote dynamic social sharing images back in 2018 but drew is doing this at build time and is using some very clever stuff with puppeteer and also this post automated social sharing images by stephanie eckles that also uses puppeteer. those are great solutions but i wanted something simpler to set up lightweight on dependencies not too technical and to just be able to 'set it and forget it' . solution what i wanted to achieve was to have an opengraph image that shows the post title on top of the image with my logo added to the image as well. this is what it will look like: first you will need to make sure you have the opengraph tags for images added to the &lt head> of your page template in my case i have this in my blog.njk layout in eleventy. here is the code i currently use: {% if postimage %} < meta name = \" twitter image \" property = \" og image \" content = \" {{ site.cloudinary_url }}{{ postimage }} \" /> < meta name = \" twitter image alt \" property = \" og image alt \" content = \" {{ title }} \" /> {% else %} < meta name = \" twitter image \" property = \" og image \" content = \" {{ site.meta.ogimg }} \" /> < meta name = \" twitter image alt \" property = \" og image alt \" content = \" {{ site.meta.ogimgalt }} \" /> {% endif %} here i am checking to see if the post has specified a post image if not then use the default one (which i need to amend to use what i am writing about here). you ll notice that i have merged the opengraph tags ( name=&quot twitter image" property=&quot og image" ) that facebook and twitter use instead of having multiple lines of code for the same thing. note that you can specify alt text for the image. since i already use cloudinary i was happy to discover that their api has text and image overlays that you can add to your images when you request them. this meant that my idea to have the post title and my logo overlaid on an image could be achieved. how does it work this works by passing variables in the cloudinary image request url these variables are then used by the cloudinary api to create these custom images on the fly . here is the complete url for requesting an image with some custom overlays - in this case the blog post title and my website logo. https://res.cloudinary.com/juanfernandes/w_1200 f_auto/l_juanfernandes-logo w_100 g_south_east x_60 y_40/l_text georgia_80_bold_center using defer to improve performance co_rgb eee c_fit w_600//v1579162296/computer-18363301920-1.jpg the great thing about this is that you can design your image right in the browser by adding a few variables to the url. now this is how my opengraph images code in my blog.njk layout template looks like using the cloudinary variables and my blog post variables in eleventy. < meta name = \" twitter image \" property = \" og image \" content = \" {{ site.cloudinary_url }}w_1200 f_auto/l_juanfernandes-logo w_100 g_south_east x_60 y_40/l_text georgia_80_bold_center:{{ title }} co_rgb eee c_fit w_600/{{ postimage }} \" /> < meta name = \" twitter image alt \" property = \" og image alt \" content = \" {{ title }} \" /> let s break it down essentially i am passing the post title text and image using nunjucks variables then i m telling cloudinary how to display that text and image overlay on top of the post image. here is a breakdown of what all those variables mean: https://res.cloudinary.com/juanfernandes/ this is a variable i use to pass the cloudinary url which my account name w_1200 f_auto/ here i am requesting the images at 1200px wide and automated image format l_juanfernandes-logo this is the name of the image i want to use in the overlay my logo it s prepended with l_ and this is what tells cloudinary to use it as an overlay w_100 g_south_east x_60 y_40/ this specifies the size of the image 100px wide and the position bottom right and its exact placement using x and y values l_text georgia_80_bold_center this tells cloudinary that the overlay text should be in georgia font and the font size should be 80px bold and centred automated open graph images with 11ty and cloudinary this is nunjucks variable for the blog post title co_rgb eee c_fit w_600 this tells cloudinary the colour we want the overlay text to be places it centred vertically and horizontally and sets a max-width for the text /v1579162296/computer-18363301920-1.jpg this variable passes the name of the post image already uploaded to cloudinary for general posts like notes i created a generic image using my brand colour and the text is added in the centre of the image and my logo at the bottom right. for posts where i have used a custom image i make sure that it s a dark image to make the white text is legible. this was a quick solution and an easy win that will make my posts stand out a bit more on social media. i got to delve into and learn more about the cloudinary api overlays in general. tip: testing your social sharing images twitter and facebook provide tools for you to test your social media 'cards' and here is what mine now looks like on twitter. x card validator facebook sharing debugger taking this further i could take this a step further and pass the colour of the text or be able to choose a different logo or image to use as an overlay that can be set via a content management system in my case that s forestry.io when creating a post. i could even turn this into an 11ty plugin. hope you find this useful and if you want to discuss anything about it reach out to me on twitter . i wanted to find a way to dynamically generate a unique opengraph images for each blog post automatically using post data cloudinary api & eleventy"},{"url":"/notes/escaping-nunjucks-code-in-a-markdown-code-block/","title":"Escaping Nunjucks code in a markdown code block","text":"Turns out you need to escape Nunjucks code within a markdown code block. Found a solution by Mark Llobrera - @dirtystylus I noticed that my latest blog post wasn t showing the Nunjucks code within markdown code blocks. Turns out you need to escape Nunjucks code","readabletitle":"escaping nunjucks code in a markdown code block","keywords":"escaping nunjucks code in a markdown code block i noticed that my latest blog post wasn t showing the nunjucks code within markdown code blocks. turns out you need to escape nunjucks code if you are using nunjucks templates. 😁 found a solution by mark llobrera - eleventy: escaping nunjucks statements in markdown code blocks {% raw %}{% if postimage %} < meta name = \" twitter image \" property = \" og image \" content = \" {{ site.cloudinary_url }}{{ postimage }} \" /> {% endif %}{% endraw %} turns out you need to escape nunjucks code within a markdown code block. found a solution by mark llobrera - @dirtystylus"},{"url":"/blog/creating-a-sitemap-file-with-11ty/","title":"Creating a Sitemap file with Eleventy","text":"This is a quick tip showing how I created a sitemap.xml file using Eleventy that will automatically update itself when you create new pages This is a quick tip showing how I created a sitemap.xml file using Eleventy that will automatically update itself when you create new pages","readabletitle":"creating a sitemap file with eleventy","keywords":"creating a sitemap file with eleventy this is a quick tip showing how i created a sitemap.xml file using eleventy that will automatically update itself when you create new pages. you need a sitemap to make it easier for search engines to index your website - but you can also inform them about how often pages are updated when they were last updated and the priority level for each page. what is a sitemap.xml file the sitemaps protocol allows a webmaster to inform search engines about urls on a website that are available for crawling. a sitemap is an xml file that lists the urls for a site. it allows webmasters to include additional information about each url: when it was last updated how often it changes and how important it is in relation to other urls of the site. wikipedia how it works the first thing i am doing here is excluding the sitemap file from the eleventy collection - we don t want the sitemap listing the sitemap.xml file as an entry. i then set the permalink - which is the filename we want as its what search engines look for when they visit your website. we then loop through the eleventy collections.all and output each page url wrapped in a &lt url> tag. inside that tag we have the standard sitemap tags &lt loc> &lt lastmod> &lt changefreq> and &lt priority> . loc is short for location and holds the complete url to the page lastmod is short for last modified which is the date the file was last changed changefreq is short for change frequency which tells search engines how often the page changes priority tag which tells search engines the priority of the page. let s see the code --- eleventyexcludefromcollections: true permalink: sitemap.xml --- < xml version=&quot 1.0" encoding=&quot utf-8" > &lt urlset xmlns=&quot http://www.sitemaps.org/schemas/sitemap/0.9" xmlns xsi=&quot http://www.w3.org/2001/xmlschema-instance" xsi schemalocation=&quot http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> {%- for page in collections.all %} &lt url> &lt loc>{{ site.url }}{{ page.url }}</loc> &lt lastmod>{{ page.date w3datefilter }}</lastmod> &lt changefreq&gt monthly</changefreq> {% if page.url == '/' %} &lt priority&gt 1.00</priority> {% else %} &lt priority&gt 0.50</priority> {% endif %} </url> {%- endfor %} </urlset> a couple of things to note i am using a filter to process and format the date - that s the w3datefilter in the lastmod tag. also i m setting the home page as having the highest priority and setting all other pages to be less of a priority. i m not an seo expert and so i don t know if this is the best way of doing it or not but based on some quick research i m convinced this approach will work as i read that if you omit the priority then a page s priority is usually set to 0.5 by default. this will work for smaller sites but on a large site - this may not be the best approach. same with the change frequency - i m setting all pages to have monthly set as the default for how often the page changes. i won t be doing many updates on my clients' website so i think monthly is appropriate for their website. that s it - this is enough for a small website that doesn t get updated very often but we can make this better for larger sites with content authors - let s look into that now. now let s make it better the above example works perfectly for my client and their small website. it doesn t need to be updated regularly and they don t have a lot of pages - plus they are not very technical so asking them to specify a page priority and change frequency i know it just wouldn t work for them. but let s say you have a client website that has content authors and they are used to seo terms page priorities and change frequencies - let s give them the ability to add those to pages. here we are adding it via frontmatter but this could be handled by a cms as well. --- eleventyexcludefromcollections: true permalink: sitemap.xml --- < xml version=&quot 1.0" encoding=&quot utf-8" > &lt urlset xmlns=&quot http://www.sitemaps.org/schemas/sitemap/0.9" xmlns xsi=&quot http://www.w3.org/2001/xmlschema-instance" xsi schemalocation=&quot http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> {%- for page in collections.all %} &lt url> &lt loc>{{ site.url }}{{ page.url }}</loc> &lt lastmod>{{ page.date w3datefilter }}</lastmod> &lt changefreq>{% if page.data.changefreq %}{{ page.data.changefreq }}{% else %}monthly{% endif %}</changefreq> &lt priority>{% if page.data.priority %}{{ page.data.priority }}{% else %}0.5{% endif %}</priority> </url> {%- endfor %} </urlset> let s look at what is different we are now checking to see if the page data contains a changefreq if it does we use it otherwise we use monthly as the default and we use the same approach with the page priority - if the user has not set a page priority we use a default of 0.5 - that s it. a nice and easy fix to allow content authors more control over their pages whilst also having a default value automatically set if the author has not set one. wrapping up i love these quick wins - doing a small thing to make maintaining a website a lot easier. you can just set it and forget it. this is a quick tip showing how i created a sitemap.xml file using eleventy that will automatically update itself when you create new pages"},{"url":"/blog/improving-website-security/","title":"Improving Website Security","text":"Since WebPageTest.org started testing website security, I wanted to learn more about it figure out how to improve my website security using Ever since I converted my website to Eleventy - from PHP - I have been obsessively working ton improving its performance. One well-known to","readabletitle":"improving website security","keywords":"improving website security ever since i converted my website to eleventy - from php - i have been obsessively working ton improving its performance. one well-known tool that i use for checking website performance is webpagetest.org and they recently added a new metric to test for - security. this new test is provided by the snyk . you can sign up for a free account give it access to your project s repository and it will actively perform security checks on your code dependencies and you ll be notified if there are any vulnerabilities. you don t need to have a snyk account to improve your website security. you only need one if you want them to scan your website repository. 👍 but if you do you can also use their command-line tool to check your website locally as you work on it. so why do this firstly i didn t like seeing that red square with an e grade next to all the green checks ✅ - but also it was a good learning opportunity. confession time - i m not a website or server security expert. everything i did to my website was based on what i learnt whilst researching the suggestions from snyk and webpagetest. also and most importantly to protect my website and users from hacks introduced via javascript vulnerabilities like cross-site scripting or compromised npm scripts and a lot more. how do i do this first test your website using webpatetest.org and see what level of security your website currently has. then if you need to improve it look at your security report to see what snyk recommends you need to improve. based on the report from snyk on webpagetest i researched each of the issues it said i needed to fix. to see what you need to fix click on the grade letter for security to be taken to your detailed report. these are the security issues i had to fix: x content type options: the only defined value &quot nosniff" prevents internet explorer from mime-sniffing a response away from the declared content-type. this also applies to google chrome when downloading extensions x frame options: clickjacking protection: deny - no rendering within a frame sameorigin - no rendering if origin mismatch allow-from - allow from specified location allowall - non-standard allow from any location content security policy: a computer security standard introduced to prevent cross-site scripting (xss) clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context x xss protection: a cross-site scripting filter. the http x-xss-protection response header is a feature of internet explorer chrome and safari that stops pages from loading when they detect reflected cross-site scripting (xss) attacks. let s look at some code this was done specifically for my website which is hosted with netlify but the same principles apply to other hosts - just be aware that the way the headers code is formatted may differ. there are two ways to do this for a website hosted on netlify - you can either add it to your netlify.toml config file or create a _headers file. syntax for the config file syntax for the headers file it s up to you which one you use - the difference between the two is how the headers code is formatted. i chose to add mine to the netlify config file because i already had that file and it made sense to keep all netlify related settings in the same place. here is what my security headers look like in my netlify config file: [[headers]] for = "/ " [headers.values] x-content-type-options = &quot nosniff" content-security-policy = &quot default-src 'self' https://res.cloudinary.com ; frame-ancestors 'none'; style-src 'self' 'unsafe-inline';" x-frame-options = &quot deny" x-xss-protection = &quot 1; mode=block" you could copy the above code and add it to your netlify config file but it may be better if you do your research as some of these security headers may stop scripts from third-parties working on your website. conclusion there you have it - easy when you know how and i didn t break my site once. there are still a few more things to work on going forward looking at the mozilla observatory test results for my website shows that there is still room for improvement - but i now have the basics covered and a more secure website. i hope you found this post useful. i have listed the resources i used bellow to help you make your website more secure. resources learning resources x xss protection documentation content security policy documentation x frame options documentation x content type options documentation netlify headers x content type options on keycdn improve your mozilla observatory score web security - mozilla guide tools new - bulk page speed test mozilla observatory security headers ssl labs since webpagetest.org started testing website security i wanted to learn more about it & figure out how to improve my website security using headers on netlify"},{"url":"/blog/add-your-site-to-eleventy-leaderboard/","title":"Add your site to the Eleventy Leaderboards","text":"This is a quick tip showing you how to add your eleventy built website to the Eleventy leaderboards The Eleventy (11ty) leaderboard benchmarks websites built with Eleventy over time. TL;DR - You need to add your site via GitHub to the elev","readabletitle":"add your site to the eleventy leaderboards","keywords":"add your site to the eleventy leaderboards the eleventy (11ty) leaderboard benchmarks websites built with eleventy over time. tl dr - you need to add your site via github to the eleventy website repository and create a pull request for it to be included in the leaderboards. let s get started go to the eleventy website github repository - https://github.com/11ty/11ty-website navigate to /_data/sites - here you will find json files - each one represents a website built with eleventy and ones shown on the leaderboard now you need to create your own json file for your website so click on the add file button and then on the dropdown click on create new file enter your a file name in the name your file... input. this is a filename so don t use spaces or punctuation marks but you can use hyphens (-) or underscores (_) to separate words use the template below with your website s details as the content of your new file: { &quot url": "" &quot name": "" &quot description": "" &quot twitter": "" &quot authoredby": [""] &quot source_url": "" } url : the site s live url name : name of the site description : a short text description of the site twitter : twitter username for the site or the site s author. authoredby : an array of twitter usernames of the site s authors. supplements the twitter entry. (optional) source_url : url to the source code (optional) now that you re done creating the new file you need to save it and also create a pull request - this will ask for your file to be added to the eleventy repository. you don t need to add anything to the optional description field click on the propose new file button on the next screen you can check your changes and then click on the create pull request button to proceed. you don t need to add a comment but you can thank zach for creating eleventy. then click on the create pull request button again next github will do a bunch of checks on your changes and it will tell you if there are any conflicts. hopefully there aren t but if you followed this exactly you shouldn t have any conflicts. this is the result of me submitting an actual change so i d have a screenshot of what the final stage looks like. that s it - you can now close the page and wait. once your pull request gets merged your website will be included in the next round of leaderboard checks and added to the leaderboard. keep an eye out on the eleventy leaderboards to see how your website scores. once your website has been added to the eleventy github repository you will also get your author page on the eleventy website. check out my author page . this is a quick tip showing you how to add your eleventy built website to the eleventy leaderboards"},{"url":"/blog/improved-website-because-of-csp/","title":"How I improved my website because of Content Security Policies","text":"Last month I delved into security headers including Content Security Policies and added a bunch of them to my website. As a result this has Last month I delved into security headers including Content Security Policies and added a bunch of them to my website. I did this to learn","readabletitle":"how i improved my website because of content security policies","keywords":"how i improved my website because of content security policies last month i delved into security headers including content security policies and added a bunch of them to my website. i did this to learn more about website security and improve my websites' security. but i learnt that i had inadvertently broken some things on my site - this wasn t obvious because i have a cobbled together serviceworker which meant i didn t see the things that had stopped working - namely images and sliders. i spent a few hours applying fixes to my website to comply with the content security policies i implemented a few weeks ago and at the same time improved my websites' performance and usability. csp or content security policy - are a set of rules you add to a web server to say how content should be served and from where. for example you can choose to serve images css and js just from your domain. that means for example google analytics would not work and any scripts hosted elsewhere unless you specifically allow that domain. the issue i had is that its either all or nothing. so you cant have any inline js or css. the js was a quick fix - i needed to move it to a file. but i use css to apply background images to components via the cms. so i needed to move that to the css file and use a class to apply a chosen background image. what i changed problem - inline css one of the issues i had was that all inline css is blocked only linked to css files will be applied to my website this meant that i had to change how i did the background images for the hero section. i was able to add the image via front matter or the cms which would then be added to the hero section using inline css. solution i now have a list of modifier classes i add to the hero section that chooses the type of background image i use. i have been using the same image for code related blog posts for example so it made sense to move that to a class in my main stylesheet. i can always create new ones with different background images when i need them. you can use the &quot inline-unsafe" csp rule to allow inline styling but this makes it as the name suggests not safe to use. i think with my limited security knowledge that if you disallow inline scripts it would be safe to allow inline styling - i can imagine the only way for someone to change the styling of your website would be via an injected script. problem - inline javascript js library i had a testimonials slider on my homepage - it used a slider script and some custom js to customise the slider. i started by moving the custom code from being inline into a js file and linking to it but i was struggling to generate a sha (secure hash algorithm) for the slider library. solution since i was struggling to get a sha to work with the code for the slider i decided to get rid of all the javascript not just from the homepage but also from the portfolio work pages. now i show a random testimonial on the homepage with a new one being randomly shown every time there is a new build of my website. i also removed the image slider from portfolio projects. the images now are shown in a column with project details on the right which i also applied position sticky to the project detail sidebar to it stays with the user as they scroll down to see all the project images. the result i enjoyed it this - now my website fully complies with very secure csps. it s more secure has better performance and better for users. win win. last month i delved into security headers including content security policies and added a bunch of them to my website. as a result this has improved my website"},{"url":"/blog/2020-year-in-review/","title":"2020: Year in review","text":"Worldwide pandemic, bullshit politics, white supremacists, racists, Brexit a whole bunch of rubbish I won t get into Twenty-Twenty wasn t a good year for a lot of people - except perhaps for Jeff Bezos and all those who profited from the pandemic. I almost","readabletitle":"2020: year in review","keywords":"2020: year in review twenty-twenty wasn t a good year for a lot of people - except perhaps for jeff bezos and all those who profited from the pandemic. i almost didn t bother doing a review but felt i owed it to myself and use it as an opportunity to highlight the good things that happened despite all that went on. the year of the worldwide pandemic bullshit politics white supremacists racists brexit and a whole bunch of rubbish i won t get into - it s fair to say we won t be forgetting 2020 in a hurry. as i said i almost didn t bother doing a review of 2020 - we all know it wasn t a great year and it seems that these - 'year in review' posts have become less popular probably because a lot of people didn t have a great year. but since i ve been doing them for a few years i wanted to continue the tradition - even if it s just a way for me to review my year and see what i need to do better and to celebrate all the wins too. work like the previous year my contract rolled over into 2020 as it was extended from a six-week contract to a rolling contract. i returned to the chartered management institute and was there until mid-april 2020. i was scheduled to start a new contract with signet jewelers whom i have worked with before - at the start of march but unfortunately the uk went into our first lockdown. signet had to close their stores (ernest jones and h. samuel) and most of their it staff were put on furlough - which is something a lot of companies had to do to survive. cmi offered to keep me on for another two weeks (it could have been longer but they too had to tighten the purse strings). after those extra two weeks of work at cmi - i went full into lockdown and homeschooling mode because my wife being a primary school teacher had to work. my mother in law who normally looks after our children when my wife and i are both at work - with her being more at risk due to her health she was staying in her room (she lives with us) and away from us as much as possible to minimise the risk of her catching covid from my wife due to my wife s risk of exposure at school. this meant i was in charge of homeschooling our three children and also cooking our dinners as my wife was having to stay at work a lot later than usual as the school was open for the children of key workers. i m lucky all our children know how to get their breakfasts and lunches without supervision. i was happy doing this even though it was hard work and mentally taxing. i love cooking normally but having to do homeschooling and then cook every day was tiring. this also meant i didn t do any freelance work or even look for new contracts as i didn t think i d cope with a full-time job and all the other jobs around the house. i did think that once things started to go back to 'normal' after the lockdown was lifted that i would easily get another contract but unfortunately that didn t happen until mid-november. luckily i had been saving money - enough for three months worth of wages but unfortunately that wasn t enough to cover me during an unpredictable event like a worldwide pandemic and i ended up having to use the money i had put aside for paying my corporate tax bill for the previous year. after the schools opened up again in september i started looking for work mainly focusing on getting freelance work as the contract work market was still pretty dire - unless you were a javascript/react/[insert other js framework] developer. work started to pick up in october and i also started a new contract as an interaction designer towards the end of november with defra. this contract is my first and last contract inside ir35. it has not been a great experience. for example you can only use a certain number of umbrella companies that are pre-approved by the recruitment agency and the end client. you can t use your own ltd. company. you then spend ages reviewing the umbrella companies - looking for the cheapest rate - us freelancers don t care much about the 'employee' benefits. anyway i won t go into it too much - let s just say i won t be doing any more inside ir35 contracts. freelance when it became obvious to me that the contract market wasn t going to recover as quickly as i had hoped - i decided to focus on getting back into freelance work. i put on my marketing hat and started letting all my connections know i was looking for freelance work and it paid off as i was contacted by someone who saw one of my tweets about going back to freelance work and asked me if i would redesign and rebuild their property search website which has been doing very well in terms of visitors and generating a good income but the design was quite dated and in need of a refresh. then i took on a new web hosting client whose website had been built and hosted by one of his employees who was now an ex-employee. as you can imagine that was a tricky position for me to be in as i had to liaise with a disgruntled ex-employee. unfortunately i never got given access to the old hosting or given a copy of the site and database. i had managed to download a copy of the website using the command line utility 'wget' but unfortunately this doesn t work all that well when its a wordpress website. the client did want a new website but he had wanted to wait until 2021 but this forced his hand to get moving with the new site. i spent some time researching and creating a proposal for them which they accepted. the new website will be launching early on in the new year. they will be my first freelance project where i have not designed the website myself but instead hired a designer to do this - my very good friend and excellent designer fern taylor . personal i m pretty sure we or most of us had a rubbish 2020 - mine wasn t great but i know it could have been much much worse. we were very lucky to not have caught covid or have lost anyone to it. but on a more positive note - i completed the couch to 5k program - i never thought i d enjoy running but i have enjoyed getting into it. especially running in the summer with the lovely suffolk coastal views to one side and farm fields to the other whilst listening to dance music. i decide to isolate right from the beginning – even before the first lockdown was announced – as much as possible – i didn t leave the house at all unless it was for dog walks or going for a run. since my wife was already at work being a teacher and already at higher risk - she decided that she could do the weekly shopping trip since tesco was only allowing those at risk to use delivery slots. but we used that time to get loads of diy done in the house - we painted all the hallway walls and ceilings my mother in laws bedroom planned and hung a load of picture frames. side projects i didn t have many side projects this year but i did have a few things i focused on. chicks on a bit of a personal 'side project' one of our chickens became broody and after a few weeks and one failed attempt we got two beautiful chicks. blogging i blogged a bit more than the previous year - a total of seven blog posts whereas in 2019 i only wrote five blog post. i also managed to post 27 notes in 2020. in 2019 i jumped on the week-notes bandwagon but it soon started to feel a bit repetitive with not much to write about. then i saw clive walker was doing monthly notes and i thought that would be better-suited format and i managed to stick with it - writing one for every month of 2020. looking forward to 2021 i want to continue blogging – i had some very encouraging comments from people finding my posts useful and that was great but it s also improving my writing skills and ability to better communicate about a particular subject. my website i guess a side project is something you work on the side – so i guess my website was my main side project for the year. i have spent quite a bit of time improving the performance of my website over the year. i also managed to add more to it. i delved into security headers and that lead to further improvements to my website performance and overall user experience. another side project was a website i designed and built for a friend s martial arts business – kuk sool won woodbridge . this was a fairly simple bright design and a huge improvement on their previous website. all hand-coded with html sass and using eleventy with nunjucks templates. i worked on another side project which wasn t planned – i built and released my first 11ty plugin – cloudinary images which allows the user to embed an image from cloudinary in your markup. this is the first time i released anything code related to the wild. it got quite a bit of interest when released – including a 'like' from chris coyer. reading i finally finished the stephen king series the dark tower – all 8 books! my fiction reading for quite a few years has just been stephen king books for two reasons – i like his work and i have quite a few of his books. but after the dark tower series i fancied a change and have started reading the fireman by joe hill (yes stephen king s son 😁). i also did a lot more reading from my instapaper archive and i started tracking my monthly reads and sharing them on my monthly notes posts. that s it! well it s taken me all of january to get this review written and typed up. just goes to show what kind of year 2020 was that i was so eager to write this. worldwide pandemic bullshit politics white supremacists racists brexit & a whole bunch of rubbish i won t get into"},{"url":"/stream/bye-bye-gmail/","title":"Bye Bye Gmail","text":"That s it - I have finally deleted my Gmail account. I ve been using a self-hosted email address for a year now and slowly switching email a That s it - I have finally deleted my Gmail account. I ve been using a self-hosted email address for a year now and slowly switching email","readabletitle":"bye bye gmail","keywords":"bye bye gmail that s it - i have finally deleted my gmail account. i ve been using a self-hosted email address for a year now and slowly switching email addresses on websites i still use. whenever i got an email sent to my gmail account in the last year - i would decide if i m still using that website/service and decide if i want to keep my account. if i still use it then i d change the email address to my new one otherwise i just deleted the account. so not only have i moved away from gmail - i have also had a bit of a digital accounts cleanup. this week i requested and downloaded all my 14 570 emails and today i deleted my account. i have had that gmail account since the gmail beta days when it was invite-only. #privacycontrol that s it - i have finally deleted my gmail account. i ve been using a self-hosted email address for a year now and slowly switching email addresses on websites i still use."},{"url":"/blog/working-an-inside-ir35-contract/","title":"Working an inside IR35 contract","text":"I ve only had one contract inside IR35 that was enough to put me off. First last contract inside IR35 that I will take on What is IR35? IR35 is the name given to a tax legislation that is aimed at identifying individuals who are avoiding paying the tax that the","readabletitle":"working an inside ir35 contract","keywords":"working an inside ir35 contract what is ir35 ir35 is the name given to a tax legislation that is aimed at identifying individuals who are avoiding paying the tax that they should be. the ir35 legislation specifically challenges those people who supply their services to clients via their own company often known as a ‘personal service company’ be it a limited company or a limited liability partnership who in the ever-watchful eyes of hmrc should be classed as ‘disguised employees’. this means that hmrc do not recognise the contractor in question as ‘self-employed’ from a taxation perspective and therefore they should be taxed the same way that a permanent employee should be thus falling insider what is called ir35. contractor weekly my experience to be fair i ve only had one contract that was inside ir35 and after a brief twitter conversation i decided to write a blog post about my experienvce working an inside ir35 contract and why i decided it s not for me and pushed me back to peermanent employment. umbrella companies the biggest issue i had was finding a good umbrella company - you have to do your research including looking at companies house and checking their accounts. if they haven t updated their accounts in a while then something may not be right. remember they get your money take a cut and then pay you - if they are having money problems they may not be able to pay. also checkout umbrella company reviews on contractor websites. this article on it contracting - umbrella company reviews – can they be trusted has a lot more information on what you should look at when researching umbrella companies. you will need to find contracts that pay at least £100 per day more than your usual day rate if you want your take-home pay to be the same as an outside ir35 contract. when looking for an umbrella company one of the main questions you ll want to get an answer to is - what is the take-home pay not all recruitment agencies will let you just choose any umbrella company - it will likely have to be one from a list of approved companies. i had a list of twenty to choose from - but the one that was highly recommended to me was not on that list. pensions umbrella companies have to automatically enrol you into a pension after three months - not something i needed as i already had a private one - but they still did it and i had to cancel it and chase get back two payments back. some umbrella companies allow you to pay your pension contributions into an existing pension including a sipp (self-invested personal pension) if you have one - you need to check if they do this and you need to tell them before they auto-enrol you onto their one. if you have a sipp make sure they can pay your contributions into it. accountants your accountant may charge you more to be able to help with an inside ir35 contract if they normally just deal with your business accounts and not personal - since your earnings will be paid into your account and not your business account. mine didn t and was very helpful. multiple employments you can have more than one employment - you re employed by your own limited company as well as by the umbrella company but this means you won t have a p45 to give to the umbrella company - this is fine - but you may end up on the wrong tax code or the emergency tax code - which means you ll pay a lot more tax. speaking with my accountant it was easier to just end my employment with my own company so that i could get a p45 instead of risking it. salary if you normally pay yourself a salary from your limited company - then that will need to stop if you re no longer employed by them (you) but if you choose to stay employed with your company then be aware that you ll pay more taxes because you ll be earning more. in the three months i was in a contract - i only 4 weeks where my pay was the same. and once my tax code was changed at hmrc but no one knew why. in the 5 years i ve been self-employed that has never happened. timesheets i had to complete three timesheets a week - the recruitment agency the umbrella company and one for the client. just my experience by the way these are just my observations based on my short experience and research. please speak to your accountant and/or a professional who specialises in ir35 regulation. is an inside ir35 contract right for you my advice is to try it and find out for yourself. after reading this you ll have more information and hopefully know more about what to expect. it s what i decided to do i had only heard negative things about inside ir35 contracts and with more and more contracts being inside - i needed to see what it was like for myself. not just inside ir35 contracts some recruitment agencies will need proof that a contract is in fact outside the ir35 scope as stated by the client and this means you may need to pay a third party company arranged by the recruitment agency that will check whether the contract is or isn t outside ir35. not sure if this is the same with all agencies but i had to pay for this service - luckily the client was happy to pay this fee - as i wasn t happy to fork out the £80 for the privilege. ir35 insurance there is tax investigation insurance for ir35. it also covers your compliance with regulations relating to national insurance contributions or vat amongst other things. however the spotlight right now is on ir35. this is not a sponsored link - but i have professional indemnity insurance from withjack and i found they now do tax investigation insurance as well. checkout withjack insurance that s it i hope you found this post useful if you are currently considering a contract inside ir35. do let me know if you have had a different experience. i ve only had one contract inside ir35 & that was enough to put me off. first & last contract inside ir35 that i will take on"},{"url":"/notes/google-floc/","title":"Opting out of Google's FLoC Network","text":"This website is now opted out of Google s FLoC Network recently announced the rollout of their Federated Learning of Cohorts (FLoC), a new advertising-surveillance initiative that seeks to repla","readabletitle":"opting out of google s floc network","keywords":"opting out of google s floc network &quot google recently announced the rollout of their federated learning of cohorts (floc) a new advertising-surveillance initiative that seeks to replace third-party cookies with a new user profiling technique that garners data generated by the browser itself." yeah - no thanks google. following paramdeo s instructions i have added permissions-policy = &quot interest-cohort=()" to my netlify.toml file and just like that my website will be opted out of the google floc network. follow the instructions in paramdeo s post if you want to do the same to your website - opting your website out of google s floc network #privacycontrol this website is now opted out of google s floc network"},{"url":"/stream/degoogling-is-the-same-as-jailbreaking-apparently/","title":"DeGoogling is the same as jailbreaking apparently","text":"Turns out that some apps will treat your DeGoogled Android phone as a phone that has a custom ROM installed aka it has been jailbroken and w Having recently got a DeGoogled mobile phone from /e/ OS and installing all the apps I used on my old phone, I discovered that the Freetrad","readabletitle":"degoogling is the same as jailbreaking apparently","keywords":"degoogling is the same as jailbreaking apparently having recently got a degoogled mobile phone from /e/ os and installing all the apps i used on my old phone i discovered that the freetrade app will not work because it considers my phone to be 'jailbroken' or running a customised version of the os. &quot degoogling would indeed involve jailbreaking methods so i m afraid it is incompatible with the freetrade app" - freetrade support just a small prices to pay for wanting more control over your data and its usage. #privacycontrol turns out that some apps will treat your degoogled android phone as a phone that has a custom rom installed aka it has been 'jailbroken' and won t run"},{"url":"/notes/til-webmention-and-urls/","title":"TIL - Webmention and URLs","text":"Creating a post with a title that has uppercase letters, like IR35 - the URL will have those uppercase letters in your file system, but in t TIL: If you create a post with a title that has uppercase letters, like IR35 - the URL will have those capital letters in your file system,","readabletitle":"til - webmention and urls","keywords":"til - webmention and urls til: if you create a post with a title that has uppercase letters like ir35 - the url will have those capital letters in your file system but in the live url they will be lowercase. this may be obvious to some but i had not noticed until i started working on implementing webmentions on my website. a webmention recorded against /blog/working-an-inside-ir35-contract/ will not show mentions for /blog/working-an-inside-ir35-contract/ . took me a few hours to figure out that was why webmentions were not showing for that blog post! creating a post with a title that has uppercase letters like ir35 - the url will have those uppercase letters in your file system but in the live url they will be lowercase"},{"url":"/notes/til-generating-a-hash-from-the-command-line/","title":"TIL: Generating a hash from the command line","text":"Since adding Content Security Policies to my website, I need to add a sha for any inline scripts I use - I only use one, which is the one to Since adding Content Security Policies to my website, I need to add a sha for any inline scripts I use - I only use one, which initiates my","readabletitle":"til: generating a hash from the command line","keywords":"til: generating a hash from the command line since adding content security policies to my website i need to add a sha for any inline scripts i use - i only use one which initiates my serviceworker. i keep forgetting how to genetate shas. making a note for future reference. you can generate a hash using openssl: echo -n 'dosomething();' openssl sha256 -binary openssl base64 since adding content security policies to my website i need to add a sha for any inline scripts i use - i only use one which is the one to initiate the serviceworker."},{"url":"/stream/changelog-add-other-links-to-the-footer/","title":"Changelog: Add other links to the footer","text":"Saw a tweet about how websites with RSS should have a link to it in the header to save digging into code to find it, after a tiny footer red Saw a tweet about how websites with RSS should have a link to it in the header to save digging into code to find it and I also hate that, b","readabletitle":"changelog: add other links to the footer","keywords":"changelog: add other links to the footer saw a tweet about how websites with rss should have a link to it in the header to save digging into code to find it and i also hate that but i also didn t have any links to my rss feed. well i had a task to add these other links to my site and was going to wait until the redesign but decided to redesign the footer slightly to include them. saw a tweet about how websites with rss should have a link to it in the header to save digging into code to find it after a tiny footer redesign i added mine"},{"url":"/blog/2021-year-in-review/","title":"2021: Year in review","text":"2021 was a year of firsts for the family I after a few years of covid, including our first restaurant outing also our first UK break since b Twenty Twenty One was a year of firsts for the family and I after a few years of covid. Including our first restaurant outing and also our","readabletitle":"2021: year in review","keywords":"2021: year in review twenty twenty one was a year of firsts for the family and i after a few years of covid. including our first restaurant outing and also our first uk break since before covid started. apart from that it was an uneventful year - which is not a bad thing. i hope you had a great year. personal due to covid i was without work for about a year and during that time i wasn t using my car. after i got my fully remote permanent role - i decided to sell my lovely mercedes-benz a-class. it had been off-road for over a year. i had to have it motd serviced and taxed and then i got a quote from webuyanycar. selling via webuyanycar for the first time was an interesting experience. for example did you know that once you take your car for them to inspect it and review the quoted price - you can no longer drive off and think about it as it will invalidate their quote. we had to get the train home! anniversary in july my wife and i celebrated our 18th wedding anniversary and we celebrated by going to a restaurant for the first time since before covid and also the first time my wife has eaten at a japanese restaurant - she liked it! holiday we also went on our first holiday since before covid - we managed to book a place at a glamping site in yorkshire. we had booked it quite early before everywhere in the uk was sold-out. it s a lovely site with only 7 other families onsite at once. there was a lake and we hired a canoe for the week which the kids loved using. we stayed in a bell tent. it was great - we had a fire pit and a bbq where we cooked most of our meals. skateboarding i wasn t much of a skateboarder when i was young - i was in my teens when i got into it and so didn t spend much time skateboarding. but one of my kids wanted to learn - so i dusted off my old skateboard and we spent quite a few summer evenings skateboarding in our local tennis courts as we don t have a skate park near us yet. we even visited a skatepark - a first for both of us. i have to remember to take it easy as my body is not as young as my mind thinks it is!! health and fitness my health and fitness took a huge leap backwards in 2021. at the start of covid in 2020 i self-isolated even before the first lockdown was announced and i pretty much stayed in unless i was going for a run or to take the dog out for a walk. but then winter came and i didn t have the willpower to go out for a run in the cold wet and muddy countryside where i live - nor have any enthusiasm to do any other type of exercise either. so by 2021 i was already a hermit and barely left the house - i stayed up late every night watching tv and eating all sorts of rubbish food and drinking - i went through quite a few bottles of rum. to add to this i had a daily very itchy skin rash all over my body that i got in march 2020 that has never gone away. i ve been on prescribed antihistamines ever since. i paid for a private allergy test which tested 800 food and enviromental items and i got back a huge list of things that i was now apparantly allergic to. i stopped eating everything on the list - including wheat and dairy products. now i have a very basic and plain diet. it got better in 2021 but i still have a daily rash and i still take antihistamines. doctors just told me to keep a food diary and stop eating anything that caused the rash - but they don t know the cause. blood tests only work if they know what they are testing for so mine didn t show anything. i was fully vaccinated against covid - managing to get all the vaccines before the end of the year. nfts / crypto [warning: this is about crypto and non-fungible tokens (nfts). i m not writing this to convince anyone that they should invest in crypto/nfts. if you want to chat about them add me on discord and i ll be more than happy to chat nfts. discord: cryptojuan 9664] in august i read about a 12-year-old kid from the uk who created a generative art collection as an nft and it piqued my interest as something that i may be able to do myself. an opportunity to learn a new skill and delve into blockchain development. so i took a deep dive into the world of nfts and crypto. it was one eye-opening experience with tons of learning. i soon became a community mod for a new nft project - cryptoghosts - and that was the real eye-opener to the real world of nfts and crypto - a very shady scam riddled industry and until it gets some sort of regulation people will continue to lose a lot of money. my advice is to only use money you can afford to lose and don t go into expecting to become a millionaire overnight by spending a few hundreds of dollars/pounds. work i have now been at my new permanent job for over six months and i have been slowly getting used to being a permanent member of staff at a company again. i ve done a lot of varied work in my first six months at intelliflo from styling a 3rd party help plugin bug fixes new components and even setting up our first design system/style guide. freelance i designed and built four websites for existing and new clients one of these was put on hold as the client was too busy to be able to provide the remaining content but all the others went live. worked quite a bit on my website but most of it was behind the scenes stuff. i added webmentions to my blog posts - which was only possible thanks to the 11ty community for kindly providing plenty of articles on the subject. i could not have done this without those articles. another behind the scenes change was that i finally fixed my service worker script. i wasn t deleting older versions and so returning visitors may not have seen the latest css changes. this again was something that i couldn t have done myself had it not been for the numerous articles and a book on implementing a service worker script. stats trees planted podcasts listened books read freelance projects series watched blog posts 388 20 4 4 38 14 articles read movies watched completed tasks pomodoro minutes music listened 226 8 109 11 037 118hrs / 1446 scrobbles 2021 was a year of firsts for the family & i after a few years of covid including our first restaurant outing & also our first uk break since before covid"},{"url":"/stream/indieweb-tweets/","title":"IndieWeb Tweets","text":"Going back to posting tweets or short notes via my website and syndicating A while back I started posting on social media by writing notes on my website and then syndicating them to social media networks. But I had","readabletitle":"indieweb tweets","keywords":"indieweb tweets a while back i started posting on social media by writing notes on my website and then syndicating them to social media networks. but i had no way of writing them on my phone before but now i have an iphone there s an app that allows me to create new files on my gitlab repo. yay. going back to posting tweets or short notes via my website and syndicating"},{"url":"/stream/adding-a-cms/","title":"Adding a CMS to my website","text":"Want to add a CMS to this website to its easier to post social posts from my phone Been looking to add a CMS to my website so that its easier to post to social media whilst on my phone. I looked at Netlify CMS but that was","readabletitle":"adding a cms to my website","keywords":"adding a cms to my website been looking to add a cms to my website so that its easier to post to social media whilst on my phone. i looked at netlify cms but that was a no go because of csp rules and needing to include js files on my site. trying out tinacms. #indieweb want to add a cms to this website to its easier to post social posts from my phone"},{"url":"/stream/stream-social-media-posts/","title":"Now Streaming","text":"Some progress on my Streams to social media posts If this works, then this post from my website should auto post to Mastodon and Twitter. This is how I plan on owning my social media conten","readabletitle":"now streaming","keywords":"now streaming if this works then this post from my website should auto post to mastodon and twitter. this is how i plan on owning my social media content. but any shitposts i will post directly on the socials. #indieweb some progress on my streams to social media posts"},{"url":"/stream/stream-ifttt-reliance/","title":"Social posts and IFTTT reliance","text":"All my auto posts to social media rely on IFTTT All my auto posts to social media rely on IFTTT, and I need to find a way of doing this without relying on another service. I ve seen other","readabletitle":"social posts and ifttt reliance","keywords":"social posts and ifttt reliance all my auto posts to social media rely on ifttt and i need to find a way of doing this without relying on another service. i ve seen others use netlify functions to achieve this; but i would struggle to get that working and also i would need to work out how to get it to work if i ever moved my site to another host 🤔 #indieweb all my auto posts to social media rely on ifttt"},{"url":"/stream/mastodon-instance/","title":"Mastodon Instance","text":"Can’t decide if I want to move to a new mastodon instance or host my own I need to either move to another Mastodon instance or host my own. Busy me thinks I should just find one, but the tinkerer in me wants to s","readabletitle":"mastodon instance","keywords":"mastodon instance i need to either move to another mastodon instance or host my own. busy me thinks i should just find one but the tinkerer in me wants to self-host. can t decide if i want to move to a new mastodon instance or host my own"},{"url":"/stream/tried-a-few-headless-cmss/","title":"Tried a few headless CMSs","text":"After trying quite a few headless CMSs I finally settled on Forestry - again Spent sometime reviewing a few headless CMSs to make it easier to post short posts to social media and ended up going back to Forestry CMS","readabletitle":"tried a few headless cmss","keywords":"tried a few headless cmss spent sometime reviewing a few headless cmss to make it easier to post short posts to social media and ended up going back to forestry cms - which has an uncertain future as the owners are working on a replacement version; tina cms. but it was so easy to set up it was a no-brainer. after trying quite a few headless cmss i finally settled on forestry - again"},{"url":"/stream/updating-ifttt-webhooks/","title":"Updating IFTTT Webhooks","text":"Since I ve moved to a new mastadon instance I need to update my IFTTT webhooks to work with it Following the tutorial ( https://hyperborea.org/journal/2017/12/mastodon-ifttt/ ) by Kelson once again to help me created the webhook neede","readabletitle":"updating ifttt webhooks","keywords":"updating ifttt webhooks following the tutorial ( https://hyperborea.org/journal/2017/12/mastodon-ifttt/ ) by kelson once again to help me created the webhook needed on ifttt.com to auto post streams from my website to the new mastodon instance i just moved to - hachyderm.io since i ve moved to a new mastadon instance i need to update my ifttt webhooks to work with it"},{"url":"/stream/auto-posting-to-fediverse-broke/","title":"Auto posting to fediverse broke","text":"Auto posting to fediverse broke with the change of instance and I m trying to get it working again Auto posting to fediverse broke with the change of instance, and I m trying to get it working again","readabletitle":"auto posting to fediverse broke","keywords":"auto posting to fediverse broke auto posting to fediverse broke with the change of instance and i m trying to get it working again auto posting to fediverse broke with the change of instance and i m trying to get it working again"},{"url":"/blog/2022-year-in-review/","title":"2022: Year in review","text":"This year in review post has been really difficult to write (and why it s so late) because of how it ended with being the worst year of my l This year in review post has been really difficult to write (and why it s so late) because of how it ended with being the worst year of my","readabletitle":"2022: year in review","keywords":"2022: year in review this year in review post has been really difficult to write (and why it s so late) because of how it ended with being the worst year of my life so far. it took me a while to write it but i really didn t want to miss posting it as i ve written one every year since 2016. work not much freelance work done this year as i stepped back from doing so much just focused on contract work. finished arrival lift services website - a custom design and build using tailwind css and eleventy removed forestry cms from jf website because i wasn t using it any more and it s also being discontinued. now that i m back to using an iphone there are gitlab apps that allowed me to edit content on my repo but this was quite a fiddly way to edit and add content to my website. i then added forestry back because of stream (short posts that get syndicated to social media) posts as a temporary solution whilst i look into getting tina cms setup for a long time i used the project-hub.xyz domain name to host projects i was working on as a way to show clients progress that was made - with a backlog of changes kept for reference. but since i ve stopped doing freelance work it was time to get rid of it. i tried selling the domain name but there was no interest so i let it expire :( personal since we moved into our house about 8 years ago we ve just been working on updating the inside of the house. so this year it was time to work on the outside. we decided to extend the house into half of the loft (the other half is used for storage still) and add an extra two rooms (a bedroom and an exercise room). we also had the driveway and patio redone - the patio got a new design and shape. the driveway surface was redone using hardcore and new shingle. plus we had an outside entertainment area built - it s sheltered with a big table and chairs so we can have meals out there also houses our barbecue and a seating area. as part of working on the outside entertainment area i decided to get a new bbq as part of the outside kitchen i will be building. i got a traeger wood pellet bbq in the end as it seemed like a great choice and easier to use. i love it. so easy to use and we can have bbqs even if it s raining because it s sheltered and we can even eat out there as we had patio heaters installed. middle child tasha joined a football team and i am super proud of her. she s doing really well for someone who has not been playing football for that long. i m enjoying watching her play at the weekends and at training during the week apart from it s been freezing cold! i turned 41 in november and how do you know you re officially old the nhs send you for your free health check! furthermore i didn t do anything for my birthday. it was just another day for me. and i also got kidney stones it s the second time i ve had them in myself and it still hurts a lot. by the time i got seen my someone at the hospital i had already passed it. we decided it was time to add another addition to our family - yes we got another dog. we got a 5-month-old dobermann. he is the cutest! he was very shy at first but soon started trusting us enough to let us take him home. i was advised to see a neuropath to try and help me with this rash i ve had for a while now. he seemed very knowledgable but in the end it didn t help at all :( due to the pandemic we decided it was still too early to travel abroad so we decided to go back to our favourite glamping site in yorkshire - kingfisher lakes content warning: marriage breakup the year my marriage ended no one close to me died (and what happened to me is not a unique situation but that didn t make it hurt any less). she after a while of agonizing about it told me she didn t love me any more. which was hard to hear. we had been married for 19 years and together for 22 years. half of my life has been spent with her and it was over in a flash. she also didn t want to try and fix the marriage as she believed it could not be fixed. we decided to wait until after christmas to tell the kids - it was really hard pretending everything was fine. i spent a lot of time drunk in my office with my dog! well there you have it. not a great way to end the year. stats trees planted podcasts listened books read freelance projects series watched blog posts notes 340 20 4 2 30 [570hrs] 0 10 articles read movies watched completed tasks pomodoro minutes music listened 373 11 342 1024min [42] 17hrs / 237 scrobbles this year in review post has been really difficult to write (and why it s so late) because of how it ended with being the worst year of my life so far. it took me a while to write it but i really didn t want to miss posting it as i ve written one every year since 2016."},{"url":"/stream/meta-tags/","title":"Do I still need to use these?","text":"Do I still need to use these? I m rebuilding my website and tidying up/removing code Do I still need to use these? I m rebuilding my website and tidying up/removing code. meta http-equiv = cleartype content = on > meta name","readabletitle":"do i still need to use these","keywords":"do i still need to use these do i still need to use these i m rebuilding my website and tidying up/removing code. < meta http-equiv = \" cleartype \" content = \" on \" > < meta name = \" handheldfriendly \" content = \" true \" > < meta name = \" mobileoptimized \" content = \" 320 \" > do i still need to use these i m rebuilding my website and tidying up/removing code"},{"url":"/stream/Should-I-continue-with-my-monthly-notes/","title":"Should I continue with my monthly notes?","text":"For most of 2023 my monthly notes posts have contained a lot more personal content and not a lot web design stuff. I’m wondering if I should keep up with my monthly notes posts as over the last year they have contained mostly personal stuff, which I don’","readabletitle":"should i continue with my monthly notes","keywords":"should i continue with my monthly notes i m wondering if i should keep up with my monthly notes posts as over the last year they have contained mostly personal stuff which i don t mind sharing but i don t know if those who read them also want more web design stuff. for most of 2023 my monthly notes posts have contained a lot more personal content and not a lot web design stuff."},{"url":"/stream/should-i-continue-with-my-monthly-notes/","title":"Should I continue with my monthly notes?","text":"For most of 2023 my monthly notes posts have contained a lot more personal content and not a lot web design stuff. I’m wondering if I should keep up with my monthly notes posts as over the last year they have contained mostly personal stuff, which I don’","readabletitle":"should i continue with my monthly notes","keywords":"should i continue with my monthly notes i m wondering if i should keep up with my monthly notes posts as over the last year they have contained mostly personal stuff which i don t mind sharing but i don t know if those who read them also want more web design stuff. for most of 2023 my monthly notes posts have contained a lot more personal content and not a lot web design stuff."},{"url":"/blog/building-a-printful‑powered-ecommerce-site/","title":"Building a Printful‑powered e‑commerce site with 11ty and Stripe","text":"A behind-the-scenes look at how I built a fast, modern e‑commerce site using 11ty, Printful, and Stripe. Learn how to fetch product data, au As someone who loves clean, static-generated sites, I recently decided to challenge myself: could I build a small online merch store using","readabletitle":"building a printful‑powered e‑commerce site with 11ty and stripe","keywords":"building a printful‑powered e‑commerce site with 11ty and stripe as someone who loves clean static-generated sites i recently decided to challenge myself: could i build a small online merch store using eleventy (11ty) printful s api and stripe—while keeping the setup simple and javascript‑free in the templates turns out… yes and it s been pretty fun! 🎉 🧱 1. fetching products from printful my site s product data lives fully in src/_data/products.js . here s the process: on build: fetch /store/products via printful s rest api. for each product fetch its variants. generate a slug ( slugify + small md5 hash). deduce categories via getcategoryfromname(...) . save the result to cache/products.json . this makes the page templates super easy—they just loop over products or filter them by product.category . i made sure the category names are consistent— t-shirts hoodies stickers and a new one hats . if the product name contains the word hat it ll now correctly be picked up as &quot hats" not mis‑grouped in &quot other". 📂 2. generating category and product pages with eleventy data source with the fully formed products array available globally i can create dynamic templates like: src/products/index.njk (all products & categories): {% set displaynames = { &quot t-shirts":&quot t‑shirts" &quot hoodies":&quot hoodies" &quot stickers":&quot stickers" &quot hats":&quot hats" &quot other":&quot other" } %} {% set categoryset = [] %} {% for p in products %} {% if p.category and p.category not in categoryset %} {% set categoryset = categoryset.concat([p.category]) %} {% endif %} {% endfor %} {% set sortedcategories = categoryset sort %} &lt ul> {% for cat in sortedcategories %} &lt li>&lt a href="/products/{{ cat slugify }}/"> {{ displaynames[cat] or (cat capitalize) }} </a></li> {% endfor %} </ul> &lt div class=&quot products"> {% for p in products %} &lt a href="/products/{{ p.slug }}/"> &lt img src="{{ p.thumbnail_url }}" alt="{{ p.name }}"> &lt h3>{{ p.name }}</h3> </a> {% endfor %} </div> note the careful categorization and display name mapping. pagination for categories to generate /products/hats/ (and others): src/products/category.njk : --- layout: base pagination: data: categoriesflat size: 1 alias: category permalink: "/products/{{ category slugify }}/index.html" --- &lt h1>{{ category capitalize }} products</h1> &lt ul> {% for p in products %} {% if p.category == category %} &lt li>&lt a href="/products/{{ p.slug }}/">{{ p.name }}</a></li> {% endif %} {% endfor %} </ul> here categoriesflat.js under _data/ returns a list of unique category slugs. eleventy then auto-generates a directory for each one—now including hats . 🛒 3. cart variant selection checkout with stripe on each product page a select lets you choose the variant (size colour). i added javascript to swap the preview image and update the price using intl.numberformat : const formatter = new intl . numberformat ( 'en-gb' { style : 'currency' currency : variant . currency } ) ; priceel . textcontent = formatter . format ( variant . price ) ; 🛒 clicking “add to cart” stores the item in localstorage . the main site header reads from localstorage and updates the cart icon count in real-time. finally hitting checkout sends the cart contents to a vercel function ( /api/checkout.js ) which builds a stripe checkout session and returns a url for redirection. 🧠 lessons & takeaways eleventy + printful = a flexible jamstack store — no server no cms just simple js and apis. category handling: ensuring string consistency (e.g. &quot hats" vs &quot hat" ) was crucial to avoid mis‑grouping. pagination: eleventy makes it easy to generate multiple category pages with minimal code. ux polish: small touches like clean titles ( productname – sitetitle ) and formatted currency add a layer of professionalism. next steps add product descriptions with a markdown file fallback. show variant options dynamically on listings (e.g. “available in xs–xl”). add size guides or shipping info with data‑driven modals. clean up code and publish on a public repo. if you re interested in helping me test extend it or make it even more dynamic—just drop me a line. a behind-the-scenes look at how i built a fast modern e‑commerce site using 11ty printful and stripe. learn how to fetch product data auto-generate category pages and create a lightweight cart and checkout experience—without a cms."},{"url":"/logs/reading/articles/","title":"Articles","text":"This is a curated list of articles I ve read and have shared online as I believe they are worth sharing. Dashboard Watching Listening Reading Concerts Beers This is a curated list of articles I ve read and have shared online as I believe they a","readabletitle":"articles","keywords":"articles dashboard watching listening reading concerts beers this is a curated list of articles i ve read and have shared online as i believe they are worth sharing. i aim to update this list on a weekly basis. you can keep up to date with all the links i share by revisiting this page or alternately you can subscribe to the rss feed for links. css :is() :where() the magic happens · matthias ott for blogtober i dug up a draft about the two css pseudo-class functions :is() and :where() that i d had lying around in my drafts folder for quite some time.… read on: 25th july 2026 animating &lt details> element with only css can you animate the opening and closing of the html &lt details> element using only css yes. here s the code: it took an annoyingly long time to find a good… read on: 25th july 2026 thinking horizontally in css @layer – master.dev blog i joked the other day: wait is @layer like z-index but for css itself— chris coyier (@chriscoyier.net) 2026-06-26t04 04 38.605z i know what css @layer is and… read on: 20th july 2026 cascade layers guide css-tricks this is your complete guide to css cascade layers a css feature that allows us to define explicit contained layers of specificity so that we have full control… read on: 19th july 2026 just fucking ship last week i mentioned how i want the web to be weird again: more personal sites more eclectic online experiences and more authenticity in what and how people… read on: 5th july 2026 sweating the details i ve been obsessing over how kelp implements the &lt details> element disclosure pattern for the last week or so. this component is particularly tricky because of… read on: 5th july 2026 create a portfolio that really works with these insights from industry experts stressed about finding work then forget social media and focus on your portfolio. because while many creatives just slap something together and think that&#39 s… read on: 1st july 2026 do websites need to function exactly the same on every platform ~ early 2000s’ pixel perfection if you like me were building websites back in the early 2000s you ll undoubtedly remember the absolute headache that was… read on: 24th june 2026 why the accept attribute degrades file upload ux 31 may 2026 last week i posted about why the accept attribute on file inputs is bad ux. the accept attribute lets you specify which file types an input will… read on: 22nd june 2026 how to add icons to external links with css as part of my ongoing updates to my personal site i decided to add icons after all external links. today i wanted to show you how i did it. let s dig in! why … read on: 8th june 2026 first newer 1 of 46 older last reading books articles stats i ve read a total of 456 articles. authors i follow rss feed for links this is a curated list of articles i ve read and have shared online as i believe they are worth sharing."},{"url":"/blog/automating-my-links-list/","title":"Automating my links list","text":"How I automated my Instapaper “liked” articles into a clean, sorted JSON feed for my 11ty site — with date normalisation, HTML stripping, an How I automated my Instapaper “liked” articles into a clean, sorted JSON feed for my 11ty site — with date normalization, HTML stripping, a","readabletitle":"automating my links list","keywords":"automating my links list how i automated my instapaper “liked” articles into a clean sorted json feed for my 11ty site — with date normalization html stripping and deduplication all running daily via github actions. i keep a running list of articles i ve read and liked — partly for reference partly for sharing. for years i used instapaper for saving articles and ifttt to log my “liked” ones into airtable. but getting them onto juanfernandes.uk/links meant manually updating a json file. not exactly friction-free. so i automated the whole thing. and over time i ve refined it to handle dates properly avoid duplicates and keep the list sorted — no manual edits no mess. ✅ the stack instapaper rss feed – for fetching my recently liked articles a custom node.js script – to grab new links clean them and update json github actions – to run the script and rebuild my site daily 11ty – to display the links with pagination step 1: the instapaper rss feed instapaper gives you a feed of your “liked” articles: https://www.instapaper.com/starred/rss/[user_id]/[token] it only shows your 10 most recent liked items so the key is appending new ones without losing older ones . step 2: writing to links.raw.json instead of saving directly to links.json (which eleventy uses for pagination) the script now writes to: src/_data/links.raw.json this file is my raw archive of everything i ve ever liked on instapaper. why because eleventy treats .js and .json files in _data differently — having a .js file for links means i can read sort and clean the raw json every time before it s passed to the templates. step 3: the append script ( appendtojson.cjs ) the script does the heavy lifting: fetches the instapaper rss feed normalizes dates → full iso 8601 format ( 2025-07-28t18 53 22.000z instead of 2025-07-28 ) strips html from titles so tags like &lt details> don t show in headings keeps html in content if i want formatted excerpts de-dupes by url (latest version wins) sorts newest → oldest before saving here s a trimmed example of the mapping logic: function striphtml ( str ) { return str str . replace ( / < / [^>]+(> $) / g \"\" ) : \"\" ; } function toiso ( val ) { if ( ! val ) return new date ( ) . toisostring ( ) ; const t = date . parse ( val ) ; return number . isnan ( t ) new date ( ) . toisostring ( ) : new date ( t ) . toisostring ( ) ; } // map rss items const mapped = feed . items . map ( item => ( { title : striphtml ( item . title \"\" ) url : item . link . trim ( ) content : item [ \"content encoded\" ] item . content \"\" date : toiso ( item . pubdate item . isodate ) } ) ) ; step 4: sorting in eleventy now that links.raw.json is clean src/_data/links.js becomes the single source of truth for eleventy: const fs = require ( \"fs\" ) ; const path = require ( \"path\" ) ; module . exports = ( ) => { const raw = json . parse ( fs . readfilesync ( path . join ( __dirname \"links.raw.json\" ) \"utf8\" ) ) ; return raw . sort ( ( a b ) => date . parse ( b . date ) - date . parse ( a . date ) ) ; } ; this guarantees that pagination always starts with the most recent items. step 5: automation with github actions my github action now: runs appendtojson.cjs to update links.raw.json builds the site with eleventy deploys the updated site that means every day my “read articles” page refreshes automatically and it s always: up to date properly sorted free from html junk in titles duplicate-free the result juanfernandes.uk/links is now fully automated and clean. no more manual edits no more date format headaches and no need to check if something s already been added. it just works. every day. if you want to set up something similar the full append script is on my github — or drop me a message and i can help adapt it for your setup. how i automated my instapaper “liked” articles into a clean sorted json feed for my 11ty site — with date normalisation html stripping and deduplication all running daily via github actions."},{"url":"/blog/building-bkmrks/","title":"Building BKMRKS | A Lightweight Bookmarks Manager Project","text":"A behind-the-scenes look at how I built BKMRKS, a lightweight bookmarks manager. Covers the design process, tech stack, and lessons learned I’ve always relied on bookmarks to save useful links — design systems, dev docs, tools, inspiration, articles I want to revisit later. The","readabletitle":"building bkmrks a lightweight bookmarks manager project","keywords":"building bkmrks a lightweight bookmarks manager project i ve always relied on bookmarks to save useful links — design systems dev docs tools inspiration articles i want to revisit later. the problem is: browser bookmarks quickly become cluttered messy and difficult to manage across devices. i wanted something cleaner more organised and under my control. so i decided to build my own solution: bkmrks — a minimal full-featured bookmark manager that runs anywhere needs no database and can be deployed on simple shared hosting. the starting point originally i experimented with supabase as the backend for authentication storage and apis. while it worked it quickly felt like overkill. i didn t want to depend on a hosted service worry about migrations or deal with vendor lock-in. i asked myself: “do i really need a database at all ” the answer was no. for my use case — static bookmark storage tagging filtering and importing/exporting json — a simple file-based approach was enough. the approach i set out to build bkmrks as a static-first app: frontend in react: clean ui fast search category filtering and tagging. data as json: bookmarks live in a simple .json file — human-readable portable and easy to back up. import/export: users can upload/export their own bookmarks as json. deploy anywhere: works on netlify vercel or even plain old shared hosting. no database required. this decision massively simplified the architecture. instead of a stack with a database auth and server-side code bkmrks is essentially just a react app plus a json file. key features despite its simplicity bkmrks is designed to feel complete: search – instantly find bookmarks by title tag or description. categories – group links under t-shirts hoodies... (just kidding 😅) — i mean work design dev tools articles etc. tagging – flexible organisation across categories. import/export – add bookmarks from your browser or back them up in seconds. static storage – everything is in json. no logins no databases just pure portability. lessons learned dropping supabase was the right move. i didn t need realtime sync row-level security or a hosted postgresql instance for something that s essentially a personal library. by keeping things static: setup is easier — no config no environment variables. maintenance is zero — it just works on shared hosting. performance is great — no server round-trips everything is local. it s a reminder that not every project needs a “modern stack” with apis and databases. sometimes plain json files do the job. what s next i want to expand bkmrks with a few ideas: better ui polish — more drag-and-drop cleaner category browsing. optional cloud sync — without tying users to a single provider. public sharing — the ability to make collections of bookmarks public. for now though it s already doing what i need: a clean no-frills way to manage my links across devices. why this matters building bkmrks reminded me why i enjoy side projects: solving my own problems in the simplest way possible. it s lightweight portable and future-proof — no saas dependencies just a little react app and a json file. sometimes that s all you need. a behind-the-scenes look at how i built bkmrks a lightweight bookmarks manager. covers the design process tech stack and lessons learned while creating a simple self-hosted tool for organising links."},{"url":"/stream/companies-house-search-ux/","title":"Companies House Search UX","text":"Companies House search is terrible I hate to say it but the Companies House website search is atrocious. I would rather it returned no results rather than “useless and nothin","readabletitle":"companies house search ux","keywords":"companies house search ux i hate to say it but the companies house website search is atrocious. i would rather it returned no results rather than “useless and nothing to do with my query” results. #terribleux #ux companies house search is terrible"},{"url":"/stream/bye-bye-apple/","title":"Bye Bye Apple","text":"After almost three years of being on the apple eco system (MacBook, iPhone, iWatch and AirPods - I ve had enough After almost three years of being on the Apple eco system (MacBook, iPhone, iWatch and AirPods - I ve had enough. The latest changes to iOS","readabletitle":"bye bye apple","keywords":"bye bye apple after almost three years of being on the apple eco system (macbook iphone iwatch and airpods - i ve had enough. the latest changes to ios have broken so many things for me that just makes the iphone useless. it s riddled with bugs and terrible ux. not to mention so many broken ui elements too. back to android for me this time i m going to try a samsung phone. #apple #applefail #ux after almost three years of being on the apple eco system (macbook iphone iwatch and airpods - i ve had enough"},{"url":"/now/","title":"Now","text":"Read about what I m currently up to Personal Bought a VW T5 Transporter van to convert into a camper van - so that will keep me busy for a while. Previous owner had started th","readabletitle":"now","keywords":"now personal bought a vw t5 transporter van to convert into a camper van - so that will keep me busy for a while. previous owner had started the conversion but i wasn t happy with the carpeting so i ve striped the back of the van back to metal. projects i ve been spending quite a bit of time working on the site recently - adding new logs and collections sections tidying up parts of the html and css and refining various pages across the site. watching films apex (2026) watched on: 3rd may 2026 browse all films → series i will find you (2026) season 1 episode 6 watched on: 26th july 2026 browse all tv → reading books everything s eventual by stephen king articles read about what i m currently up to"},{"url":"/about/","title":"About","text":"Learn more about Juan Fernandes, a UK-based frontend developer and UX designer with a passion for the open web, personal websites, accessibi I’m a frontend developer and UX designer based in the UK, with a long-standing interest in building fast, accessible and genuinely useful w","readabletitle":"about","keywords":"about i m a frontend developer and ux designer based in the uk with a long-standing interest in building fast accessible and genuinely useful websites. about hi i m juan a frontend developer and ux designer based in the uk with a long-standing interest in building fast accessible and genuinely useful websites. i ve been building websites since the early days of table layouts flash intros and sliced photoshop mockups - and somehow never stopped enjoying it. over the years i ve worked across ecommerce automotive travel fintech government and saas helping shape websites and digital products for both large organisations and small independent businesses. while the industries have changed the thing i ve always enjoyed most is simplifying complicated problems into interfaces that feel clear usable and easy to navigate. a lot of my work sits somewhere between design and development. i enjoy the process of turning rough ideas into structured accessible and well-built experiences that work properly across different devices and screen sizes. the web and why i still enjoy it these days i m especially interested in lightweight content-first websites the indieweb static site generators and building things that don t rely heavily on giant platforms or unnecessary complexity. i prefer websites that: load quickly work well are accessible are easy to maintain feel personal this site is part portfolio part notebook and part archive - a place to experiment document projects keep logs and share things i m interested in without relying entirely on social media platforms. what i work with i mainly work with: html css and javascript design systems accessibility frontend development eleventy ui and interaction design responsive design performance-focused websites i also spend a lot of time working in figma prototyping ideas and refining layouts and user flows before anything gets built. outside of work outside of web work i spend a lot of time working on side projects improving this website tinkering with smart home technology and building little systems to track things i m interested in. i also enjoy: music and live gigs films and television collecting and logging things road trips and coastal walks diy projects woodworking campervan ideas and conversions photography mountain biking a lot of this site exists because i enjoy creating small systems around personal data - whether that s tracking films concerts books links or music listening habits. current interests right now i m particularly interested in: personal websites and the indieweb rss and social publishing static-first web development accessibility and web performance digital ownership and open standards simplifying technology smart home setups building useful side projects elsewhere you can also find me here: mastodon: indieweb.social/@juanfernandes github: github.com/juanfernandes linkedin: linkedin.com/in/juanfernandesuk see all my social links get in touch if you d like to work together chat about a project or just talk about websites design systems eleventy or the open web feel free to get in touch . learn more about juan fernandes a uk-based frontend developer and ux designer with a passion for the open web personal websites accessibility and building useful digital experiences."},{"url":"/blog/","title":"Blog","text":"Blog posts by Juan Fernandes about front-end development and web design Blog - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes Con","readabletitle":"blog","keywords":"blog blog - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content blog thoughts code and more building bkmrks 3rd october 2025 a behind-the-scenes look at how i built bkmrks a lightweight bookmarks manager. covers the design process tech stack and lessons learned while creating a simple self-hosted tool for organising links. automating my links list 20th august 2025 how i automated my instapaper “liked” articles into a clean sorted json feed for my 11ty site — with date normalisation html stripping and deduplication all running daily via github actions. building a printful‑powered e‑commerce site with 11ty and stripe 13th june 2025 a behind-the-scenes look at how i built a fast modern e‑commerce site using 11ty printful and stripe. learn how to fetch product data auto-generate category pages and create a lightweight cart and checkout experience—without a cms. 2022: year in review 14th august 2023 this year in review post has been really difficult to write (and why it&#39 s so late) because of how it ended with being the worst year of my life so far. it took me a while to write it but i really didn&#39 t want to miss posting it as i&#39 ve written one every year since 2016. 2021: year in review 6th february 2022 2021 was a year of firsts for the family & i after a few years of covid including our first restaurant outing & also our first uk break since before covid working an inside ir35 contract 26th april 2021 i&#39 ve only had one contract inside ir35 & that was enough to put me off. first & last contract inside ir35 that i will take on 2020: year in review 5th february 2021 worldwide pandemic bullshit politics white supremacists racists brexit & a whole bunch of rubbish i won&#39 t get into how i improved my website because of content security policies 8th january 2021 last month i delved into security headers including content security policies and added a bunch of them to my website. as a result this has improved my website add your site to the eleventy leaderboards 9th december 2020 this is a quick tip showing you how to add your eleventy built website to the eleventy leaderboards improving website security 20th november 2020 since webpagetest.org started testing website security i wanted to learn more about it & figure out how to improve my website security using headers on netlify first newer 1 2 3 older last bio juan fernandes is a freelance website designer living in suffolk uk. read more → posts by tag search notes stream now changelog post year-in-review personal eleventy ssg 11ty opengraph cloudinary development json printful stripe ecommerce next.js reactjs seo performance csp website-security netlify business freelance javascript contract til photos interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru blog posts by juan fernandes about front-end development and web design"},{"url":"/blogroll/","title":"Blogroll","text":"Adam Silver Adrian Roselli Ahmad Shadeed Alistair Shepherd Amber Wilson Ana Rodrigues Ashlee M. Boyer Baldur Bjarnason Ben Myers Benjamin R","readabletitle":"blogroll","keywords":"blogroll adam silver adrian roselli ahmad shadeed alistair shepherd amber wilson ana rodrigues ashlee m. boyer baldur bjarnason ben myers benjamin read benjy stanton bram.us bryan robinson cathy dutton chen hui jing chris burnell chris coyier chris ferdinandi dan davies dana byerly dave rupert david darnes david bushell eric bailey ethan marcotte heather buchel heydon pickering hidde de vries jeremy keith jeremy wagner jérôme coupé jim nielsen jonathan snook josh collinsworth lisi linhart manuel matuzović marcus herrmann matt hobbs matthias ott max böck michelle barker mike street modern css nic chan remy sharp robin rendle ru singh ryan gittings sara soueidan sarah l. fossheim sarah higley scott o&#39 hara sebastian de deyne sia karamalegos set studio sophie koonin stefan judis stephanie stimac stuart ashworth tania rascia tekin süleyman tyler gaw una kravets zach leatherman"},{"url":"/changelog/","title":"Changelog","text":"All about this website, including tech used etc The changelog page keeps track of updates, improvements and tweaks made across the site, alongside a live view of the Git commit history fr","readabletitle":"changelog","keywords":"changelog the changelog page keeps track of updates improvements and tweaks made across the site alongside a live view of the git commit history from the website s repository. changes changelog: new collections & logs sections i ve added new collections and logs sections to my website bringing together the things i enjoy and creating a personal timeline of what i ve been reading watching playing and more. changelog: new music section the site now includes a music section powered by last.fm showing weekly top tracks albums and artists plus all-time listening statistics. changelog: updated work design and layout finally got round to redesigning and rebuilding my work case study pages. i ve not been adding previous works as i didn t like the old design/layout but now i m happy with it i m going to add all my more recent works. changelog: redone books page i ve changed my books page to now include books i want to read. changelog: added changelog page moved changelog and git commit history to its own changelog page. changelog: added featured authors section added featured authors section to the links page sidebar. changelog: added pagination added pagination to the links page and blog index page. changelog: updated links page my links page now has its own rss feed and a few other updates changelog: added mastodon-post web component added mastodon-post web component to encourage users to discuss the post on mastodon. changelog: added links page added a links page to archive links i ve shared on social media. changelog: added a blogroll i decided to be like the cool kids in the web design industry and added a blogroll - a list of the web design blogs that i follow. changelog: blocking googlebot and chatgpt bot with the rise of ai and companies profiting from free content online i like many others have decided to just block access to those bots changelog: styled rss feed used xsl to style my main rss feed changelog: add other links to the footer saw a tweet about how websites with rss should have a link to it in the header to save digging into code to find it after a tiny footer redesign i added mine changelog: added webmentions webmentions are a way to show social media comments and interactions on your website. commits create watch log — 2026 “2026-07-27-outlast-1” create watch log — 2026 “2026-07-27-outlast” chore(music): update all-time stats update ssh-deploy action to version 5.1.0 enhance workflow with concurrency and commit updates create watch log — 2026 “2026-07-26-i-will-find-you” create watch log — 2026 “2026-07-26-outlast-1” create watch log — 2026 “2026-07-26-outlast” chore(music): update all-time stats chore(music): update all-time stats chore(music): update all-time stats update watch log — 2026 “2026-07-21-outlast” create watch log — 2026 “2026-07-24-outlast” chore(music): update all-time stats create watch log — 2026 “2026-07-22-outlast-1” create watch log — 2026 “2026-07-22-outlast” chore(music): update all-time stats create watch log — 2026 “2026-07-21-outlast” chore(music): update all-time stats chore(music): update all-time stats source code the source code for this site lives on github: github.com/juanfernandes/juanfernandes-uk all about this website including tech used etc"},{"url":"/contact/","title":"Contact","text":"Contact Juan Fernandes – Freelance Website Designer for a free no obligations quote for your next project Contact - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes","readabletitle":"contact","keywords":"contact contact - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content get in touch let&#39 s get started on your next project if you re planning a new project refreshing your website or inquiring about web design and development services feel free to reach out to discuss availability. phone: 07549936695 email: info@juanfernandes.uk whatsapp: 07549936695 interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru contact juan fernandes – freelance website designer for a free no obligations quote for your next project"},{"url":"/freelance-services/","title":"Freelance Services","text":"Modern, user-friendly websites that drive engagement. I offer custom design, UX/UI, optimization, and ongoing support to bring your digital Freelance Services - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work","readabletitle":"freelance services","keywords":"freelance services freelance services - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content freelance services i help businesses create modern user-friendly websites and engaging digital experiences. whether you need a new website a redesign or expert advice i can help bring your vision to life. what i offer website design & development custom responsive websites that look great on mobile tablet and desktop. easy-to-use designs that attract and engage customers. fast secure and optimized for seo and performance. consistent design elements across your website. user experience & interface design clear and simple designs that make your website easy to navigate. wireframes & mock-ups to help visualize your new website or app before development. accessibility-friendly designs so everyone can use your site. web performance & optimization speed and performance improvements for faster loading websites. advice on how to improve your website to get better results. website hosting & support updates maintenance and support to keep your site running smoothly. dedicated website hosting and domain name management. whether you re starting fresh or need a website upgrade i can help! get in touch today to discuss your project. interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru modern user-friendly websites that drive engagement. i offer custom design ux/ui optimization and ongoing support to bring your digital vision to life."},{"url":"/","title":"Home","text":"Juan Fernandes is a freelance website designer specialising in building bespoke responsive websites for small businesses in the UK Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes Contact Sk","readabletitle":"home","keywords":"home juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content designing simple human-centered digital experiences for everyday problem solvers. i specialise in intuitive interfaces clear design systems and scalable ui that supports small business success and accessibility for all. recent work so5 clothing bkmrks nft merch shop multi creative media view all work latest posts blog building bkmrks 3rd october 2025 a behind-the-scenes look at how i built bkmrks a lightweight bookmarks manager. covers the design process tech stack and lessons learned while creating a simple self-hosted tool for organising links. read more → note til: generating a hash from the command line 27th may 2021 since adding content security policies to my website i need to add a sha for any inline scripts i use - i only use one which is the one to initiate the serviceworker. read more → testimonials great front-end dev who quickly fitted in to our team and got to grips with our tech stack . brilliant at forming relationships across dev and design teams and then delivering some great work on schedule . simon jones signet jewelers who i&#39 ve worked with see all companies interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru juan fernandes is a freelance website designer specialising in building bespoke responsive websites for small businesses in the uk"},{"url":"/links/","title":"Links","text":"Mastodon LinkedIn Github GitLab Pixelfed Youtube Instagram Discord Last.fm Spotify Strava 11ty Codepen Untappd","readabletitle":"links","keywords":"links mastodon linkedin github gitlab pixelfed youtube instagram discord last.fm spotify strava 11ty codepen untappd"},{"url":"/logs/reading/books/","title":"Books","text":"Dashboard Watching Listening Reading Concerts Beers A record of the books I’ve read and the ones I’m currently working through. Some stay w","readabletitle":"books","keywords":"books dashboard watching listening reading concerts beers a record of the books i ve read and the ones i m currently working through. some stay with me longer than others but this log keeps a timeline of what i ve spent time reading. currently reading everything&#39 s eventual 14 dark tales stephen king read 2024 holly stephen king 2023 the outsider stephen king 2022 end of watch stephen king finders keepers stephen king if it bleeds stephen king mr mercedes stephen king 2021 later stephen king the dark tower the dark tower #7 stephen king the fireman joe hill the midnight library matt haig the wind through the keyhole the dark tower #4.5 stephen king 2019 song of susannah the dark tower #6 stephen king wizard and glass the dark tower #4 stephen king 2018 wolves of the calla the dark tower #5 stephen king 2017 javascript for web designers mat marquis the new css layout rachel andrew 2016 atomic design brad frost lisey&#39 s story stephen king 2015 you&#39 re my favorite client mike monteiro 2014 adaptive web design crafting rich experiences with progressive enhancement aaron gustafson cell stephen king desperation stephen king doctor sleep stephen king dreamcatcher stephen king html5 for web designers jeremy keith introducing html5 bruce lawson rose madder stephen king the css anthology rachel andrew the drawing of the three the dark tower #2 stephen king the gunslinger the dark tower #1 stephen king the waste lands the dark tower #3 stephen king 2013 11.22.63 stephen king salem&#39 s lot stephen king the girl who loved tom gordon stephen king the green mile stephen king the stand stephen king thinner stephen king 2012 carrie stephen king the shining stephen king want to read bag of bones stephen king billy summers stephen king black house stephen king & peter straub desperation stephen king duma key stephen king fairy tale stephen king four past midnight stephen king gwendy&#39 s final task stephen king insomnia stephen king it stephen king just after sunset stephen king misery stephen king nightmares and dreamscapes stephen king on writing a memoir of the craft stephen king revival stephen king sleeping beauties stephen king the bazaar of bad dreams stephen king the dark half stephen king the eyes of the dragon stephen king the institute stephen king the tommyknockers stephen king under the dome stephen king you like it darker stephen king summaries 2025 atomic habits james clear don&#39 t believe the swipe mandy hale emotional intelligence why it can matter more than iq daniel goleman phd focus the hidden driver of excellence daniel goleman phd greenlights raucous stories and outlaw wisdom matthew mcconaughey high performance habits brendon burchard how to be a 3% man corey wayne how to be an adult in relationships the five keys to mindful loving david richo ph.d. how to know a person the art of seeing others deeply and being deeply seen david brooks how to sleep with any girl adrian gee love unfu ked getting your relationship $#!% together gary john bishop men are from mars women are from venus john gray single on purpose redefine everything. find yourself first. john kim supercommunicators how to unlock the secret language of connection charles duhigg the 5 elements of effective thinking edward b. burger the 7 habits of highly effective people stephen r. covey the art of seduction robert greene ba the obstacle is the way ryan holiday the power of habit charles duhigg unf ck yourself gary john bishop you are a badass at making money jen sincero reading books articles in this section read want to read summaries currently reading years 2026 · 2025 · 2024 · 2023 · 2022 · 2021 · 2019 · 2018 · 2017 · 2016 · 2015 · 2014 · 2013 · 2012 stats i m currently reading 1 book have read 495 books and have 23 to read."},{"url":"/logs/reading/","title":"Reading","text":"Dashboard Watching Listening Reading Concerts Beers A running log of the books and articles I’ve read — from longer reads to quick finds, a","readabletitle":"reading","keywords":"reading dashboard watching listening reading concerts beers a running log of the books and articles i ve read — from longer reads to quick finds all captured in one place. books a running log of the books i ve read bringing together titles that have informed my thinking broadened my perspective or simply been enjoyable to explore. currently reading everything&#39 s eventual stephen king 14 dark tales latest finished book holly - stephen king finished in 2024 browse all books → articles saved reading from around the web bringing together articles and resources that have informed my thinking sparked ideas or been worth returning to later. latest article css :is() :where() the magic happens · matthias ott read on the 25th july 2026 for blogtober i dug up a draft about the two css pseudo-class functions :is() and :where() that i d had lying around in my drafts folder for quite some time.… browse all articles → stats i ve logged a total of 39 books 456 articles and i currently have 1 book on the go."},{"url":"/notes/","title":"Notes","text":"Short posts, photos, thoughts about code, design and personal stuff Notes - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes Co","readabletitle":"notes","keywords":"notes notes - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content notes short posts about code & design til: generating a hash from the command line 27th may 2021 since adding content security policies to my website i need to add a sha for any inline scripts i use - i only use one which is the one to initiate the serviceworker. til - webmention and urls 5th may 2021 creating a post with a title that has uppercase letters like ir35 - the url will have those uppercase letters in your file system but in the live url they will be lowercase opting out of google&#39 s floc network 27th april 2021 this website is now opted out of google&#39 s floc network escaping nunjucks code in a markdown code block 23rd september 2020 turns out you need to escape nunjucks code within a markdown code block. found a solution by mark llobrera - @dirtystylus recording audio input from other apps 3rd july 2020 turns out that you can&#39 t easily recorded audio from one app to another on a mac without some extra software and changing some preferences getting rid of google calendar 15th february 2020 replacing google calendar has been one of the hardest apps/services to replace. pi-hole and new router 14th february 2020 the next stage in my privacy control adventures is to setup pi-hole at home. eleventy cloudinary shortcode 12th february 2020 created a shortcode for @eleventy so i can use cloudinary images within markdown files. bio juan fernandes is a freelance website designer living in suffolk uk. read more → interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru short posts photos thoughts about code design and personal stuff"},{"url":"/slashes/","title":"Slashes","text":"Slash pages are a small collection of personal pages commonly found on IndieWeb-style websites. They usually live at simple URLs like /now,","readabletitle":"slashes","keywords":"slashes slash pages are a small collection of personal pages commonly found on indieweb-style websites. they usually live at simple urls like /now /about or /uses and give a more personal look at the person behind the site - what they re doing using working on or interested in. /about /blogroll /colophon /contact /links /now /uses /sitemap /changelog learn more about these pages on slashpages.net ."},{"url":"/stream/","title":"Stream","text":"Social media posts about web design, development and personal stuff Stream - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes C","readabletitle":"stream","keywords":"stream stream - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content stream social media posts about web design development and personal stuff bye bye apple 30th november 2025 after almost three years of being on the apple eco system (macbook iphone iwatch and airpods - i&#39 ve had enough companies house search ux 26th november 2025 companies house search is terrible should i continue with my monthly notes 10th february 2024 for most of 2023 my monthly notes posts have contained a lot more personal content and not a lot web design stuff. should i continue with my monthly notes 10th february 2024 for most of 2023 my monthly notes posts have contained a lot more personal content and not a lot web design stuff. do i still need to use these 3rd november 2023 do i still need to use these i&#39 m rebuilding my website and tidying up/removing code auto posting to fediverse broke 1st december 2022 auto posting to fediverse broke with the change of instance and i&#39 m trying to get it working again updating ifttt webhooks 30th november 2022 since i&#39 ve moved to a new mastadon instance i need to update my ifttt webhooks to work with it tried a few headless cmss 22nd november 2022 after trying quite a few headless cmss i finally settled on forestry - again mastodon instance 21st november 2022 can t decide if i want to move to a new mastodon instance or host my own social posts and ifttt reliance 17th november 2022 all my auto posts to social media rely on ifttt now streaming 17th november 2022 some progress on my streams to social media posts adding a cms to my website 17th november 2022 want to add a cms to this website to its easier to post social posts from my phone indieweb tweets 6th august 2022 going back to posting tweets or short notes via my website and syndicating changelog: add other links to the footer 2nd august 2021 saw a tweet about how websites with rss should have a link to it in the header to save digging into code to find it after a tiny footer redesign i added mine degoogling is the same as jailbreaking apparently 3rd may 2021 turns out that some apps will treat your degoogled android phone as a phone that has a custom rom installed aka it has been &#39 jailbroken' and won&#39 t run bye bye gmail 5th march 2021 that&#39 s it - i have finally deleted my gmail account. i&#39 ve been using a self-hosted email address for a year now and slowly switching email addresses on websites i still use. new pallet project 19th april 2020 started on a non tech project today. my office is a mini loft above our garage and it has these gaps for storage that i don'&#39 t need so i'&#39 m covering them up with pallet wood planks. performance what performance 6th march 2020 just found an image on my clients' website (added by a third party) that weighs in at wait for it a whopping 39.4mb 😬 switching to firefox focus 4th march 2020 i&#39 ve now switched my default browser to firefox focus - a privacy focused browser. no cookies ads tracking or history. off facebook 19th february 2020 my facebook account has been deactivated for over a year and now i&#39 ve now asked for it to be deleted. google pay 17th february 2020 removing your google account from your phone means google pay will stop working - derp estimote lte beacons developer kit 14th february 2020 my estimote lte beacons developer kit has finally arrived (made to order) - so looks like i&#39 ll be tinkering with this at this weekend 🤓 created my first npm package 12th february 2020 i just created my first npm package and it was surprisingly easy to do it. native disclosure element works in instapaper app 7th february 2020 reading an article about the native html disclosure element (details + summary) and was pleased to see that it works in the instapaper app firefox focus 5th february 2020 for a privacy focused browser i was surprised to see google as the default search engine. google hangouts 1st february 2020 almost ready to uninstall google hangouts from my phone. replacing my phone&#39 s os 30th january 2020 it&#39 s been a week since #naconf and laura kalbag&#39 s talk on privacy - i'&#39 ve been reviewing my own privacy since then. new adventures 2020 6th january 2020 really looking forward to new adventures 2020 conference in a few weeks. great way to start the year. let me know if you&#39 re going. version 2 of my website went live last week 23rd august 2019 published version 2 of my website. rebuilt using 11ty nunjucks and hosted on netlify and using netlifycms for content. bio juan fernandes is a freelance website designer living in suffolk uk. read more → interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru social media posts about web design development and personal stuff"},{"url":"/testimonials/","title":"Testimonials","text":"Juan Fernandes is a freelance website designer specialising in designing and building bespoke responsive websites for small businesses in th Testimonials - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog N","readabletitle":"testimonials","keywords":"testimonials testimonials - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content testimonials what they say about me great front-end dev who quickly fitted in to our team and got to grips with our tech stack . brilliant at forming relationships across dev and design teams and then delivering some great work on schedule . simon jones signet jewelers i had the pleasure of managing juan for around a year while at motortrak. juan was a great all round front end developer who is very up to date on his skill sets and is always looking to improve and learn. he had great attention to detail and always fed back good input towards projects. i would happily recommend juan as a solid all round developer. ziggy fried-jones motortrak ltd. juan s job title isn t accurate. and that s not surprising because his skills and expertise are impossible to capture in a word or three. i ve worked alongside juan for a year on some of our most audacious projects. i d call juan a 'specialist generalist' - part designer part front-end developer part behaviourist. we leveraged juan s unique skills in our small multi-disciplinary hack teams to prototype and test some of our most adventurous business solutions. juan s infectious energy and his creative approach make him a super valuable. hire this guy. steve molesworth g2g3 digital an accomplished front-end developer highly skilled in html css and many modern front-end development tools . i have had the pleasure of working with juan for a year at signet. he joined at a time when the team were transitioning to agile delivery. juan hit the ground running immediately and took responsibility for the delivery of large pieces of functionality . he also supported the testing team throughout tight delivery schedules and promptly resolved issues to the highest standards . his attention to detail along with a pragmatic approach to providing solutions are some of his key strengths. juan s approachable and friendly nature along with technical skills makes him an asset to any team . akshaya datar signet jewelers juan is the kind of guy you can drop in the deep end of a project and will get up to speed lightening fast without being flustered whilst maintaining his steely professionalism at all times. i know this because i did exactly that to the poor chap. he is extremely thorough and asks a lot of really good questions. i don t think i ve ever heard him complain about anything ever. chris taylor g2g3 digital we were incredibly fortunate to have juan as part of our team this year. he played a vital role in helping us deliver some major redesign projects often taking large ownership of the redevelopment of our site header and product detail page. he has incredible attention to detail picking up on the slightest design inconsistencies during the development phase and worked with us to ensure that we delivered to a very high standard . he brought strong knowledge of web standards user experience and accessibility to the team and i found his input invaluable when reviewing the new and existing ui. juan was a pleasure to work with and i was very sad to see him go! i have no doubt that he would prove to be a valuable asset for any development team looking to employ him in the future. fingers crossed he might work with us again! tony ball signet jewelers i asked juan to redesign property with potential with the intent of improving the mobile experience and increasing user engagement. however i needed more than just a designer since i wanted it delivered in a templating language that was compatible with our system and to use tailwind css. juan rose to the challenge learning tailwind introducing me to alpine js and continuously delivering to netlify and gitlab. there s nothing better as a developer than to work with someone that just 'gets it'; someone who can collaborate work independently and deliver. the new design has significantly improved our performance and accessibility metrics and improved our ad revenue. if you need someone to hit the ground running and work with your existing team hire him . jon canning property with potential over the last 3 months i ve been working with juan on a large front end end project which has been extremely fast paced and it s been a pleasure working with him . the environment included front end frameworks which were not so familiar to juan at the beginning. but he took the challenge of learning these really well mainly due to his tenacious attitude towards his work and his passion to always want to learn more. juan has been a dependable colleague and i would certainly work with him again. mike haddon virgin wines we have worked on many different projects with juan; from making our site responsive executing a cms site migration and implementing a new site design to name a few. juan is always responsive patient and finds a technical solution to deliver our web development on time and in budget. he is always a pleasure to work with . aahuti rai four points consulting ltd. juan is an excellent senior front-end web developer with a vast amount of knowledge and expertise. i worked with him on a whole website rebuild at the chartered management institute in which he took a lead on building reusable components for the website. juan is an expert in html css jquery git and many other modern front end development tools and i would highly recommend him to anyone. harry tate chartered management institute worked with juan at signet. he is an amazingly skilled developer and has very good communication skills. juan would be an asset to any team . geoffrey ofori signet jewelers juan is an exceptional ux/ ui designer with a strong technical skill set and a keen eye for detail . his ability to create clean efficient and user-friendly solutions makes him a valuable asset to any team. he approaches challenges with a problem-solving mindset and consistently delivers high-quality work . in addition to his technical expertise juan is a lovely person i had the pleasure of working with him for a number of years he s reliable and a very collaborative team member . he communicates effectively works well in a team environment and always ensures that projects move forward smoothly. his professionalism and dedication to his craft make him someone i d highly recommend . ben weltman intelliflo juan is an excellent front-end developer who can rapidly adjust to the demands of a project. juan joined the agile team at signet to contribute to delivery within tight schedules. he was quick to provide accurate estimates and have a pragmatic approach to provide solutions. juan has very strong css knowledge . juan is great to work with being a pleasant person. mark dathorne signet jewelers i worked closely with juan when he was developing the ui/ux for two intelliflo products while i had the front end lead role. juan is a talented ui/ux professional with knowledge in user experience web design and software development that allows him to do the perfect bridge between the end user and the technical teams . not only his technical skills are impressive but he is also a great colleague that clearly contributes to a better working environment and improved communication in the team. it was a pleasure working with him and i would recommend him without reservations to every team that has the ambition to create a great product. filipe velosa intelliflo i had the pleasure of working alongside juan for a few months on a major cms integration project. juan has incredible attention to detail and this coupled with his knowledge of web standards accessibility and user experience make him a fantastic asset to any team. along with his great technical skills juan also has the ability to take responsibility for large pieces of functionality and deliver them to the highest standard . he has the ability to not only manage large complex builds but deal with last-minute requests and design changes. juan is a pleasure to be around and i hope i have the pleasure of working with him again. chris benge signet jewelers i had the pleasure of working with juan on intelliflo s developer platform (both developer portal & application store). he demonstrated incredible ingenuity by getting up to speed quite rapidly and creating amazing functional prototypes during the initial phases of the project. during project implementation he worked side-by-side with the development team leading the design process and providing a extremely refined atomic design system (based of pattern lab). daily he helped the team solving styling and/or cross-browser issues showing great knowledge both of modern web-design patterns and respective polyfills. besides juan s professionalism the key factor that set him apart is his rock solid understanding of proper user experience. commonly web-design is simply focused on \"making things look pretty\" disregarding the overall experience. engagement is not only about beauty and juan clearly understands this and his work and ideas are clearly a demonstration of that. joão louros intelliflo i had the pleasure of working with juan and he is an absolute pleasure to work with . he is very thorough adapts and changes to altering requirements quickly he cares about responsive design and accessibility issues and good css patterns not scared to get in and learn javascript and stuff not required of him. he is a delightful person with a great future ahead of him. vincent farah intelliflo interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru juan fernandes is a freelance website designer specialising in designing and building bespoke responsive websites for small businesses in the uk"},{"url":"/uses/","title":"Uses","text":"This is the kit I use for most of my work — a mix of design, front-end development, and everything in between. I’ve worked across a range of I’ve always enjoyed seeing what other designers and developers use day-to-day, so this is my take on a /uses page. This is the kit I use fo","readabletitle":"uses","keywords":"uses i ve always enjoyed seeing what other designers and developers use day-to-day so this is my take on a /uses page. this is the kit i use for most of my work — a mix of design front-end development and everything in between. i ve worked across a range of environments over the years so while these are my preferred tools i m comfortable adapting when needed. editor & terminal sublime text 4 — still my editor of choice. fast minimal and stays out of the way. i use the ayu theme with the inconsolata-dz font plus a handful of custom tweaks . iterm 2 — clean reliable and does exactly what i need. fish shell + oh my fish — small quality-of-life improvements that make working in the terminal much nicer day-to-day. design & development figma — my primary design tool. great for prototyping collaboration and keeping everything in one place. sketch — still use it occasionally mainly when working in teams that are already set up around it. affinity photo — quick image editing without the overhead of heavier tools. browsers firefox — my main browser. the dev tools are excellent especially for layout and css work. chromium safari brave — used for testing across environments and catching inconsistencies early. workflow & utilities simplenote — simple fast and syncs everywhere. perfect for notes ideas and quick writing. cyberduck — still needed for some client work. straightforward and dependable. obs - for recording screencasts and creating training material for clients. desk setup 2018 15" macbook pro (32gb ram 2.9 ghz 6-core i9) - still holding up well for both design and front-end work. zsa moonlander keyboard - took time to get used to but now i wouldn t go back. logitech mx master 2s - expensive for a mouse but genuinely worth it for everyday comfort and productivity. aoc 27" monitor - simple reliable and gets the job done. ikea trotten sit/stand desk - i went for the manual version and regret not going electric — but i now work standing full-time so it s become a non-issue. audio & video samsung galaxy s25 — my daily driver. blue yeti microphone — used for calls recordings and general audio. logitech c920 webcam — reliable and widely supported. desk-mounted mic arm — nothing fancy but does the job. misc perixx large desk mat desk lamp and plenty of notepads pens and quick sketches — some things don t need an app. i ll keep this page updated as my setup evolves. if you re into this kind of thing check out uses.tech — it s a great collection of /uses pages from across the industry. this is the kit i use for most of my work — a mix of design front-end development and everything in between. i ve worked across a range of environments over the years so while these are my preferred tools i m comfortable adapting when needed."},{"url":"/work/archive/fourpoints/","title":"Fourpoints","text":"Four Points asked me to make their existing website responsive, as well moving it from Joomla to Perch CMS. Fourpoints - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Not","readabletitle":"fourpoints","keywords":"fourpoints fourpoints - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content four points website refresh 📑 details client: fourpoints ltd. role: frontend developer tech: html php css jquery perch cms 📝 brief four points asked me to make their existing website responsive as well moving it from joomla to perch cms. requirements move existing site to new cms make the site responsive blog site wide content changes new pages added new case studies section breadcrumb trail social media icons social sharing sub-navigation added resources section with user registration & download tracking interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru four points asked me to make their existing website responsive as well moving it from joomla to perch cms."},{"url":"/work/archive/","title":"Archived Work","text":"See archived work by Juan Fernandes – Freelance Website Designer based in Woodbridge Suffolk UK – showcasing freelance and contract work Archived Work - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog","readabletitle":"archived work","keywords":"archived work archived work - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content archived work archived design and development projects for clients across education e-commerce automotive and saas. i specialise in crafting responsive accessible websites and ui components that perform beautifully across devices and feel effortless to use. work i ve done website refresh view more used vehicle search view more responsive website view more interest responsive forms view more view latest work who i ve worked with interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru see archived work by juan fernandes – freelance website designer based in woodbridge suffolk uk – showcasing freelance and contract work"},{"url":"/work/archive/landrover/","title":"Landrover","text":"Working within a team to designers and developers to build Land Rovers first approved used vehicles website for over 1000 dealers worldwide Landrover - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Note","readabletitle":"landrover","keywords":"landrover landrover - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content land rover approved used vehicle search 📑 details client: land rover role: frontend developer tech: html php css jquery 📝 brief to build land rovers first approved used vehicles website for over 1000 dealers worldwide. requirements desktop and tablet landing page with vehicle and model selection advanced search filter vehicle information vehicle list - listing all vehicles for sale in list or grid layout vehicle details page with dealer information interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru working within a team to designers and developers to build land rovers first approved used vehicles website for over 1000 dealers worldwide"},{"url":"/work/archive/mclaren/","title":"McLaren","text":"McLaren required a set of responsive forms used to gather interest from fans and perspective clients when ever they release a new vehicle. McLaren - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes","readabletitle":"mclaren","keywords":"mclaren mclaren - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content mclaren interest responsive forms 📑 details client: mclaren automotive role: frontend developer tech: html php css jquery json 📝 brief mclaren required a set of responsive forms used to gather interest from fans and perspective clients when ever they release a new vehicle. requirements responsive and mobile first followed existing style guide capture information from fans and perspective clients cookie notification with built in reset when the policy is updated show all dealers for the users country of residence show all dealers if that country does not have any dealers allow for the forms to be translated allow the user to add/remove up-to three currently owned vehicles ability to show all models for a chosen make and all model variants browser detection with an out of date browser message interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru mclaren required a set of responsive forms used to gather interest from fans and perspective clients when ever they release a new vehicle."},{"url":"/work/archive/tomhartleyjnr/","title":"Tom Hartley JNR - Responsive Website","text":"Tom Hartley JNR had a new brand and needed a website ready for the launch of his new business. Tom Hartley JNR - Responsive Website - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fer","readabletitle":"tom hartley jnr - responsive website","keywords":"tom hartley jnr - responsive website tom hartley jnr - responsive website - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content tom hartley jnr responsive website 📑 details client: tom hartley jnr role: frontend developer tech: html php css jquery cms 📝 brief tom hartley jnr started his own business after many years of working with his dad tom hartley. tom hartley jnr had a new brand and needed a website ready for the launch of his new business. requirements responsive design mobile first modern design content management system driven interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru tom hartley jnr had a new brand and needed a website ready for the launch of his new business."},{"url":"/work/archive/virgin-wines/","title":"Virgin Wines","text":"Working within a team of designer and developers to completely re-design and rebuild the virgin wines website based in Norwich Norfolk UK Virgin Wines - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog N","readabletitle":"virgin wines","keywords":"virgin wines virgin wines - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content virgin wines new website virgin wines new website project details client: virgin wines role: frontend developer tech: html5 php css3 responsive sass bourbon neat jquery json pattern labs gruntjs mustache templates project brief virgin wines hired me to work with the in house designers and developers to rebuild the customer facing part of their website. my job was to build the header menu system checkout and basket pages. requirements: mobile first responsive design new look and feel pattern library fully responsive header and menu basket and checkout pages interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru working within a team of designer and developers to completely re-design and rebuild the virgin wines website based in norwich norfolk uk"},{"url":"/work/arrival-lifts/","title":"Arrival Lifts - Comprehensive Redesign and Rebuild of Arrival Lifts Website","text":"This project aims to enhance the Arrival Lifts online presence, providing a visually appealing, functional, and professional website that ef Arrival Lifts - Comprehensive Redesign and Rebuild of Arrival Lifts Website - Juan Fernandes - Freelance Web Designer Availability: I have","readabletitle":"arrival lifts - comprehensive redesign and rebuild of arrival lifts website","keywords":"arrival lifts - comprehensive redesign and rebuild of arrival lifts website arrival lifts - comprehensive redesign and rebuild of arrival lifts website - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content arrival lifts elevating a trusted brand with a modern responsive web presence 📝 brief 🎯 the challenge arrival lifts' original website was dated non-responsive and lacked clarity in presenting their services. they needed a refreshed platform that could modernize their image enhance usability and meet evolving accessibility and seo standards. 🛠️ my approach modern responsive design: developed a clean layout that adapts across all screen sizes using tailwind css for efficiency and flexibility. structured content layout: defined a clear site structure—home services projects clients and contact—to improve navigation and seo. enhanced functionality: integrated social media links downloadable pdfs and a revamped client list with testimonials to build trust. optimized performance and accessibility: delivered a fast-loading seo-optimized and wcag-friendly experience using 11ty. 📱 outcomes fully responsive site adaptable to mobile tablet and desktop screens improved content clarity and site structure for better user engagement integrated trust-building elements like testimonials and client logos improved seo and loading performance through static site generation accessibility compliance built into every component 💡 why this matters for many businesses the website is the first impression. this project helped arrival lifts reestablish credibility showcase their expertise and grow trust through thoughtful design and smart web practices. it s proof that even traditional industries can benefit from great ux and modern frontend tooling. juan delivered a website that truly represents our brand and services. the new design is not only visually appealing but also user-friendly and accessible. we ve received positive feedback from clients and partners alike. paul from arrival lifts ltd. 📑 details client: arrival lifts ltd. role: website designer tech: html 11ty css tailwind js cloudinary 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru this project aims to enhance the arrival lifts online presence providing a visually appealing functional and professional website that effectively engages visitors and improves overall user experience."},{"url":"/work/bkmrks/","title":"BKMRKS","text":"Bookmark manager built with React BKMRKS - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes C","readabletitle":"bkmrks","keywords":"bkmrks bkmrks - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content bkmrks bookmark manager built with react 📝 brief 🧩 project summary bkmrks is a personal project: a lightweight modern bookmark manager built with react next.js app router and typescript. i designed and developed it to scratch my own itch—organising bookmarks in a clean minimal way without relying on browser extensions. the app supports tagging search and optional cloud sync with supabase making it both flexible and portable. 🎯 the challenge browser bookmark tools are either too basic or too bloated. i wanted a solution that: works as a static-friendly app (so it can be hosted anywhere even shared hosting). lets me import/export bookmarks via json. stays accessible and responsive not just functional. provides optional cloud sync without being locked into a platform. 🛠️ my approach i treated bkmrks as a product design + engineering exercise not just a coding side project: tech stack: next.js app router react typescript tailwind css shadcn/ui and optional supabase integration. data model: json-first with schema validation via zod so the app works offline or self-hosted. features: tagging and search for quick filtering. import/export bookmarks as json. supabase sync for those who want multi-device storage. architecture: built around feature modules for scalability with unit and integration testing (vitest + playwright). accessibility: semantic html keyboard navigation aria patterns and reduced-motion fallbacks baked in. 📱 outcomes the result is a fast minimal and user-friendly bookmark manager that runs on almost any hosting setup. it demonstrates: my ability to design build and ship a full product independently. strong skills in modern react/typescript development. a product-focused mindset balancing usability performance and maintainability. bkmrks now lives as a personal tool i use daily and a showcase of my front-end craft design system thinking and product sensibility. 💡 why this matters bkmrks is more than just a side project: it s proof that i can take an idea from concept to production applying the same rigor i use with client work. it highlights my strengths in: modern frontend engineering (react next.js typescript). product thinking (usability accessibility and feature prioritisation). independent ownership (building something end-to-end tested and deployed). 📑 details client: self-initiated (bkmrks) role: front-end developer & designer tech: react next.js typescript json link: view website 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru bookmark manager built with react"},{"url":"/work/gratuu/","title":"Gratuu - Website Design and Development","text":"This project aims to deliver a modern, user-friendly website that effectively showcases the client s product and information while providing Gratuu - Website Design and Development - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan","readabletitle":"gratuu - website design and development","keywords":"gratuu - website design and development gratuu - website design and development - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content gratuu website design & development building a modern cms-ready marketing site for a cashless tipping app 📝 brief 🎯 the challenge gratuu a fintech startup revolutionizing cashless tipping required a sleek responsive website to showcase its app and services. the goal was to create a four-page site—homepage about/how it works contact and terms & conditions—that effectively communicates the app s value proposition while being easy to manage and update. 🛠️ my approach homepage: implemented an image carousel at the top to highlight key features followed by introductory text with icons a product screenshot scroller a detailed app features section and a \"get in touch\" contact area with social media links. about/how it works page: featured a hero video section with call-to-action buttons a compliance information section and a contact area to provide users with comprehensive information about the app s functionality and benefits. contact page: designed with a hero image and accompanying text followed by a contact form additional informational text and social media icons to facilitate user engagement and inquiries. terms & conditions page: structured to present detailed terms and conditions text clearly and accessibly. content management: ensured all sections are editable via a cms by storing content in version-controlled markdown text files providing flexibility and ease of updates without affecting the website s structure. design consistency: integrated client-provided images and selected icons adhering to existing color schemes and fonts to maintain brand consistency throughout the site. 📱 outcomes delivered a fully responsive four-page website that effectively showcases gratuu s app and services. implemented a user-friendly cms setup allowing for easy content updates and management. enhanced user engagement through interactive elements like image carousels and a hero video section. maintained brand consistency by adhering to existing design elements and integrating client-provided assets. optimized website performance and accessibility ensuring a seamless experience across devices. 💡 why this matters in the competitive fintech landscape a compelling online presence is crucial. this project provided gratuu with a modern responsive website that not only reflects its innovative approach to cashless tipping but also offers an intuitive user experience. the cms integration ensures that the gratuu team can easily manage and update content supporting ongoing marketing efforts and user engagement. 📑 details client: gratuu ltd role: website designer tech: html 11ty css tailwind js cloudinary link: view website 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru this project aims to deliver a modern user-friendly website that effectively showcases the client s product and information while providing easy content management and flexibility."},{"url":"/work/lusso-prestige/","title":"Lusso Prestige - Modern Website Design & Development for Vehicle Sales","text":"This project aims to create a visually appealing, user-friendly, and highly functional website that effectively promotes vehicle sales and e Lusso Prestige - Modern Website Design Development for Vehicle Sales - Juan Fernandes - Freelance Web Designer Availability: I have availab","readabletitle":"lusso prestige - modern website design & development for vehicle sales","keywords":"lusso prestige - modern website design & development for vehicle sales lusso prestige - modern website design & development for vehicle sales - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content lusso prestige website design & development crafting a modern responsive platform to showcase luxury sports and classic vehicles with enhanced user engagement 📝 brief 🎯 the challenge lusso prestige required a visually appealing user-friendly and highly functional website to effectively promote vehicle sales and engage potential buyers. the goal was to create a modern responsive platform that showcases their inventory of luxury sports and classic cars while integrating social media and email marketing tools. 🛠️ my approach homepage design: developed a clean and modern homepage featuring a large image slider promoting three featured vehicles a responsive vehicle grid displaying 6-8 vehicles an integrated instagram feed contact information and a mailchimp form for email subscriptions. additional pages: created comprehensive pages including about us sell your car inventory vehicle detail previously sold and contact us each designed to provide detailed information and facilitate user interaction. user experience enhancements: implemented hover effects sorting options and detailed vehicle information pages to enhance user engagement and navigation. integration: fully integrated social media links and email marketing tools to expand the client s outreach and customer engagement. 📱 outcomes delivered a modern responsive website with a clean design and large images. enhanced user experience through intuitive navigation and interactive elements. improved customer engagement via integrated social media and email marketing tools. provided a scalable platform that effectively showcases the client s vehicle inventory. 💡 why this matters in the competitive market of luxury vehicle sales a compelling online presence is crucial. this project successfully delivered a platform that not only showcases lusso prestige s offerings but also enhances user engagement and supports the client s marketing strategies. 📑 details client: lusso prestige ltd. role: website designer tech: html php css cms link: view website 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru this project aims to create a visually appealing user-friendly and highly functional website that effectively promotes vehicle sales and engages potential buyers."},{"url":"/work/mcm/","title":"Multi Creative Media","text":"Website redesign and relaunch for my own creative agency - Multi Creative Media Multi Creative Media - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Wor","readabletitle":"multi creative media","keywords":"multi creative media multi creative media - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content multi creative media website redesign and relaunch for my own creative agency 📝 brief 🎯 the challenge multi creative media had been running for several years but the website no longer reflected the direction or quality of the work being delivered. the brand needed a fresh modern identity that would communicate professionalism creativity and trustworthiness while still feeling approachable to small businesses. the goal was to create a digital presence that could: showcase a portfolio of client work explain services clearly (web design ux hosting branding) act as a lead-generation tool to attract new clients align with the updated brand identity (new logo colour palette and tone of voice) 🛠️ my approach i designed and built the new multi creative media website from the ground up starting with a brand refresh. using figma i explored modern typography a bold new colour palette (#f97d65 as the signature brand colour) and clean layouts that highlight visuals over text. the site was built with performance and maintainability in mind ensuring it loads quickly and works seamlessly across devices. content was restructured around the services clients ask about most often and the portfolio section was expanded to tell more engaging project stories. the design emphasises clarity and simplicity: clear calls to action on every page tiered pricing options for web and hosting services mobile-first responsive layouts cohesive brand identity across the website and social media touchpoints 📱 outcomes the new multi creative media site positions the brand as both approachable and professional. it provides potential clients with a clear understanding of services builds credibility through case studies and makes it easy to get in touch. the relaunch has already led to positive feedback and re-engagement from past clients while also setting a strong foundation for expanding into new areas such as hosting and smart home technology. 📑 details client: multi creative media ltd role: website designer tech: html 11ty css cloudinary link: view website 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru website redesign and relaunch for my own creative agency - multi creative media"},{"url":"/work/nda/","title":"NDA Work","text":"See the latest work by Juan Fernandes – Freelance Website Designer based in Woodbridge Suffolk UK – showcasing freelance and contract work NDA Work - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes","readabletitle":"nda work","keywords":"nda work nda work - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content nda work a selection of recent design and development projects for clients across education e-commerce automotive and saas. i specialise in crafting responsive accessible websites and ui components that perform beautifully across devices and feel effortless to use. work i ve done money alive integration view more bulk secure messaging view more view all work who i ve worked with interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru see the latest work by juan fernandes – freelance website designer based in woodbridge suffolk uk – showcasing freelance and contract work"},{"url":"/work/nda/intelliflo/money-alive/","title":"Money Alive Integration","text":". Money Alive Integration - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About","readabletitle":"money alive integration","keywords":"money alive integration money alive integration - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content money alive money alive integration 📝 brief using figma i designed and integrated a dashboard component within the existing interface to display available videos and track user progress on previously watched content. i created a cohesive video library experience with dedicated screens for exploring new and existing videos complete with progress indicators. to enhance usability i also designed a custom video player search and filtering functionality and both list and grid views for flexible content browsing. 📑 details client: intelliflo role: ux designer tech: figma 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru ."},{"url":"/work/nda/intelliflo/secure-messaging/","title":"Bulk Secure Messaging","text":". Bulk Secure Messaging - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Wo","readabletitle":"bulk secure messaging","keywords":"bulk secure messaging bulk secure messaging - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content secure messaging bulk secure messaging 📝 brief designed intuitive screens that enable users to send secure messages in bulk. users can easily search for clients using the existing search functionality or download a pre-formatted template to populate with their recipient list. once uploaded the list seamlessly integrates into the workflow allowing for efficient and streamlined bulk message delivery. 📑 details client: intelliflo role: ux designer tech: figma 🏆 result test interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru ."},{"url":"/work/neg/","title":"The National College","text":"I was hired by Synergi Tech to develop components and pages from designs provided by a National College designer. The National College - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Wor","readabletitle":"the national college","keywords":"the national college the national college - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content the national college building responsive ui for the national college 📝 brief 🧩 project summary the national college needed a responsive modern website to support educators with accessible training and certification tools. i was brought on by synergi tech to translate their in-house design concepts into clean scalable front-end code—ensuring brand consistency device responsiveness and wcag accessibility throughout the experience. 🎯 the challenge the goal was to deliver a fast frictionless learning portal that felt both welcoming and professional—supporting busy teachers across a variety of devices and browsers. designs were visually well-considered but needed front-end precision and accessibility implementation to ensure the site performed as reliably as it looked. additionally the site needed to be lightweight and performant using a static-site generator (11ty) and utility-first styling (tailwindcss) to keep delivery fast and maintainable. 🛠️ my approach front-end architecture with reusability in mind using 11ty and tailwindcss i built out modular responsive components that could be reused across page templates—minimising duplication and easing future iteration. pixel-perfect translation of figma designs working closely with the client s designer i recreated visual layouts with accuracy ensuring spacing typography and hierarchy matched the intended tone and voice of the brand. accessibility by design every component was designed to meet wcag aa standards. semantic html focus states colour contrast and keyboard navigation were baked in from the start—helping create an inclusive experience for all users. stakeholder feedback loops i collaborated weekly with stakeholders to gather feedback and refine features. this agile feedback process helped us resolve usability snags early particularly around mobile breakpoints and interaction patterns. 📱 outcomes fully responsive ui that performs seamlessly across devices accessible inclusive markup built to wcag aa standards lightweight static site built with performance-first architecture clean component-based design system for long-term maintainability positive stakeholder feedback on delivery quality and turnaround 💡 why this matters in fast-paced time-poor industries—whether it s education or banking—users don t have the luxury to “figure things out.” they need clarity simplicity and confidence in the tools they rely on. this project reflects the kind of work i enjoy most: taking strong visual ideas and turning them into intuitive accessible and performance-optimised digital products. juan s work not only elevated the usability of our platform but also made it more inclusive and future-proof. his attention to detail and clear communication made collaboration effortless. client feedback via synergi tech 📑 details client: the national college via synergy tech role: ui designer tech: html 11ty css tailwind js 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru i was hired by synergi tech to develop components and pages from designs provided by a national college designer."},{"url":"/work/nftms/","title":"NFT Merch Shop","text":"NFT Merch Shop is an ecommerce platform where NFT collectors can seamlessly convert their digital assets into physical merchandise — t-shirt NFT Merch Shop - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog","readabletitle":"nft merch shop","keywords":"nft merch shop nft merch shop - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content nft merch shop building a printful-powered jamstack store with 11ty & stripe 📝 brief 🧩 project summary i set out to prove a simple idea: could a small online merch store run on a clean static-generated site—powered by eleventy (11ty) printful s api for products/fulfilment and stripe for payments—while keeping templates lean and essentially javascript-free the answer was yes. the result is a fast tidy jamstack shop that fetches product data at build time and hands off orders to stripe/printful. 🎯 the challenge deliver a “no cms no server” storefront that still feels full-featured: pull products and variants from printful generate category + product pages in 11ty keep category naming consistent and add just enough client-side js for variant switching cart storage and price formatting—then finish with a smooth stripe checkout hand-off. 🛠️ my approach product ingestion & caching at build fetch `/store/products` from printful then fetch variants for each product. generate stable slugs (slugify + small md5) derive categories via `getcategoryfromname(...)` and cache the full dataset to `cache/products.json` for simple fast templates. page generation in eleventy expose the products array globally (`src/_data/products.js`) and render an index that loops products and builds a unique category list with friendly display names. use eleventy pagination to auto-generate `/products/{category}/` pages backed by a `_data/categoriesflat.js` list. category hygiene normalise names—`t-shirts` `hoodies` `stickers` plus a new `hats` category—so items like “hat” don t get mis-grouped. variants cart and checkout on product pages a ` ` controls variant (size/colour) swaps the preview image and updates price via `intl.numberformat`. “add to cart” writes to `localstorage` with the header icon reading the cart for a live count. “checkout” posts the cart to a vercel function (`/api/checkout.js`) that creates a stripe checkout session and returns the redirect url. 📱 outcomes lean fast storefront with no traditional server or cms—just 11ty small js and apis. accurate taxonomy prevents mis-grouping and keeps listings tidy simple ux touches —clean page titles and currency formatting—add polish without bloat. seamless checkout : client-side cart → serverless function → stripe checkout → printful fulfilment. 💡 why this matters for small experimental merch lines this stack keeps costs and complexity low while staying flexible: rebuild to refresh products add categories with data and scale fulfilment via printful—without dragging in a heavy framework or custom cms. 🧭 next steps add product descriptions with markdown fallback. surface variant ranges on listings (e.g. “available xs–xl”). add size guides / shipping info via data-driven modals. code cleanup and publish a public repo. 📑 details client: self-initiated (nft merch shop) role: front-end developer & designer tech: html 11ty css tailwind js printful rest api stripe checkout vercel localstorage link: view website 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru nft merch shop is an ecommerce platform where nft collectors can seamlessly convert their digital assets into physical merchandise — t-shirts hoodies posters etc."},{"url":"/work/property-with-potential/","title":"Property With Potential - Modern Redesign of Landing and Results Pages","text":"This project aims to significantly improve the current website s mobile experience, accessibility, and overall performance using advanced de Property With Potential - Modern Redesign of Landing and Results Pages - Juan Fernandes - Freelance Web Designer Availability: I have avail","readabletitle":"property with potential - modern redesign of landing and results pages","keywords":"property with potential - modern redesign of landing and results pages property with potential - modern redesign of landing and results pages - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content property with potential website redesign enhancing mobile experience and user engagement through modern design and performance optimization 📝 brief 🎯 the challenge the client sought a comprehensive redesign of the landing and results pages to improve mobile responsiveness user engagement and overall performance. the goal was to create a modern stylish and reusable design that could be extended to other sections of the website enhancing user experience (ux) and performance across devices. 🛠️ my approach design and development: created new modern and stylish designs for the landing and results pages using standards-compliant html and a templating language. adopted a component/modular approach for maximum code reusability and utilized the tailwind css framework for customizable components and future scalability. responsiveness: ensured templates were responsive by employing a mobile-first design strategy. redesigned the filters ui to enhance usability and accessibility particularly on small screens and optimized the homepage layout to boost user engagement with various website sections. performance and usability: implemented mock design modules for in-content advertising. improved code quality and utilized modern coding techniques to enhance accessibility and usability focusing on creating error-free high-performance templates that ensure fast loading and responsive interactions on both mobile and larger screen devices. 📱 outcomes delivered new landing and results page templates with a modern design. implemented responsive design with a mobile-first approach. enhanced filters ui for better usability and accessibility. reordered homepage content for increased user interaction. created mock design modules for advertising integration. developed a high-performance standards-compliant and reusable codebase. 💡 why this matters this project significantly improved the website s mobile experience accessibility and overall performance using advanced design and coding techniques. the modern reusable design enhances user engagement and can be extended to other sections of the website providing long-term value to the client. 📑 details client: property with potential ltd. role: website designer tech: html css tailwind js link: view website 🏆 result testimonial i asked juan to redesign property with potential with the intent of improving the mobile experience and increasing user engagement. however i needed more than just a designer since i wanted it delivered in a templating language that was compatible with our system and to use tailwind css. juan rose to the challenge learning tailwind introducing me to alpine js and continuously delivering to netlify and gitlab. there s nothing better as a developer than to work with someone that just 'gets it'; someone who can collaborate work independently and deliver. the new design has significantly improved our performance and accessibility metrics and improved our ad revenue. if you need someone to hit the ground running and work with your existing team hire him . jon canning property with potential interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru this project aims to significantly improve the current website s mobile experience accessibility and overall performance using advanced design and coding techniques."},{"url":"/work/so5-clothing/","title":"SO5 Clothing Case Study | Custom eCommerce Store with YourNextStore","text":"Case study: How I built SO5 Clothing’s online store using YourNextStore. Featuring custom size guides, product descriptions, and brand-focus SO5 Clothing Case Study  Custom eCommerce Store with YourNextStore - Juan Fernandes - Freelance Web Designer Availability: I have availabil","readabletitle":"so5 clothing case study custom ecommerce store with yournextstore","keywords":"so5 clothing case study custom ecommerce store with yournextstore so5 clothing case study custom ecommerce store with yournextstore - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content so5 clothing custom ecommerce store build 📝 brief 🧩 project summary i built an ecommerce site for so5 clothing my daughter s new fashion brand. using the open-source yournextstore framework as a foundation i customised the platform with brand-focused design updates and features tailored for apparel sales. 🎯 the challenge the main challenge was creating a site that was both quick to launch and easy to maintain while still feeling unique to so5 clothing. the base yournextstore setup provides solid ecommerce functionality but lacked certain features essential for an apparel brand like consistent product descriptions and size guides across categories. i also needed to ensure the site reflected the identity of so5 clothing rather than looking like a generic template. 🛠️ my approach i started with yournextstore s tech stack: next.js for a fast modern react-based frontend stripe for payments printful for print-on-demand fulfilment tailwind css for styling and layouts from there i introduced key customisations: category-based descriptions – all t-shirts hoodies and other product types display default descriptive text making product pages more polished and informative without requiring manual copywriting for every single item. size guides – added sizing tables per product category ensuring customers have the right information to order confidently. design customisations – tweaked the layout styling and brand presentation to better represent so5 s identity. 📱 outcomes the site is live and ready for so5 clothing s launch. while early days the brand now has a professional storefront that: provides customers with consistent product details and size guidance is built to scale as more products and categories are added uses a proven secure ecommerce stack while still feeling unique 💡 why this matters for a new clothing brand first impressions are everything. a polished website that looks professional and answers customer questions (like product sizing) builds trust from day one. by customising an open-source ecommerce base i was able to save time while still tailoring the site to so5 clothing s needs — setting the brand up with a platform it can grow with. 📑 details client: natasha fernandes role: front-end developer tech: react js next.js stripe printful tailwind css link: view website 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru case study: how i built so5 clothing s online store using yournextstore. featuring custom size guides product descriptions and brand-focused design improvements to launch a professional streetwear brand."},{"url":"/work/surbiton-tyre-wheel/","title":"Redesign of Surbiton Tyre and Wheel Website","text":"This project aims to transform the Surbiton Tyre and Wheel website into a high-performing, user-friendly platform with improved SEO and a se Redesign of Surbiton Tyre and Wheel Website - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. J","readabletitle":"redesign of surbiton tyre and wheel website","keywords":"redesign of surbiton tyre and wheel website redesign of surbiton tyre and wheel website - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content surbiton tyre & wheel website redesign transforming a legacy site into a modern user-friendly platform with improved seo and mobile responsiveness 📝 brief 🎯 the challenge surbiton tyre & wheel s existing website was outdated difficult to navigate and lacked mobile responsiveness. the client sought a complete redesign to modernize the site s appearance improve user experience enhance seo and ensure seamless performance across all devices. 🛠️ my approach comprehensive redesign: developed a brand-new modern design for the entire website focusing on usability and visual appeal. content reorganization: re-structured existing content to improve navigation and seo ensuring information is easily accessible to users. navigation and homepage enhancement: redesigned the main navigation and homepage to feature an image slider clear headings and links promoting other pages and products. cms integration: replaced the existing wordpress system with a new cms allowing for easy editing and creation of pages without extensive maintenance. performance optimization: utilized modern coding techniques to enhance code quality accessibility and user experience ensuring fast load times and responsiveness on all devices. seo and accessibility improvements: implemented seo best practices including meta tags and focused on improving website accessibility to reach a broader audience. 📱 outcomes delivered a fully responsive modern website that enhances user experience across all devices. improved content organization and navigation making information easily accessible. enhanced seo performance increasing the site s visibility in search engine results. integrated a user-friendly cms allowing the client to manage content effortlessly. optimized website performance ensuring fast load times and high accessibility standards. 💡 why this matters in today s digital landscape a company s website serves as a critical touchpoint for customers. this project transformed surbiton tyre & wheel s online presence providing a modern efficient and accessible platform that meets the needs of their diverse customer base and supports their business growth. 📑 details client: surbiton tyre & wheel ltd. role: frontend developer tech: html 11ty css tailwind js cloudinary link: view website 🏆 result interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru this project aims to transform the surbiton tyre and wheel website into a high-performing user-friendly platform with improved seo and a seamless mobile experience."},{"url":"/work/","title":"Work","text":"See the latest work by Juan Fernandes – Freelance Website Designer based in Woodbridge Suffolk UK – showcasing freelance and contract work Work - Juan Fernandes - Freelance Web Designer Availability: I have availability for new projects. Juan Fernandes About Work Blog Notes Con","readabletitle":"work","keywords":"work work - juan fernandes - freelance web designer availability: i have availability for new projects. juan fernandes about work blog notes contact skip to content selected work a selection of recent design and development projects for clients across education e-commerce automotive and saas. i specialise in crafting responsive accessible websites and ui components that perform beautifully across devices and feel effortless to use. work i ve done custom ecommerce store build view more bookmark manager built with react view more printful-powered jamstack store with 11ty & stripe view more website redesign and relaunch view more new responsive website build view more comprehensive redesign & rebuild view more website design and development view more redesign of surbiton tyre & wheel website view more modern redesign view more modern website design & development for vehicle sales view more view archived work who i ve worked with interested in working with me get in touch slashes now uses blogroll links collections logs colophon changelog follow juan fernandes on mastodon add juan fernandes on linkedin follow juan fernandes on github juan fernandes rss feed © juan fernandes - 2015-2026. licensed under cc by-nc-sa 4.0 . all rights reserved. no tracking. built with 11ty . hosted by guru see the latest work by juan fernandes – freelance website designer based in woodbridge suffolk uk – showcasing freelance and contract work"}]}