Dev Diary
I post an entry to this page once a week where I share projects I’ve worked on, interesting things from my social media accounts, blog posts I found useful, or anything else relevant to my work as a web developer.
There are over 100 of these entries all the way back from 2017 of varying quality. Below are the most recent 10.
-
Dev Diary Entry, 5th April 2022
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.
Conversely, the last full blog post on this site, which is now a year old, has been my most popular ever and appears to gaining traffic each month. People really want to learn about One Sided Borders in Figma!
-
Dev Diary Entry, 15th November 2021
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!
What I've been doing this week:
- Spending some focussed time creating ideas for content. I love posting content for lots of reasons (most of them healthy and not narcissistic!) but struggle to come up with ideas lately. There’s no shame in spending some time coming up with ideas in advance which can make the process easier.
What I've been reading this week:
- Respecting Usersโ Motion Preferences - I improved the CSS for how I handle smooth scroll on this site after reading this. Just like doing mobile first, we should add animation within a media query only if users have no motion preference.
- Color and contrast, what does it mean? - A good explanation of how colour contrast ratios work, something that I use all the time in my current role
-
Dev Diary Entry, 8th November 2021
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 ๐.
I’ve got into a nice rhythm of working in the office again now. It was a big readjustment at first, especially as I was only going in an average of once a week, which made it hard to get used to. However, a few months in and I now look forward to the change of scenery from the desk in my spare bedroom.
What I've been doing this week:
- Having a think about what I want Dev Diarys to be in the future. Maybe even getting round to the much-thought-about redesign of this and clairecodes
What I've been reading this week:
- Why debate non-text contrast of UI elements? - I knew about the recommended 4.5:1 colour contrast ratio for text, but this article taught me about the 3:1 contrast ratio required for other UI components.
- How to respond when a job interviewer says โTell me about yourselfโ - After doing some recruitment in work recently, this is great advice and a question that also trips me up everytime.
-
Dev Diary Entry, 9th August 2021
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! Really enjoying the spontaneity of in-person conversations and the posh coffee-maker. So as my routine is changed up again, let’s see if I can create content a little more regularly - maybe I’ll make use of my new commute.
What I've been reading this week:
- I’ve bought ‘The Design of Everyday Things’ by Donald N. Norman to begin my UX library, another book for my commute.
-
Dev Diary Entry, 27th April 2021
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. But the best reason for me to have a tall standing desk is that I can keep my computer out the way and safe from my inquisitive toddler!
What I've been doing this week:
- Following Stephanie Eckles’s Build An Eleventy (11ty) Site From Scratch on Egghead - I love Egghead courses because they are waffle-free, and this particular course is free too!
What I've been reading this week:
- My Top Ten Tips for Surviving and Thriving in Developer Relations - The tip that resonated with me the most was that every post can be turned into another content form.
- The styled-components Happy Path - I always learn something new from a Josh Comeau article so I was excited when he published this one about styled-components. I’m definitely keeping the advice about Isolated CSS in mind next time I build a component.
What I've been watching this week:
- The Golden Ratio | Principles of Design - From the Figma YouTube channel. I’ve encountered the Golden Ratio before, but this video has made the idea click for me and now I’ve started looking for it everywhere!
- THE GAP by Ira Glass - From Daniel Sax on Vimeo. It’s only 2 minutes long and a feast for the eyes, go and watch it, especially if you’re trying to get better at design like me!
-
Dev Diary Entry, 31st March 2021
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! Perhaps I’ll refocus it instead as a glorified RSS feed and publicise blog posts instead.
What I've been reading this week:
- Stop Using Icon Fonts - Currently working on an old project that uses icon fonts so this really resonates.
- Variants โ a quick tip for better React components - I immediately recognised this as something I’d fallen into and thought the solution was great.
- The Beauty Of Tiny Enhancements In CSS - Emphasizing the point that a site doesn’t have to look the same on every browser or device and this shouldn’t stop you using new features.
-
Dev Diary Entry, 24th March 2021
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!).
What I've been doing this week:
- Posted my first Figma-themed blog post, describing a method to create a border on one side of a rectangle
What I've been reading this week:
- front-of-the-front-end and back-of-the-front-end web development - A mouthful but it defines the classification of frontend development very well. I’m definitely more front.
- Oh Shit, Git!?! - This is a more useful resource than the handful of StackOverflow posts I revisit when I make a mistake in Git
-
Dev Diary Entry, 17th March 2021
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! Hopefully the post is clearer and more succint butt still sounds like something I’d write. It’s a luxury you only get if you own the writing: the ability to rewrite and republish!
What I've been doing this week:
- Updating the out-of-date version of my Trello Column Totals blog post
- Wondering whether to be dilligent and reread all the 90+ blog posts on clairecodes and check whether they are still accurate … probably not.
What I've been reading this week:
- How to Write Better Technical Content - So much good advice from Karl here, and I spent ages afterwards reading his other blog posts on draft.dev too!
-
Dev Diary Entry, 9th March 2021
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!
What I've been doing this week:
- Learning all about Variants in Figma. It makes building components much neater, even something as simple as a radio button with selected and unselected states.
What I've been reading this week:
- Do accessible websites still need to support Internet Explorer 11? - Yes according to the article, due to screen reader support.
- How to Fall In Love With Single Div Illustrations - Almost an introduction to the art of creating pictures with one div. I love this kind of thing!
What I've been watching this week:
- Figma Tutorial: Variants - From the Figma YouTube channel. Figma’s YouTube content is really well done and this is a great intro to Variants.
-
Dev Diary Entry, 24th February 2021
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. I try a 10 minute (beginners) yoga workout, or a 5 minute arm routine, or even just 12 squats when I need a pick-me-up.
What I've been doing this week:
- I’m currently spending more time dithering about my choice of static site generator than I am actually building the side-project it’s for!
What I've been reading this week:
- Tips for Focus Styles - Since reading this post last week I’ve already referred back to it. An excellent guide to focus styles.
- Dropping Support For IE11 Is Progressive Enhancement - By building a non-JS version for your site, you can serve it to IE11 users, still providing them a usable experience. Yes!
What I've been watching this week:
- Pushing Send Episode 22 โ Peter Cooper - I’m a long-time subscriber to Peter’s Cooper Press newsletters so I found this a fun listen about how it all began. The Pushing Send podcast is worth a subscribe too!
-
Dev Diary Entry, 16th February 2021
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.
What I've been doing this week:
- Publishing another blog post about customising front matter in Hugo posts. I intended on writing another Hugo themed post first but it raised another question about how accompplish something, which I though deserved its own post, hence why I wrote this one. Content creates content.
What I've been reading this week:
- Website Carbon Calculator - Ever wondered what the carbon footprint of your website is? Try this tool and find out!
- CSS Individual Transform Properties - A nice update to the
transform
syntax in CSS, plus I really appreciate the code snippet that shows how to progressivenly support this new feature.
What I've been watching this week:
- I’ve got at least four podcasts I want to listen to lately and I can never remember to listen to them!
-
Dev Diary Entry, 9th February 2021
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. If it ain’t broke, don’t rebuild it, as we should say in web development more often.
What I've been doing this week:
- Published my 2020 review - I’ve written three of these now and I ppst them later and later each year. I found quite a lot to talk about considering 2020 was the year that wasn’t
What I've been reading this week:
- Decent Patterns - As a lover of CSS gradients I found these patterns created by unicode characters really cute!
- Alt-Text as Poetry - Worth reading about the developers’ mission with this project, but also all the thought that went into their web design choices for the site.
- The Rules of Margin Collapse - I love Josh’s articles: they are unashamedly long and detailed but contain so much interactivity and joy when teaching a subject.
-
Dev Diary Entry, 2nd February 2021
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.What I've been doing this week:
- Font-face and Styled Components - Published my first blog post of the year. Nothing ground-breaking, just wanted to document a process for my future self (which is a really good reason to blog if you need one!).
What I've been reading this week:
- Alt vs Figcaption - Explains the difference between the two. Figcaptions that appear on a screen should be illustrative and editorial, whereas alt text is functional. I also learned that a blank alt makes screenreaders ignore images.
- Guidelines for choosing React Libraries - Useful points to consider before blindly installing another 3rd party library into your project.
- SuperTinyIcons GitHub Repo - Love the ethos behind this project and all the tiny code golfed SVG icons!
-
Dev Diary Entry, 27th January 2021
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.
What I've been doing this week:
- Making slow but steady progress in my 10 minutes writing per day habit. Mananged 3⁄7 last week.
What I've been reading this week:
- Naming Styled Components - an older article with a valid suggestion for naming styled-components: instead of ‘StyledElement’ use a namespace like ’S.Element’.
- Creating websites with prefers-reduced-data - a new media query that’s not supported yet but will be soon. Has a really thorough explanation of how to use and suggests some use cases: loading custom fonts, background images, video autoplay, or using infinite scroll.
- A placeholder is not a label HTMHell - I agree! Just use a label and input!
-
Dev Diary Entry, 20th January 2021
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! Maybe I should just be respectful of this very sophisticated piece of equipment, and use it at a desk instead of my lap on the sofa where it wouldn’t need so much protection.
What I've been doing this week:
- I’m determined to master SVG icons: to understand why they never look how I want them too! I’m learning a lot about viewBox this week and creating icons of my own in Figma and exporting them to practice.
What I've been reading this week:
- Parent accessibility - This was a fun read as a parent and a developer! It also contains a wonderful graphic explaining the difference between permanent, temporary and situational disabilities.
- No cookie for you - GitHub explains that they no longer have cookie banners because … they don’t use non-essential cookies! Sort of blew my mind.
What I've been watching this week:
- Figma in 5: Vectors I - I had to keep pausing to scribble down notes, I learnt so much from this video!
-
Dev Diary Entry, 12th January 2021
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. And this time round at least I’m working, so I get to spend some mental energy thinking about building websites instead of worrying about the world.
What I've been doing this week:
- Trying to rebuild a blogging habit by setting a timer for 10 minutes and spending it writing. I don’t manage it every day but when I do it works and end up typing for 20 minutes or more.
What I've been reading this week:
- Operator Lookup - I don’t bookmark many tools but this one I have: an explanation of all the operators in JavaScript made of symbols you can’t google., like “?.”
- Tailwind versus BEM - I love comparison pieces although I often finish them wondering which thing is better, like I did with this one!
-
Dev Diary Entry, 6th January 2021
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.
What I've been doing this week:
- Customising my terminal prompt:
claireparker-jones@Claires-MacBook-Air
just won’t cut it! My new MacBook is on Big Sur, which uses zsh as the default shell instead of bash. This meant I couldn’t easily copy-and-paste my existing custom prompt. It was a fun job though, and I’m pleased with the new format:date time | path relative to home | branch >
- Posted to Instagram again after a long hiatus. It’s nice to reconnect with my virtual pals during another lonely lockdown.
What I've been reading this week:
- Accessible icon links - This was a great reminder of how to create those little icon button-links correctly, but I particularly liked the way code snippets were commented with a warning as incomplete at the beginning of the post. Useful!
What I've been watching this week:
- Creating Digital Content, Ladybug Podcast - If you don’t listen to all of the episode (and you should, it’s really insightful if you’re a creator), just listen to the beginning where women talk about their huge numbers of followers and views and subscribers, without being apologetic or self-deprecating about it and just owning their success - it’s SO REFRESHING and I loved it. I want an entire podcast where it’s just successful women casually listing their achievements!
- Customising my terminal prompt:
-
Dev Diary Entry, 30th December 2020
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. 2021 goal is Consistent Content Creation.
What I've been doing this week:
- Not much - enjoying a two week break from work. Not being able to change my scenery has meant that changing my daily routine and the things I need to think about has been important in order to give my brain a rest and chance to recharge. Therefore I’ve been reading novels instead of dev blogs, and creating physical photo albums instead of blog posts.
-
Dev Diary Entry, 9th December 2020
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. I’m hoping that by selling my old one before Christmas I’ve maximised my profit!
What I've been doing this week:
- Setting up my new MacBook Air. Love the speed of a fresh laptop but hate hate hate setting it up: installing and logging in is so tedious!
- Accidentally making a Wiggles themed colour palette using coolors.co while creating designs at work - they use bold accessible colours for a reason I suppose!
What I've been reading this week:
- Whatโs the difference between Event Handlers & addEventListener in JS? - TIL: you can have multiple listeners but only one event handler on an element.
- React Community Stories - Loved this resource curated by Rachel Nabors sharing stories of devs working with React. One of my favourite things to do is read bio pages of tech bloggers so this is right up my street!
What I've been watching this week:
- Podcast 259: from web comics to React core with Rachel Nabors - Rachel’s journey into development is really interesting and worth a listen.
-
Dev Diary Entry, 1st December 2020
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. It always feels a little weird to create content on someone else’s platform and not have easy access to it. On the other hand, it was a friendly place to connect with people digitally, which I miss, so I might upload a new photo of my laptop soon.
What I've been reading this week:
- Write Errors That Don’t Make Me Think - This post contains an error message styleguide: not something I never knew I needed until now.
- Create a line break while maintaining inline status - Spoiler:
::after { content: '\A'}
. V. useful.
What I've been watching this week:
- Accessible Color Standards - Designing in the Browser - Una talks about all the helpful tools that Chrome has for choosing accessible colours for your website. I particularly like the lines on the colour picker that lets you know if the colour falls outside the WCAG ratios.
-
Dev Diary Entry, 25th November 2020
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. Maybe I’d grown too comfortable with web development - or maybe it has something to do with the 1 year old that keeps me up half the night ๐
What I've been doing this week:
- Making this Dev Diary page a little clearer to read by adding headings to this list section. I got to tinker with Hugo template design.
- Getting used to AutoLayout 3.0 in the latest Figma update. It mirrors flexbox principles more than the previous version, which makes life easier for me.
What I've been reading this week:
- The world needs a tech diet; here is how designers can help - I loved the design of this page as much as the message. We can avoid building dark patterns into our web apps.
- How to de-Google your site to make it faster and visitor friendly - A really useful overview of alternatives to Google-owned products in your website. Replacing Google Analytics is something I’d consider.
What I've been watching this week:
- Config Europe - The full playlist for Figma’s virtual Config Europe conference. A nice background and relevant to me to hear how other people create design systems, now that this is a big part of my job.
-
Dev Diary Entry, 10th November 2020
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.
- Which Way Round Should OK and Cancel Buttons Go? - I wrote a blog post about how I decided where to position the OK and Cancel buttons in a modal dialog. I’m doing much more UI work nowadays and minutae like this have become incredibly important to me!
- State-Switch Controls: The Infamous Case of the Mute Button - I have exactly the same problems with badly designed toggle buttons: is it on or off?
- How content creates content - One piece of content can create loads more content. Lots of inspiration and tips for tech bloggers here.
-
Dev Diary Entry, 3rd November 2020
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.
- Everything Developers Need To Know About Figma - I’ve been using Figma for four months and I had several epiphanies reading this article. This will make my day so much more streamlined!
- The Widening Responsibility for Front-End Developers - Chris Coyier’s longer pieces are always worth a read. Frontend development encompasses an overwhelming amount of responsibilities nowadays.
- 9 Tips of creating a readable website - The tips are useful but I’m here for the gorgeous layout.
-
Dev Diary Entry, 19th October 2020
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). Blame Mario for no content.
- What is the Value of Browser Diversity? - With the recent Mozilla layoffs, it’s important to understand how many companies can actually afford to create browsers and be aware of which one you’re using.
- Don’t Copy Paste Into A Shell - Useful quick tip, never trust anything on the web!
- Going Viral as a Woman in Tech - I always feel a bit sick reading about experiences like this and it completely discourages me from being visible on the internet. Why should you be subject to abuse just because you’re a woman?
-
Dev Diary Entry, 2nd September 2020
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 ๐ค
- Today I learned that HTML may not do much on mobile browsers - Safari on iOS doesn’t render
<abbr>
tags! - Webwaste - Ever considered how wasteful a website can be in terms of unnecessary content? After reading this article I’m rethinking inserting any images on a webpage unless absolutely essential!
- Today I learned that HTML may not do much on mobile browsers - Safari on iOS doesn’t render
-
Dev Diary Entry, 24th July 2020
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.
- HTMHell special: close buttons - This is another topic that should be on a Frontend Dev 101 course, it shouldn’t be that hard!
- Background Patterns, Simplified by Conic Gradients - I love seeing older frontend techniques updated with new technology, especially CSS patterns like this.
- Pixels vs. Relative Units in CSS: why itโs still a big deal - A good resource, and something I’ll revisit as I tend to unquestioningly use pixels everywhere.
-
Dev Diary Entry, 15th July 2020
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. It’s finally worked out well after all these months of uncertainty (I got laid off nearly a year ago at the beginning of my maternity leave). In the meantime, a new routine, a new project, a new team and a new operating system (Windows instead of Mac ๐ฑ) to get used to.
-
Dev Diary Entry, 23rd June 2020
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!
- I finally allowed users to pinch and zoom into this website by removing
maximum-scale=1
from the meta tag. I ran a Lighthouse audit through Chrome and discovered this mistake - not sure why I wasn’t allowing users to zoom except I’d copied and pasted the tag from somewhere. - Atomic CSS-in-JS - A good primer on the subject and it’s made me want to try TailwindCSS in a project!
- The case for * { margin: 20px } - Maybe not something I’d do but an interesting approach to a site’s layout.
- I finally allowed users to pinch and zoom into this website by removing
-
Dev Diary Entry, 16th June 2020
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!. I’ve started with a course on CSS Grid because I’ve been making excuses about learning it thoroughly for 2 years now.
- Using target=’_blank’ the right way - This is a common security vulnerability that is easy to fix. Add
rel='noopener noreferrer'
to any_blank
links. I don’t open my links in new tabs normally but noticed that my RSS feed was set to do this, so I added those attributes. - Better (more accessible) active link styling - Explains that when you highlight a link with CSS to say ‘you are on this page’, screen readers don’t benefit from this and suggests using
aria-current
instead. I definitely want to do this on my website! - Form design: multiple inputs versus one input - Adam’s posts are always so interesting and this article reasons why using one input field is often more user-friendly.
- Using target=’_blank’ the right way - This is a common security vulnerability that is easy to fix. Add
-
Dev Diary Entry, 9th June 2020
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.
- I wrote a Family Fortunes style app for my family quiz night (or Family Feud if you’re in the US). I used the Vue CLI which is the Vue equivalent to create-react-app. I found it really easy and pleasant to use, and the Family Fortunes round of my quiz was a success!
- Exciting Things on the Horizon For CSS Layout - I didn’t know that there is a ‘gap’ property for CSS Flexbox, just as in Grid.
- Just how bad is the ICOโs draft age appropriate design code? - The article explains how awful the code would be for UK business if it got through.
-
Dev Diary Entry, 2nd June 2020
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.
- I added
scroll-behavior: smooth
to this site for a nicer scrolling animation and also added a media query for those that prefer reduced motion. - Stop setting the language of your website based on user location - I agree with this post, instead use the browser’s or system’s language.
- When (not) to use the
<br>
element - Only use<br>
for separating text in things like poems or addresses, and not as an impromptu paragraph.
- I added
-
Dev Diary Entry, 26 May 2020
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!
- CSS Transitions for Multiple Properties on One Element - I published something at last! A 2 minute read on something I stumbled with in CSS a few weeks ago.
- Modern CSS Solutions - I love this series by Stephanie Eckles and especially the post Totally Custom List Styles which offers an alternative to my emoji bullet point solution.
- I redesigned the footer on this site. I had a long row of text-less icons for each of my social profiles (e.g. LinkedIn, GitHub, Twitter). I changed them to a grid layout with some hopefully more helpful text next to them. Perhaps I have too many links I want to share, but with this design I hope it’s clearer what site visitors could do if they click on them.
-
Dev Diary Entry, 19th May 2020
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. ๐ค
- I decided to look at the outline colour of focussed links on clairecodes.com and see if I could improve the contrast. It’s perfectly valid to leave this as it is (i.e. that pale blue in Chrome) but why not make it better? I ended up using a different colour depending on the background of the site, i.e. the header and footer links against a purple backdrop need a different colour than my body text that uses a white background.
- LCH colors in CSS: what, why, and how? - ‘We have no access to one third of the colors in most modern monitors.’ Using LCH colours means we’ll get about 50% more colours than we already do!
- Using CSS to Control Text Selection - Explaining the
user-select
CSS property which I was unfamiliar with. - Gardened. - A really thought-provoking post where the author explains how to create a well-built website you have to go above and beyond, and creating the bare-minimum generally doesn’t offer a good experience. I’ve thought about this a lot myself and agree.
-
Dev Diary Entry, 12th May 2020
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.
- 8 Common Image Alt Text Mistakes to Stop Making - Writing useful alt text for images is difficult but this post gave some good pointers.
- Understanding Browser and Device Fragmentation [A Deep Dive] - A good introduction to the broadness of browser combinations but the post ending up being overwhelming and didn’t offer any useful takeaway.
- Userscripts Are Fun And Are Still Very Much Relevant - I forgot about userscripts, which are a nice mid-point between bookmarks and browser extensions.
-
Dev Diary Entry, 5th May 2020
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! Maybe one day I’ll be back in an office with other adults but some days it feels a long way off ๐
- Using easing for more than just CSS transitions - Another gradient trick: use easing to create smoother gradients.
- Color gradient generator - A gradient generator with a pretty UI.
- Writing my accessibility statement. - I’d never heard of accessibility statements before reading this and they’re a nice idea.
-
Dev Diary Entry, 28th April 2020
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.
- This week I added a skip link to my blog. As a keyboard user you can skip repetitive areas of a website, i.e. navigation, by using the tab key when you enter a new page. This shows a previously invisible link that, when selected, moves the page focus to the main portion of the page. Test it out on any page with your keyboard. The style was inspired by GOV.UK’s skip link.
- Another change to my site this week was improving the colour contrast of some of my buttons. This applies mainly to the ones in the footer which I hadn’t customised since changing my footer design last year. This tool from aditus does all the hard work for you in checking the contrast ratio with your buttons against different backgrounds.
- A Dao of Web Design - This alistapart article was written in 2000 but its subject of designing adaptable webpages is still relevant today 20 years later. Definitely worth a read.
- Google to phase out user-agent strings in Chrome - I’m glad user-agent strings are going away as I always found them inconsistent and confusing to work with. They will be replaced with ‘client hints’ and the other major browsers are likely to follow suit.
-
Dev Diary Entry, 21st April 2020
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. I want to work through my huge “Watch Later” playlist on YouTube of conference talks so I’ve started putting one on in the background when I’m cooking or doing housework. Same time next week!
- Linkinator - I used this nifty tool (using npx in the terminal) to check whether any links in my Dev Diary page were broke and found a couple of typos for clairecodes.com links, oops!
- Styled Components vs. CSS Stylesheets - This was a thorough comparison between the pros and cons of each approach and by the end I couldn’t decide myself which was best to use.
- Enhancing The Clickable Area Size - Not enough clickable space around links and icons is an issue I see on sites and apps all the time ๐ค This post should be essential reading for frontend developers and also the QAs that test their work.
-
Dev Diary Entry, 14 April 2020
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.
- I changed the colour of links on this website to a darker blue. I didn’t realise it but the pale blue (#1E88E5) I was using gave a poor colour contrast against my white (#FFF) background that didn’t meet the WCAG 2.0 level AA. Now with #391FE7 it’s AAA.
- Why the GOV.UK Design System team changed the input type for numbers - The digital teams at GOV.UK do some great work, including this on why they moved away from the input type for numbers and replaced it with ‘inputmode’.
- The problem with snackbars and what to use instead - Snackbars are the little tooltips of information that appear and disappear as you interact with a page. I’d always felt they were sometimes unhelpful because they vanish so quickly and this post gives a lot of good reasons to avoid them.
- whocanuse.com - This is another great tool for working with colour contrast and gives additional information on different vision types than my go-to WebAIM one.
-
Dev Diary Entry, 7th April 2020
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?
- I had a fan-girl moment when Chris Coyier liked my article about CSS polka dot backgrounds on Dev.to and followed me. He also followed me on Codepen and my polka dot pen made it to the homepage of picked pens! This was something I wrote back in summer 2018 which shows content can build traction over time :) I’ve noticed the polka dot post has received much more interaction lately and I’d love to know why!
- I added the <article> HTML tag to my blog after reading Why You Should Choose HTML5 article Over section. Content within the article tag should be standalone and able to be syndicated in another place, which lends itself well to blog posts.
- New media queries you need to know - I love all these new media queries, like prefers-reduced-data and dark-mode ones, but it makes me wonder how they would ever get implemented on a product without a lot of input from informed frontend developers?
-
Dev Diary Entry, 31st March 2020
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!
- I published my first blog post for ages called How to Reverse Ordered List Counters in HTML. A quick simple tip to get me back into writing.
- Coding Challenge: Dancing with CSS - I love this effect of layering a gif behind text.
- How We Created a Static Site That Generates Tartan Patterns in SVG - The project that this post describes tartanify.com is so cool and inspires me to create fun things for the web.
- Avoiding jagged edges on gradients - I wish there were more short blog posts straight to the point like this, and also about CSS gradients ๐
-
Dev Diary Entry, 24th March 2020
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.
- Emoji Shortcode Roulette - I made a single-page site that generates a random emoji and its accompanying GitHub shortcode for fun.
- The two-value syntax of the CSS Display property - The display property in CSS is being refactored, so that flex => block flex and inline-flex => inline flex. This is only available in Firefox right now and should make this property easier to understand.
- Make your test fail - When doing TDD always begin with a failing test and then fix it, don’t skip straight to green. I’ve been guilty of this myself.
- Inspiring high school students with HTML and CSS - I liked the author states she wants to be a visible female role model for girls. The author made a good point in that there isn’t an easy way to be exposed to web dev, as most platforms girls use nowadays are customisation-free unlike MySpace etc in the old days.
-
Dev Diary Entry, 15th March 2020
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.
- A love letter to my website - A reminder that there is more to the web than internet shopping.
- Multi-line gradient links - I love anything to do with using CSS gradients.
- Roles and relationships - The post itself is interesting, explaining roles in aria, but I like this mainly for the fun opening paragraph!
-
Dev Diary Entry, 27th February 2020
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!
- I attended a full day of speaker training in Manchester as part of being accepted onto UpFront Conf’s underrepresented speaker program with five other speakers. It was very useful and I’ve near enough got my talk laid out six weeks in advance!
- Achievements Unlocked in 2019 - I belatedly posted my own year in review post. Spoiler: I had a baby.
- Zell Liew’s 2019 review - I love reading other developer’s annual review posts, and this one also surprisingly featured candid confessions about being a new parent which I loved reading.
- Microbrowsers are Everywhere - all about those little site previews you see in chat apps and on social media.
-
Dev Diary Entry, 27th January 2020
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!
- Why bother with What Three Words? - I liked the idea of What Three Words when I first heard about but this post provides a more critical look at it.
- Stop Infinite Scrolling on Your Website - Now! - I really hate infinite scroll because I’m often searching for the footer that I can never reach! This post gives this and more reasons why not to use it.
- Understanding the โInitialโ, โInheritโ and โUnsetโ CSS Keywords - a real ‘Today I Learned’ moment in CSS for me!
-
Dev Diary Entry, 7th January 2020
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.
- I’ve added a new newsletter to my subscriptions called Developer Avocados. It’s targetted towards developer advocates but I’m picking up lots of useful links about public speaking
- โLink In Bioโ is a slow knife - an insightful piece about how certain platforms limit the use of external hyperlinks.
- Drawing Homer Simpson using circles in CSS - I love CSS art and I love The Simpsons, what more can I say?
-
Dev Diary Entry, 20th December 2019
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!
- What Does a Coder Do If They Can’t Type? - I didn’t know what the possibilities were if you couldn’t use your hands to type, so this post was fascinating and enlightening.
- Optional Chaining in JavaScript - this is a cool language additional that isn’t well supported yet (MDN docs) but would save a lot of keystroke.
- I set up an EC2 instance with AWS using a CloudFormation script to host a Wordpress website (with the help of my AWS expert husband). Quick and impressive, although the UI was busy and overwhelming for newbie.
-
Dev Diary Entry, 26th November 2019
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.
- I took a skills quiz on LinkedIn for CSS and got the 70% required to pass: I know a multiple choice quiz doesn’t prove your technical ability but it was a nice confidence boost nonetheless.
- A Business Case for Dropping Internet Explorer - a couple of really interesting angles, including that it discourages developer innovation and adoption of new tech by being restrained by older browsers.
- How to remove condescending language from documentation - introduces the alex linter that points out language like ‘easily’ or ‘just’, definitely one to add to my blog workflow.
-
Dev Diary Entry, 19th November 2019
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!
- I optimised the way I serve my Google fonts for this site, using this Smashing Magazine article as a guide: Optimizing Google Fonts Performance
- The problem with tooltips and what to do instead - I knew tooltips were problematic for many users already, but this article gives lots of practical alternatives too.
-
Dev Diary Entry, 13th November 2019
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.
- I posted a short post about the difference between using the spacebar and enter key when navigating a website using the keyboard - mostly to remind myself of their roles as I always forget.
- I realised that I find it difficult to come up with short succinct titles for technical blog posts ๐
- I started a website for a friend’s business idea. I think I’ll use Wordpress because they’ll want to add their own content. I have very minimal experience with Wordpress so far which will make it a fun project.
- Everything You Need to Know About Date in JavaScript - sometimes CSS Tricks posts are more comprehensive and useful than MDN. MDN and CSS Tricks are my go-to resources for frontend knowledge.
-
Dev Diary Entry, 5th November 2019
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. All the recruiters I’ve messaged on LinkedIn go mysteriously quiet when I mention the word “part-time”. Have I ever told you I hate dealing with recruiters?
- I’ve given this website a new lick of paint. Picking the perfect font combination takes me months!
- I’ve added a Work History page to this site so that users don’t need to navigate to LinkedIn to see my job history. Plus, it keeps me in possession of my own data and I can customise it.
- The current state of styling selects in 2019 - I’ve always found selects very limiting and difficult to customise.
-
Dev Diary Entry, 25th September 2019
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.
- doggo ipsum - definitely bookmarking this for the next time I need placeholder text
- It’s probably because I know I want to do Blogtober, but I haven’t been motivated to blog recently. Instagram has also taken a back seat. Which is all fine because it’s normal to have peaks and troughs in motivation for hobbies
- The CSS background-image property as an anti-pattern - I bookmarked this a while ago and since I don’t post Dev Diary entries very regularly at the moment, I can’t remember why! Still a good lesson though.
-
Dev Diary Entry, 16th August 2019
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.
- Published a short blog musing about committing to a blogging goal “seasonally”
- Came across another personal site where the author was doing something similar to my Dev Diary for the first time ever! They called it “Weeknotes” (I forgot to note the url).
- Posted on Instagram about overusing exclamation marks in my writing - definitely something I need to keep an eye on as I think it’s the written equivalent of meek and submissive body language.
- Bringing A Healthy Code Review Mindset To Your Team - there are so many good points in this article, particularly the one saying that code reviews should take a long time and you should check branches out on your own machine to thoroughly test them.
-
Dev Diary Entry, 6th August 2019
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.
- I’m trying to standardise my handles across different sites and services to be the same, i.e. to be ‘clairecodes’ or my married name. This week I’ve done dev.to and GitHub - I have a feeling I’ll find incorrect GitHub references for a long time to come!
- I posted to Instagram for the first time since I had my son and gave a life update to all my internet pals.
- Why I No Longer Provide Free Disability Access Advice - a little bit disheartening but powerful.
-
Dev Diary Entry, 31st July 2019
๐ 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.
- I was feeling daft about thinking about work/coding while on maternity leave, until I learnt that in the USA women generally only get 6 weeks maternity leave (compared to 1 year in the UK!). Thanks to the comments on my maternity leave Instagram post.
- Wrapping long words with CSS or HTML - I’d never come across the
<wbr>
tag or the­
soft hyphen entity before. - Building the most inaccessible site possible with a perfect Lighthouse score - a really interesting experiment, and again shows that an automated score doesn’t mean that your website it usable or accessible.
-
Dev Diary Entry, 28th May 2019
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.
- I kept up my GitHub streak for most of last week with my Vue side-project but decided to let it go over the weekend. I’ll still continue with the side-project but found myself forcing small commits just for the green squares - the fun had gone from it!
- I posted a blog post musing about CV-Driven-Development. I’d like to write more wordy, opinion-based posts but get lost in them. I definitely don’t feel confident enough to cross-post this one anywhere, for example. Practice makes perfect though.
-
Dev Diary Entry, 21st May 2019
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.
- I started a new side-project with VueJS and love it! It is so easy to get started with compared to React. I’ve found an Egghead course to go over the basics more thoroughly which I’ll try this week too.
- I’ve never needed to copy anything to the clipboard before using JavaScript, but finally found an excuse with my side-project. I’ve always wanted to try clipboardJS which is nice wrapper around the DOM methods and found it very simple to implement.
-
Dev Diary Entry, 14th May 2019
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.
- To practise Gatsby I started a blog about Magento 1 last year. I don’t have any new posts to write now I don’t work with Magento but I upgraded it this week from Gatsby v1 to v2, which took longer than I anticipated.
- 10 questions you should ask in a web dev interview - these are really important: I personally never ask enough about how projects are managed in an interview and it’s a pivotal part of your day-to-day role.
- Do you want Beyonce styled colour-themes for your code editor? Mina Markham has an entire repo for different programs!
- In defense of the ternary statement - there is a lot of fear around ternaries but I agree with this post that they aren’t that scary.
-
Dev Diary Entry, 7th May 2019
- I’ve added meta descriptions to each page on my site. The hardest bit is deciding what to write!
- There’s a few different ways that you can add a meta description to a layout in a Hugo site depending on the page type, so I blogged about it here for reference.
- According to my Google Analytics, I’m getting a lot of traffic through organic searches for the first time since I’ve started this site! Mainly to a very old article about deploying an Angular 1 app on Heroku, and also to creating a polka dot background with CSS.
- On Cultural Stagnation - worth a read as a manager or as someone lower down the food chain. I want to bookmark the list of things to look out for in your next job at the bottom of the post.
- No hello - a small site dedicated to teaching people not to start online chats with ‘hello’ or ‘hi’ then wait five minutes while you write out the actual reason behind the message. I totally agree and hate it when people do this, especially my line manager!
- Controlling leftover grid items - I am definitely still a beginner with CSS Grid so these techniques are handy to know.
-
Dev Diary Entry, 30th April 2019
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 ๐ค
- I wrote a new blog post about how to replace normal bullet points with emoji and cross-posted to dev.to - got a lot of positive reactions if not a lot of views!
- I finished the official Google Analytics for Beginners course. It was kind of helpful (and didn’t take too long) but basic since I’m familiar with the Analytics dashboard already. I’m still keen to improve me SEO so I think I’ll take the next course soon.
- I watched the Egghead course Converting Sass to CSS-in-JS. I regularly use CSS-in-JS at work with a library but have a Sass background so this was interesting to me. The course doesn’t use a library, but instead explains how to implement CSS-in-JS from scratch, which demystified the whole concept for me. It offers a way to write an app without Sass but still with the power of Sass. There are replacements for variables, mixins (an arrow function), default parameters, non-required argument order and variable numbers of arguments using the rest operator.
- Variable fonts - a good introduction to the subject, but I particularly liked his gist for system fallback fonts.
- Sans Forgetica is a font that was designed to help you remember your notes better - what a cool concept!
-
Dev Diary Entry, 23rd April 2019
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.
- I posted a blog about the universal selector in CSS
*
and got a good reaction from the dev.to community when I cross-posted it. It got tweeted out on their main account (๐ internet points!) and I earned a badge for my account for posting an article for four weeks in a row! (I posted it at 23:50 on Sunday night too! ๐คญ) It was especially satisfying because it took me ages to write: I knew roughly what I wanted to say but couldn’t get it to read well, and it took more time to research than I thought). - I wrote up an issue I was having with Liquid tags in
pre
blocks in a blog post. It was very specific to my GitHub Pages/deployment setup so I didn’t cross-post it anywhere but it might help someone! - Building a dependency free site by Michelle Barker - an interesting experiment, but I really liked how Michelle admitted that she wouldn’t stop using Sass for a while yet: I see more and more devs denouncing Sass lately.
- How to avoid the boolean trap when designing React components - gave me food for thought about Booleans and how they can be overused and indicate additional complexity in your components.
- Finally a CSS only solution to hover on touchscreens - this has been an issue for a long time! Nice to see progress being made.
- I posted a blog about the universal selector in CSS
-
Dev Diary Entry, 16th April 2019
I’ve been off work sick this week so haven’t managed much. Damn my pregnant immune system!
- I went on a couple of free SEO site checkers this week for clairecodes.com and noticed I didn’t have a robots.txt or any meta descriptions tags. They were low-handing fruits to fix.
- I wrote a new blog post about how to selectively ignore Prettier across your project. I posted it on this blog and cross-posted on dev.to as well - it was tweeted out by their main account and I earned all the Internet Points ๐
-
Dev Diary Entry, 9th April 2019
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.
- I worked through EggHead’s course on npx and made some notes about it. I’ll definitely be using the
npx
command. - I had an idea for a custom Hugo theme and started working on that. It’s good to get into styling again and this will also give me an opportunity to work on my design skills.
- I worked out how to get Sass compilation running on a Hugo site using a template function and pipes thanks to this blog post. This has meant I’ve deleted a convoluted npm script from my personal blog and simplified my process for writing styles ๐
- I don’t hate arrow functions - Kyle Simpson explains his opinions on arrow functions in this post but I found the most important takeaway was his discussion on having informed opinions on programming concepts. He emphasized being able to discuss things sensibly and being open to changing your opinion. Programmers needs lots of reminders about this!
- I worked through EggHead’s course on npx and made some notes about it. I’ll definitely be using the
-
Dev Diary Entry, 2nd April 2019
- I published a new blog post this week, all about a problem I was having making archetypes work in this blog (spoiler: it was to do with the file extension of my markdown file)
- I’ve been looking at tree-shaking with lodash in work and came across this blog. The blog itself was good but I really liked the warning at the top of the article that reminds you that best practices change regularly - a nice touch from the author.
- Why can’t I set the font size of a visited link - because of security! Really interesting post that explains why you can’t do certain styles using the ‘:visited’ pseudo selector.
- Improving the keyboard accessibility of CodePen embeds - the author suggested some changes that you can make in your own site to improve a11y which was a different way of looking at the problem to me, i.e. assuming someone else will fix it.
-
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. There was a good one about community building by someone who works on the team maintaining the GOV.UK design guide, and a talk about a11y that I thought would repeat everything I’d heard before, but had an entertaining and informative take on it instead. A conference is always a long day, but worth it to me and I get lots of good ideas for social media posts!
- I cross-posted this 6 month old blog post about the benefits of using email newsletters for keeping up-to-date with web dev on dev.to. It took ages for me to edit and ended up being a lot shorter than the original. I hope I can get quicker and editing and pressing the ‘post’ button with blog posts! I also hope I can come up with shorter titles ๐ฉ
-
Dev Diary Entry, 19th March 2019
- I started reading ‘Animating SVGs’ by Sarah Drasner (O’Reilly). I really want to get a grip on SVGs and the first chapter alone was useful for explaining the viewbox and viewport concepts thoroughly for me.
- I posted a new blog post! The difference between the dependencies and devDependencies keys in package.json files.
- Make it boring - a blog post about how the tools you use to build a website should be less exciting than the thing you’re building. In web dev it’s easy to get caught up in the toolchain and forget about the actual product you’re building.
- I had a weird moment when reading this blog called 21 ways to optimise your CSS - I found so much of the advice flat out wrong and against everything I’d advise someone to do with CSS. Much of the info wasn’t backed up with sound reasoning either IMO. I’d never read a technical article I strongly disagreed on before!
-
Dev Diary Entry, 12th March 2019
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 ๐
- Links that don’t go anywhere should be buttons - a reminder from Christian Heilmann on when to use
<a>
tags or<button>
tags that I think everyone needs a refresher on annually! - Paint the Picture Not the Frame - an article about leaving the basic functionality of the browser alone in order not to disrupt the user experience. CSS Tricks currently have a design that change the design of the scrollbar, which I’m not a fan of, and one of my pet peeves is when websites tamper with the scroll speed of a page.
- Links that don’t go anywhere should be buttons - a reminder from Christian Heilmann on when to use
-
Dev Diary Entry, 5th March 2019
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 ๐ค
- I follow Women In Tech PGH on Instagram and they also run an inspiring newsletter. This post on why you should tweet as a woman in tech resonated with me as although I don’t use Twitter much, I started the @claire_codes Instagram account mostly to be visible in the dev community.
- https://semver.npmjs.com - this is such a useful tool for calculating the ranges covered by your semver syntax in your package.json.
- It’s International Women’s Day on Friday 8th March and dev.to are encouraging everyone (ladies and allies) to publish posts celebrating their achievements in the community with this post.
-
Dev Diary Entry, 28th February 2019
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. Sometimes it’s most productive for your well-being to not do anything at all.
-
Dev Diary Entry, 19th February 2019
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! Coding is my day-job as well as my evening hobby, so sometimes I just need a break when I get home from the office.
I’m going on holiday later this week ๐ด and I’ll take my laptop with me (I always travel with it) but we’ll see whether I end up using it much!
-
Dev Diary Entry, 13th February 2019
- I converted this page from being named ‘Interesting’ to ‘Dev Diary’, because it’s more descriptive. I’ve been meaning to do this for a while and it was satisfying to tick off the list.
- I published a blog post listing all the Internet Points I earned in 2018 so I can keep track of them and make myself feel better on those days when I doubt my skills.
- 230 New Emoji Announced for 2019 - we’re getting waffles, sloths, otters and loads more in this year’s Emoji 12 release! ๐
- The Great Divide, CSS Tricks - an excellent piece that hits the nail on the head for me in terms of how the term ‘frontend developer’ is too broad and unspecific as a job description. Instead developers tend to specialise in JavaScript or in the UI/UX side of things (personally I want to be more UI/UX orientated).
-
Dev Diary Entry, 5th February 2019
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 ๐
- I got a lot of comments on my last blog post about how to prevent pasting into input fields. Users don’t like this feature!
- I made an Instagram post reviewing my developer skills for the 10 year challenge that’s viral on social media at the moment. There is quite a difference!
- Convert a string to a number in JavaScript - I didn’t realise there was a different between
NaN
andNumber.NaN
in JavaScript, although I’m not surprised either! - Adding generators to your Gatsby site with plop - this is a useful tool and I’d like to do it for this Hugo blog since I can’t get archetypes to work!
- Dissecting Front-end Job Titles - this is an interesting explanation of different job titles in the frontend sector.
-
Interests 31st January 2019
- I published a couple of new blog posts this week: one about why to write blog posts for yourself first and another about how to prevent the paste function in form fields. The latter has already got quite a few strongly-opinionated comments on dev.to where I cross-post.
- Things I don’t know by Dan Abramov - a refreshingly brave post from the creator of React reminding us that nobody knows it all.
- Styling buttons - a useful explanation of how to style buttons as links and vice versa.
- Axessified Instagram - it’s really positive that you can now add alt-text to your Instagram images. Here Axess Lab add some ways that Instagram can make their app more accessible.
-
Interests 16th January 2019
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. I now write an opinion on each blog post I read rather than “this was interesting”. So now this page feels more like a journal to me. This week I’ll rename the page to Dev Diary and rejig the layout, maybe adding some pagination to deal with all the entries I’ve accumulated.
- Why canโt we use Functional CSS and regular CSS at the same time? - a really interesting discussion on CSS classnames.
- โฌIn what way is JS any more maintainable than CSS? - a gist explaining why this person likes CSS-in-JS. After using it for 9 months, I’m used to it but not completely sold on it yet.
- event-stream vulnerability explained - there was another npm package vulnerability last year. This post explains but it also suggests forking off popular packages and maintaining them yourself rather than blindly relying on 3rd partys to keep you safe.
-
Interests 8th January 2019
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.
- Top 12 Things That Destroy Developer Productivity, Hackernoon - Number 8 on this list really resonated with me because of the project I’m working on at work right now. If the features you build aren’t being used (no users) then this really kills motivation.
- Reluctant Gatekeeping: The Problem With Full Stack - anything by Heydon Pickering is worth a read, especially this piece about devaluing CSS within the frontend.
- The Gift of Giving Up - the ultimate result of this post is that a developer team put the user experience before their own (i.e. having a shiny new codebase to work with) which is not something you come across very often!
-
Interests 23rd November 2018
- I attended another conference: Halfstack in London and had a great time. The gist of the conference for me was: you can do anything you like with JavaScript ๐ฏโโ๏ธ
- I started a side-project to collect CSS patterns (much like Lea Verouโs pattern gallery) and used React Router. (Still a work in progress.)
- This blog post about the em tag was interesting - I enjoy learning about the correct use of semantic HTML tags.
- This post was a thorough introduction to pair programming and the different styles.
-
Interests 13th November 2018
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.
- ๐ฝ I went to dotCSS in Paris
- ๐ The new MacOS Mojave has a dark mode, and you can style your webpage depending on whether your users have it turned on with CSS in Safari
- โ๏ธ I enjoyed this blog post about JavaScript object property order but really like Stefan’s website and his ‘Today I learned’ section.
- ๐ I started reading the Working With Static Sites book and was interested to see how many static site generators exist according to this website.
- โจ๏ธ I learnt the power of Emmet shortcuts for writing repetitive HTML.
- ๐พ I did a 100 days of CSS challenge for number 47 with this CodePen.
-
Interests 7th November 2018
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!
- ๐Blogtober finished over a week ago and I completely lost interest in it over the last few days … it was a tough challenge towards the end but I’m glad to have finished so many half-completed blog posts that were languishing on my hard drive! I’ll be writing a summary post soon.
- ๐ฑ I love this app that tells you how long a technology has been out for: it helps avoids recruiters asking for ten years of React experience!
- ๐ชI made a small PR to the project to add Redux and Magento to it - since this was in October it meant that I actually made a PR for Hacktoberfest! (Only need four more for my t-shirt โฆ )
- โจ Border radius can take loads of values, which this project illustrates really well.
- ๐ก I drew a shield in Codepen using only CSS. I achieved the shape by using border-radius like in the project above.
-
Interests 23rd October 2018
- ๐ Nearly three quarters of the way through Blogtober. I didnโt manage to get as much written this week as Iโd like, and was 7 posts behind at one point! This is definitely forcing me to write shorter and more concise posts, and even split some post ideas into two. This is good though - short concise posts are easier to read. All my Blogtober posts are listed here.
- ๐ I published a Chrome extension on the Chrome store this week! The extension itself is fairly trivial: it reverses the current order of your tabs - it’s called ‘Sbat tabs’ geddit? It took longer than I expected to publish though! Making the icon and a screenshot for the Chrome store was harder for me than writing code.
- ๐ This post by Brad Frost talked about the pros and cons of nesting selectors in Sass, and seemed to conclude with how difficult they are to search for if the
&
selector is used. - โก๏ธ I used a couple of techniques from this blog post to make my HTML in blog posts more semantic this week: the
<kbd>
element when explaining keyboard shortcuts (seen here), and the<abbr>
for acronyms (used here). - ๐ฅ I revisited this CSS Tricks blog post for ideas on screen recording for blog posts. Iโve settled on Giphy Capture for now, which you can see in action in this blog post.
-
Interests 16th October 2018
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”. No one (except myself) had ever called me a blogger before and I was chuffed to see it in real life! I like being a blogger and Iโm going to call myself this more often. Thanks Leah for this confidence boost!
- ๐ I’m still doing Blogtober! I wrote 6 posts this week, links to them are on this page.
- ๐ WebAIM now provide a link contrast checker in addition to their already great colour contrast checker
- ๐ Have you ever considered how much energy web tech consumes? This post from Low Tech magazine is solar-powered (and thought-provoking)
- โจ This post from Dave Ceddia had some great ideas for React practice projects
-
Interests 9th October 2018
- ๐ Blogtober is going โฆ OK? As of 8th October I had 4 published blog posts. Even though Iโm not posting every day as I intended, Iโm really happy with the content Iโve published so far. You can find a list of all my posts here.
- โจ This careers poster from Finding Ada is amazing! It explains all the different technology careers other than just as a programmer.
- ๐ Thereโs a bug in Chrome (and others) where emoji donโt display correctly over a certain font-size. At least Iโm not the only one whoโs noticed this!
- ๐ This was a really well written blog post about modular CSS
-
Interests 4th October 2018
I’ve been on holiday this week, so all my weekly development themed newsletters are backing up in my inbox.
- ๐ธ Getting a viral Instagram post with this shot of my GitHub contributions dashboard. It went bonkers for likes and comments!
- ๐ซ Gaining lots of new people to follow on Github from the caption of the aforementioned photo. I’ve been feeling lonely on my GitHub newsfeed for what feels like years, and I thought the best solution was to ask my Instafam for some help! It worked out really well! ๐
- ๐ I want to do Blogtober, but it’s not going well with my holiday right at the beginning of October! We’ll see if I can catch up over the next few days.
- ๐ฅ
create-react-app
has released version 2 which is very exciting! I’ll be upgrading my sandbox React app to take advantage of all the new features ASAP!
-
Interests 25th September 2018
- โ๏ธ I’m on a roll with blogging and got another one out this week, this time about using Jest snapshots to test things other than React components.
- ๐ I’m a huge fan of small, frequent commits, so I loved the message of this blog post: ‘Do your commits pass this simple test?‘
- ๐ค Did you know there are other whitespace codes in HTML other than
?? I didn’t, so this StackOverflow answer was really enlightening. - ๐ค And the
<samp>
HTML element, ever come across that before?? Nope, me neither. - โจ Reading wise words from Chris Coyer about dogmatism in the web development world. There’s no right answer people!
-
Interests 18th September 2018
- ๐ I’ve downloaded Inkscape and started working through some beginner tutorials from Logos by Nick’s Youtube channel. I’m really enjoying being a complete n00b with a tool like this again and can’t wait to start creating my own SVG icons with it.
- โ๏ธ I’ve written two more blog posts this week, one about my Prettier setup and another about how to customise styled-components. I’ve started tracking which blog posts I want to write on a Trello board and this is helping me be more productive.
- ๐ Sara Souieden has inspired me twice, once to convert my hex to hsl colour values and again to just write.
- ๐ I’ve written unit tests for Sass in the past and it’s great to see other people doing it too.
- ๐ This blog post about why it’s important to have browser diversity is a must-read for any web developer.
- ๐ I wish I knew this trick to inspect elements that hide when inactive a couple of years ago!
-
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. It’s been a full 3 months on here since I last wrote a blog post!
- โ๏ธ I finally wrote a blog post about how arrays are interpreted in template literals in JavaScript.
- โ๏ธ I made a page of links pointing to my different profiles on the web to use in my Instagram bio. This is like the Linktree service, but I wrote it myself and have full control over it.
- ๐ All of the gov.uk posts about accessibility are interesting, but the bit that stuck out in this post about users who change colours on websites was about how you can’t even create a triangle with the CSS border technique and assume your users will see it - take nothing for granted!
- ๐ This blog post called “The Web is Made of Edge Cases” reiterates this and is a good reminder to build resilient sites.
- ๐ I enjoyed reading this blog post about creating accessible web comics.
- โก๏ธ Sara Soueidan’s post was very pertinent and inspiring: just write that blog post!!
-
2018-07-18
- โ๏ธ I drew a bee using only CSS and HTML. I used a linear-gradient for the stripes, and made a triangle with borders, plus some other cool tricks. It was then chosen by Codepen as one of their Picked Pens and appeared on the homepage briefly! ๐คฉ
- โก๏ธ I was heavily inspired by this amazing piece of CSS art for my bee.
- ๐ I read this blog post about why itโs a good idea to hire junior developers instead of sticking to seniors. The insistence on only hiring seniors in our industry and not investing time in training juniors is something that really winds me up so this post was a welcome break.
- ๐ I read this interesting article about why you should avoid the placeholder attribute. Itโs a horrible anti-pattern to use the placeholder as a form input label, which you see too often in the web. This post was a thorough explanation of why this is a bad idea.
- ๐ Do websites need to be experienced exactly the same in every browser? The answer from this website is no!
-
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 ๐
- I’ve been reading about variable fonts in this thorough blog post and getting excited about them. This site has lots of cool examples.
- I’d investigated whether CSS selector efficiency is something to be worried about previously, and this blog post concludes the same that I did - not really with our modern browsers.
- I created an archery target using CSS Grid which I was pretty proud of - I’m still getting used to Grid and learning its capabilities.
- But then I read this article about patterns made with unicode characters and Grid and my mind was blown.
-
2018-07-02
- ๐ I read this blog post that proposed that you didnโt always need to use arrow functions: this was an interesting viewpoint as I sometimes think that I should replace every instance of
function() { return x }
with a fat arrow, which this post suggests isnโt always necessary. - โจ I created a new GitHub repo to hold all the CSS illustrations I make for photos on my Instagram feed, like in this photo.
- ๐ฅ I started working on a web scraper for some price information (private repo sorry!). I started off with Cheerio and Node, but switched to NightmareJs when I realised that the info I wanted was generated client side, and that promises could help me. I used this thorough blog post for assistance.
- ๐ I went to this monthโs McrFRED meet up where we heard about serverless architecture for frontend apps. This isnโt something I think about on a day-to-day basis so it was a neat introduction to the topic and a good recommendation for AWS if I happen to need something like this for a personal project.
- ๐ I read this blog post that proposed that you didnโt always need to use arrow functions: this was an interesting viewpoint as I sometimes think that I should replace every instance of
-
2018-06-26
- I had a cheeky few days in Gran Canaria last week, sans code, and now I’ve forgotten all my GraphQL learnings again.
- I went to an awesome meetup just before my holiday called Her+Data in Manchester: really nice group of people, interesting talks and well-run!
- After creating many Atom extensions and never finishing them, I published Rainbow Tree, which changes the colours of you project directories to rainbow colours depending on the directory depth.
- Enjoyed reading this blog post by Rachel Smith about not having imposter syndrome. To be honest I don’t feel like an imposter in tech either and can’t empathise with this movement where everyone likes to admit to being an imposter. I had bad times and moments when I doubt myself, but I’ve never been an imposter - I deserve to be here as much as anyone else and know just as much as the next person about my job.
- How have I not read anything by Joel Spolsky before?? His five worlds blog post is a classic and talks about how not every solution is relevant to your world/situation/setup/product/company.
-
2018-06-13
- I learnt how to make adjustments to a styled component’s style and reuse it by following this tip. This had been annoying me for a while so expect a blog post!
- I’ve been loving everything Brad Frost publishes on his blog recently, including this post about CSS in JS and his experience learning React.
- Pondering about the points raised in this blog post about progressive enhancement - when do we slow ourselves down too much supporting legacy stuff (i.e. IE11) and when do we go too far the other way by using bleeding edge features that only work in Chrome?
- Published a short blog post about the
git checkout -
shortcut to break by dry spell of blogging. You can read it on here or on dev.to where I’m still getting a lot of positive engagement and unicorn emoji! - I’m getting better at GraphQL!! ๐
-
2018-05-28
- I wrote a guest blog post for The Girl Code about my experiences working as a developer in the tech industry. You can read it by clicking here. I didn’t realise I had so much to say about confidence and belief in yourself, nor that I’d worked with so many languages before writing them out!
- I took over the WomenInTech Snapchat account for TechTuesday! (It also got posted to their Instagram stories) It was a huge thing for me as I a) hadn’t used Snapchat much before ๐ฑ b) never post voice clips on Instagram c) struggle with selfies on a good day. But I did it! I think it went OK?? It’s difficult to tell and I was too embarrassed to watch it back once I’d done it lol. But I got over the fear of speaking on camera and listening to myself back, plus I discovered I had a lot to talk about regarding tech blogging and CSS. Also gained a few new Instagram followers ๐
- GraphQL is my new nemesis (it used to be Redux). Going to have a lot of headaches this week as I get my head around it, all the while pairing on a big feature in work ๐
-
2018-05-15
- I learnt how to mock function calls in Jest with jest.fn()
- This dev.to post about presenting your accomplishments proudly and stop being derogatory about yourself professionally really resonated with me. Hopefully I can follow this advice!
- Kept up my streak of posting a blog post each week to dev.to. This week’s was about Sets.
-
2018-05-09
- I added an RSS feed to this blog ๐
- I added stylelint to styled components: the linting you never knew you needed!
- I learnt more about the concept of Higher Order Components in React
- I’m enjoying working with styled components but missing being able to use classnames to search for elements and components in a project
-
2018-05-03
- I added a fallback for browsers that can’t render CSS Grid to ant33t.rocks with Flexbox and the
@supports
rule. Fallbacks don’t have to look identical - they should provide a usable experience. - I learnt to avoid using index for React list keys because of their unreliability.
- I read about CSS rendering and the CSSOM and found it really interesting - browser performance is something I know I should have a deeper knowledge of but always neglect.
- I added a fallback for browsers that can’t render CSS Grid to ant33t.rocks with Flexbox and the
-
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.
- I finally got round to doing Grid Garden. Good fun! ๐ฅ
- I carried on learning a lot about ES6 Maps, Sets and tagged template literals
- Working through all the How to GraphQL tutorials for learning GraphQL
- Learning about WeakSets - not sure when I’ll use them but now I know what they are
-
2018-04-18
First week of a new job so there is sooooo much new stuff to learn! I love it!
- I blogged about using Sass maps to reduce repetitive code
- I cross-posted another article to dev.to and received more positive feedback - such a cool community!
- I revisited ES6 Katas and solidified so much ES6 I’d been using for the past year
- First encounter with styled components ๐
- First encounter with GraphQL! ๐
- Reached 500 followers on my coding Instagram account
-
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!
- I shared my first post on dev.to about why not to use IDs in CSS and it was really well-received! So much more positive engagement compared to Medium!
- I learnt about Sass maps and looping over them to create dynamic styles and selectors
- I learnt how to use JavaScript Sets to return only unique values from an array with
Array.from(new Set(arr))
-
2018-04-10
- I really started to understand currying with help from this article. I put the theory into practice on a React app at work and the concepts finally began to sink in!
- I published an article about sticky sidebars on both Medium and here on my blog
- I officially moved my blog off Jekyll and onto Hugo, using a new theme I wrote myself ๐ช It’s served on Netlify which made all the hosting tasks and adding https really easy!
-
2018-03-31
- I bought my husband a custom url for his birthday and put some silly content on it. I used CSS Grid for the first time to build it! ant33t.rocks
- I learnt not to put quotes around generic font-families like
sans-serif
, i.e. don’t dofont-family: 'sans-serif'
- this won’t work! You don’t even need quotes around font-families with spaces in their name - I’ve published some new blog posts, even one that I’d started 4 months ago (why has this took me so long?!)
-
2018-03-14
- Collapsing margins again! I even ended up using a StackOverflow answer I’d previously upvoted ๐ฉ
- Whether to use pixels, rems or ems for font-size
- The continual struggle to understand Redux. This tutorial helped though
-
2018-03-07
- Font file types, and that you only really need Woff
- Writing short posts about Magento 1 on my new blog
- Learning wtf sed is
-
2018-02-20
- Setting up a new blog with Gatsby documenting useful code tips for Magento 1
- Learning the difference between presentational and container components in React
- Keeping my dotfiles useful for me and up to date and blogging about it
-
2017-12-04
- Styling elements to look like fieldsets https://codepen.io/claireparker/pen/wPOJVp
- Advent of code
- Building a styleguide for this blog with Astrum and building up the courage to eventually redesign it
-
2017-11-28
- still linting Sass files
- why shorthand properties in CSS are bad
- finally remembering the syntax for a non-greedy JavaScript regex (e.g.
(.*?)
) - learning the intricacies of CSS comments
-
2017-11-20
- Using sass-lint - specifically to make me use more variables
- Using codepens as demos of CSS properties, e.g. https://codepen.io/claireparker/pen/jwggmJ or https://codepen.io/claireparker/pen/POjKXY
- Playing with Voiceover on Mac
-
Does this matter?
- learning about the phenomenon of collapsing margins ๐ฎ
- getting internet points on Magento StackExchange
- making Magento devdocs PRs ๐ฉ๐ผโ๐ป https://github.com/magento/devdocs/pull/1265
- completing my copyplate CLI tool for Magento development ๐ค https://github.com/claireparker/copyplate
-
Does this matter?
- emojis as list bullet points
- hosting blogs on github pages
- testing Sass mixins and functions