Personal Blog and Portfolio of Ajay Karwal
Its been a few years since I first wrote about the problem with my hand . I’d spent the best part of 2021 and 2022 speaking with various consultants and physio therapy specialists, having steroid injections and MRI scans with very little progress as to why my finger was unable to bend. All of these consultations were taking place in hospitals in and around Milton Keynes and I always felt like the…
2025 was a turbulent year. I was planing on writing this sometime in December but some unexpected changes to my job (more on that later) completely overtook my capacity to focus on writing. That’s all been sorted now and with the holidays out of the way I’ve finally found some time to reflect on the past year and think about the year ahead. While it was an eventful year there are 3 key areas which…
I first signed up to Duolingo around 12 years ago, tried a few lessons, got bored, and deleted the app. Fast forward 9 years and my daughter has started secondary school and is now learning German. She’s given a Duolingo account through her school and is encouraged to do some lessons to reinforce what they’re learning in class. Of course, she resisted. I told her that I would also start learning…
This is a collection of useful Kibana scripts which I often refer back to. These are mostly just relevant to me and my day job, but may be useful to others too. Some of these scripts are destructive to Elastic indexes, so use with caution # List all indexes in alphabetical order GET _cat/indices?pretty & s = i # Search an index GET dev_collections/_search # Delete an index DELETE dev_collections_*…
I previously wrote about the stuff I don’t know , because no matter how much experience you may have there are always going to be gaps in your knowledge; and that’s a good thing . Being aware of what you don’t know allows you to put yourself on the right path to fill those gaps if you choose. But here I’d like to celebrate some of the stuff I do know and why I prefer to focus and become an expert…
I’ve had this article from Dan Abramov in the back of my mind ever since he published it in 2018. In the article Dan talks about the gaps in his knowledge in a very open and honest way. Dan is a super talented developer, so when he published his article it came as a surprise to myself and many others that even a highly skilled individual can honestly say they don’t know anything about topics which…
Let’s start with Why. For me, blogging is three things. A place to document thoughts and ideas for myself. I often write up notes on information I might need in the future to save me having to Google it again, such as how to set up Node Version Manager or how to show or hide hidden files on macOS . A resource for the community. The dev community has helped me so much over my career and I can’t…
With an almost endless number of ways of organising your data in Notion, it can sometimes be daunting to decide where to save things. In order for Notion to be your one and only app for all your notes and documents it needs to a seamless process of getting ideas out of your head and into Notion. Having an ‘Inbox’ database is a great way to quickly get your data in and then come back and organise…
January 1st 2023. Like most people in the world I decided to also make a New Year’s resolution to get more exercise and get fitter, but this time I was determined to stick to it. Motivation As far back as I can remember ( I’ve always wanted to be a gangster ) — No not really, that’s just a movie quote that always pops into my mind whenever anyone says ‘as far back as I can remember.’ Drop me a…
Remember when your monitor looked like this? Over the weekend I was having a chat with a fellow developer about keeping up with the ever changing landscape of software development and how we learn new skills. We joked about how we’ve owned chunky textbooks in the past which eventually got relegated to help raise our monitors up. 10 years ago it was a pretty common sight to see all the devs in the…
Back in 2014 I applied for my first senior Frontend Developer role. The first part of the process was a coding test which would then lead onto a telephone interview. This was gist of this test: An ex-employee did not back up their working files before they left the company. We need to update out tooltips but the only copy we have is the minified version on the live website. At the moment the file…
One morning in January 2021, I woke up to find a tiny bruise just below my middle finger on the palm of my left hand. It was a little tender and about the size of a pea, but I had no recollection on how it got there. I don’t remember hitting my hand anywhere so I pretty much dismissed it. Over the next few days the bruise started getting painful to touch so I had it seen by a pharmacist who…
If you haven’t used Notion yet, I’m sure you’ve heard of it and how its a great alternative to other note taking/organising apps such as Evernote and Microsoft One Note. And if you have tried Notion, like me, you were probably a little lost at first and may have quickly turned back to your previous, familiar solution. But hopefully you’re willing to give it a proper try. See, Notion is like this…
Earlier this year I saw a lot of posts where other folks in the industry have been blogging about their typical day. Turns out these posts are forming what Ethan Marcotte has referred to as a “blogging chain.” The chain was started by Colin Devroe , and he tagged a number of people to do the same. Some of my favourite people including Dan Mall , Chris Coyier , Sara Soueidan , Jeremy Keith and…
This post is part of my Moving to Windows series. Pick almost any code repository from the last 5-7 years and you’ll likely find it has a package.json file full of dependencies, a decent README.md file telling you how to get started, and perhaps some ‘dot files’ to help keep things in check. Because of this, setting getting a project up and running locally is usually as simple as running npm…
It’s been exactly a year since my 2020 look at the tech I use, so let’s see what’s changed. Code Editor As expected, I’m still using Visual Studio Code as my primary code editor but seeing as I’ve recently switched from macOS to Windows, and I’m dipping my toes into .NET development, I’m also using Visual Studio 2019 for some portion of my day. Languages and Frameworks My day job consists writing…
For the first time in almost a decade, I’m switching to Windows as my primary development machine at work. As a frontend developer and UI designer I’ve always had the freedom to choose what platform I work on as the apps and technologies I’ve been involved with are pretty universal. HTML, CSS and JavaScript can be written anywhere and my design tool of choice — Figma — is cross platform and can…
Since the introduction of ES6, we now have three ways of declaring variables in JavaScript — var , let and const . var The var declaration has been part of the language since the beginning. It creates a mutable variable which could have unwanted side effects. var myNumber = 10 ; console . log ( myNumber ) ; // 10 myNumber = 20 ; console . log ( myNumber ) ; // 20 The scope of var is always global…
Ahmed Awais shared this simple tip to empty a JavaScript Array. arr . length = 0 ; So simple right? But why would you want to do this? Perhaps your application uses an array to store a list of products, and when a user applies a filter facet, you could empty the array before populating it again with the new set of filtered products. Check out the original tweet below for more discussion on the…
Use curly braces to perform multiple actions when dealing with files via the Terminal. $ touch myfile- { 1 .. 4 } .md // Creates a sequence of files like so myfile-1.md myfile-2.md myfile-3.md myfile-4.md
The table below shows all the available date formatting options in most programming languages. Example’s of how to use these formats include: @DateTime . Now . ToString ( "F" ) @DateTime . Now . ToString ( "hh:mm:ss.fff" ) Specifier Description Output d Short Date 08/04/2007 D Long Date 08 April 2007 t Short Time 21:08 T Long Time 21:08:59 f Full date and time 08 April 2007 21:08 F Full date and…
A block is simply any code wrapped in curly braces { } . In JavaScript, you can use block scope and the let keyword to your advantage by defining variables that are only available to a block rather than polluting the global scope. Let’s look at two examples: const dateStr = '2020-05-04' ; var [ year , month , day ] = dateStr . split ( '-' ) ; // 'year' accidently gets redefined on the global scope…
It’s super easy to detect whether a user has their device set to Dark or Light mode using a CSS media query. @media ( prefers-color-scheme : dark ) { /* Styles for users who prefer dark mode */ } @media ( prefers-color-scheme : light ) { /* Styles for users who prefer light mode */ } You should only need to use one of these queries, as the user will default to the code outside of the media query…
It’s pretty easy to check if a user is offline with javascript. window . addEventListener ( 'offline' , ( ) => console . log ( 'is offline' ) ) ; This can be useful to display a warning if your application auto-saves at a regular interval. If the user is offline, the auto-save may fail so a warning message would be a good bit of UX here.
It’s good practice to use rem for font sizes rather than px but remembering which rem value to use can be tricky. Use a Sass function to calculate the rem value and a mixin to set the value. @function calculateRem ( $size ) { $remSize : $size / 16px ; @return $remSize * 1rem ; } @mixin font-size ( $size ) { font-size : $size ; font-size : calculateRem ( $size ) ; } Simply use the mixin whenever…
Consider this scenario. You’re reading a long-form article on your Mac while also jotting down some notes. You take your hands of the keyboard and mouse and lean back in your chair a little. Five minutes pass and while you’re in the middle of reading a sentence your Mac screensaver is actived and breaks your flow. 😠 There are a couple of Apps available which will prevent your Mac from sleeping…
JavaScript Jeep recently shared an article on ways to use the Spred operator. Spread operator expands an iterable object (i.e. an Array) into its individual element. An iterable object is anything that you can loop over. let fruits = [ '🍈' , '🍉' , '🍋' , '🍌' ] ; console . log ( ... fruits ) ; //🍈 🍉 🍋 🍌 Check out the full article for more ways to use the Spread operator
Having lots of console.log() statements in your JavaScript (while you’re in dev mode of course, remove them in production!) your console can quickly become cluttered and all the logs can start looking the same. You can add CSS to your console logs be simply adding the color flag %c before the logged message and passing a string of CSS as the second argument. console . log ( '%c Hello World!' ,…
Warning: The rm command could potentially destroy your whole filesystem. Use with caution. rm is a destructive terminal command. It’s used to permanently delete files and directories, forever, with no concept of a ‘trash can’. Destroy a file: rm someFile.txt That’s it. Its gone. No warning. No confirmation. No Undo’s! You can use glob patterns to drill down into directories and delete all files…
Suppose you have an array of blog posts but only want to show a limited number of results, you can use the slice() method to create a new filtered array without mutating the original. const data = [ // An array of many items ] ; // This limit could be an explicit value or retrieved from a configuration setting. const limit = 5 ; // If a limit is set, return the filtered array otherwise return the…
This handy poster is a great resource to print and keep close to hand the next time you’re debugging some HTTP requests. Designed by Steve Schoger Download the PDF version
First of all, here’s how to take a screenshot on Mac . By default, macOS saves screenshots to the Desktop. If you want to save your screenshot in a custom location, you can use this command: defaults write com.apple.screencapture location ~/your/location/here You now need to restart the system UI server, so run this command: killall SystemUIServer And that’s it. Screenshots will now be saved to…
By default, files which begin with a dot (e.g. .gitignore ) on macOS are hidden from the Finder app. You can however, quickly show or hide these files with a simple Terminal script. # Show files $ defaults write com.apple.finder AppleShowAllFiles YES $ killall Finder # Hide files $ defaults write com.apple.finder AppleShowAllFiles NO $ killall Finder
Using the Spread operator ( ... ) you can quickly merge multiple Objects or Arrays together. const user = { name : 'Ajay Karwal' , twitter : '@ajaykarwal' } ; const appearance = { eyes : 'Brown' , hair : 'Black' , glasses : true } ; const profile = { ... user , ... appearance } ; console . log ( profile ) ; The result is a single merged Object { eyes : "Brown" , glasses : true , hair : "Black" ,…
You can easily check which version of jQuery is loaded on a page (or whether it is loaded at all) by running either of these commands in your browser console. jQuery ( ) .jquery jQuery.fn.jquery $( ) .jquery $.fn.jquery All four of these commands will return the same result. If jQuery is loaded successfully, you will recieve the version number, e.g 3.5.1 . If jQuery is not loaded you will recieve…
As a frontend developer, it’s important to test your code on as many web browsers as possible, but as a Mac user it is necessary to run Windows in a Virtual Machine — in my case, VirtualBox — in order to test on Microsoft Edge and Internet Explorer. Microsoft offers Free Virtual Machines from IE8 to MS Edge . Out of the box, VirtualBox doesn’t have access to localhost from the host Mac, so you’ll…
A Side Effect occurs when a function mutates a value, meaning you end up with a different result each time the function is called. // BAD. Don't do this. var x = 10 ; function plusTen ( y ) { x = x + y ; return x ; } console . log ( plusTen ( 3 ) ) ; // 13 console . log ( plusTen ( 3 ) ) ; // 16 In the above example, the value of x is changed each time the function is called. This side effect…
Add this single line of code to your webpage’s <head> section if you’re experiencing layout problems on mobile devices. < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > This is the absolute minimum you will need to make your webpage render properly on mobile. If you require even greater control over your mobile layout check out the full viewport meta tag spec .
A simple way to re-run the last command in Terminal is to simple press the up arrow key and hit enter. Terminal’s built in history saves all your commands so you can use the up and down arrow keys to scroll through them. Another way to run the last command is with the “double bang”. $ ! ! Now, suppose you run a command and receive a permissions warning. You now want to re-run the last command but…
As with any job it’s important to keep up to date with the latest technology and trends, but with software development — frontend development in particular — things change at such an alarming speed that many tech trends become obsolete before people even get a chance to explore them. While the tools and tech I’m using today aren’t vastly different than this time last year, I figured I’d create…
I’ve previously posted about the three basic ways you can add CSS to your website . However, in modern web applications it’s more common to use a CSS pre-processor such as Less, Stylus, or in my case, Sass. A CSS pre-processor extends the functionality of CSS by adding variables, operators, interpolations, functions, mixins and many more useful features. Files are processed on a server or via a…
There are multiple ways to write CSS for your website and the method you choose may vary depending on your chosen CMS or framework, but essentially it boils down to one of the following methods. Inline Styles Style Tag Linked Stylesheet Inline Styles Inline styles are added directly to the element which they are to be applied to. < p style = " background-color : indianred ; color : palegoldenrod ;…
Occasional downtime is part of the fabric of working for an agency, whether it’s between projects or simply awaiting client feedback. This may seem like a blessing. A much needed break from your busy schedule while essentially “getting paid to do nothing.” But wouldn’t you rather put this free time to better use? It could be an opportunity to learn new skills, help your colleagues, or write up…
If you want to take greater control of how apps are organised on your macOS Dock, a great way is to add spaces between groups of apps. Run this one-liner in your Terminal to create a new blank space in your Dock defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}' && killall Dock What this does is add a new ‘spacer-tile’ item to the Dock’s ‘persistent apps’ array…
When trying to install some npm packages globally, for example npm i gulp-cli -g you may run into a permissions error along the lines of: npm ERR ! Error: EACCES: permission denied A lot of answers on Stack Overflow and the like may tell you to add sudo to your command — that magical little word that grants you super powers to do whatever you want — but with great power comes great responsibility.…
Whether your just starting out on your development journey or you’re a seasoned pro, chances are you’ll be reaching for the Terminal app on a regular basis. I for one don’t particularly enjoy using the Terminal but seeing as it’s inevitable, you can make the whole process a little easier by setting up some simple time-saving aliases. Creating aliases An aliases is simply a custom shortcut or…
Layer Comps are a great way to quickly show and hide a combination of layers in Photoshop without the need to group all the layers first. This is especially helpful when you need to change the state of layers which are at different positions on the z-axis of the document (the stacking order of layers) meaning the layers cant sit within the same layer group. Using Layer Comps allows you to organise…
This is a brief overview of the main elements of a React application’s data flow with Redux. This article assumes you are familiar with at least the basics of React. Store The Store is a combination of all the State objects from each Component in the application. The Store is a single JavaScript object so all the State objects in the application must be combined into one large one using…
Following on from my post about moving from a CMS to Jekyll , the next pain point to tackle is the build and deployment of your site. Jekyll does a great job of compiling your website into a neat _site folder which you can then FTP to your server, however this does mean that you need to have the convenience of an FTP client at hand. A better solution would be to automate this process and seeing…
Back in February 2017, I shipped a new version of my website. Only a very slight update to the design but a complete overhaul on how it was built. "New" version of my website is now live. https://t.co/3lnJDCSY9S Content is the same(ish) but its been rebuilt using @jekyllrb & @travisci — Ajay Karwal (@ajaykarwal) February 9, 2017 Everything was originally built using Umbraco – a CMS powered…