https://www.clairecodes.com/ Recent content on clairecodes Hugo -- gohugo.io en-gb Tue, 03 Oct 2023 14:51:53 +0100 https://www.clairecodes.com/dev-diary/2023-10-03/ Tue, 03 Oct 2023 14:51:53 +0100 https://www.clairecodes.com/dev-diary/2023-10-03/ I’m having another go at Blogtober starting this week, where I post something every day through October. I haven’t posted a Dev Diary for ages and in my made-up rules this will count towards my count of 31 posts this month. What have I been up to? Professionally, I’ve moved from a design role back into a development role which has been very fun. The world of web development has changed a lot since 2019, but coding is like riding a bike. https://www.clairecodes.com/blog/2023-10-01-blogtober-2023// Sun, 01 Oct 2023 23:20:09 +0100 https://www.clairecodes.com/blog/2023-10-01-blogtober-2023// Here we go again! My yearly attempt at building a writing habit by publishing a blog post each day throughout October. I made it to day 3 last year! This time I’m more prepared, with 20+ ideas for short blogs about web development. Fingers crossed! 2023 Blogtober Posts 1st October - this one! https://www.clairecodes.com/blog/2023-07-20-how-to-group-hugo-posts-by-year// Thu, 20 Jul 2023 15:50:10 +0100 https://www.clairecodes.com/blog/2023-07-20-how-to-group-hugo-posts-by-year// Here’s how to group and count posts by year in Hugo, using the GroupByDate function. Within a list.html layout template: <ul> {{ range .Pages.GroupByDate "2006" }} <li>There were {{ len .Pages }} posts in the year {{ .Key }}</li> <!-- You can add another range here to get individual posts, for example: --> <!-- {{ range .Pages.ByTitle }} --> {{ end }} </ul> <div>There are {{ len .Pages }} total posts. https://www.clairecodes.com/blog/2022-10-03-accessible-grey-colour-combinations// Mon, 03 Oct 2022 22:01:26 +0100 https://www.clairecodes.com/blog/2022-10-03-accessible-grey-colour-combinations// It’s important to build accessible web experiences, and while there is no substitute for in person, manual accessibility testing, there are certain metrics that tools like Google Lighthouse and WAVE expect to be satisfied. One of these is colour contrast ratios. If a background and foreground colour combination doesn’t reach a certain ratio then it’s considered to fail WCAG compliance, which is bad. 🙅‍♀️ (N.B. this post won’t cover the maths or the reasoning behind these calculations. https://www.clairecodes.com/blog/2022-10-02-my-experience-with-a-standing-desk// Sun, 02 Oct 2022 23:46:53 +0100 https://www.clairecodes.com/blog/2022-10-02-my-experience-with-a-standing-desk// Since Covid, I primarily work from home and bought myself a standing desk especially for this purpose. Here’s some thoughts and observations on my experience with a standing desk from the past two years. The desk is a white Ikea Skarsta. It’s adjustable with a manual crank. I chose this model because I like Ikea’s quality and also their prices. It’s big enough to fit two monitors, a laptop, a keyboard, a mouse, a notebook, a glass of water, a coffee mug and a mobile phone comfortably. https://www.clairecodes.com/blog/2022-10-01-blogtober-2022-introduction// Sat, 01 Oct 2022 13:27:07 +0100 https://www.clairecodes.com/blog/2022-10-01-blogtober-2022-introduction// All Blogtober 2022 Posts 1st October: this post 2nd October: My Experience With a Standing Desk 3rd October: Accessible Grey Colour Combinations Blogtober 2022 I challenged myself to Blogtober 4 years ago in 2018 and ended up publishing 22 blog posts (out of 31) and finding it pretty fun too. This page lists all my Blogtober 2018 posts. I’ve completely lost my writing habit, so I thought the Blogtober challenge would be a great way to rediscover it. https://www.clairecodes.com/dev-diary/2022-04-05/ Tue, 05 Apr 2022 20:12:11 +0100 https://www.clairecodes.com/dev-diary/2022-04-05/ I haven’t posted any content for so long that I’ve become afraid of publishing again. I lose my nerve and inevitably my confidence and go back to square one where I feel I have nothing to share. This is after blogging and working in tech for A Long Time Now (8 years I think?). So here I am writing about nothing in particular just to break the cycle and start posting again. https://www.clairecodes.com/dev-diary/2021-11-15/ Mon, 15 Nov 2021 14:36:04 +0000 https://www.clairecodes.com/dev-diary/2021-11-15/ I revisited the codebase of this blog recently for the first time in months and was very grateful for the Readme file. Past-Claire had written enough instructions so that Future-Claire could get developing quickly. This is your regular reminder to create documentation for whoever maintains the code after you, even it’s yourself! https://www.clairecodes.com/dev-diary/2021-11-08/ Mon, 08 Nov 2021 13:33:50 +0000 https://www.clairecodes.com/dev-diary/2021-11-08/ How has another 3 months gone by with me barely posting anything? All my 2021 goals are looking very unrealistic (post x number of blog posts, read x number of books) so it’s easy to think 2021 has been “unsuccessful”. However, since the last UK lockdown ended in Spring, 2021 has been a vast improvement on 2020 for me personally, and content creation and consumption have been replaced by actually getting out and doing things in real life 🎉. https://www.clairecodes.com/dev-diary/2021-08-09/ Mon, 09 Aug 2021 15:24:17 +0100 https://www.clairecodes.com/dev-diary/2021-08-09/ It’s been over three months since I published something on the internet! Did I even exist for that period of time?? The reason for not being on the internet was being out in the real world instead. The UK has gradually eased lockdown restrictions since Spring and at the time of writing we are the most pre-pandemic than we’ve been since March 2020. Workwise this means I’ve been able to return to an office! https://www.clairecodes.com/dev-diary/2021-04-27/ Tue, 27 Apr 2021 13:19:13 +0100 https://www.clairecodes.com/dev-diary/2021-04-27/ When I started working from home last year I bought myself a standing desk. It’s a basic model from Ikea with a manual crank to adjust the height. I really like using it, but on busy days I often forget to change the height and end up sitting all day! Another thing no one tells you is that you need to build up your stamina: I could barely manage half an hour standing when I started. https://www.clairecodes.com/dev-diary/2021-03-31/ Wed, 31 Mar 2021 15:22:27 +0100 https://www.clairecodes.com/dev-diary/2021-03-31/ I consider deleting my Twitter account quite a lot - I never tweet or interact with others on it. I only use it on my laptop which minimises the time I spend on it, but nevertheless I waste too much time reading people moaning in 280 characters or less. But it still has a strong tech community, plus every now and again someone retweets an old blog post of mine to say it had helped them, which I love! https://www.clairecodes.com/dev-diary/2021-03-24/ Wed, 24 Mar 2021 22:08:50 +0000 https://www.clairecodes.com/dev-diary/2021-03-24/ I use Google Keep to keep track of ideas for blog posts, Instagram posts and coding projects: maybe a new CSS feature I’d like to tinker with or a feature idea for my blog. Unfortunately my Keep account has evolved into a graveyard for ideas. I’m determined not to waste these little thoughts so lately I’ve been sorting through them and salvaging what I can for inspiration. However a lot of ideas just go stale - my interests and opinions change quickly and I should learn to strike while the iron is hot in the future (I won’t though! https://www.clairecodes.com/blog/2021-03-24-one-sided-borders-in-figma// Wed, 24 Mar 2021 22:06:08 +0000 https://www.clairecodes.com/blog/2021-03-24-one-sided-borders-in-figma// One feature I’d love to see in Figma is the ability to add a border (or stroke) to just one side of a rectangle. Currently strokes apply to the whole shape and so do any customisations. This is a shame since a border on a single edge can easily be achieved in CSS with declarations like border-bottom and border-left. In the meantime, using the “inner shadow” effect can create the appearance of a solid border on only one side of a shape. https://www.clairecodes.com/dev-diary/2021-03-17/ Wed, 17 Mar 2021 14:07:04 +0000 https://www.clairecodes.com/dev-diary/2021-03-17/ Some of my “old” blog posts (written more than two years ago) here on clairecodes are some of my top 10 posts in terms of traffic. One of these is Displaying Column Card Counts in Trello. I reread it and realised it was inaccurate since Trello had updated their UI, so I’ve updated it to reflect the changes. But once I started editing the post I couldn’t stop! I cringed at my verbose tone of voice and liberally used the delete key! https://www.clairecodes.com/dev-diary/2021-03-09/ Tue, 09 Mar 2021 16:19:06 +0000 https://www.clairecodes.com/dev-diary/2021-03-09/ I took part in a blind coding challenge this week with my other frontend colleagues. We paired up and had 30 minutes to recreate a design in CodePen using only CSS and HTML. The catch was that we hid the live preview screen, and viewed the result only after the time was up together with the rest of the team. It was fun and the results varied a lot! https://www.clairecodes.com/dev-diary/2021-02-24/ Wed, 24 Feb 2021 21:43:08 +0000 https://www.clairecodes.com/dev-diary/2021-02-24/ We’ve got several more weeks of lockdown in the UK ahead of us and it sapped my enthusiasm for hobbies this week. My solution to these low moods? Exercise, but really quick sessions that I can easily fit into my day. There’s tonnes of short, free workouts available on YouTube which are all I need to release a few endorphins, or get me out of that mid-afternoon energy slump while working from home. https://www.clairecodes.com/blog/2021-02-19-creating-custom-front-matter-in-hugo-files// Fri, 19 Feb 2021 13:53:44 +0000 https://www.clairecodes.com/blog/2021-02-19-creating-custom-front-matter-in-hugo-files// Front matter is metadata found at the top of each Markdown post in a Hugo site. Front matter captures data associated with the post and is a powerful tool for personalising your Hugo site. This article explains how to customise the fields in the front matter. Let’s define some Hugo terminology first: content type - how Hugo defines and organises your content. For example, creating a file with the command hugo new posts/my-first-post. https://www.clairecodes.com/dev-diary/2021-02-16/ Tue, 16 Feb 2021 12:59:56 +0000 https://www.clairecodes.com/dev-diary/2021-02-16/ After last week’s question on which static site generator is coolest, I came across the Jamstack website which lists hundreds of them! It doesn’t answer the question of which one is the coolest, but it gives an idea of which ones are most popular. https://www.clairecodes.com/dev-diary/2021-02-09/ Tue, 09 Feb 2021 22:05:21 +0000 https://www.clairecodes.com/dev-diary/2021-02-09/ What do all the cool kids use for building their personal sites nowadays? I see more and more declaring “Built with 11ty” in the footer, rather than Gatsby, which used to be the framework everyone talked about. The current iteration of clairecodes uses Hugo, which is built in Go. I’m no Gopher (was going to learn as a hobby but never got round to it) but it doesn’t stop me from accomplishing everything I need to with Hugo, and it’s very fast. https://www.clairecodes.com/blog/2021-02-09-2020-review// Tue, 09 Feb 2021 22:03:08 +0000 https://www.clairecodes.com/blog/2021-02-09-2020-review// 2020 - what a year! This is my annual review post where I list some stats and reflections on the past year and a goal or two for the coming year. You can read my reviews for 2019 here and 2018 here. Blog posts published: 6 Blogging definitely wasn’t my strong point this year, and I published even fewer than 2019’s total of 17 blogs. I felt like I didn’t have anything to write about while I was on maternity leave, then once I was back in work I never had the energy or motivation of an evening to write. https://www.clairecodes.com/dev-diary/2021-02-02/ Tue, 02 Feb 2021 20:44:59 +0000 https://www.clairecodes.com/dev-diary/2021-02-02/ I’ve been a Mac user for both work and personal use since 2015, but sadly (for me) my current workplace only uses Windows. Back to the world of ctrl-alt-delete for me! I keep forgetting that Windows file paths use back slashes \ compared to the Mac/Linux forward slash /. I’m having a hard time remembering all my keyboard shortcuts for Mac VSCode too! I’m not fluently bilinugal in operating systems quite yet. https://www.clairecodes.com/blog/2021-02-01-font-face-and-styled-components// Mon, 01 Feb 2021 14:01:55 +0000 https://www.clairecodes.com/blog/2021-02-01-font-face-and-styled-components// A method to add a font using font-face to a React app using styled-components. Adding a Google font to your project using a <link> tag is quick and easy, but you may want to self-host these files instead, perhaps for performance reasons. Or maybe your project uses a non-Google font! How can you add font files with @font-face to a project that uses styled components? The first step is to obtain your font files. https://www.clairecodes.com/dev-diary/2021-01-27/ Wed, 27 Jan 2021 21:05:39 +0000 https://www.clairecodes.com/dev-diary/2021-01-27/ I feel pretty experienced in building a website at this point in my life, but every time I have to add a font to a project I have to google every step of it! Then I spend another few painful minutes making sure my file import paths are correct (and cursing myself for not setting up absolute imports) and I question whether I ever knew how to code at all. Admittedly this gets a little quicker each time, as I can pick out the blog post on installing fonts that I’ve read several times before in my search results. https://www.clairecodes.com/dev-diary/2021-01-20/ Wed, 20 Jan 2021 13:10:21 +0000 https://www.clairecodes.com/dev-diary/2021-01-20/ I’m trying to decide whether to buy a protective case for my one month old MacBook Air. Although I try to be extra careful how I handle it, an accident is bound to happen soon, especially with a toddler around who likes throwing things. I used a plastic shell case with my last MacBook, but it didn’t fit completely snug and ended up with grit trapped in it that scratched the case! https://www.clairecodes.com/dev-diary/2021-01-12/ Tue, 12 Jan 2021 19:28:19 +0000 https://www.clairecodes.com/dev-diary/2021-01-12/ Entering a third lockdown in the UK and I feel at peace with it this time round. The stress of Christmas is over, I had a good break from work and now for at least six weeks I’m not to leave my house, unless for exercise or supermarket trips. No, I’m not pleased that I can’t go anywhere or see anyone, but removing the uncertainty of the situation makes me feel calmer for now. https://www.clairecodes.com/dev-diary/2021-01-04/ Mon, 04 Jan 2021 22:49:54 +0000 https://www.clairecodes.com/dev-diary/2021-01-04/ It’s like old times again, posting my Dev Diary during another UK-wide lockdown! Only this time I’m working instead of being a full-time mum and the weather is awful. Luckily nursery is still open so I can continue work uninterrupted, but the freezing weather and dark evenings are making this isolation much more difficult. YouTube workout videos and lunchtime dog walks have become essential on workdays to keep my morale up. https://www.clairecodes.com/dev-diary/2020-12-30/ Wed, 30 Dec 2020 16:06:33 +0000 https://www.clairecodes.com/dev-diary/2020-12-30/ Last Dev Diary of the year and time to reflect. I normally do a year in review blog post covering how I’ve found the year development-wise, which I’ll write for 2020. I’ve enjoyed writing Dev Diary entries this year and found they were a pleasant weekly distraction during the strict three month lockdown we had over spring. I’ve tinkered with the format of them lately to improve how useful they are, and hope to continue writing them more regularly next year. https://www.clairecodes.com/dev-diary/2020-12-09/ Wed, 09 Dec 2020 15:49:51 +0000 https://www.clairecodes.com/dev-diary/2020-12-09/ I’ve got a new MacBook Air this week. I’ve “downgraded” from a 2018 MacBook Pro to an Air, since I don’t feel I need the beefier spec of the Pro model. I mostly use my laptop for web browsing and developing web applications, and weight is also important to me as I travel with it too (well, theoretically …). There’s a sweet spot for finding the best time to upgrade your tech products to get a good price for your older gear. https://www.clairecodes.com/dev-diary/2020-12-01/ Tue, 01 Dec 2020 13:26:26 +0000 https://www.clairecodes.com/dev-diary/2020-12-01/ My coding Instagram account has been dormant since July. It seems a shame since I spent so much time on it over the past couple of years. I got a bit fed up of taking photos though, which is pivotal to a photo-sharing platform! Plus I didn’t like the focus on stories and videos - I just like writing lengthy captions no one reads. Blogging like this suits me more, plus gives me ownership of the content. https://www.clairecodes.com/dev-diary/2020-11-25/ Wed, 25 Nov 2020 08:45:00 +0000 https://www.clairecodes.com/dev-diary/2020-11-25/ I’ve been at my current paid job for five months now and it’s a big change of direction from my previous roles. I concentrate more on the design and UX side of frontend rather than the guts of React and Redux. I’m having a great time delving into this side of web devlopment and learn so much day-to-day. Consequently I find myself more mentally tired than when I was “only” writing CSS and JavaScript. https://www.clairecodes.com/dev-diary/2020-11-10/ Tue, 10 Nov 2020 13:09:41 +0000 https://www.clairecodes.com/dev-diary/2020-11-10/ How do you get better at something? Through practise. I’ve realised that I read a lot about web development but don’t spend that much time building websites. I read widely about the latest web trends, but using the tech that I read about is more valuable (if I can find the time of course!). So, more CodePen demos, short blog posts and create-react-app tests are the order of the day. https://www.clairecodes.com/dev-diary/2020-11-03/ Tue, 03 Nov 2020 12:12:59 +0000 https://www.clairecodes.com/dev-diary/2020-11-03/ So Blogtober didn’t go that well! I managed a grand total of one published post and one draft. What have we learnt from this? That I’m not motivated enough to post regularly right now. I have plenty of ideas, but am not disciplined enough to write them up. Even trying to embarass myself into posting more hasn’t worked! Oh well. Next job on the list, a redesign of this Dev Diary page and format. https://www.clairecodes.com/blog/2020-10-29-which-way-round-should-ok-and-cancel-buttons-go// Thu, 29 Oct 2020 13:21:06 +0000 https://www.clairecodes.com/blog/2020-10-29-which-way-round-should-ok-and-cancel-buttons-go// A very common user interface pattern is a modal or form with two options: “OK” and “Cancel”. The question is, how should we position the buttons? “OK” then “Cancel”, or “Cancel” followed by “OK”? Are you sure about that? OK Cancel Are you sure about that? Cancel OK Questions like these are the minutiae of user interface design. Who cares, right? Well, when you’re the one designing the app and are responsible for the position of every element, (like me) you begin to care deeply! https://www.clairecodes.com/blog/2020-10-19-do-prettier-and-eslint-do-the-same-thing// Mon, 19 Oct 2020 22:32:05 +0100 https://www.clairecodes.com/blog/2020-10-19-do-prettier-and-eslint-do-the-same-thing// Do you have to choose between ESLint and Prettier? No! They both serve a different and complementary purpose in your codebase, and can be used alongside each other. What does ESLint do? ESLint is a static code analyser for JavaScript. It analyses the code and identifies any patterns that it considers problematic (bug-causing!). The goal is to make the code more consistent and avoid bugs by enforcing best practices. It’s up to the developer to action the ESLint output and fix the problems. https://www.clairecodes.com/dev-diary/2020-10-19/ Mon, 19 Oct 2020 22:05:41 +0100 https://www.clairecodes.com/dev-diary/2020-10-19/ I wrote an introductory Blogtober 2020 post 19 days ago and haven’t posted a thing since 😅 I was really hoping that by posting my intentions it would motivate me to write more, but it hasn’t! Also, you know that period when it feels like everyone is sick in your family one after the other? We’ve had that in my house and I’m just enjoying everyone being healthy right now! Oh and I’m spending a lot of my evenings playing Super Mario Odyssey on my Switch (3 years late I know). https://www.clairecodes.com/blog/2020-10-01-blogtober-2020// Thu, 01 Oct 2020 23:12:29 +0100 https://www.clairecodes.com/blog/2020-10-01-blogtober-2020// I tried this last year but got no further than the 1st October! Let’s try again this year. What’s Blogtober? A challenge to publish a blog post every day thoughout October. I’ve done this before in 2018 fairly successfully. Blog posts can be tutorials, tips or something more chatty and opinionated - just normal blog content. No minimum or maximum word count. Realistically I’ll spend 1-2 hours on this a day so posts will be short and concise. https://www.clairecodes.com/dev-diary/2020-09-02/ Wed, 02 Sep 2020 19:27:47 +0100 https://www.clairecodes.com/dev-diary/2020-09-02/ This is the first time I’ve published anything all summer! Blame starting a job and finally being able to get out and about, now lockdown restrictions eased in the UK. No Instagram captions, blogs or Dev Diary posts since July, which must be a record for me. All I’ve done is push a small change to the blog, which ended up breaking my url structure and decreasing my traffic, but that’s a story for another time and I think I’ve fixed it now 🤞 https://www.clairecodes.com/dev-diary/2020-07-24/ Fri, 24 Jul 2020 15:04:31 +0100 https://www.clairecodes.com/dev-diary/2020-07-24/ Now I’m working fully remote, I’ve set up a workspace in my spare bedroom and with a standing desk. So far I can manage about 45 minutes standing up before my joints complain and I need to sit down. I’ve read that you should expect to do a 1:1 or 2:1 ratio of sitting to standing - the intention isn’t to stand up all day. It definitely feels better having the option to stand than only sitting all day, mind you. https://www.clairecodes.com/dev-diary/2020-07-15/ Wed, 15 Jul 2020 22:15:27 +0100 https://www.clairecodes.com/dev-diary/2020-07-15/ Where have I been? Preparing for a child’s 1st birthday party! It consumed my life for a couple of weeks: decorations, food and a Sesame Street themed cake smash, all for a little person who won’t remember any of it! But this was my way of subconsciously distracting myself from the thing that started a few days later: a new job! Part-time hours, fully remote (for the time being) and exactly the area I want to focus on: UI development. https://www.clairecodes.com/dev-diary/2020-06-23/ Tue, 23 Jun 2020 23:27:32 +0100 https://www.clairecodes.com/dev-diary/2020-06-23/ The 10 minutes of code/learning a day thing has worked really well and I’ve got a good portion of the way through Wes Bos’s CSS Grid course! I will definitely make this a habit. I’ve also discovered how much I actually already knew about CSS Grid just from reading blog posts and creating layouts with the help of Google: another example of lacking confidence in myself. My name is Claire and I know CSS Grid! https://www.clairecodes.com/dev-diary/2020-06-16/ Tue, 16 Jun 2020 10:21:40 +0100 https://www.clairecodes.com/dev-diary/2020-06-16/ I’ve started a new thing this week: spend 10 minutes a day learning. This is to break down the mental barrier that stops me doing online courses or learning a new technology. 10 minutes is easily achievable, and will hopefully lead to spending more than 10 minutes coding once I start and realise it isn’t so bad after all! Of course by “learning” I mean specifically learn more about frontend tech! https://www.clairecodes.com/dev-diary/2020-06-09/ Tue, 09 Jun 2020 22:09:32 +0100 https://www.clairecodes.com/dev-diary/2020-06-09/ Lockdown measures are easing a lot in the UK, but most people I know working in tech will be working remotely for the time being with no signs of returning to an office. This is a good thing, because we’ve been trying to convince management of the benefits and productivity of remote work for a long time. However, I’m not sure how many people would be happy with working remotely permanently. https://www.clairecodes.com/dev-diary/2020-06-02/ Tue, 02 Jun 2020 12:07:20 +0100 https://www.clairecodes.com/dev-diary/2020-06-02/ In these difficult times, be mindful of your media and news consumption and limit how often you read the headlines. Take a break if it’s getting overwhelming! Stay informed, but also stay healthy. https://www.clairecodes.com/dev-diary/2020-05-26/ Tue, 26 May 2020 23:21:42 +0100 https://www.clairecodes.com/dev-diary/2020-05-26/ I’ve stopped counting how many weeks ago lockdown started now! It’s the new normal. I published a blog post this week! Only two minutes before writing this week’s Dev Diary mind you, but the main thing is I’ve completed a piece of writing and should be able to publish more consistently now I’ve broke my dry spell. Join me next week and I might have completed another of my half-finished posts! https://www.clairecodes.com/blog/2020-05-26-css-transitions-for-multiple-properties-on-one-element// Tue, 26 May 2020 21:35:20 +0100 https://www.clairecodes.com/blog/2020-05-26-css-transitions-for-multiple-properties-on-one-element// This caught me out recently so I thought it was worth documenting in a blog post. How do you define a CSS transition for multiple properties on the same HTML element? The CSS transition property defines the effect between two different states of an element. transition is a shorthand property, which means it combines other CSS properties in single declaration. The resulting shorthand is simpler to read and write. Other common shorthand properties are margin, background and font. https://www.clairecodes.com/dev-diary/2020-05-19/ Tue, 19 May 2020 09:48:18 +0100 https://www.clairecodes.com/dev-diary/2020-05-19/ Perfectionism in coding and writing is a real problem for me - I sometimes can’t get past planning or drafting something because I find the pressure of building something using best practices too overwhelming. I’ve barely blogged this year but I have half a dozen topics I want to write about but I’m never happy with anything I start writing. I’m hoping to push through this inner saboteur and publish a blog post to tell you about in next week’s Dev Diary. https://www.clairecodes.com/dev-diary/2020-05-12/ Tue, 12 May 2020 14:30:30 +0100 https://www.clairecodes.com/dev-diary/2020-05-12/ I haven’t posted to Instagram for a week although I still log on because it’s nice to see how other virtual people are doing. I haven’t felt like creating any dev content recently, but I know that if I do publish something it will make me feel better, so here I am writing my weekly dev diary! It’s best to keep busy in times like this. https://www.clairecodes.com/dev-diary/2020-05-05/ Tue, 05 May 2020 11:09:44 +0100 https://www.clairecodes.com/dev-diary/2020-05-05/ April has vanished without a trace and now it’s May. Having a suddenly very mobile 10 month old is a blessing and a curse: good because it creates structure in the day but bad because he needs eyes on him all the time! He’s a chaos monkey at the moment. I’m approaching the year anniversary of when I began my maternity leave and this is not what I expected this period to look like! https://www.clairecodes.com/dev-diary/2020-04-28/ Tue, 28 Apr 2020 11:11:22 +0100 https://www.clairecodes.com/dev-diary/2020-04-28/ I can’t believe this is the beginning of the sixth week I’ve spent in the house (minus long daily walks). It’s starting to wear thin now. The weather will be changing from sunny to cloudy with a chance of rain this week, which will make things harder. Fingers crossed some restrictions will be lifted by the end of May. https://www.clairecodes.com/dev-diary/2020-04-21/ Tue, 21 Apr 2020 13:04:31 +0100 https://www.clairecodes.com/dev-diary/2020-04-21/ It’s the fifth week of lockdown and I should stop talking about it because every week is the same as the last!! Other countries are beginning to lift restrictions but the UK is doing terribly with testing and infections so I think we’ll be here for a while yet, at least June. I’m trying to keep my mind busy and tinker on a few projects when I’m not looking after the baby. https://www.clairecodes.com/dev-diary/2020-04-14/ Tue, 14 Apr 2020 14:07:30 +0100 https://www.clairecodes.com/dev-diary/2020-04-14/ Week 4! It’s like a real life Groundhog Day experience. I post more consistently to Instagram lately and interact with other users more, probably since I can’t talk to anyone in real life aside from my husband and baby! I wouldn’t go so far as to say Instagram is a source of strength and support, but it helps pass the time. https://www.clairecodes.com/dev-diary/2020-04-07/ Tue, 07 Apr 2020 15:32:50 +0100 https://www.clairecodes.com/dev-diary/2020-04-07/ Entering week 3 of UK lockdown. The weather is good, the supermarket has toilet roll in stock and my internet connection is reliable, what is there to complain about? https://www.clairecodes.com/dev-diary/2020-03-31/ Tue, 31 Mar 2020 14:49:17 +0100 https://www.clairecodes.com/dev-diary/2020-03-31/ Second week of lockdown - nothing much exciting has happened this week! 😅 I’m having more video calls and Google hangouts than I’ve ever had! https://www.clairecodes.com/blog/2020-03-29-how-to-reverse-ordered-list-counters-in-html// Sun, 29 Mar 2020 23:15:30 +0000 https://www.clairecodes.com/blog/2020-03-29-how-to-reverse-ordered-list-counters-in-html// An ordered list in HTML uses ascending numbers to display list items, beginning at number 1. The code: <ol> <li>Don't Stop Me Now</li> <li>Under Pressure</li> <li>We Are the Champions</li> <li>Bohemian Rhapsody</li> </ol> produces the following list: Don't Stop Me Now Under Pressure We Are the Champions Bohemian Rhapsody It’s possible to reverse the order of the counters with only HTML - no CSS or JavaScript required! Add an HTML attribute called reversed to the <ol> tag. https://www.clairecodes.com/dev-diary/2020-03-24/ Tue, 24 Mar 2020 14:54:11 +0000 https://www.clairecodes.com/dev-diary/2020-03-24/ The UK has entered lockdown today, so life outside has been cancelled for 3 weeks at least. I’m grateful to work in an industry mostly based on the internet, so I can still stay connected and keep my own skills relevant, even if I’m not currently employed. https://www.clairecodes.com/dev-diary/2020-03-15/ Sun, 15 Mar 2020 13:56:28 +0000 https://www.clairecodes.com/dev-diary/2020-03-15/ I’ve been volunteering once a week for the last month at a high school in Liverpool with InnovateHer to help deliver a course about game development to year 9’s (13 - 14 year olds). It’s taken me right out of my comfort zone and also back into the adult world. As part of the course, we visited the Sony PlayStation offices in Wavertree which I found so cool, even though it was basically an average office, albeit one with PlayStation controllers on every desk. https://www.clairecodes.com/dev-diary/2020-02-27/ Thu, 27 Feb 2020 14:11:29 +0000 https://www.clairecodes.com/dev-diary/2020-02-27/ January turned out to be very quiet for me, but February has been a lot busier. I’ve got several job leads in the pipeline and I also found out that I’d been accepted to speak at UpFront Conference next month! I’ll be doing a 5 minute lightning talk as part of the underrepresented speaker bursary program. I hope March is as exciting! https://www.clairecodes.com/blog/2020-02-11-achievements-unlocked-in-2019// Tue, 11 Feb 2020 23:58:27 +0000 https://www.clairecodes.com/blog/2020-02-11-achievements-unlocked-in-2019// Here’s my belated review of last year, 2019. A one sentence summary is “had a baby”: everything else personally or professionally paled into insignificance next to this event! It has been a very challenging year but also incredibly rewarding. Highs and lows I was pregnant for 50% of 2019, and gave birth on the 1st July to my son I got made redundant 1 month later on 1st August when my employer, Laterooms. https://www.clairecodes.com/dev-diary/2020-01-27/ Mon, 27 Jan 2020 13:54:19 +0000 https://www.clairecodes.com/dev-diary/2020-01-27/ I need to start making more of my time in the evening once the baby is in bed. This isn’t me pushing myself too hard, or not taking time to rest - I just really need to peel myself off the sofa in the evening and apply for a job or write a blog post or create a CodePen demo. My big productivity hack has been to sit at the kitchen table instead of the sofa and I’ve found that this eventually makes me stop watching YouTube and start doing something a little less mindless! https://www.clairecodes.com/dev-diary/2020-01-07/ Tue, 07 Jan 2020 16:48:14 +0000 https://www.clairecodes.com/dev-diary/2020-01-07/ It’s the start of another new year, which always makes me want to start building positive habits. One of this year’s is to spend more time taking online courses. I’m working my way through a Gatsby one at the moment on Egghead. https://www.clairecodes.com/dev-diary/2019-12-20/ Fri, 20 Dec 2019 15:56:01 +0000 https://www.clairecodes.com/dev-diary/2019-12-20/ It’s close to Christmas and so most job-hunting activities have stopped for the holidays. With a new baby, it’s been more festive for me this year than for the past decade combined and I’m not worrying about securing a role by a certain date, just doing stuff when I find the time. Merry Christmas! https://www.clairecodes.com/dev-diary/2019-11-26/ Tue, 26 Nov 2019 23:21:46 +0000 https://www.clairecodes.com/dev-diary/2019-11-26/ Continuing the job search this week. It takes up most of my precious spare time at night so there’s not much time for blogging at the moment. https://www.clairecodes.com/dev-diary/2019-11-19/ Tue, 19 Nov 2019 17:01:27 +0000 https://www.clairecodes.com/dev-diary/2019-11-19/ I went to dotCSS in Paris and HalfStack conference in London this time last year, and the memories section in Google photos on my phone has been reminding me! I’m sad not to be going to any conferences this season because I love a good tech conference 😅 but there’s always next year, and some may even have childcare! https://www.clairecodes.com/dev-diary/2019-11-13/ Wed, 13 Nov 2019 19:22:20 +0000 https://www.clairecodes.com/dev-diary/2019-11-13/ I was on someone’s personal site a while back, and in the footer alongside their social links it said “This website does not track you” - i.e. there isn’t any Google Analytics, etc. I suppose they pointed this out because they were proud of it, but I personally wouldn’t turn the tracking analytics off my own website. I like the data too much and I think it’s useful and interesting to see what pages are being hit. https://www.clairecodes.com/blog/2019-11-06-the-roles-of-spacebar-and-enter-in-keyboard-navigation// Wed, 06 Nov 2019 22:54:12 +0000 https://www.clairecodes.com/blog/2019-11-06-the-roles-of-spacebar-and-enter-in-keyboard-navigation// Did you know, that not everyone uses a mouse to navigate the world wide web? You can use a keyboard to interact with a webpage too. (But you already knew that.) Different elements on a page respond to different keypresses. I always forget what the spacebar and enter keys do, so here’s a quick reminder. Key Expected functions Spacebar activate buttonscheck/uncheck checkboxscroll down the pageexpand a dropdown menu Enter activate buttonsopen linksopen menus Or the key bit I always forget: https://www.clairecodes.com/dev-diary/2019-11-05/ Tue, 05 Nov 2019 22:26:39 +0000 https://www.clairecodes.com/dev-diary/2019-11-05/ It’s time to seriously look for a new job. I was made redundant back in August just a couple of months into maternity leave, when Laterooms.com went into administration. I’d like to go back to work in the New Year, because I’ve taken all the baby classes I can stand! I want to work part-time, which isn’t common, so I’m going to have to so some self-promotion and reach out to employers. https://www.clairecodes.com/blog/2019-10-01-blogtober-2019// Tue, 01 Oct 2019 21:10:27 +0100 https://www.clairecodes.com/blog/2019-10-01-blogtober-2019// Last year I challenged myself to complete Blogtober: to publish a blog post to this site once a day throughout October. I didn’t do too badly, and wrote a total of 21 out of 31 posts. This year will be a little different though, since I’ve got a new baby to work around (he’s 3 months old today!) and the posts won’t be as technical or detailed, since that’s just not where my head is at the moment, deep into maternity leave. https://www.clairecodes.com/dev-diary/2019-09-25/ Wed, 25 Sep 2019 13:10:08 +0100 https://www.clairecodes.com/dev-diary/2019-09-25/ I’m challenging myself to Blogtober again this year, where I post a blog post for every day in October. I’ve been planning out subjects for posts, because thinking of 31 ideas for blog posts is the hardest bit! I maintain a private Trello board for any blog ideas, whether it’s Blogtober or not. https://www.clairecodes.com/dev-diary/2019-08-16/ Fri, 16 Aug 2019 16:44:34 +0100 https://www.clairecodes.com/dev-diary/2019-08-16/ After I was made redundant last week by my full-time employment (although I’m on maternity for the foreseeable future), I updated my LinkedIn to reflect my next ideal role: part-time, remote frontend web development. Although most recruiters and hiring mangers would laugh in my face, I’m sure such a thing exists. I want to get ahead of the game and keep an eye on the job market now. https://www.clairecodes.com/blog/2019-08-16-blogging-seasonally// Fri, 16 Aug 2019 13:19:54 +0100 https://www.clairecodes.com/blog/2019-08-16-blogging-seasonally// An idea to improve productivity. When I want to build a habit to blog or code regularly, I often make a commitment to myself like: I will publish one blog post a week. Or: I will code for 20 minutes three nights a week. And I inevitably fail after a few days. Perhaps adding another section to these pledges will improve my success rate. I mentally read the previous goals as: https://www.clairecodes.com/dev-diary/2019-08-06/ Tue, 06 Aug 2019 23:37:09 +0100 https://www.clairecodes.com/dev-diary/2019-08-06/ Laterooms.com went into administration last week and I, alongside all my colleagues, was made redundant. This doesn’t affect me too much since I’m on maternity leave but it was still a shock and not what I wanted to hear when my baby had just turned one month old! I’ll write a blog post or Instagram caption about this another time but this was definitely my biggest “dev” news this week. https://www.clairecodes.com/dev-diary/2019-07-31/ Wed, 31 Jul 2019 17:15:00 +0100 https://www.clairecodes.com/dev-diary/2019-07-31/ 👋 Hello, it’s been a while! My son Ezra was born on the 1st July and everything since then has been a wonderful tired blur. The sleep deprivation is very real 😴. As you can imagine, I haven’t looked at anything tech-related for a while: no Twitter, no Instagram, no GitHub. However, sometimes it’s nice to think about something other than nappies, so I’m reading a few tech blog posts here and there. https://www.clairecodes.com/blog/2019-06-21-switching-from-atom-to-vs-code// Fri, 21 Jun 2019 11:43:45 +0100 https://www.clairecodes.com/blog/2019-06-21-switching-from-atom-to-vs-code// I’ve been a long-time user of GitHub’s Atom, using it as my primary code editor for three years (and three years is a lifetime in the world of frontend development right?). But after seeing so much positive reaction to VS Code, I decided it was time for a change. It’s been six months since I made the full-time switch to Microsoft’s VS Code, which I thought was a good point to reflect on the experience so far. https://www.clairecodes.com/dev-diary/2019-05-28/ Tue, 28 May 2019 16:05:17 +0100 https://www.clairecodes.com/dev-diary/2019-05-28/ Second week of maternity leave complete, and I haven’t felt the need to keep up-to-date with tech Twitter or read any of the coding newsletters that keep arriving in my inbox just yet. I’m still getting used to the lack of strict routine for 5⁄7 days and also spending a lot of time catching up on baby preparations that I’ve been ignoring while I was still working. https://www.clairecodes.com/dev-diary/2019-05-21/ Tue, 21 May 2019 10:29:49 +0100 https://www.clairecodes.com/dev-diary/2019-05-21/ I’ve been on maternity leave for a week now and have been very busy so far - even though I’m not in work there’s plenty of chores and jobs to be done, especially with baby prep! I’ve maintained my GitHub streak with a new project (although on a repo I haven’t made public yet) but haven’t found time to work on blog posts or catch up on links/email newsletters. I’m expecting to develop more of a routine over the next week. https://www.clairecodes.com/blog/2019-05-15-cv-driven-development// Wed, 15 May 2019 22:36:56 +0100 https://www.clairecodes.com/blog/2019-05-15-cv-driven-development// What is CV Driven Development? I first heard it used by a colleague, self-deprecatingly, talking about their own career decisions. Googling “CV Driven Development” didn’t return a conclusive definition: the first page of search results contains ten links to ten different interpretations. The explanation I liked most was from Martin Jee’s blog: CV Driven Development (CDD) is a software development process which prioritises design and development choices that will enhance the implementing programmer’s Curriculum Vitae over other potential solutions, regardless of how rational that choice is. https://www.clairecodes.com/dev-diary/2019-05-14/ Tue, 14 May 2019 08:46:49 +0100 https://www.clairecodes.com/dev-diary/2019-05-14/ Today is my last day of work before my maternity leave starts!! I also have a three week GitHub streak going on which will be interesting to see how long I can maintain. https://www.clairecodes.com/dev-diary/2019-05-07/ Tue, 07 May 2019 08:04:04 +0100 https://www.clairecodes.com/dev-diary/2019-05-07/ https://www.clairecodes.com/blog/2019-05-03-meta-descriptions-in-hugo-templates// Fri, 03 May 2019 15:35:48 +0100 https://www.clairecodes.com/blog/2019-05-03-meta-descriptions-in-hugo-templates// What is a meta description? A meta description is a summary of a webpage set in an HTML meta tag. It’s often displayed by search engines in their results as the page description, so it can have an impact on the page’s click-through rate. A relevant meta description can help improve your page’s SEO. <meta> tags are placed within the <head> tag of the document. Order of other meta tags doesn’t matter. https://www.clairecodes.com/dev-diary/2019-04-30/ Tue, 30 Apr 2019 10:08:28 +0100 https://www.clairecodes.com/dev-diary/2019-04-30/ I want to redesign my blog: add some new layouts and change the copy, especially the landing page. So I’ve made a commitment to myself to commit some code to it everyday until I’m happier with it. This means I can chip away at it gradually and make good progress 🤞 https://www.clairecodes.com/blog/2019-04-26-styling-list-bullets-with-emoji// Fri, 26 Apr 2019 11:48:09 +0100 https://www.clairecodes.com/blog/2019-04-26-styling-list-bullets-with-emoji// The available styles of bullet points for HTML unordered lists <ul> are limited. Using CSS, they can be changed to something more exciting, like emoji! 🎉👯‍♂️✨ In this post, I’ll show you two methods to replace them: @counter-style, which is concise and flexible (but your browser probably doesn’t support it), and the more tried-and-tested technique of using the ::before pseudo-element. We will transform an unordered list with unstyled counters from this: https://www.clairecodes.com/dev-diary/2019-04-23/ Tue, 23 Apr 2019 13:20:19 +0100 https://www.clairecodes.com/dev-diary/2019-04-23/ I was away on holiday this week, but that never stops me taking my laptop wherever I’m travelling to and doing a bit of light reading. https://www.clairecodes.com/blog/2019-04-21-my-misconceptions-about-the-universal-selector-in-css// Sun, 21 Apr 2019 23:31:22 +0100 https://www.clairecodes.com/blog/2019-04-21-my-misconceptions-about-the-universal-selector-in-css// The asterisk * is known as the universal selector in CSS. It matches all elements of any type. * { color: red; } This example would change the colour of all the text on the page to red (as long as there wasn’t a more specific rule applied to the element). I don’t often use the universal selector, because I assumed that selecting everything would be bad for page performance and difficult to override. https://www.clairecodes.com/blog/2019-04-17-liquid-tag-page-build-failure-debug// Wed, 17 Apr 2019 22:45:00 +0100 https://www.clairecodes.com/blog/2019-04-17-liquid-tag-page-build-failure-debug// A quick bug-fix post today. In a previous blog post I’d written an example of a Liquid tag and nested it within <pre> and <code> tags, using the standard some Markdown code fences of three backticks ```. It looked like this: ```js {% codepen https://codepen.io/claireparker/pen/oMmPPZ %} ``` Every time I pushed to Git and GitHub I received a page build error that looked like this: Unable to build page. https://www.clairecodes.com/dev-diary/2019-04-16/ Tue, 16 Apr 2019 21:42:32 +0100 https://www.clairecodes.com/dev-diary/2019-04-16/ I’ve been off work sick this week so haven’t managed much. Damn my pregnant immune system! https://www.clairecodes.com/blog/2019-04-13-ignoring-prettier// Sat, 13 Apr 2019 21:22:04 +0100 https://www.clairecodes.com/blog/2019-04-13-ignoring-prettier// Prettier is an “opinionated code formatter”. Quoting the docs: It removes all original styling and ensures that all outputted code conforms to a consistent style. It’s commonly used in JavaScript projects, and also offers plugins that support other languages. Prettier can be run through its CLI, or even automatically through your code editor each time you hit save. Allowing Prettier to be responsible for how your code is formatted is a huge timesaver, especially when working in teams where code reviews can turn into passive-aggressive discussions about indentation and line-length. https://www.clairecodes.com/dev-diary/2019-04-09/ Tue, 09 Apr 2019 13:05:44 +0100 https://www.clairecodes.com/dev-diary/2019-04-09/ Productive week this week 🏆 I made the most of time in the evenings and didn’t spend mindless hours on YouTube. I even got back in the habit of daily Instagram posting. https://www.clairecodes.com/blog/2019-04-05-npx-egghead-course-notes// Fri, 05 Apr 2019 11:49:19 +0100 https://www.clairecodes.com/blog/2019-04-05-npx-egghead-course-notes// I’ve just finished watching Elijah Manor’s Egghead course about npx. It really useful, not just for the info about npx but also for all the npm tricks I picked up too. Plus it was less than 20 minutes in length! In an attempt to keep this info in my brain for as long as possible, here are my notes from the course. The course is currently free and available to watch on Egghead. https://www.clairecodes.com/dev-diary/2019-04-02/ Tue, 02 Apr 2019 11:42:56 +0100 https://www.clairecodes.com/dev-diary/2019-04-02/ https://www.clairecodes.com/blog/2019-03-28-why-my-hugo-archetypes-didnt-work// Thu, 28 Mar 2019 15:06:50 +0000 https://www.clairecodes.com/blog/2019-03-28-why-my-hugo-archetypes-didnt-work// A short story about Hugo template files and Markdown file extensions. Brief overview of archetypes in Hugo The current version of my personal blog is built with Hugo, a static site generator. Hugo has the concept of archetypes, which are template files used to create new content types with the hugo new command. It saves you having to copy and paste customised front matter (the YAML, TOML or JSON data at the top of the file) or other custom content every time you create a new post. https://www.clairecodes.com/dev-diary/2019-03-26/ Tue, 26 Mar 2019 16:02:55 +0000 https://www.clairecodes.com/dev-diary/2019-03-26/ It was the annual UpFront conference here in Manchester last Friday and I attended with my current work colleagues. I’ve been to the last four UpFront conferences 🏆 and I realised I’ve attended them with a different group of colleagues each year: a combination of the high turnover of staff in IT and my own job-hopping! It was another good year of talks. No well-known speakers this year, but that doesn’t indicate quality anyway. https://www.clairecodes.com/dev-diary/2019-03-19/ Tue, 19 Mar 2019 08:59:20 +0000 https://www.clairecodes.com/dev-diary/2019-03-19/ https://www.clairecodes.com/blog/2019-03-13-the-difference-between-dependencies-and-devdependencies-in-a-javascript-project// Wed, 13 Mar 2019 10:08:30 +0000 https://www.clairecodes.com/blog/2019-03-13-the-difference-between-dependencies-and-devdependencies-in-a-javascript-project// When you use npm to install a package to your project with the command npm install <package-name>, the name and version of the package appears in the project’s package.json file under the “dependencies” key. For example, npm install react will look write something like this to the file: { ... "dependencies": { "react": "^16.8.4", ... } ... } The code for the package will be installed in the project’s local node_modules folder. https://www.clairecodes.com/dev-diary/2019-03-12/ Tue, 12 Mar 2019 08:20:31 +0000 https://www.clairecodes.com/dev-diary/2019-03-12/ It was International Women’s Day last Friday. I find “celebrations” of it in the workplace more awkward every year: “oh look, there’s not many of you are there?”, but on Instagram it was a very positive affair. However I’m very cynical about it all and I’m sure some people and companies just pay lip-service to diversity for the retweets and mentions 🙃 https://www.clairecodes.com/dev-diary/2019-03-05/ Tue, 05 Mar 2019 13:51:06 +0000 https://www.clairecodes.com/dev-diary/2019-03-05/ I’ve felt more energised in my work since my holiday (did I mention I was on holiday last week?!). I’ve got a few things on my coding To-Do list and I’m confident I’ll squeeze out a new blog post this week too 🤞 https://www.clairecodes.com/dev-diary/2019-02-28/ Thu, 28 Feb 2019 14:46:52 +0000 https://www.clairecodes.com/dev-diary/2019-02-28/ I was away on holiday last week and didn’t read or write a line of code. I also spent hardly any time on Instagram or Twitter. It was a very relaxing week! 🌞 What was important for me about this holiday was that I didn’t mentally beat myself up because I wasn’t spending my free time redesigning my blog, or taking photos for Instagram, or learning a new language etc. I made a choice to switch off and didn’t worry about the million other ways I could have been “productively” spending my time. https://www.clairecodes.com/dev-diary/2019-02-19/ Tue, 19 Feb 2019 18:00:43 +0000 https://www.clairecodes.com/dev-diary/2019-02-19/ I have done very little extra-curricular coding or writing this week but won’t let that stop me writing this entry! I’ve read lots of development-related blog posts since last week, but none resonated with me enough to share here. I haven’t worked on any side projects (I’ll be honest, I haven’t done that enthusiastically for a while) nor have I written any blog posts. I’ve barely posted to Instagram either. And that’s OK! https://www.clairecodes.com/dev-diary/2019-02-13/ Wed, 13 Feb 2019 21:26:33 +0000 https://www.clairecodes.com/dev-diary/2019-02-13/ https://www.clairecodes.com/blog/2019-02-05-achievements-unlocked-and-internet-points-earned-in-2018// Tue, 05 Feb 2019 20:55:14 +0000 https://www.clairecodes.com/blog/2019-02-05-achievements-unlocked-and-internet-points-earned-in-2018// I always mean to write a “year in review” post at new year and never get round to it. This is my belated attempt for 2018, only a month or so late! I’ve been working as a software developer since November 2013, so 2018 marked my 5 year anniversary in this industry 🎉 I’ve made more of an effort to contribute to the community and engage with other developers online this year. https://www.clairecodes.com/dev-diary/2019-02-05/ Tue, 05 Feb 2019 13:17:20 +0000 https://www.clairecodes.com/dev-diary/2019-02-05/ I’ve downloaded the Flutter SDK (and xCode and Android Studio) to my Mac this week because I want to try Flutter out. I got the Hello World app working and the hot reloading feature is very cool! Mobile app development is something that interests me so we’ll see whether I can stick with it further than the tutorial 😂 https://www.clairecodes.com/dev-diary/2019-01-31/ Thu, 31 Jan 2019 08:34:35 +0000 https://www.clairecodes.com/dev-diary/2019-01-31/ https://www.clairecodes.com/blog/2019-01-30-how-to-prevent-pasting-into-input-fields// Wed, 30 Jan 2019 11:39:54 +0000 https://www.clairecodes.com/blog/2019-01-30-how-to-prevent-pasting-into-input-fields// In some forms, the “Confirm email address” or “Confirm password” fields don’t allow users to paste text into them. The idea is to make users type their email or password twice to help catch any typos they might have made in those important “Email” and “Password” values. How is this functionality achieved? How can you stop your users from pasting content into an HTML input field? We can use JavaScript to target an input field’s paste event and change how it works: https://www.clairecodes.com/blog/2019-01-23-write-a-blog-post-for-yourself-first// Wed, 23 Jan 2019 11:57:30 +0000 https://www.clairecodes.com/blog/2019-01-23-write-a-blog-post-for-yourself-first// Is your new year’s resolution to start a tech blog? But do you worry that every subject you’ll write about has been covered a million times before? You’re right, it probably has, but that isn’t a reason not to write about it (for example: the message of this blog post has been covered many times before!). I always write my blog posts for an audience of one: myself in the future. https://www.clairecodes.com/dev-diary/2019-01-16/ Wed, 16 Jan 2019 17:00:30 +0000 https://www.clairecodes.com/dev-diary/2019-01-16/ I really enjoy writing an entry for this page each week, but the contents of each post has evolved and I think the page needs a rename. I initially set out for it to be a list of topics that I was working with or was interested in working with, and would serve as inspiration. The best name I could come up with was “Interesting”, because naming things is hard. Later I started listing blog posts that I’d enjoyed reading and also mentioned any projects or blog posts that I’d worked on that week. https://www.clairecodes.com/blog/2019-01-15-how-to-embed-codepens-in-blog-posts-on-dev.to-and-medium// Tue, 15 Jan 2019 08:43:58 +0000 https://www.clairecodes.com/blog/2019-01-15-how-to-embed-codepens-in-blog-posts-on-dev.to-and-medium// CodePens are a great way to interactively demonstrate a code concept in a blog post. However, I spend more time than I wish to admit googling how to embed a CodePen into my posts, both on Medium and dev.to. Here are the current methods to achieve this on both platforms. dev.to Copy the url of your CodePen and add it to a Liquid tag like this: {% codepen https://codepen.io/claireparker/pen/oMmPPZ %} Paste the Liquid tag directly into the page. https://www.clairecodes.com/dev-diary/2019-01-08/ Tue, 08 Jan 2019 14:01:08 +0000 https://www.clairecodes.com/dev-diary/2019-01-08/ I’ve been M.I.A. online since mid-November - I’ve not blogged or used my coding Instagram for over six weeks. I don’t know if this is burnout or lack of motivation or just that time of year - I felt really drained in work and generally don’t like the lack of daylight at this time of year. But now it’s new year which always leaves me energised. Here are a few links I enjoyed reading before Christmas. https://www.clairecodes.com/dev-diary/2018-11-23/ Fri, 23 Nov 2018 18:02:47 +0000 https://www.clairecodes.com/dev-diary/2018-11-23/ https://www.clairecodes.com/dev-diary/2018-11-16/ Fri, 16 Nov 2018 09:36:06 +0000 https://www.clairecodes.com/dev-diary/2018-11-16/ dotCSS 2018 was awesome and I took something away from every talk. Paris wasn’t bad either 🙃. Write-up coming soon. Quiet week otherwise for Instagramming, blogging and general coding. https://www.clairecodes.com/dev-diary/2018-11-07/ Wed, 07 Nov 2018 19:06:20 +0000 https://www.clairecodes.com/dev-diary/2018-11-07/ I’m writing this from departures of the airport: I’m travelling to Paris to attend dotCSS after winning a ticket giveaway held by Women Who Code! Very excited, expect a blog post soon! https://www.clairecodes.com/blog/2018-10-26-the-coverage-is-a-lie// Fri, 26 Oct 2018 21:39:10 +0100 https://www.clairecodes.com/blog/2018-10-26-the-coverage-is-a-lie// This is something a colleague said today and made me laugh. He does have a point though. Just because you have high test coverage, does this mean your codebase is covered by test assertions and safe from bugs? Probably not. What is test coverage? Wikipedia explains it pretty well: Test coverage is a measure used to describe the degree to which the source code of a program is executed when a particular test suite runs. https://www.clairecodes.com/blog/2018-10-25-drawing-a-shield-with-one-div// Thu, 25 Oct 2018 16:57:13 +0100 https://www.clairecodes.com/blog/2018-10-25-drawing-a-shield-with-one-div// Have you ever seen A Single Div by Lynn Fisher? The following example is in no way as impressive but follows the same concept: drawing an item using CSS and only one HTML div. I was inspired by seeing this site explaining the concept of using multiple values in the border-radius value. I already knew you could do this, but looking at the shape reminded me of a shield, and things escalated from there. https://www.clairecodes.com/blog/2018-10-24-missing-emoji// Wed, 24 Oct 2018 22:30:05 +0100 https://www.clairecodes.com/blog/2018-10-24-missing-emoji// It’s happened to all of us: you’re reading an article online or a message from a friend on your phone, and where the author intended to display an emoji, all you see is an empty rectangle. This is your device’s way of saying it doesn’t have support for that emoji. Why is an emoji missing on my operating system? This is very complex (and interesting!) subject so I’m going to try and give a high-level overview. https://www.clairecodes.com/blog/2018-10-23-welcoming-language// Tue, 23 Oct 2018 21:51:07 +0100 https://www.clairecodes.com/blog/2018-10-23-welcoming-language// This might be obvious to you, but it occurred to me the other day and I wanted to elaborate on it. When you write an invite to an event, description for your meetup, sign off on your email newsletter, write your bio on your personal website or otherwise expect a response from a stranger online, don’t forget to leave a positive invitation or call-to-action at the end. What do I mean by that? https://www.clairecodes.com/dev-diary/2018-10-23/ Tue, 23 Oct 2018 12:05:38 +0100 https://www.clairecodes.com/dev-diary/2018-10-23/ https://www.clairecodes.com/blog/2018-10-22-when-not-to-go-for-a-job-interview-uk-software-developer-edition// Mon, 22 Oct 2018 21:39:42 +0100 https://www.clairecodes.com/blog/2018-10-22-when-not-to-go-for-a-job-interview-uk-software-developer-edition// I’ve always shied away from blogging about finding a job - I feel it can be controversial and I don’t see many other people doing it. However I’m going through the process myself again at the moment and wanted to share some advice. This is advice I’ve learnt myself before and always forget! Think of this as a memo for Future-Claire. Note: I’m a software developer in the North of England. https://www.clairecodes.com/blog/2018-10-21-is-that-really-pair-programming// Sun, 21 Oct 2018 09:32:50 +0100 https://www.clairecodes.com/blog/2018-10-21-is-that-really-pair-programming// Pair programming is when two developers sit together at the same computer to write code. There’s lots of different techniques for pairing and takes more than just moving your chair over to your colleague’s desk. Discovering the most effective way to pair takes some effort, and looks different for each pair of developers. Pairing can be very useful, but there are other times when it isn’t necessary, or when the term is misused. https://www.clairecodes.com/blog/2018-10-20-takeaways-from-lean-in// Sat, 20 Oct 2018 21:45:52 +0100 https://www.clairecodes.com/blog/2018-10-20-takeaways-from-lean-in// I recently finished reading Lean In by Sheryl Sandberg and really enjoyed it. There were a lot of inspiring stories and messages throughout the book and it gave me a lot to think about. Here a few points that stood out to me as I was reading it: Are you my Mentor? This was the title of a chapter in the book and Sheryl had a really refreshing take on mentorship. https://www.clairecodes.com/blog/2018-10-19-sass-or-scss// Fri, 19 Oct 2018 21:18:44 +0100 https://www.clairecodes.com/blog/2018-10-19-sass-or-scss// What do you use to style web pages? Do you write CSS or use a preprocessor? Sass is a popular CSS preprocessor, but why do you sometimes see Sass, and other times SCSS? Do you find all these acronyms and file extensions confusing, when all you want to do is make your title text a nice shade of maroon? In this post, I’ll define some of the common abbreviations associated with Sass and explain the difference between Sass and SCSS. https://www.clairecodes.com/blog/2018-10-16-jumping-around-the-command-line// Tue, 16 Oct 2018 22:06:01 +0100 https://www.clairecodes.com/blog/2018-10-16-jumping-around-the-command-line// Next time you find yourself pressing the arrow key to move to the end of the command line, stop and remember, there is a quicker way! Here are a few quick shortcuts to make your cursor movement more efficient. Note: These are written for a Mac - swap out the Cmd button for your OS-specific alternative (e.g. Cmd on Windows). These were tested in Terminal and iTerm2 using a Bash shell. https://www.clairecodes.com/dev-diary/2018-10-16/ Tue, 16 Oct 2018 21:50:39 +0100 https://www.clairecodes.com/dev-diary/2018-10-16/ This week, one of the women I follow on Instagram (Leah of @leah_lestrange posted her first blog post where she explained basic concepts about the internet in a simple way. Read it here. At the end of it she had a long list of developers and tech types to follow on Instagram. She included me in her list 🤩, and the description next to it listed me as a “Web Developer & Blogger”. https://www.clairecodes.com/blog/2018-10-15-making-the-alt-key-work-in-iterm2// Mon, 15 Oct 2018 22:13:26 +0100 https://www.clairecodes.com/blog/2018-10-15-making-the-alt-key-work-in-iterm2// iTerm2 is a replacement for the default Terminal application on MacOS. It has many more handy features than Terminal , is free to download and is also open source 🎉. However, on first install, you can’t use the Option or Alt key (this key: ⌥) as you would in other applications: you can’t skip or jump over words by pressing Alt and the left or right keys. Instead you see sequences like [D or [C: https://www.clairecodes.com/blog/2018-10-14-why-i-like-blogging-as-a-developer// Sun, 14 Oct 2018 21:47:31 +0100 https://www.clairecodes.com/blog/2018-10-14-why-i-like-blogging-as-a-developer// Every software developer should blog in my opinion. If there are ever a set of qualifications or standards needed to be a qualified developer, then I definitely think that writing technical blog posts should be a required skill. But instead of telling you why you should start blogging, I’ve decided to list some of the reasons that I enjoy blogging, as well as take a short trip down memory lane. https://www.clairecodes.com/blog/2018-10-13-womens-wednesday-interview// Sat, 13 Oct 2018 22:45:57 +0100 https://www.clairecodes.com/blog/2018-10-13-womens-wednesday-interview// I’m an active member of Instagram though my coding-themed account claire_codes. There’s a lot more developers posting on Instagram than you think - it’s a very positive, supportive community and I have a lot of fun interacting with people and finding new ways to communicate with them. Daniela (who runs the account coding.misslild)) runs a feature in her Instagram stories every Wednesday she calls “Women’s Wednesday”. She asks a female developer a series of questions and posts their answers. https://www.clairecodes.com/blog/2018-10-12-what-a-green-github-graph-doesnt-show// Fri, 12 Oct 2018 22:27:44 +0100 https://www.clairecodes.com/blog/2018-10-12-what-a-green-github-graph-doesnt-show// The GitHub contributions graph is the dashboard visible on a user’s GitHub profile page. It shows the number of contributions you’ve made to repositories over the past year. Contributions are marked on each day with a different shade of green, depending on how much you did that day relative to the rest of the year. A contribution is defined as: opening an issue creating a pull request reviewing a pull request making a code commit Most of your contributions probably come from commits, especially when starting out and working on personal projects only. https://www.clairecodes.com/blog/2018-10-11-emoji-silhouettes// Thu, 11 Oct 2018 21:38:16 +0100 https://www.clairecodes.com/blog/2018-10-11-emoji-silhouettes// To change the colour of text with CSS, we can simply use the colour CSS property. However, this doesn’t work on emoji characters. But by using the background-clip property, it’s possible to fill the whole emoji shape with a colour, or gradient. This enables us to create text effects like this: .silhouette-one { font-size: 24px; display: inline-block; background: -webkit-linear-gradient(to right, #ffea00, #f50057); background: linear-gradient(to right, #ffea00, #f50057); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 🐘 ☘️ ⭐️ TL;DR The CSS required to create the silhouettes above looks like this: https://www.clairecodes.com/blog/2018-10-10-css-polka-dot-background// Wed, 10 Oct 2018 23:14:56 +0100 https://www.clairecodes.com/blog/2018-10-10-css-polka-dot-background// TL;DR This post explains how to produce this design using CSS: .polka-space-one { background-image: radial-gradient(#212121 20%, transparent 20%), radial-gradient(#FAFAFA 20%, transparent 20%); background-color: #E53935; background-position: 0 0, 50px 50px; background-size: 100px 100px; width: 100%; height: 300px; } It can be created with only a single HTML tag and these background-related CSS properties: body { background-image: radial-gradient(#212121 20%, transparent 20%), radial-gradient(#fafafa 20%, transparent 20%); background-color: #e53935; background-position: 0 0, 50px 50px; background-size: 100px 100px; } Below is an explanation of how this works, or you can experiment with the code directly in this CodePen example: https://www.clairecodes.com/dev-diary/2018-10-09/ Tue, 09 Oct 2018 22:28:52 +0100 https://www.clairecodes.com/dev-diary/2018-10-09/ https://www.clairecodes.com/blog/2018-10-07-blogging-on-your-birthday// Sun, 07 Oct 2018 22:44:02 +0100 https://www.clairecodes.com/blog/2018-10-07-blogging-on-your-birthday// Note: my original intention for this blog post was to write it on my actual birthday (which was yesterday, 6th October), but it turned out I didn’t get chance. But I did think about what I was going to write, so I the thought was there. A Birthday Haiku A birthday blog post Implies I’m having no fun The cake is a lie A coding poet Embarrassing isn’t it? https://www.clairecodes.com/blog/2018-10-05-current-development-learning-goals// Fri, 05 Oct 2018 22:52:54 +0100 https://www.clairecodes.com/blog/2018-10-05-current-development-learning-goals// I’m coming up to my five-year anniversary of working professionally as a web developer this November. I am still enchanted by the challenge of writing software, particularly as I’ve moved solely into frontend web development. One of the things I love about being a developer is that there are always new things to learn, and that it’s part of your job as a good software engineer to keep learning them. https://www.clairecodes.com/blog/2018-10-04-displaying-column-card-counts-in-trello// Thu, 04 Oct 2018 22:32:00 +0100 https://www.clairecodes.com/blog/2018-10-04-displaying-column-card-counts-in-trello// Updated March 2020 to reflect Trello’s latest design. My current favourite tool for managing tasks is Trello. Trello is a free web application for project management. You can use a Trello board to organise pretty much anything, for example I have a board for managing blog post ideas. But it’s missing one feature for me: I’d like to see the total number of cards in each list displayed at the top of the column. https://www.clairecodes.com/dev-diary/2018-10-04/ Thu, 04 Oct 2018 17:40:43 +0200 https://www.clairecodes.com/dev-diary/2018-10-04/ I’ve been on holiday this week, so all my weekly development themed newsletters are backing up in my inbox. https://www.clairecodes.com/blog/2018-10-03-using-email-newsletters-to-stay-up-to-date-with-web-development// Wed, 03 Oct 2018 10:02:44 +0200 https://www.clairecodes.com/blog/2018-10-03-using-email-newsletters-to-stay-up-to-date-with-web-development// Click here to scroll directly to my list of newsletter subscriptions. Hi, my name’s Claire and I’m a frontend web developer. The exact definition of frontend development varies between developers and companies. What a frontend developer does in Company A might be the responsibility of a UX researcher or backend developer in Company B. It might even be spelt differently! (I prefer “frontend” rather than “front-end” or “front end”) Take a look at the Front-end Developer Handbook (2018 edition) for an idea of the areas that frontend development covers. https://www.clairecodes.com/blog/2018-10-02-simple-vs-clever-code-style// Tue, 02 Oct 2018 18:02:44 +0200 https://www.clairecodes.com/blog/2018-10-02-simple-vs-clever-code-style// “Code is written once, but is read over and over again” Code is written once, but is read over and over again. Said some developer somewhere. In my humble opinion, good code is easy to read and understand. There’s lots of factors that contribute to code being readable and easy to maintain, but today I’m going to focus on the choice of idioms and patterns used. An example So your code does The Thing successfully. https://www.clairecodes.com/blog/2018-10-01-blogtober-2018// Mon, 01 Oct 2018 23:18:49 +0200 https://www.clairecodes.com/blog/2018-10-01-blogtober-2018// Blogtober 2018 posts 1st October: Kick-off post (this one!) 2nd October: Simple vs clever code style 3rd October: Using email newsletters to stay up-to-date with web development 4th October: Displaying Column Card Counts in Trello 5th October: Current Development Learning Goals 6th October: Coming soon! 7th October: Blogging on your birthday 8th October: Coming soon! 9th October: Coming soon! 10th October: CSS Polka Dot Background 11th October: Emoji Silhouettes 12th October: What a green GitHub graph doesn’t show 13th October: Women’s Wednesday Interview 14th October: Why I Like Blogging as a Developer 15th October: Making the Alt Key Work in iTerm2 16th October: Jumping around the command line 17th October: Coming soon! https://www.clairecodes.com/dev-diary/2018-09-25/ Tue, 25 Sep 2018 21:02:31 +0100 https://www.clairecodes.com/dev-diary/2018-09-25/ https://www.clairecodes.com/blog/2018-09-19-testing-text-with-jest-snapshots// Wed, 19 Sep 2018 22:41:54 +0100 https://www.clairecodes.com/blog/2018-09-19-testing-text-with-jest-snapshots// Note: this article discusses snapshot testing with Jest, but other test libraries also offer snapshotting features. Snapshot tests are ubiquitous in testing React components. But have you ever considered using them elsewhere? This post explores using snapshots to test functions that return lots of text. What do snapshots do? When you run a snapshot test against a React component, it generates a “snapshot” of the rendered output in a test file. https://www.clairecodes.com/dev-diary/2018-09-18/ Tue, 18 Sep 2018 21:32:02 +0100 https://www.clairecodes.com/dev-diary/2018-09-18/ https://www.clairecodes.com/blog/2018-09-14-customising-styled-components-with-props// Fri, 14 Sep 2018 17:35:27 +0100 https://www.clairecodes.com/blog/2018-09-14-customising-styled-components-with-props// How do you change the style and appearance of a React styled component the value of a prop? Define the component in your app and pass the prop. (Setting a prop with no value as I do below implicitly passes a boolean true.) I’m using a boolean to keep things simple. <Widget invisible>Hello World</Widget> Next, in your component, pass the prop to the styled component wrapper. We can access the props within the styled component’s tagged template literal. https://www.clairecodes.com/blog/2018-09-13-my-prettier-cheatsheet// Thu, 13 Sep 2018 18:26:03 +0100 https://www.clairecodes.com/blog/2018-09-13-my-prettier-cheatsheet// At the time of writing, Prettier is on version 1.14.2. This post is my own personal cheatsheet for Prettier. It contains a brief overview of Prettier and how to set it up on a project. It’s not an exhaustive tutorial, just some suggested quickstart methods and my preferred config. The reason for this post is that I don’t set new apps up from scratch very often, and when I do I end up spending too much time trying to remember my preferred settings. https://www.clairecodes.com/dev-diary/2018-09-10/ Mon, 10 Sep 2018 19:17:39 +0100 https://www.clairecodes.com/dev-diary/2018-09-10/ It’s been a quiet couple of months for me online. I haven’t had much inclination to code or blog over the summer, or even post to Instagram regularly. But this isn’t the first time I’ve lost interest in coding. I just go with it and eventually I rediscover my enthusiasm for all this web development stuff instead of forcing it and having it become a chore. I finally squeezed a blog post out of my brain though which hopefully marks the end of my drought. https://www.clairecodes.com/blog/2018-09-08-template-literals-and-arrays// Sat, 08 Sep 2018 21:49:44 +0100 https://www.clairecodes.com/blog/2018-09-08-template-literals-and-arrays// Template literals (or the feature formerly known as template strings in older versions of the spec) are one of my favourite features of ES6. By quoting with backticks instead of quotes, we can create strings that span multiple lines and interpolate variables. For example: const thing = "World"; `Hello ${thing}`; // "Hello // World" (Note, anything preceded by // in the code examples is what gets printed to a browser console after executing the code. https://www.clairecodes.com/dev-diary/2018-07-18/ Wed, 18 Jul 2018 22:25:09 +0100 https://www.clairecodes.com/dev-diary/2018-07-18/ https://www.clairecodes.com/dev-diary/2018-07-10/ Tue, 10 Jul 2018 22:16:09 +0100 https://www.clairecodes.com/dev-diary/2018-07-10/ I’m realising each week I do this lately, that there’s such a bias in my reading and learning towards web design and layouts. This is interesting for me to know and also another reason why this format of blogging is useful 😀 https://www.clairecodes.com/dev-diary/2018-07-02/ Mon, 02 Jul 2018 22:09:32 +0100 https://www.clairecodes.com/dev-diary/2018-07-02/ https://www.clairecodes.com/dev-diary/2018-06-26/ Tue, 26 Jun 2018 23:08:43 +0100 https://www.clairecodes.com/dev-diary/2018-06-26/ https://www.clairecodes.com/dev-diary/2018-06-13/ Wed, 13 Jun 2018 21:48:43 +0100 https://www.clairecodes.com/dev-diary/2018-06-13/ https://www.clairecodes.com/blog/2018-06-08-quickly-switching-between-two-branches-in-git// Fri, 08 Jun 2018 22:17:24 +0100 https://www.clairecodes.com/blog/2018-06-08-quickly-switching-between-two-branches-in-git// git checkout - checks out the last branch you were working on. Do you find yourself needing to switch between the same two branches in git again and again? There’s a shortcut for that in the terminal! Instead of typing out the branch name manually each time, substitute the name with the hyphen character -. Note: In the gif, I’m using the Bash shell in iTerm2 on a Mac. https://www.clairecodes.com/dev-diary/2018-05-28/ Mon, 28 May 2018 22:09:12 +0100 https://www.clairecodes.com/dev-diary/2018-05-28/ https://www.clairecodes.com/blog/2018-05-28-finding-your-coding-niche// Mon, 28 May 2018 21:50:13 +0100 https://www.clairecodes.com/blog/2018-05-28-finding-your-coding-niche// I wrote a post for The Girl Code about my experience in the tech industry. The topic was very broad but I found I had something to say about changing roles as a developer, and that it can take a while sometimes to find your area of interest. Read the full post on The Girl Code’s Medium account here. https://www.clairecodes.com/dev-diary/2018-05-15/ Tue, 15 May 2018 22:09:12 +0100 https://www.clairecodes.com/dev-diary/2018-05-15/ https://www.clairecodes.com/dev-diary/2018-05-09/ Wed, 09 May 2018 22:09:12 +0100 https://www.clairecodes.com/dev-diary/2018-05-09/ https://www.clairecodes.com/blog/2018-05-09-escape-from-node-mountain// Wed, 09 May 2018 21:50:13 +0100 https://www.clairecodes.com/blog/2018-05-09-escape-from-node-mountain// A quick tip that will save a lot of hassle. We’ve all been there - you open a file in node_modules, then the tree view focus is lost amongst dozens of folders. In order to select another file outside node_modules you have to scroll for miles and miles. To quickly escape from this node modules prison, click on the file in tree view so that it has focus, then press the left arrow key repeatedly until you’re free and have returned to the lush green plains at the root of your project. https://www.clairecodes.com/blog/2018-05-06-how-to-create-an-array-of-unique-values-in-javascript-using-sets// Sun, 06 May 2018 23:57:39 +0100 https://www.clairecodes.com/blog/2018-05-06-how-to-create-an-array-of-unique-values-in-javascript-using-sets// TL;DR let uniqueArray = [...new Set([5,5,2,2,2,4,2])]; // [5,2,4] Pardon? Sorry for the verbose title - sometimes things can be explained better with a code example. Imagine you have a JavaScript array that contains many elements, some of which are duplicated: let dupeArray = [1,1,4,5,4,4,2,1,5]; Your goal is to remove the duplicates and leave only one entry per value: let uniqueArray = [1,4,5,2]; You might write a for-loop, or use a map or filter to get this result. https://www.clairecodes.com/dev-diary/2018-05-03/ Thu, 03 May 2018 21:58:38 +0100 https://www.clairecodes.com/dev-diary/2018-05-03/ https://www.clairecodes.com/dev-diary/2018-04-29/ Sun, 29 Apr 2018 21:58:38 +0100 https://www.clairecodes.com/dev-diary/2018-04-29/ Moved house this week so not much time to open the laptop in the evenings. Kept up the pace in work though. https://www.clairecodes.com/dev-diary/2018-04-18/ Wed, 18 Apr 2018 22:25:51 +0100 https://www.clairecodes.com/dev-diary/2018-04-18/ First week of a new job so there is sooooo much new stuff to learn! I love it! https://www.clairecodes.com/blog/2018-04-16-drying-out-css-selectors-with-sass-maps// Mon, 16 Apr 2018 22:31:21 +0100 https://www.clairecodes.com/blog/2018-04-16-drying-out-css-selectors-with-sass-maps// Repetitive selectors I recently wrote some Sass that looked like this: $color-apple: green; $color-lemon: yellow; $color-strawberry: red; .apple-button { background-color: $color-apple; } .strawberry-button { background-color: $color-strawberry; } .lemon-button { background-color: $color-lemon; } // This compiles to: // .apple-button { // background-color: green; // } // // .strawberry-button { // background-color: red; // } // // .lemon-button { // background-color: yellow; // } (No I’m not working on a website for a greengrocers, the fruit theme is just for example purposes! https://www.clairecodes.com/blog/2018-04-14-why-its-important-to-give-your-button-a-type// Sat, 14 Apr 2018 23:56:31 +0100 https://www.clairecodes.com/blog/2018-04-14-why-its-important-to-give-your-button-a-type// How do you create a button element with HTML? I often see them written like this: <button>Press me</button> This code is valid HTML and passes the W3C markup validation service. However, I believe that the type attribute should always be included on a button. If this attribute is missing, it can introduce potentially confusing behaviour - and there’s enough of that to deal with already in web development! https://www.clairecodes.com/dev-diary/2018-04-12/ Thu, 12 Apr 2018 22:15:59 +0100 https://www.clairecodes.com/dev-diary/2018-04-12/ It’s been a really busy few days in terms of discovering new stuff so here’s another Interesting post for this week! https://www.clairecodes.com/dev-diary/2018-04-10/ Tue, 10 Apr 2018 13:55:42 +0100 https://www.clairecodes.com/dev-diary/2018-04-10/ https://www.clairecodes.com/blog/2018-04-02-making-a-sticky-sidebar-with-two-lines-of-css// Mon, 02 Apr 2018 16:19:53 +0100 https://www.clairecodes.com/blog/2018-04-02-making-a-sticky-sidebar-with-two-lines-of-css// Have you ever been on a website where an element “sticks” to the screen and follows you as you scroll down the page? This is what I call a sticky sidebar, and I’ve spent many hours battling with legacy code trying to debug one. In the past, developers used JavaScript to build this feature, by recalculating the position of the sidebar on the browser’s scroll event. This was complicated to maintain and also costly for performance. https://www.clairecodes.com/dev-diary/2018-03-31/ Sat, 31 Mar 2018 22:17:05 +0000 https://www.clairecodes.com/dev-diary/2018-03-31/ https://www.clairecodes.com/blog/2018-03-19-reasons-not-to-use-ids-in-css// Mon, 19 Mar 2018 20:54:03 +0000 https://www.clairecodes.com/blog/2018-03-19-reasons-not-to-use-ids-in-css// Sometimes when I’m reviewing code, I advise a colleague not to use IDs for CSS style selectors, and inevitably get asked why. Like standing in queues, making a cup of tea or applying a full face of makeup in the dark at 6am, avoiding IDs in CSS is something I do without thinking. I’ve been doing it for so long without questioning it, that it takes me a minute before I can explain to other people why. https://www.clairecodes.com/blog/2018-03-16-styling-inline-code-tags// Fri, 16 Mar 2018 08:58:21 +0000 https://www.clairecodes.com/blog/2018-03-16-styling-inline-code-tags// I like writing tech-related blog posts (you’re reading one right now!). My posts often contain the <code> tag as I illustrate code examples. The default browser style for this tag can be pretty dull, typically using the system monospace font and a beige background colour. I’ve added my own custom style to this tag. This is a step-by-step explanation of it, as I’d rather do that than watch some drivel on Netflix today. https://www.clairecodes.com/dev-diary/2018-03-14/ Wed, 14 Mar 2018 21:57:58 +0000 https://www.clairecodes.com/dev-diary/2018-03-14/ https://www.clairecodes.com/blog/2018-03-13-deleting-multiple-local-git-branches-with-grep// Tue, 13 Mar 2018 22:45:59 +0000 https://www.clairecodes.com/blog/2018-03-13-deleting-multiple-local-git-branches-with-grep// After working for a while on a project, it’s likely that you’ll have a lot of branches checked out locally. Branches quickly expire and are no longer needed, so it’s a good idea to delete them. But if you’re like me, you don’t do this very regularly! When I type git branch into the terminal I’m confronted with dozens of dead branches. Delete local branches by typing git branch -D branch-name in your terminal. https://www.clairecodes.com/dev-diary/2018-03-07/ Wed, 07 Mar 2018 22:17:05 +0000 https://www.clairecodes.com/dev-diary/2018-03-07/ https://www.clairecodes.com/dev-diary/2018-02-20/ Tue, 20 Feb 2018 22:26:33 +0000 https://www.clairecodes.com/dev-diary/2018-02-20/ https://www.clairecodes.com/blog/2018-02-19-do-your-own-dotfiles// Mon, 19 Feb 2018 21:35:19 +0000 https://www.clairecodes.com/blog/2018-02-19-do-your-own-dotfiles// A new job brings lots of changes, including a new laptop or computer. I’m lucky enough to have been able to use a MacBook in all of my developer jobs. (Once you go Mac you never go back!) I recently started a new job and found myself starting from scratch again. I began by downloading Atom, replaced Terminal with iTerm2 and installed some other handy apps. I used my dotfiles to customise my terminal prompt, and thanked Past Claire for committing the code for this to the repo. https://www.clairecodes.com/dev-diary/2017-12-04/ Mon, 04 Dec 2017 22:08:03 +0000 https://www.clairecodes.com/dev-diary/2017-12-04/ https://www.clairecodes.com/dev-diary/2017-11-28/ Tue, 28 Nov 2017 22:19:59 +0000 https://www.clairecodes.com/dev-diary/2017-11-28/ https://www.clairecodes.com/blog/2017-11-21-multiline-comments-in-sass// Tue, 21 Nov 2017 21:35:19 +0000 https://www.clairecodes.com/blog/2017-11-21-multiline-comments-in-sass// Note: These rules are specifically for sass-lint, because that’s my linter of choice. However, equivalent rules will (probably) exist for other linters such as stylelint or csslint. If you lint your Sass code using an automated tool like sass-lint, you might have encountered the rule: no-css-comments. Depending on the severity level in your linter config, this will trigger an error or a warning when it encounters comments like this /* I am a CSS style comment */. https://www.clairecodes.com/dev-diary/2017-11-20/ Mon, 20 Nov 2017 22:41:57 +0000 https://www.clairecodes.com/dev-diary/2017-11-20/ https://www.clairecodes.com/dev-diary/2017-07-01/ Sat, 01 Jul 2017 00:00:00 +0000 https://www.clairecodes.com/dev-diary/2017-07-01/ https://www.clairecodes.com/dev-diary/2017-04-09/ Sun, 09 Apr 2017 00:00:00 +0000 https://www.clairecodes.com/dev-diary/2017-04-09/ https://www.clairecodes.com/blog/2017-04-06-global-gitignores-is-this-thing-on// Thu, 06 Apr 2017 22:05:26 +0000 https://www.clairecodes.com/blog/2017-04-06-global-gitignores-is-this-thing-on// Do you get tired of typing out echo node_modules/ > .gitignore every time you create a new JavaScript project? Do you always forget and commit those pesky node modules to GitHub anyway? And what about those npm_debug.log or .DS_Store files (what even is .DS_Store⁉️)? Well help is at hand to save you yet more precious keystrokes. Create a ✨global gitignore✨ file which will be used by all your git repos locally on your machine and you may never need to write a . https://www.clairecodes.com/blog/2017-03-22-top-tips-for-targeting-your-searches-in-atom// Wed, 22 Mar 2017 23:10:20 +0000 https://www.clairecodes.com/blog/2017-03-22-top-tips-for-targeting-your-searches-in-atom// Are you working on a large project in Atom? Dozens of directories? Thousands of files? Innumerable node modules? You may have discovered that Atom isn’t the fastest editor out there when executing search queries across an entire project. Give Atom a helping hand by narrowing down the scope of your search with a few simple glob patterns. TL;DR Exclude a directory from your search by adding an exclamation point in front of its name: ! https://www.clairecodes.com/blog/2017-03-07-improving-colour-contrast-ratios-in-atom// Tue, 07 Mar 2017 20:58:17 +0000 https://www.clairecodes.com/blog/2017-03-07-improving-colour-contrast-ratios-in-atom// Atom is an open source text editor and is as customisable as you’d expect a piece of open source software to be (i.e. very). If you want a new piece of functionality, chances are a package already exists for it. The same goes for design themes. But it’s also simple to make small style tweaks to your UI without overhauling your whole colour scheme. I recently did this to make the tree view easier to use for my poor old eyes 👀. https://www.clairecodes.com/blog/2017-01-31-why-the-title-attribute-is-pointless-in-html5// Tue, 31 Jan 2017 22:29:26 +0000 https://www.clairecodes.com/blog/2017-01-31-why-the-title-attribute-is-pointless-in-html5// I’ve been working a lot with Magento 2 recently (lucky me 😑) and I’ve noticed the title attribute used heavily across the HTML and PHTML template files. I found examples on <input>, <a> , <textarea>, <p> and especially <div> tags, e.g. <div title="<?php /* @escapeNotVerified */ echo __(‘Buy me')?>"> <?php /* @escapeNotVerified */ echo __(‘Buy me') ?> </div> This is the pattern I’ve seen used: the title attribute is used to repeat the text within the div or an equivalent “useful” value for other tags. https://www.clairecodes.com/blog/2016-11-07-when-strict-equality-goes-wrong// Mon, 07 Nov 2016 21:24:01 +0000 https://www.clairecodes.com/blog/2016-11-07-when-strict-equality-goes-wrong// I recently saw this code in the wild. Names have been changed to protect those involved. function makeFizzbobs (widget) { if (widget === null) { return {}; } else { // Does something interesting with widget return 42; } } I could imagine what the author of the code thought they were doing: they were guarding against an empty function parameter right? Cos null sounds like what you’d be left with if the user didn’t supply an argument like floop or 321. https://www.clairecodes.com/blog/2016-09-04-command-concatenation-in-the-terminal// Sun, 04 Sep 2016 20:45:17 +0000 https://www.clairecodes.com/blog/2016-09-04-command-concatenation-in-the-terminal// You may know that you can chain commands at the terminal. So instead of writing $ echo 'foo' $ echo 'bar' And hitting return after each one, you could type: $ echo 'foo' && echo 'bar' And achieve much the same thing - not exactly the same output but often close enough. I frequently use this combination in my JavaScript app development: rm -rf node_modules && npm i && say done That’s a freebie. https://www.clairecodes.com/blog/2016-08-13-super-quick-regex-tdd-setup// Sat, 13 Aug 2016 20:25:22 +0000 https://www.clairecodes.com/blog/2016-08-13-super-quick-regex-tdd-setup// When you need to build a regex you could either (A) hack around in the console, getting confused and lost, or instead (B) use TDD and write some tests: you can have a clear list of strings your regex should match and those it shouldn’t, run them quickly and see whether the regex works and have readymade documentation for future use 🏆 But how do you set that up? If it sounds like a lot of work, it isn’t. https://www.clairecodes.com/blog/2016-06-07-trailing-commas-in-javascript-objects-yay-or-nay// Tue, 07 Jun 2016 17:33:47 +0000 https://www.clairecodes.com/blog/2016-06-07-trailing-commas-in-javascript-objects-yay-or-nay// TL;DR A trailing comma on the final property of a JavaScript object is valid syntax in ECMAScript5 ... but it will throw an error in IE8 *surprise* 🎉 Trailing commas are also allowed in arrays But if you try to parse an object with a trailing comma to JSON it will throw an error Do you notice anything different about this object? { cat: "miaow", dog: "woof", frog: "ribbit", } Maybe that trailing comma after “ribbit” strikes you as a bit off. https://www.clairecodes.com/blog/2016-05-18-this-one-crazy-tip-will-help-you-write-gold-plated-tests1// Wed, 18 May 2016 20:17:36 +0000 https://www.clairecodes.com/blog/2016-05-18-this-one-crazy-tip-will-help-you-write-gold-plated-tests1// Here is my top tip to help you write better tests, be they unit tests, integration tests, functional tests or unicorn tests: Always write a failing test first. There are three steps to TDD. You may have heard of the 🚦 traffic lights*: ❤️ Red: write a failing test 💛 Amber: make the test pass 💚 Green: improve the code you’ve just written, refactor Or maybe red test -> green test -> refactor**. https://www.clairecodes.com/blog/2016-05-02-so-you-think-you-know-how-clear-works// Mon, 02 May 2016 23:03:12 +0000 https://www.clairecodes.com/blog/2016-05-02-so-you-think-you-know-how-clear-works// TL;DR Clears floating elements preceding the one it's applied to Whether you need clear: left or clear: right depends on the direction the element is floating I thought I understood the clear property in CSS, but it turns out I didn’t. Take 3 divs. Let’s float them side-by-side (excuse the pseudo-HTML): <style> .left { float: left; } </style> <div class="left">ALPHA</div> <div class="left">BETA</div> <div class="left">GAMMA</div> They will now look something like this on the screen: https://www.clairecodes.com/blog/2016-04-26-how-to-chain-functions-in-javascript// Tue, 26 Apr 2016 20:21:04 +0000 https://www.clairecodes.com/blog/2016-04-26-how-to-chain-functions-in-javascript// The chaining design pattern is lovely. 🌅 It means we can call several object methods in one line of code. You see this pattern used in jQuery a lot. Instead of several repetitive lines (A) we have a cleaner one-liner (B) 🍰: // (A) let sponge = new Cake(); sponge.mix(); sponge.bake(); sponge.eat(); // (B) let sponge = new Cake().mix().bake().eat(); But how? You can’t just randomly start chaining methods and hope they work. https://www.clairecodes.com/blog/2016-04-16-selecting-the-last-n-elements-in-css// Sat, 16 Apr 2016 16:25:27 +0000 https://www.clairecodes.com/blog/2016-04-16-selecting-the-last-n-elements-in-css// Let’s a take a bog-standard list: 🚽📋 <ul> <li>Doris Lessing</li> <li>Angela Carter</li> <li>Ann Patchett</li> <li>Iris Murdoch</li> </ul> Quick, off the top of your head: 👴 How would you select only the last list item? li:last-child What if we added another item to the list. How would you select only the last 2 elements? li:nth-last-child(-n+2) A final list element is added: there’s now 6 li’s and we want only the last 3. https://www.clairecodes.com/blog/2016-04-10-a-101-day-github-streak// Sun, 10 Apr 2016 20:51:46 +0000 https://www.clairecodes.com/blog/2016-04-10-a-101-day-github-streak// 📆 I was going to call this post “101 days of coding”, but that would be misleading. I’ve been getting paid to write code as a web developer for over 2 years now, but over the past 3+ months I’ve been writing code in my spare time - after work, after chores, after slobbing in front of the TV - and then committing and pushing it to GitHub. The really weird and pointless thing about this is that I’ve done it every day since the 1st of January this year and now I have a pretty good streak, just look at my GitHub scorecard: https://www.clairecodes.com/blog/2016-03-09-semver-in-package.json// Wed, 09 Mar 2016 21:56:35 +0000 https://www.clairecodes.com/blog/2016-03-09-semver-in-package.json// TL;DR Allow only patch changes: ~1.1.3, e.g. =1.1.3 Allow minor changes: ^1.1.3, e.g. =1.1.3 You might have noticed some unexpected characters next to the package versions of the dependencies or devDependencies properties in your package.json file: "dependencies": { "backbone": "^1.3.1", "express": "~4.13.4" } Semver First of all, let’s understand how packages are versioned and what each of those numbers represent. A piece of software, e. https://www.clairecodes.com/blog/2016-03-08-changing-jekylls-permalink// Tue, 08 Mar 2016 19:54:26 +0000 https://www.clairecodes.com/blog/2016-03-08-changing-jekylls-permalink// Let’s change the permalink format for your Jekyll blog. 🔗 What? In your Jekyll blog, a permalink is the name for the URL that points directly to a specific blog post. It’s a permanent link to a page. 🔗 Why? Jekyll uses a really ugly, verbose permalink format by default which includes the date and category of the post: /:categories/:year/:month/:day/:title.html Which in the live site for this post would become: https://www.clairecodes.com/blog/2016-02-15-spies-in-jasmine-sinon// Mon, 15 Feb 2016 18:13:45 +0000 https://www.clairecodes.com/blog/2016-02-15-spies-in-jasmine-sinon// 🔎 TL;DR 🔍 Terminology used by Jasmine, Sinon and other testing frameworks is not the same: one person's spy is another person's stub The equivalent of Sinon's sinon.spy(foo,'bar') in Jasmine is spyOn(foo,'bar').and.callThrough() So you’re testing. In JavaScript. Perhaps you want to test: whether a method has been called what arguments the method was called with what the method returns A reasonable request. You turn to your testing framework and it turns back to you and it says “Bob, you need to use a spy. https://www.clairecodes.com/blog/2016-02-03-git-aliases// Wed, 03 Feb 2016 19:42:23 +0000 https://www.clairecodes.com/blog/2016-02-03-git-aliases// How many times do type out the same repetitive commands for Git every day? Want to save some keystrokes? Use a Git alias. Consider the very useful but very long: git log --graph --oneline --decorate What a mouthful. But all you need to do, from any directory at the command line, is type: git config --global alias.plog 'log --graph --oneline --decorate' Then from then on all you need to type is: https://www.clairecodes.com/blog/2016-02-01-npm-all-the-things// Mon, 01 Feb 2016 21:43:35 +0000 https://www.clairecodes.com/blog/2016-02-01-npm-all-the-things// Are you one of those mugs ☕️ still downloading zip files of libraries for their JavaScript projects? Well you don’t have to be! Leverage the power of the command line today and npm that thing! npm is Node’s Package Manager (how did they come up with that name??) and I am having great fun with it at the moment - packaging, modularising and managing my JavaScript project dependencies with minimal pain. https://www.clairecodes.com/blog/2016-01-06-scheduling-ruby-and-javascript-jobs-with-heroku// Wed, 06 Jan 2016 21:37:32 +0000 https://www.clairecodes.com/blog/2016-01-06-scheduling-ruby-and-javascript-jobs-with-heroku// Need to do a job regularly in your app? If it’s on Heroku then there’s a free add-on that can run the job for you. It’s imaginatively called Heroku Scheduler. Here’s how I set up Ruby and JavaScript jobs ready to be scheduled. Create your app. From the root directory, initialise git and create a Heroku app. I like to use the Heroku toolbelt for all my Heroku command line needs. https://www.clairecodes.com/blog/2016-01-01-paths-in-ruby// Fri, 01 Jan 2016 14:30:01 +0000 https://www.clairecodes.com/blog/2016-01-01-paths-in-ruby// You’ve got a file, but where does it live? Which directory are you in? Where am I? What’s my name? For the following examples, imagine: you’re executing a file called foo.rb which lives in the file system at /Users/me/myDir/foo.rb you’re located in /Users/me/myDir you’ve executed the command ruby foo.rb from the terminal Remember: absolute path - the full path of the file in the file system: it starts with the root directory and includes all the directories between it and the file in question. https://www.clairecodes.com/blog/2015-12-15-the-not-pseudo-class// Tue, 15 Dec 2015 00:00:01 +0000 https://www.clairecodes.com/blog/2015-12-15-the-not-pseudo-class// How do you use CSS to style a particular element differently from other similar elements? You’d stick a class or ID on it, like so: <style> .special { color: red; } </style> <p>Normal</p> <p>Normal</p> <p class="special">Special</p> <p>Normal</p> <p>Normal</p> .code-example, .code-example-two { border: 1px solid #dcdcdc; border-radius: 3px; padding: 15px; font-family: serif; font-size: 16px; } .code-example .special { color: red; } Normal Normal Special Normal Normal But what if you have the opposite problem - you want to exclude an element from a particular style? https://www.clairecodes.com/blog/2015-12-01-nodelists-are-not-arrays// Tue, 01 Dec 2015 00:00:16 +0000 https://www.clairecodes.com/blog/2015-12-01-nodelists-are-not-arrays// When you’re working with the DOM, it’s tempting to think that when you select a group of elements from the page that you’ve got an array. Right? Wrong! It might look like a duck and walk like a duck, but it moos like a cow. Just what is this monster?! It’s a NodeList. Try this in your browser console: > var whoami = document.querySelectorAll('div'); > Object.getPrototypeOf(whoami) NodeList {} Compare this with: https://www.clairecodes.com/blog/2015-11-10-coding-after-codecademy// Tue, 10 Nov 2015 00:00:16 +0100 https://www.clairecodes.com/blog/2015-11-10-coding-after-codecademy// Last month, I gave a lightning talk called “Coding After Codecademy” which was inspired by people asking me how to improve their newly acquired web development skills, now they’ve completed some Codecademy/Udacity/Code School courses. They’ve got basic HTML, CSS and JavaScript syntax, so what are some good things to start building or learning next? I know how daunting it can be to be faced with a blank editor at that stage, so in my talk I gave some common-sense advice that I would have appreciated when I was in that position myself. https://www.clairecodes.com/blog/2015-09-30-how-to-deploy-an-angularjs-app-on-heroku// Wed, 30 Sep 2015 00:00:00 +0100 https://www.clairecodes.com/blog/2015-09-30-how-to-deploy-an-angularjs-app-on-heroku// Or getting an EAN app running on Heroku EAN rather than MEAN because we’ll be using Express, AngularJS and Node but not Mongo this time. When googling deploying an AngularJS app to Heroku, all the tutorials I looked at (i.e. the top 3 in the first page of results …) assumed I’d cloned the Angular seed app - which I hadn’t and didn’t want to. I had a dead simple one controller, one service AngularJS app (note: 1. https://www.clairecodes.com/blog/2015-09-20-deploying-jekyll-on-heroku// Sun, 20 Sep 2015 00:00:00 +0100 https://www.clairecodes.com/blog/2015-09-20-deploying-jekyll-on-heroku// How I deployed my Jekyll blog to Heroku step-by-step If you use Jekyll for your blog you’ll see that their docs suggest hosting your app on GitHub pages. However, I wanted to host mine on Heroku because - well, just because I could really. I’d used Heroku previously and I knew I wouldn’t be restricted in my choice of plug-ins further down the line. Alas, I didn’t find a single clear tutorial for setting it up: even the example linked on the Jekyll site didn’t run for me! https://www.clairecodes.com/blog/2015-09-14-leedshack// Mon, 14 Sep 2015 22:14:07 +0100 https://www.clairecodes.com/blog/2015-09-14-leedshack// Or, what to expect at a hack I went to my first hack a couple of weeks ago and wanted to (belatedly) share with you my experience and maybe even convince you to go to one yourself! LeedsHack was held in Leeds City Museum on Saturday 22nd and Sunday 23rd August. The aim of the game was to create a demoable project or hack in just 24 hours, with coding starting at 12pm on Saturday and finishing at noon on Sunday. https://www.clairecodes.com/blog/2015-09-05-scraping-sites-that-use-ajax// Sat, 05 Sep 2015 16:08:43 +0100 https://www.clairecodes.com/blog/2015-09-05-scraping-sites-that-use-ajax// Or, where’s the rest of my HTML?? TL;DR If the website you're scraping uses Ajax to load content, open-uri and Nokogiri won't cut it Use Watir WebDriver (+ PhantomJS) instead I recently wanted to do a one-off web-scrape of a single page to get the hrefs of the 100+ <a> tags within it. A cursory google suggested Nokogiri and open-uri would do the trick, so off I went: https://www.clairecodes.com/blog/2015-09-01-pomodoros-pair-programming// Tue, 01 Sep 2015 23:00:16 +0100 https://www.clairecodes.com/blog/2015-09-01-pomodoros-pair-programming// TL;DR Next time you pair program, try using the Pomodoro Technique to improve your productivity and mix things up a bit. Breaks up difficult or tedious stories Keeps morale high and dev's brains fresh Time box learning or research which is sometimes easier to do solo Not always possible - everything in moderation I currently work in a team where we pair program most of the time, and I’ve found that applying the principles of the Pomodoro Technique to when pairing - focus for a bit then a short break - has helped me work more effectively. https://www.clairecodes.com/about/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.clairecodes.com/about/ Hello 👋 I’m Claire Parker-Jones, a UX Designer. I’ve been a (mostly frontend) developer for eight years, and have recently transitioned into the product design area of web development. This blog is my place to learn in public. I’ve been publishing blog posts about web development on this site since 2015. Some of my most popular posts are: One Sided Borders in Figma Styling list bullets with emoji Font-face and Styled Components I post more tech lifestyle content on my Instagram account claire_codes, underneath photos of my laptop and my dog. https://www.clairecodes.com/click-me/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.clairecodes.com/click-me/ Hmm https://www.clairecodes.com/work-history/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.clairecodes.com/work-history/ My CV is accessible in this Google doc. Find my list of past jobs on LinkedIn. Main Skills React (with Redux and styled components) vanilla JavaScript CSS (I love writing CSS) Magento layout writing clean maintainable code working as part of a team, mentoring junior members and sharing knowledge command line, source control with Git, time manangement with Jira - the usual stuff I've worked with lots of JavaScript libraries and frameworks, including Backbone, jQuery, Angular 1 and even YUI.