Front End Development Archives - this is how i code https://thisishowicode.com/category/front-end-development/ my personal journey through creating with code Wed, 12 Jun 2024 20:28:37 +0000 en-GB hourly 1 https://wordpress.org/?v=6.9 How to use TypeScript with React: A Brief Overview https://thisishowicode.com/how-to-use-typescript-with-react-a-brief-overview/ https://thisishowicode.com/how-to-use-typescript-with-react-a-brief-overview/#respond Sun, 09 Jun 2024 20:30:56 +0000 https://thisishowicode.com/?p=1269 I went bravely from using js to jsx files. Then I overcame the gag reflex to write html in javascript. It was time to cover the final threshold with TypeScript and the tsx filetype. In this article, I cover briefly, how to use TypeScript with React. Defining types within functions If you’re familiar with TypeScript, […]

The post How to use TypeScript with React: A Brief Overview appeared first on this is how i code.

]]> https://thisishowicode.com/how-to-use-typescript-with-react-a-brief-overview/feed/ 0 How to immediately call a function in JavaScript (IIFE) https://thisishowicode.com/how-to-immediately-call-a-function-in-javascript-iife/ https://thisishowicode.com/how-to-immediately-call-a-function-in-javascript-iife/#respond Sun, 28 Apr 2024 10:39:18 +0000 https://thisishowicode.com/?p=1191 Sometimes you might want to run a function without ever having to call it. This is especially useful when you want to declare some global variables, but also keep them private, within a function. This article explains how you can immediately call a function in javascript. What is an IIFE? An Immediately Invoked Function Expression […]

The post How to immediately call a function in JavaScript (IIFE) appeared first on this is how i code.

]]> https://thisishowicode.com/how-to-immediately-call-a-function-in-javascript-iife/feed/ 0 Quick SASS Setup for WordPress Themes https://thisishowicode.com/quick-sass-setup-for-wordpress-themes/ https://thisishowicode.com/quick-sass-setup-for-wordpress-themes/#respond Sat, 20 Apr 2024 21:12:06 +0000 https://thisishowicode.com/?p=1135 This is my go-to for quickly adding sass functionality to any WordPress theme. Just add the following package.json to your theme folder (assuming you already know how to run npm/node, and have them installed and ready to go): You can grab the package.json code here. I always hate copying and pasting from things like the […]

The post Quick SASS Setup for WordPress Themes appeared first on this is how i code.

]]> https://thisishowicode.com/quick-sass-setup-for-wordpress-themes/feed/ 0 Improving My CSS Skills – 6 New Things https://thisishowicode.com/improving-my-css-skills-6-new-things/ https://thisishowicode.com/improving-my-css-skills-6-new-things/#respond Thu, 17 Aug 2023 21:27:12 +0000 https://thisishowicode.com/?p=1011 Here are some new things that I’ve learned with CSS, which solve common real-word problems. I’m always looking at improving my css skills (who doesn’t!) Here are 6 of the latest things I’ve discovered: Fitting that round image in a square peg Sometimes you want an image to always fill a space, for example as […]

The post Improving My CSS Skills – 6 New Things appeared first on this is how i code.

]]> https://thisishowicode.com/improving-my-css-skills-6-new-things/feed/ 0 Get Frontend API Data with Javascript https://thisishowicode.com/get-frontend-api-data-with-javascript/ https://thisishowicode.com/get-frontend-api-data-with-javascript/#respond Wed, 16 Aug 2023 21:00:57 +0000 https://thisishowicode.com/?p=970 Using the native fetch() to get frontend api data with javascript is easier than ever, and works great alongside frameworks such as vue. Grabbing data the old way Before fetch came along, API requests were made using XMLHttpRequest, which didn’t include the use of Promises. It was a little bit verbose, like so: Grabbing data […]

The post Get Frontend API Data with Javascript appeared first on this is how i code.

]]> https://thisishowicode.com/get-frontend-api-data-with-javascript/feed/ 0 Using Arrays in Javascript: Data Power Moves https://thisishowicode.com/using-arrays-in-javascript-data-power-moves/ https://thisishowicode.com/using-arrays-in-javascript-data-power-moves/#respond Thu, 26 Jan 2023 22:19:25 +0000 https://thisishowicode.com/?p=976 Arrays are the bread and butter of javascript when it comes to handling data. Especially awhen grabbing data from APIs and filtering results. I’ve noted some super useful built in methods relating to arrays, to help with all sorts of situations. Get to know these, for great power comes great responsibility… Filtering an array Array.prototype.filter() […]

The post Using Arrays in Javascript: Data Power Moves appeared first on this is how i code.

]]> https://thisishowicode.com/using-arrays-in-javascript-data-power-moves/feed/ 0 Adblock and your stylesheet – they don’t play nice https://thisishowicode.com/adblock-and-your-stylesheet-they-dont-play-nice/ https://thisishowicode.com/adblock-and-your-stylesheet-they-dont-play-nice/#respond Sun, 05 Sep 2021 11:33:50 +0000 http://thisishowicode.com/?p=701 Have you ever had a situation where your css just doesn’t seem to be working. You know you added the styles, but they just refuse to show up in the inspector? Fun fact: It might just be your browser’s adblock stylesheet. What’s adblock doing to my stylesheet? Hopefully you use good namespacing when you create […]

The post Adblock and your stylesheet – they don’t play nice appeared first on this is how i code.

]]> https://thisishowicode.com/adblock-and-your-stylesheet-they-dont-play-nice/feed/ 0 Improving My JavaScript Skills – 5 Things https://thisishowicode.com/improving-my-javascript-skills-5-things/ https://thisishowicode.com/improving-my-javascript-skills-5-things/#respond Sun, 11 Jul 2021 13:16:16 +0000 https://thisishowicode.com/?p=773 I’m always improving my javascript skills when I’m learning something new. Sometimes it’s worth going over existing skills again to reinforce that knowledge. I’ve found these 5 things to be pretty powerful. 1. Underscoring Variables and Namespacing events These is more helpful for code readability, rather than it being a particular feature. The first uses […]

The post Improving My JavaScript Skills – 5 Things appeared first on this is how i code.

]]> https://thisishowicode.com/improving-my-javascript-skills-5-things/feed/ 0 The Essential Web Development Tools and Resources I Need https://thisishowicode.com/essential-web-development-tools-and-resources-i-need/ https://thisishowicode.com/essential-web-development-tools-and-resources-i-need/#respond Tue, 21 Jul 2020 22:44:10 +0000 http://thisishowicode.com/?p=46 Everybody has their own set of essential web development tools. Here are a couple mine I thought I’d share. I might later add some more, as and when I find them. Jquery to vanilla js tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript This is a good quick reference comparison of jquery and javascript. There may be a need for one or […]

The post The Essential Web Development Tools and Resources I Need appeared first on this is how i code.

]]> https://thisishowicode.com/essential-web-development-tools-and-resources-i-need/feed/ 0 Web Development & Design Theory: Make them work in a Project https://thisishowicode.com/web-development-design-theory-make-them-work-in-project/ https://thisishowicode.com/web-development-design-theory-make-them-work-in-project/#respond Tue, 14 Jul 2020 22:39:45 +0000 http://thisishowicode.com/?p=34 I spent some time studying Graphic Design whilst at college. This article is a good, basic primer on design theory. Though taught as part of a Graphic Design course, I’ve found it to be just as useful in web design, front end development in particular. Web Development & Design theory just work well together. The […]

The post Web Development & Design Theory: Make them work in a Project appeared first on this is how i code.

]]> https://thisishowicode.com/web-development-design-theory-make-them-work-in-project/feed/ 0