@robdcal

Web @ Matillion | #React #JavaScript #WordPress #AWS

 Tarporley, England
robcallaghan.co.uk/
Joined November 2010
  • Tweets878
  • Following1K
  • Followers352
51Media
Get to know React's Context API and the useContext() hook with my quick introduction: robcallaghan.co.uk/blog/unde… #ReactJS #React #100DaysOfCode

Understanding the React Context API & useContext Hook - Rob Callaghan

Passing data (i.e. props) between components has always been one of those things with React that’s just a little… annoying. Once again, though, the React team have provided an alternative approach...

robcallaghan.co.uk
1
1
I built a Random Country Fact Generator that pulls the data from an API. Check it out! robcallaghan.co.uk/blog/proj… #javsacript #React #ReactJS #100daysofcodechallenge #100DaysOfCode

Project Summary: Random Country Fact Generator - Rob Callaghan

As part of the React course I’ve been taking on Udemy, it introduced me to the REST Countries API (and how to access APIs with fetch, etc). Since finding out how easy it is to get data from an API...

robcallaghan.co.uk
1
I built a simple URL Deconstructor app with #React! Check it out along with my summary of how I built it here: robcallaghan.co.uk/blog/proj… #reactjs #javascript #100DaysOfCode

Project Summary: URL Deconstructor - Rob Callaghan

In my day job there’s been a number of times where I’ve been working on an analytics tracking issue and I’m either looking to understand the general structure of a given URL or I’m searching through...

robcallaghan.co.uk
2
2
Learn what the useReducer() #React hook is for: robcallaghan.co.uk/blog/user… #reactjs #javascript #100DaysOfCode

A Quick Intro to useReducer() (with an Example) - Rob Callaghan

useState is a nice and simple hook for managing state in functional components (as opposed to setState in class components). But as the complexities of your application grow, you’ll find yourself...

robcallaghan.co.uk
1
I built a To Do app twice; once in vanilla #javascript and once in #reactjs . It's worth doing! Find out what I learned during the process: robcallaghan.co.uk/blog/a-ta… #100DaysOfCode

A Tale of Two 'To Do' Apps: 5 Things I Learned - Rob Callaghan

I recently followed two tutorials from the very endearing Dev Ed on YouTube where he created the very same To Do app in different ways; once in vanilla Javascript and again in React. It only took an...

robcallaghan.co.uk
1
Built a small project that you want to show off, but don't want to pay for hosting? Try GitHub Pages! Find out how to get your GitHub project hosted on its own page: robcallaghan.co.uk/blog/serv… #github #100DaysOfCode

Serving a Create React App Project via GitHub Pages - Rob Callaghan

Being new to GitHub Pages, I experienced a couple of issues in the process of getting a Create React App project live. Here’s how I got it working… Problem 1 The first issue was the fact that you...

robcallaghan.co.uk
1
.@OdamaStudio I liked the look of one of your dashboard designs I found on Dribbble, so I coded it! (work in progress) robdcal.github.io/dribbble-d… #100DaysOfCode #HTML #CSS #javascript
2
1
2
Work with side effects in React with this guide to the basics of the useEffect() hook: robcallaghan.co.uk/blog/quic… #react #React #javascript #100DaysOfCode

Quick Guide to React's useEffect() Hook (with Examples) - Rob Callaghan

The useEffect() hook is probably one of the more complex or difficult to understand hooks in React. However, it’s very powerful and is essentially a critical piece of the framework used when fetching...

robcallaghan.co.uk
1
1
Learn to use Refs in React with the useRef() hook: robcallaghan.co.uk/blog/reac… #reactjs #React #javascript #100DaysOfCode

React Refs & useRef() Explained (with Examples) - Rob Callaghan

If we ever need to work with a DOM element directly (as opposed to managing state via React), Refs are what we need! What are Refs? Refs allow us to access HTML elements directly. The Refs name is...

robcallaghan.co.uk
3
2
What's a React Portal? Find out in this quick guide (with examples): robcallaghan.co.uk/blog/reac… #reactjs #React #javascript #100DaysOfCode

React Portals Explained (with Examples) - Rob Callaghan

Let’s take a look at Portals – the handy way to get your component from A to B! What are Portals? Portals are a way to render a component as a child of a DOM node outside of the parent component....

robcallaghan.co.uk
3
1
Working with APIs can seem a bit daunting at first, but it isn't as difficult as you might think! Learn how to use fetch, Promises and async / await: robcallaghan.co.uk/blog/asyn… #javascript #100DaysOfCode

Asynchronous Javascript: fetch, Promises and async / await - Rob Callaghan

Understanding asynchronous javascript – and working with APIs generally – can really take your horizons to a whole new level. There are countless APIs out there that suddenly become available to you;...

robcallaghan.co.uk
1
Arrow functions are great! Get comfortable with using them: robcallaghan.co.uk/blog/es6-… #javascript #es6 #100DaysOfCode

ES6 Arrow Functions Explained - Rob Callaghan

Arrow functions are my personal favourite addition to Javascript that came along with ES6. Find out how to use them. To fully appreciate the power and elegance of the arrow function, let’s take a...

robcallaghan.co.uk
2
2
Learn about ES6 template literals in just 3 minutes: robcallaghan.co.uk/blog/es6-… #javascript #es6 #100DaysOfCode

ES6 Template Literals (Template Strings) Explained - Rob Callaghan

With ES6, we can do string concatenation in a more natural way that improves readability. It’s super simple! Before ES6, we’d concatenate strings in a couple of ways: The + (addition) operator The...

robcallaghan.co.uk
ES6 has been around for a while, but it might still be new to you. Get to grips with some of the great array helper methods: robcallaghan.co.uk/blog/quic… #javascript #100DaysOfCode #es6

Quick Guide to ES6 Array Helper Methods (with Examples) - Rob Callaghan

In the interest of writing quicker, cleaner and clearer code, ES6 array helper methods are the bees knees. ES6 array helper methods allow us to get away from writing for loops to handle anything that...

robcallaghan.co.uk
What's "margin collapsing" all about in CSS? Get a quick explanation including examples here: robcallaghan.co.uk/blog/marg… #CSS #100DaysOfCode

Margin Collapsing Explained (with Examples) - Rob Callaghan

Margin collapsing is something I’ve never really been aware of. I’m certain that I’ve come up against it, probably more than once, but not known what’s going on. I’ve probably just kept tweaking the...

robcallaghan.co.uk
1
Get to know the basics of the 5 CSS position values: robcallaghan.co.uk/blog/unde… #CSS #100DaysOfCode

Understanding the CSS Position Property (with Examples) - Rob Callaghan

This is a summary of the different values of the position CSS property and how they behave. Where possible, I’ve added examples to help show them in action. There are 5 values for the position...

robcallaghan.co.uk
1
2
#100DaysOfCode Day 7+8: Forgot to post last night. After a break I'm back home and coding again. Implemented jump links with smooth scrolling and intersection observers to update the 'active' nav link depending on the current section. #javascript
4
2
#100DaysOfCode Day 6: 'Completed' the logic of the Direct Comparison chart, including select / dropdown fields that auto-update the chart. Rookie mistake, though; using one scale for all nutritional values is just wrong (look at the Calcium!). #javascript #chartjs
1
3
#100DaysOfCode Day 5: messing around with the 2D Canvas API today trying to write labels dynamically on to a chart; getting the text to rotate and in the right place was a challenge, but got there in the end. ctx.transform() rotates the canvas, not the text... duh!
#100DaysOfCode Day 4: nothing major; just tweaks to the chart filters, adding more data and building out more sections. Also have a clearer plan of what will constitute "done" before I move on to the next project. #development #dev
2
Load more