DEV Community: Thomas Rigby

Using Zustand to manage application state in React

Thomas Rigby — Wed, 25 Jan 2023 00:00:00 +0000

One of the downsides to Controller/Reducer-based state management is that a single piece of state needs to be passed from Component to Component up and down the cascade - regardless of whether that component needs the state or not.

This can cause an application to run slower than is desirable.

Zustand promises to alleviate this issue. And, to cut a long story short, it does.

Observe the Hideous Spaceship of StateControllers!

ReactDOM.render(
  <React.StrictMode>
    <AppState>
      <UserState>
        <DownloadState>
          <DocumentsState>
            <ShareState>
              <ModalState>
                <ViewerState>
                  <InteractionsState>
                    <NotificationsState>
                      <App />
                    </NotificationsState>
                  </InteractionsState>
                </ViewerState>
              </ModalState>
            </ShareState>
          </DocumentsState>
        </DownloadState>
      </UserState>
    </AppState>
  </React.StrictMode>,
  document.getElementById("root")
);

This means that a piece of information from say ModalState has to be passed to ViewerState to InteractionsState to NotificationsState before the final destination of <App/> . This causes several unnecessary re-renders as well as being slow, costly, and frankly irritating.

Zustand uses a “Hook-based” approach that doesn’t pass state around components that do not directly need it.

This approach greatly reduces the “spaceship” and looks a little like this;

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  </React.StrictMode>
)

Creating a Store

// Store/app.jsx

import create from 'zustand'

const useAppStore = create((set, get) => ({
    openSidebar: () => set(state => ({ sidebarIsOpen: true })),
  closeSidebar: () => set(state => ({ sidebarIsOpen: false })),
  sidebarIsOpen: false,
});

export default useAppStore;

Now we have a store we can import wherever we need to.

// Components/Nav.jsx

import useAppStore from '../../Store/app'

const Nav = (
) => {
  const openSidebar = useAppStore(state => state.openSidebar)
   return (
    <nav className="primary-nav">
      <button onClick={openSidebar}>🍔</button>
      <ul className="nav-list">...</ul>
    </nav>
  )
}

export default Nav


// Components/Sidebar.jsx

import useAppStore from '../../Store/app'

const Sidebar = ({ children }) => {
  const isSidebarOpen = useAppStore(state => state.isSidebarOpen)
  const closeSidebar = useAppStore(state => state.closeSidebar)

  return (
    <aside open={isSidebarOpen} className="sidebar">
      <button onClick={closeSidebar}>❎</button>
      {children}
    </aside>
  )
}

export default Sidebar

This way, the only Components that are affected by the change in isSidebarOpen are the Nav and the Sidebar. The main body of the app, for example, doesn’t have any knowledge of the state of the sidebar (because it doesn’t need to know).

// Components/Main.jsx

const Main = ({ children }) => <main>{children}</main>

export default Main

However, if we need to, we can make the Main aware of the state change as easily as importing the Store…

// Components/Main.jsx

import useAppStore from '../../Store/app'

const Main = ({ children }) => {
  const sidebarIsOpen = useAppStore(state => state.sidebarIsOpen)
  return <main className={sidebarIsOpen && 'blur'}>{children}</main>
}

export default Main

Amending state

Imagine, a while down the line, we get the request to track “sidebar opens” (for whatever mad reason - clients, eh?!). The only file we need to change is the Store.

// Store/app.jsx

import create from 'zustand'
import Analytics from 'analytics'

const useAppStore = create((set, get) => ({
    openSidebar: () => {
    Analytics.log({ event: 'sidebarOpen', timestamp: new Date() })
    set(state => ({ sidebarIsOpen: true }))
  },
  closeSidebar: () => set(state => ({ sidebarIsOpen: false })),
  sidebarIsOpen: false,
});

export default useAppStore;

Conclusion

The learning curve is shallow enough - even for someone like me who isn’t the most React-savvy! It makes the state much more readable and replaceable too.

Quick and dirty server 2

Thomas Rigby — Wed, 07 Sep 2022 00:00:00 +0000

I wrote last year about spinning up a quick and dirty server using Python.

Since then, I have moved to using Python 3 (woop woop!) and, the first time I ran my funky little srv 1337 function I got an error! 😱

"No module named SimpleHTTPServer"

According to the Python 2.7 documentation…

The SimpleHTTPServer module has been merged into http.server in Python 3.

So, the simple-enough solution is to replace SimpleHTTPServer with http.server.

Navigate to the folder you want to serve
python -m http.server
Open http://localhost:8000

What if PORT 8000 is in use?

Pass a different port number like this: python -m http.server %%PORT_NUMBER%%

If you want it to be even simpler - stick this somewhere in your bash config!

srv() {
  python -m http.server $1
}

As before, it doesn't come with any of the fancy stuff that other "local server" plugins might come with like hot reloading or compiling Scss but, if all you want is a small static site launching, why reach for another dependency?

Trim trailing slash

Thomas Rigby — Thu, 01 Sep 2022 00:00:00 +0000

Sometimes a URL has a trailing slash, sometimes it doesn't. If we can't be certain, we need to handle either eventuality.

Shut up and give me the code!

const trimTrailingSlash = (x) => x.split('').reverse()[0] !== '/' ? x : x.substring(0,x.split('').length -1);

Let's break that down

First off we're creating an arrow function that will accept an input that we're calling x.

Inside the function, x is split into individual characters creating an array. The array is reversed using, well, reverse(). This means we can check the first character ([0]) instead of having to work out what the last character is - smart!

If that character does not equal (!==) a slash simply return the given string. Bouncing out of a function as soon as possible keeps our code quick!

If the character is a trailing slash, we want to get rid of it; to return part of a string, we can use substring.

Substring takes two parameters: the starting index and the finishing index. We will start at 0 which is the very first character and finish with the second to last character (the one before the /).

To figure what that number is we, again, split the string into an array and use the total number of items (.length) minus 1.

Alternative solution!

Using String.prototype.endsWith() and String.prototype.slice(), we can shorten this function - and make it a little more readable! 🎉

  const trimTrailingSlash = (x) => x.endsWith('/') ? x.slice(0,-1) : x;

.endsWith() works exactly how you would imagine: if the string ends with the given character, the method returns true, otherwise it returns false.

Conclusion

To trim a trailing slash from a URL requires two operations;

We must determine if the last character is a slash
If it is, we must remove the slash

Each of these steps can be performed in several ways, you can mix-and-match them how you want.

I've not done any performance testing on these so I couldn't tell you which is fastest when trimming the trailing slash from 40,000 URLs but, unless you are working with 40,000 URLs, just pick the one you feel is the most readable.

How to create a global .gitignore file

Thomas Rigby — Fri, 06 Aug 2021 00:00:00 +0000

Unfortunately, this has happened to the best of us at some point, amirite?!

Inspired by this monstrosity, I decided to do some investigation!

Here is how to create a global .gitignore file to define a list of rules for ignoring files in every single Git repository on your computer…


  touch ~/.gitignore_global
  echo node_modules >> ~/.gitignore_global
  echo .DS_Store >> ~/.gitignore_global
  echo .vscode >> ~/.gitignore_global
  git config --global core.excludesfile ~/.gitignore_global

For more handy git tips: RTFM 😉

WordPress forgotten password localhost hack

Thomas Rigby — Fri, 11 Jun 2021 00:00:00 +0000

I have lost count of the number of times I've forgotten the password to the local or development CMS.

My natural instinct is to click the Forgot Password link but, obviously, there's no way to trigger that email from the local system.

I've spent too long hunting through articles on how to recover the forgotten password. The quickest and easiest solution that I've found is to change the password manually in the database.

How do we do that then?

WordPress stores passwords in the wp_users table. The prefix may be different if you have elected to change that in the wp-config.php file. It's good practice to do that for security.

When you look at the table, it'll look a little like this…

ID	user_login	user_pass
1	thomasxbanks	$P$BHpcLw/aWsTPmeDprzXwOEl45bJm9A3

WordPress stores your password as an MD5 hashed string^*. This prevents anyone with access to the database seeing confidential information in plain text.

If this wasn't obfuscated like this, we'd be able to copy our password and paste it into the login form…but we can't - and for good reason!

So, to fix our little problem, we need to replace the existing hashed password with a new hashed password - we can't overwrite the MD5 hash with plain text because that won't work.

I have Hasher installed as a plugin in VS Code. If you don't use VS Code or don't want to use this extension, MD5 Hash Generator Online works pretty well.

I would recommend that you don't create your "forever password" using these hash generators though. Overwrite the existing password with something easy to remember and very, very temporary - a favourite of mine is Pa55word! —

267057150e34eca5c6af39ec9b30864e

Once the password has been changed, you can log in with your new password and immediately change it to something more secure.

I hope this helps you as much as it has helped me. 😎

^* As pointed out by @sorinmarta in the comments, WordPress salts the password using PHPass (as you can see from the $P$ at the start of the example password). This hack will still work though as, even if your password has been salted, you can still replace the password with an MD5 hash, and WordPress will let you log in.

Semantic HTML

Thomas Rigby — Fri, 11 Jun 2021 00:00:00 +0000

Semantic HTML is the process of using HTML5 tags to reinforce the meaning of the information contained within a webpage or application.

HTML5 was introduced in October 2014 and introduced several new element tags to provide explicit meaning to the content of a website. And, as all websites are nothing more than a means for conveying content, this is the most important foundation for any site.

Bluntly, semantic HTML says what an element is instead of using a <div> for everything.

Div Soup™️

Consider this piece of code…

<div class="article">
    <img class="image" src={post.image.src} />
    <h1 class="h1">{post.title}</h1>
    <div class="content">
    {post.excerpt}
  </div>
  {post.categories.map(category => <div class="category-tag">{category}</div>)}
</div>

While this is not an unacceptable way of using markup to describe a group of elements, it could also be confusing for a number of reasons.

We spend considerably more time reading code than writing it. A lot of us do not have the luxury of solely working with familiar code; we work in teams with several developers working on the same codebase or in agencies working with multiple codebases - some a lot older or less maintained.

While we read, much like users on a webpage do, we use an F pattern. This means we’re basically scanning down the left-hand edge of the code to get a gist of what we’re dealing with.

The code above reads very much like “div, img, h1, div, div, div…”

Semantic markup

Now consider this refactored code…

<article>
  <header>
    <figure>
      <img src={post.image.src} alt={post.image.alt} />
    </figure>
    <h1>{post.title}</h1>
  </header>
  <div>
    {post.excerpt}
  </div>
  <footer>
    <ul>
      {post.categories.map(category => <li>{category}</li>)}
    </ul>
  </footer>
</article>

Now the code above reads like “article, header, div, footer”.

In all honesty, it does require more markup than the previous example but, on the other hand, when we scan the code we can clearly see that this is an article with a header image and a title - there is a main body to the article, followed by a list of categories.

Accessibility

Your browser will scan through your website's DOM and decide if each node it encounters is useful and, if so, will add it to the Accessibility Tree.

Screen-readers and other assistive technologies then use the Accessibility Tree instead of the visual UI of your website.

The browser can better determine whether something should go in the Accessibility Tree if it can understand what the node is for - which is where semantics come in.

Browsers will happily ignore divs and spans because they semantically mean nothing - they're for visual layout and the Accessibility Tree cares not for visual layout!

Of course you could always pepper your divs with role="button" or whatever but that goes against WAI-ARIA recommendations.

It is not appropriate to create objects with style and script when the host language provides a semantic element for that type of object. While WAI-ARIA can improve the accessibility of these objects, accessibility is best provided by allowing the user agent to handle the object natively. For example, it's better to use an h1 element in HTML than to use the heading role on a div element.

SEO

Semantic HTML is not only for developers and screen readers - it also helps search engines crawl your content.

Don't take my word for it - Yoast recommends using semantic markup to improve ranking.

We can improve on this even further by layering in Schema data.

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <figure>
      <img src={post.image.src} alt={post.image.alt} itemprop="image" />
    </figure>
    <h1 itemprop="headline">{post.title}</h1>
  </header>
  <div itemprop="articleBody">
    {post.excerpt}
  </div>
  <footer>
    <ul>
      {post.categories.map(category => <li itemprop="articleSection">{category}</li>)}
    </ul>
  </footer>
</article>

Using semantic HTML and Schema data to define your structure means it’s quicker and more accurate for search bots to index your content because they don’t have to make assumptions about what something is.

Violent Psychopaths

Another benefit is that it becomes clearer for the next developer (even if that is you in the future) who will maintain this code.

It is a known fact that any code you wrote six months ago might as well have been written by someone else. 😉

Using semantic HTML also goes towards your separation of concerns, keeping the “structure” and the “design” separate. Ensuring the markup describes the structure, leaving the css to describe the appearance will make things easier to adjust and maintain going forward.

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.

John F Woods, 1991

I am a lazy developer or How to write 438 lines of nginx redirects

Thomas Rigby — Mon, 07 Jun 2021 00:00:00 +0000

When I say "I am a lazy developer", I don't mean to imply that I cut corners and churn out shoddy code. I just hate doing repetitive tasks that bore the bejesus out of me!

Obviously, I'm not alone in this - it's the reason task runners exist.

Recently, at work, I replatformed an existing e-commerce site which resulted in, amongst other things, a giant list of redirects from existing urls to the new url structure.

Permanent redirects (301s for the people who like numbers) are essential for persistence of good SEO. The downside is adding the old url and the new url to the line rewrite ^/<oldlocation>$ <newlocation> permanent; in my nginx config file. What's a lazy guy to do when you have to do this 438 times…?

Well, this immediately looks like a case for loops and variables!

How can you do this wizardry?!

You'll need four things;

NodeJS installed on your machine,
a command-line application like Hyper, iTerm2, or Terminal,
a CSV file of the required redirects, and
this handy class in an index.js file.

// excel.csv

old,new
https://thomasxbanks.com/newyork/, https://thomasxbanks.com/locations/newyork/
https://thomasxbanks.com/paris/, https://thomasxbanks.com/locations/paris/
https://thomasxbanks.com/peckham/, https://thomasxbanks.com/locations/peckham/


// index.js

const fs = require('fs');

class GenerateNginxRedirectsFromCSV {
  constructor(input, output) {
    this.input = input || './input.csv';
    this.output = output || './output.txt';
    this.csv = null;
    this.results = [];
  }

  async read() {
    this.csv = await fs.readFileSync(this.input, { encoding: 'utf8', flag: 'r' });
  }

  async format() {
    this.results = this.csv.replace(/\n/g, '').split('\r').filter(Boolean).slice(1).map((x) => `rewrite ^/${x.split(',')[0]}?$ ${x.split(',')[1]} permanent;\n` );
  }

  write() {
    this.results.forEach(async (value) => {
      await fs.appendFileSync(this.output, value);
    });
  }

  async init() {
    await this.read();
    await this.format();
    await this.write();
  }
}

const task = new GenerateNginxRedirectsFromCSV('./excel.csv', './redirects.txt');
task.init();

Put both files in the same folder, open the folder in your command line Terminal application and run node ./. This will generate a file (called output.txt unless you've changed it) listing your redirects in an easy-to-copypasta format. Paste the contents into your nginx.conf file.

Cool! How does it work?

There's a lot going on here so let's go through it.

const fs = require('fs');

fs is the NodeJS File System module. I won't go into detail here but, basically, it allows you to Read from and Write to files on your local system, servers, or whereever Node is installed.

constructor(input, output) {
  this.input = input || './input.csv';
  this.output = output || './output.txt';
  this.csv = '';
  this.results = [];
}

In the constructor, we set our scoped variables (including fallbacks) and the empty variables that will be populated by our fetched and formatted data.

async init() {
  await this.read();
  await this.format();
  await this.write();
}

As we can see from the init() function, our three basic steps are;

Get the contents of the CSV file
Convert it into a format nginx can understand
Write the results to a file

Step 1 - Get the contents of the CSV

this.csv = await fs.readFileSync(this.input, { encoding: 'utf8', flag: 'r' });

Read the input filepath and save the contents into the this.csv variable for later use.

Step 2 - Convert CSV to nginx

Since the output of the csv file is consistent, and so is the format of a JSON object, we can map one to the other.

async format() {
  this.results = this.csv.replace(/\n/g, '').split('\r').filter(Boolean).slice(1).map((x) => `rewrite ^/${x.split(',')[0]}?$ ${x.split(',')[1]} permanent;\n` );
}

Firstly, replace any \n line-endings, then explode the string into an array at each line-break (\r).

Then, we generate an array of results.

Filter out any empty lines with .filter(Boolean)
Remove the line with the headers using .slice(1)
For each remaining line, generate a string to copy into nginx.conf.

It should look a little like this;

rewrite ^/https://thomasxbanks.com/newyork/?$ https://thomasxbanks.com/locations/newyork/ permanent;

Step 3 - Write the output file

Now that this.results is an array of strings, we can

loop through each instance
insert the result to an ouput file using fs.

All that's left to do is open the resulting file and copypasta the content into your nginx.conf file.

Don't forget to gracefully restart the nginx server. Forgetting this has caused me untold headaches!

nginx -t && nginx service restart

Conclusion

Now, I'm sure there are ~~different~~ better ways to do this but, off the top of my head, this seemed quick and simple enough to whip together.

I've no idea how long it would have taken me to manually do this but I'm certain it would have taken longer than to write this bit of code.

Not only did I save myself time on that particular day, whenever I (or someone else on my team) need to do this again I have a useful tool to reuse again and again 😎

You have a better laptop than your users

Thomas Rigby — Thu, 20 May 2021 00:00:00 +0000

I have a fairly decent laptop provided by my employer and I'm lucky enough to have a strong, reliable internet connection. Not everyone does. I'll say that again for the Bro's at the back:

Not all of your users will have a top-spec device and good wifi like you do.

In the past I've been guilty of assuming that everyone has a comparable experience to myself.

This leads to Bad Habits™️.

How to be better

Optimise for performance over appearance. Basically, don't make someone download 5Gb of images and 500Mb of JavaScript just to read your Terms & Conditions page.

Test on spotty wifi. Try using the site on a train or in a coffee shop or using the City's free wifi (if you have it where you are). This is how your user will experience your site - not via 100Gb Ethernet cables.

Test on budget devices - find a few common mid-priced devices (you could probably get them from eBay) and test on those instead.

If you're feeling extra spicy - make sure at least one of those devices has a cracked screen for a truly authentic browsing experience 😜

Generate a random alphanumeric string using JavaScript

Thomas Rigby — Thu, 29 Apr 2021 00:00:00 +0000

Today I had to send an "ID" in the body of my POST request. It turns out that the API doesn't care what the value is - it just needs to be alphanumeric (a-z, A-Z, 0-9), exactly 18 characters long, and not already in the system.

So I decided to generate a random string^*!

Shut up already and give me the code!

const randomString = (len = 1) => new Array(len*2).fill(1000).map((x) => Math.ceil(x * Math.random()).toString(36).charAt(0)).filter(Boolean).sort(() => Math.random() - 0.5).map((x,i) => i % 2 === 0 ? x.toUpperCase() : x).join('').substr(0,len)

Now, let's break that down!

There's a lot going on in that one line!

Firstly, we create an Array with twice as many "characters" as we need.

Then we fill each item in the array with the number 1000.

For each of those items (.map()), we randomise the number by multiplying it by a randomly generated number between 0 and 1 (x * Math.random()). This is then converted into a two-character string. We only need the first character so let's grab that with charAt(0). You could also use [0] as shorthand.

Now we have an Array of twice as many random alphanumeric characters as we asked for.

Just to be on the safe side, we remove any empty or falsey values using .filter(Boolean) - this will get rid of any zeroes but meh 🤷‍♀️

The remaining values are shuffled into a new random order with .sort(() => Math.random() - 0.5).

Our new array is then looped through again and every even-index character is UPPERCASED (if possible - the numbers 0 to 9 cannot be uppercased).

Now we have an array of much more random characters, but this is randomString - what use is an array?! We need to join('') the array together. The '' separator is necessary - without it our string would be full of commas - gross!

Finally, remember how the string is twice as long as we need? - we return the correct number of characters from the start of the string.

Conclusion

So there it is! I have no idea how well it performs but you probably shouldn't be generating random strings in production anyway! 😬

What's this is probably most useful for is playing around with the individual components it's made up of:

Fill: Array.fill()
Shuffle: Array.sort(() => Math.random() - 0.5)
Modulos: i % 2 === 0
Remove 'falsey' values: Array.filter(Boolean)

See the Pen Generate a random Alphanumeric String using JavaScript by thomas×banks (ツ) (@thomasxbanks) on CodePen.

^* A better solution to this problem is…

const id = btoa(new Date()).substr(0,18);

…but where's the fun in that?! 😈

Wait!

Thomas Rigby — Mon, 19 Apr 2021 17:32:00 +0000

Why the rush…?!

Whether you're faking an API response, introducing deliberate cognitive drain, or simply want to slow things down this utility function has got you, baby! 😎

const delay = ms => new Promise(rv => setTimeout(rv, ms))

Cool! How do I use it?

delay(500).then(() => console.log(`hello world`))

Nice! Does it work with async/await?

Heck, yes, it does!

const functionName = async () => {

  doFirstThing()

  await delay(500)

  doNextThing()
}

See the Pen Delay by thomas×banks (ツ) (@thomasxbanks) on CodePen.

Quick and dirty carousel

Thomas Rigby — Tue, 13 Apr 2021 00:00:00 +0000

One thing I find myself looking up time and time again, is;

How do I move the first item of an array to the end? 🤔

So, in the spirit of If I write it down, I'll never forget it, here's a quick and dirty carousel that does just that.


const duration = 5000

const carousel = document.querySelector('[data-carousel]')

const slides = [...carousel.querySelectorAll('[data-slide]')]

const initCarousel = (carousel, slides) => {
  slides.push(slides.splice(0,1)[0])
  carousel.innerHTML = ''
  carousel.insertAdjacentElement('afterbegin', slides[0])
}

setInterval(() => initCarousel(carousel, slides), duration)

Let's break that down…

First we set the duration, 5000 milliseconds (5 seconds) should be good enough.

const duration = 5000

Next, identify your elements. Your common or garden carousel consists of a container (<div data-carousel /> in this case) and some slides (<article data-slide /> in this case).

const carousel = document.querySelector('[data-carousel]')

const slides = [...carousel.querySelectorAll('[data-slide]')]

Now, here's where the magic happens!

We have a smol function that moves the first item in the array to the end of the array then replaces the entire innerHTML of the container with the first slide in the array.

const initCarousel = (carousel, slides) => {
  slides.push(slides.splice(0,1)[0])
  carousel.innerHTML = ''
  carousel.insertAdjacentElement('afterbegin', slides[0])
}

Finally, we run the function over and over again, every 5 seconds…

setInterval(() => initCarousel(carousel, slides), duration)

Conclusion

And that's it!

OK, sure, it doesn't have any fancy transitions but hopefully I'll remember the magic formula! 🙏

arr.push(arr.splice(0,1)[0])

See the Pen Quick and dirty carousel by thomas×banks (ツ) (@thomasxbanks) on CodePen.

Increase WordPress uploads limit in Docker

Thomas Rigby — Wed, 31 Mar 2021 00:00:00 +0000

I've recently moved over to using Docker to manage my WordPress builds. It has many advantages and, the more comfortable I get, relatively few disadvantages. Not sponsored or anything, it's just boss!

One thing I find happens every single time is trying to upload an image into the Media Library and getting the "filename exceeds the maximum upload size for this site" error.

Inevitably, I find myself sticking docker wordpress increase upload limit into Bing (yes, Bing). There are a few answers knocking around - some of which I can get to work, some of which I can't.

This is the solution that I find works for me. I'm posting it here to save myself an hour of Googling next time! 😅

Step 1: `uploads.ini`

Firstly, create an uploads.ini file in your project. I like to keep mine in a specific config folder with my .htaccess file.

Step 2: Add your options

In the uploads.ini file, add the following:

upload_max_filesize = 16M
post_max_size = 24M

Feel free to change the values to suit your needs.

Step 3: Include your file

The file now needs mounting using volumes.

If you're using docker-compose, it will look a little something like this:

version: '3.1'

services:
  wordpress:
    image: wordpress:5.7.0-php7.3-apache
    restart: always
    ports:
      - 80:80
    environment:
    volumes:
      - ./config/uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
      - ./www/themes:/var/www/html/wp-content/themes:delegated
      - ./www/plugins:/var/www/html/wp-content/plugins:delegated

volumes:
  wordpress:

And that's it!

Start or restart Docker and you'll no longer get nasty errors when you try to upload that massive photo.

Just be aware that upload limits exist for good reason - nobody wants to have to download a tonne of 10Mb 1920×1080 images that are only going to be used as 300px thumbnails…

DEV Community: Thomas Rigby

Using Zustand to manage application state in React

Creating a Store

Amending state

Conclusion

Quick and dirty server 2

"No module named SimpleHTTPServer"

What if PORT 8000 is in use?

Trim trailing slash

Shut up and give me the code!

Let's break that down

Alternative solution!

Conclusion

How to create a global .gitignore file

WordPress forgotten password localhost hack

How do we do that then?

Semantic HTML

Div Soup™️

Semantic markup

Accessibility

SEO

Violent Psychopaths

I am a lazy developer or How to write 438 lines of nginx redirects

How can you do this wizardry?!

Cool! How does it work?

Step 1 - Get the contents of the CSV

Step 2 - Convert CSV to nginx

Step 3 - Write the output file

Conclusion

You have a better laptop than your users

How to be better

Generate a random alphanumeric string using JavaScript

Shut up already and give me the code!

Now, let's break that down!

Conclusion

Wait!

Cool! How do I use it?

Quick and dirty carousel

Let's break that down…

Conclusion

Increase WordPress uploads limit in Docker

Step 1: uploads.ini

Step 2: Add your options

Step 3: Include your file

And that's it!

Step 1: `uploads.ini`