So you finally finished that portfolio project and added it to your LinkedIn profile in the featured section, when you notice the preview image being displayed is not what you envisioned.
However, you are aware that there was no moment while you were creating this project in which you explicitly chose a preview image, so it doesn’t feel that shocking that LinkedIn doesn’t know what it should be either.
For me, this sad moment looked like this:
Luckily, there is a pretty easy fix for this.
Here’s the TL;DR version of how to specify a preview image for your website that will display on LinkedIn. You will need to:
1) take a screenshot or some other picture to serve as the preview image that you want to use
2) add this…
In which I add a _redirects file to my project’s public folder, and think about routing, page refreshes, redirects, and error handling.
After deploying my react app via Netlify, I found that a simple kludge/workaround that I had put into my app to prevent it from breaking on refresh had stopped working.
Today I spent some time fixing that and this is how that went.
To begin with, I should explain that my app, called chromatic notes, does not have a back end. It is for now an entirely front-end project, so I decided, in order to give a slightly more interactive UX, the data for the notes would just be randomly generated by the frontend. …
I walk through how I created a note-taking app with nested routes using react-router-dom and react-router hooks.
I wrote several blog posts recently about implementing react-router to create nested routes in a note-taking app. Since at the time I was still working through understanding how react-router works, I wanted to write a new summary post that lays out more clearly how I’ve implemented react-router in this app.
There are some decent observations in those previous posts, but I think this post should be most the complete and coherent, since the app is finally done and deployed. You can check out the live demo here: Chromatic Notes and the code here on Github.
This is the structure of…
Last week I ended my post by mentioning that I had gotten the functionality/prop passing of my app mostly working in conjunction with routing via react-router, but still had some messy UI to clean up.
The following day, doing a morning standup/phone call with a friend and former classmate Tom Cantwell — frontend wiz — I mentioned another bug that was bothering me, and suggested we take a look at it. Whereupon, we dived into some pair programming.
I was noticing that sometimes when clicking the button to show an individual note, the button would either work or freeze up…
On the second, nested level of routing, when we click on the view/edit button for an individual note, we want to be able to see that note and edit it.
Clicking the edit button for the NotePreviewCard with the title Note 1: PostegreSQL swaps out the TableOfContents component and replaces it with the NotePage component; it also appends the id of this note to the URL, so that the URL now reads localhost:3000/green/1.
The TableOfContents component follows essentially the exact same pattern as the app component; the obvious difference is that the nested component’s (detail) rendering will take the part…
To begin with, let’s look at the structure of my Chromatic Notes project’s App.js file to get a sense for the structure of the app. The main pieces relevant to this explainer are navGridNotebooks and nineTableOfContentsRoutes.
I’ve been obsessed for a while with the prospect of making a note-taking app. On the surface that seemed fairly straightforward but as I got into it I realized a sleek simplistic UI belied a fairly complex relationship of nested routes.
Combined with having to pass data between components, and needing different types of components invoking different React Router components, it got complicated quickly. Hopefully showing how I’m thinking through the logic here will also be helpful to someone else working on a similar routing problem.
To begin, what I’m working to implement is called a master-detail pattern, which is…
So for a while I’ve been taught that React uses state to calculate changes to how the DOM should be displayed but I haven’t felt completely satisfied with that.
The React docs start out explaining how to use React to create simple UIs while ignoring state entirely, like this ticking clock example, which “calls ReactDOM.render() every second from a setInterval() callback:”
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById(‘root’)
);
}
setInterval(tick, 1000);
The docs says that “with our knowledge so far, the only way…
Except when I do, I *never* get tired of the mix of abstraction and precision required to write computer programs.
IMO, programming is loaded with a lot of terms that get thrown around willy nilly, regardless of the audience’s level of expertise. If, with childlike naïveté you ask, what is that thing, the answer is often something unhelpfully broad. Back during my bootcamp I asked someone “what’s an API exactly?” and I believe the answer I got back was something like “everything’s an API.” Hmmmm. Can’t put my finger on it, but I feel like that answer is missing something.
…
Disclaimer: rushed post tonight — xmas eve and all — learn from me at your own risk.
While reading Why Prototypal Inheritance Matters by Aadit M Shah, I had to pause on this variable declaration when I read it in:
let emptyObject = Object.create(null)
// using Object.create(null) yields an object with zero properties; if you’re relatively new to JS, you may have never seen this before. Test it in your console and see what that looks like.
I said to myself something like “lol, but ‘null’ isn’t an object, even though typeof null returns ‘object’; that can’t be right.” …
