Stream-Crossing Confusion

Should I use WordPress or React hooks?
Should I use D3 or CSS?
Should I use Markdown or JSON?
Can I use flexbox in Gatsby?
Can I use custom properties in Jekyll?
Should I use HTML or the cloud?
How do I add dark mode to my Vue site?

These are tongue-in-cheek, but there is a point to be made here. It’s one challenge to understand a technology, and another challenge to understand how technologies fit together.

While some of the combinations of technologies above might seem confusing, you’re lucky that you know enough to find them confusing. That means you understand the technologies enough that you know they aren’t relevant either/or choices or that they do or don’t have anything that prevents them from going together.

I see this kind of confusion fairly often in beginners, and it’s really nothing to be ashamed of. It’s all part of the process.

I also see this type of confusion with readers of this site, because we often write about pretty base-level web technologies and don’t get into how they might then fit into different abstractions, like JavaScript frameworks or CMSs. For example, check out this post about building a slider. It doesn’t even touch JavaScript; it’s just vanilla HTML and CSS.

Perhaps an experienced front-end developer will understand they can use this slider code just about anywhere, as it doesn’t depend on anything else. But there are also developers who will be like it’s not in JSX so I can’t really use it. Or, is it on npm? I’ve forever had people ask me if some of the ideas and techniques they find here on the site would be usable on their WordPress site.

So, how would you use this slider code on a WordPress site? Well, as it’s just HTML and CSS, you could use the HTML in any of your templates, put the CSS in your site’s stylesheet, and it will work. But perhaps you’d like to manage the slides somehow within WordPress itself rather than editing template files. Maybe you have a custom post type of “Slide” then a custom page that outputs the content of those posts within the divs of the slider. Much more complicated, but essentially the same idea. If you wanted the slider to work in React, it’s probably a matter of changing some class attributes to className and putting the CSS wherever you do styling for your React site. We often stay with the base level technologies on CSS-Tricks because it makes things more generically useful, but it’s still interesting and another skill to learn how to port concepts to other technologies.

Lemme take a crack at those questions above.

Should I use WordPress or React hooks?

WordPress is a CMS you would choose to help you build out structured content and likely to build the entire site. You could build a site with React, and that’s getting more and more popular, but it’s still not that common. React is a way to build the front end of sites with components built in JavaScript to help with templating and logic. React hooks are a way to share functionality between components. So, this question isn’t an either/or — you can do both or either.

Should I use D3 or CSS?

CSS is used on all websites to do styling. D3 is a JavaScript library for doing data visualization. There is some crossover because you could, for example, build a bar chart with just HTML and CSS, or build that same bar chart in D3. But generally, D3 is doing very fancy drawing that CSS isn’t capable of, and CSS is doing layout of elements on a site that SVG (what D3 outputs) isn’t capable of.

Should I use Markdown or JSON?

Markdown is a language for writing content that compiles to HTML. For example, you might write a blog post in Markdown because it’s cleaner to write and look at and sort of discourages you getting to fancy with HTML in a place you shouldn’t. JSON is a format for storing data in a format that a lot of programming languages, particularly JavaScript, have an easy time dealing with. JSON has a nested key/value pair syntax that is fairly intuitive. You could put Markdown within JSON if it was useful to store the data in that way. There is some interesting crossover in that there are special varieties of Markdown that can have metadata as part of the file, called Front Matter. This Front Matter data is also in a key/value pair format, although a bit of a different syntax. Still, these are generally pretty different technologies. An API would commonly return JSON, but not Markdown, and you’d commonly blog in Markdown, not JSON.

Can I use flexbox in Gatsby?

Sure. Flexbox is a CSS thing and Gatsby is a React framework. Gatsby doesn’t care what CSS you use on the site. Since Gatsby is React-based, there is a whole world of CSS-in-JS libraries that might also be in use, so if you’re having trouble, it might be something related to that. For example, if the styling is being set via a JavaScript object format, you might have to use something like flexGrow instead of flex-grow, and the like.

Can I use custom properties in Jekyll?

Jekyll is a Ruby-powered static site generator, largely for producing blogs out of Markdown files. Much like Gatsby doesn’t care about your CSS, Jekyll doesn’t either. Custom properties are a CSS thing, so you are free to use them in your CSS that, in turn, is a part of your Jekyll site.

Should I use HTML or the cloud?

“The cloud” has a somewhat nebulous meaning, but generally refers to servers attached to the internet. And not just a single server, but a large network of them with a strong ability to scale and have redundancy. HTML is the base language of websites. Every website starts with a request for the HTML from a web server. They relate in that cloud-based servers might serve up those requests for HTML files! But they aren’t an either/or thing. You might write HTML that is served by a server that isn’t particularly “cloudy,” and you might use a cloud server for something unrelated to HTML (like storing large data files).