Anyhow, the structure of a readme often depends on the project, but there are some common points.

1. At the top of the readme, describe the purpose of the project. Be stupidly simple. State the obvious.

2. If the readme is for a website, link to the live website. It's surprising how often people miss this part.

3. If the readme is for a library, document the API. Nothing complicated, just a bullet-list with some code examples. Typescript definitions (typedefs) don't count. And while code should be self-documenting, it doesn't need to be the only form of documentation.

4. It's often helpful to link to related projects. You give those projects the boost they need, and your users can make an informed decision about your project.

5. Maintenance info: Is this just a personal project, or are you looking for actively looking for pull requests? Can people expect a quick response to their issues, comments, and pull requests? We're all busy, so there's no judgement here.

6. For legal reasons, I always include a short note mentioning the license.

That’s my two cents. I also wrote another shorter note about this topic. So that’s like, 3 cents. Which is very cheap, in case you wanted to buy me a coffee.

Anyhow, as I rewrite my CSS, I’ve begun to realize how poorly I use it as a language. My process for writing it consists mostly of trial-and-error, without any idea of what I’m doing. That makes it hard to rewrite the code, since there’s no organization or logic.

An Analogy

I guess my point is that writing CSS is kinda like typing on a keyboard.¹ Some typists don’t have the layout memorized. This group looks down at the keyboard when typing, then up at the screen to check for accuracy, and then down again. Other typists know the layout perfectly well, and focus their eyes on the screen at all times.

In the same fashion, some developers try CSS rules until they get what they want. The conversation goes something like this: Let’s try float: left. Nope. How about flexbox? Ah, there we go. But it’s not wrapping (sigh).

Other developers know why each rule does what it does. They don’t need to see the browser as often. There’s no “guess and check”. This second group transcends methodologies like BEM, and opinionated questions like “how to order your rules”.

An Ideal

When you stop pushing divs across the screen, you start making a website. I want to stop pushing divs. Websites are coffee makers, and I want to brew some coffee. Currently, though, I don’t understand CSS. I just write it.

Comments are for the people writing the code, not necessarily the peanut gallery. If a readme was meant as a sales pitch, it would be a website or a blog post.

Happiness is the delusion of perfection. What we truly seek is balance. Balance keeps your ice cream cone from falling apart again. It cannot remove the scrape from your knee, but it can give you a bandage. A kiss goodnight will not scare away any monsters, and still your bed will become safe for sleeping. You will have learned nothing, because you have plenty of wisdom already.

Let yourself grow taller. Plants need water and sunlight, but you are not a plant. Only fools set limits; the wise use guidelines. Run down the trail, even as you stay on the path. When the road splits, go left. Or right, it makes no difference. Momentum is a precious thing, and choices are all too common.

I rewrote my styles using vanilla CSS. Originally, I was using a SCSS because of its nesting capability. Another benefit of SCSS is that you can split your styles among multiple files. By default, CSS doesn’t perform well in that respect¹. An advantage of using CSS, was that it forced me to write my styles more succinctly. By limiting myself to one file, I gave myself a practical reason to keep the file size to a minimum.

I also started loading fewer web-fonts. I removed the body and display web-fonts, opting for local fonts instead. I was using Roboto (sans-serif) for the body text, and Lora (serif) for the headings. I switched them both to a single, local-only, “catch-all” font stack. I can hardly tell the difference.

Otherwise, I made minimal changes to the website’s visual design. In the process of rewriting the CSS, I made some stylistic decisions. For example, I changed the theme of my code blocks from “Nord” (a dark theme) to “GitHub Light”. I also removed the CSS reset I was using, which was normalize.css by Nicolas Gallagher.

Oh, and the best part is… my site is now only 100 ms faster. 326% smaller, 8.3% faster. Go figure. 🤷‍♂️

I’m trying to think of ways to encourage people who use my RSS feed (if they exist 😉) to actually read the articles on my website.

Why? I work hard on my website.

• I try to be accessible at all times
• I aim for the optimal reading experience
• I design for aesthetics as well as simplicity

Mainly, though, my website represents me. It’s the only coding project I’ve worked on steadily for the past three years. It’s been painstakingly redesigned multiple times, and I try to put flair and charm into each iteration. I care deeply about my website.

If you have any suggestions, please let me know.

The Problem

While I loved what I read, I only completed seven out of the twelve I had planned to read. Initially, I was disappointed that I didn’t meet my goal. Reading one book each month should not have been hard for me to do. Why couldn’t I have just read more?

Looking back, I find that I didn’t want to rush through any books. In order to read a 300-page book in one month, I would need to do at least ten pages per day. That’s great for fiction or light-reading. But some of the books I had lined-up were full of information which needed processing. My system was faulty.

A New Goal

If I’m going to up my reading game in 2021, I need to devise a different challenge. I could separate my books into light-reading and heavy-reading. Or maybe my goal was fine, and I need to widen my selection of books.

As I write this, I realize that the issue is about my choice of books. You see, there are a couple things I’d like to accomplish by reading. I want to take an emotional journey through a fabricated world. I’d also like to learn more about certain concepts and ideas. To me, this distinction is similar to that of fiction versus non-fiction.

Here’s my new goal: I’d like to read ten books this year. Of those ten, four must be novels or light-reading. The remaining six are be up to me.

Parting Thoughts

Honestly, though, every book can be a novel. Every book should be a journey, broken into both logical and emotionally-provoking sections. How else did Lin Manuel-Miranda transform a scholarly work into the acclaimed broadway musical, Hamilton? You don’t need to be a writer to tell stories, but you should tell a story when you write.

Full List

Here’s my full book list from 2020.

1. Norse Mythology, by Neil Gaiman
2. The Voyage of the Dawn Treader (Chronicles of Narnia #5), by C. S. Lewis
3. Writer’s Digest Guide to Magazine Article Writing, by Kerrie L. Flanagan
4. Letters to a Young Writer, by Colum McCann
5. Tuesdays with Morrie, by Mitch Albom
6. Mister Monday (The Keys to the Kingdom #1), by Garth Nix
7. Grim Tuesday (The Keys to the Kingdom #2), by Garth Nix

I ended the year in the middle of A Universe Made for Two, by Jack M. Daniel.

That’s the answer, I realized! They’re all posts, each with a different category. I decided to construct these categories using the Indieweb’s concept of a post type. I just need a blog and a micro blog (indieweb: articles and notes), and I should have room for other posts like photos and book reviews.

So, I changed my URL structure. Static pages, such as contact and now, stay the same. If it’s a post, it’ll be under /p/{title}/. Lastly, each post had a category page like /blog/. Under this new system, that’ll be /c/{category}/.

Okay, that’s a wrap on this article. Oh, one more thing. I set up redirects for my old posts. That’s all. Thanks for reading!

Finally, you come to the end of your conversation. A question burns in my belly, though I dare not ask it. You leave, and take with you a bundle of anger. I leave too, adding yours to my collection. May I talk now? No, not yet. You see, to talk I need a listener. My door is open; you may vent any time you please. Perhaps, one day, you will open yours.

For the following method to work, each post item should have a data attribute of data-tags="[tag1,tag2]">. On a related note, the method assumes a basic knowledge of HTML. Feel free to glance at W3Schools or MDN.

First, we need to find our posts. Use the document.querySelectorAll method¹. The method takes one parameter: A selector string formatted like a css selector. Now, we need to get the tag in the url. The global location.search variable provides us with the query parameters at the end of the url. This will give us a string, such as ?topic=css, which we can manipulate to find the tag.

Find which posts don’t have the tag. For each post, check if the tags in the data-tags attribute include the one we found in the url. (Hint: use Array.filter) Then, hide the filtered posts. HTML has a handy hidden attribute for situations like this. Set the hidden attribute of each filtered post to true.

You can now filter your blog posts by tag. Here’s the full snippet.

<ul>
	<li class="post">
		<!-- contents -->
	</li>
	<!-- more -->
</ul>

// Select all posts
const posts = [...document.querySelectorAll('.post')];

// Get the tag in the url
const tag = location.search.slice(location.search.indexOf('=') + 1);

if (tag) {
	// Find which posts don’t have the tag
	let postsNoTag = posts.filter(l => {
		return JSON.parse(l.dataset.tags).includes(tag) === false;
	});

	// Hide all posts which don’t have the tag
	postsNoTag.forEach(p => {
		p.setAttribute('hidden', true);
	});
}

One workaround fully documented feature is to create a custom collection. In .eleventy.js, use the addCollection method to define a new collection. You can call it posts, if you want to (you can also call it ice_cream). Use glob syntax to get only the pages inside your post folder. You can now find all your blog posts with the collections.posts variable.

Here’s the code for your .eleventy.js file.

module.exports = function(eleventyConfig) {
	eleventyConfig.addCollection('posts', function(collection) {
		return collection.getFilteredByGlob('posts/**/*.md');
	});
	// ...
};

Harry Potter and the Order of the Phoenix

By J. K. Rowling (Harry Potter, book 5)

Barnes & Noble

The fifth book of the Harry Potter series has always stuck with me, maybe because it represents coming-of-age. Harry Potter becomes a man as he defies the Ministry’s control of his school. But maybe I love it because of the world in which J. K. Rowling places us, and the magic she brings to our lives by doing so.

The Voyage of the Dawn Treader

By C. S. Lewis (The Chronicles of Narnia, book 5)

Barnes & Noble

This story tells of wonderful, adventurous myth. The book is an expedition into our minds, probing the depths of our imagination.The Voyage of the Dawn Treaderis a standard of children’s literature.

Norse Mythology

By Neil Gaiman

Barnes & Noble

Some would call this book a record of history. The stories, however, continue to enthrall and entrance as no history textbook ever has. Gaiman departs from Marvel’s floodlit depiction of Thor the Mighty and gives insight into the complex mind of Loki the Trickster. He paints the Norse pantheon with a signature, resplendent touch.

The Fellowship of the Ring

By J. R. R. Tolkien (Lord of the Rings, Part One)

Barnes & Noble

J. R. R. Tolkien was an Oxford professor, and the writing style reflects his stature. The world is magnificent, and the plot is riveting. I particularly connect with the main character, Frodo Baggins. Frodo is timid yet persistant, which I relate to.

The Martian Chronicles

By Ray Bradbury

Barnes & Noble

This collection of science-fiction stories covers Earth’s colonization of Mars, both from the explorers’ perspectives as well as from the natives’ viewpoint. As well as entertaining our imagination, Ray Bradbury warns of a dark future; one which is in our hands.

A Study in Scarlet

By Sir Arthur Conan Doyle (A Sherlock Holmes novel)

Barnes & Noble

Soon after Jack the Ripper tore through London, Sir Arthur Conan Doyle introduced a detective who saw through any crime. Sherlock Holmes meets his legendary partner, John Watson, and the rest is history. As we become intimate with Holmes, we observe his many strengths and inevitable weaknesses. Sherlock Holmes’ debut story is an essential piece for any bookcase.

The Letter for the King

By Tonke Dragt

Barnes & Noble

Tonke Dragt published this story in the Netherlands in 1962, but it was over fifty years before it was introduced to the English-speaking world. Sixteen-year-old Tiuri must trust no one as he ventures forth on his simple mission. As he fends of bandits on the back of each page, he emanates self-worth.

These are just a few of my favorites. Frank Herbert, Roald Dahl, and many others have also left behind timeless works. For more wonderful titles, check out The Great American Read by PBS, or poke around on Goodreads.

Now, I start to get into the nitty-gritty of the article. I may include some cool things like {% liquid:tags %} or inline code.

document.before('codeBlock', () => {
  do("explain with words");
})

Now, I write another paragraph. Write at least two body paragraphs, with at least three sentences each. Use proper grammar, ppl people!

Lastly, I leave you with a thought which will remind you of what I’ve written. It’s called a conclusion, and it’s like a party favor or gift. It leaves the reader with a good impression. Think of it as a nice way of saying, goodbye.

Eureka! You have a business idea. What should you do first? No, It’s not the development phase. It isn’t the design or the marketing stage. The process begins with validating your idea.

People like to jump at whims, but starting with research is helpful for many reasons. Most likely, you have no money set aside to allocate for the idea. Even though you’re motivated at the moment, you will get discouraged after a while. You’ll discover competition, or find the marketing stressful and overwhelming. Whatever the reason, plowing through the initial stages will give you powerful insights for the future.

To validate your idea, conduct some research. Gather a list of relevant phrases, words, and topics (keywords and keyphrases). Throw them at a bunch of popular websites, such as Google search, YouTube, Facebook, and Quora. (The article that I’m summarizing has a list of fifteen such sites). But don’t just research your idea, also look at your competitors. Use online tools to check their social media presence and evaluate their backlinks. Lastly, talk to friends about your idea. Get real feedback from real people. Mention it on Twitter, and see how people react. A picture paints a thousand words, but people paint pictures.

Webpack’s main usage is bundling JavaScript. In node.js, we generally use require or import to include an external resource in our JavaScript file. Yet browsers don’t understand require. You can either include the resource in the head of your HTML or make an HTTP request to a URL. With Webpack, though, you can bundle your in-browser code. Webpack will combine all the files that you imported using require and stick them in your file. Bundling can also take care of features such as ES6 notation which may not be compatible across all browsers. This requires the babel plugin.

Another use-case is minifying CSS and/or JavaScript. Minification strips all white-space from a file. It’s a very effective way of decreasing file size, thus speeding up load time. Minifying JavaScript requires no plugins, yet minifying CSS does. There are also plugins which increase the browser-compatibility of your CSS.

You can preprocess SCSS. There are other ways, such as gulp, node-sass, and even a VS Code extension. But once you’re using Webpack this is a pretty useful feature. This requires a Webpack loader.

You can compile JSX for ReactJS. This is can be easier to set up in some situations, especially in a complex environment such as an electron app. There’s a good tutorial on compiling JSX with Webpack here. Note that this requires a plugin as well.

You can compile Typescript with it. You can compile Typescript within VS Code, though Webpack may be more efficient because you can run many tasks with one command. This requires a plugin.

You can run a development server with your static files. Extensions do exist to serve that purpose, though Webpack can prove useful when running many tasks or complicated setups. This requires an extra package.

I don’t know the next time you will consider using Webpack, but I hope that now you will be more prepared.

tl;dr

All opinions expressed herein are my own

I’ve noticed that many users who ask questions are a bit clueless as to what they would like answered. They know they have an error in their code, and they know that’s bad. However, they don’t really understand what information to give or where to focus their question. When someone asks a question, they are really waving a flag for help, not asking a technical question. Obviously, this is also what you do inadvertently when you ask a question. Recognizing that you are clueless is the first step to a better “I need help” experience.

People don’t think. (Yes, that’s very general.) People usually think. But you and I know that it’s very easy to ask for help without actually talking through the issue at hand. And this is very important to realize. People don’t sift through archives to find duplicate issues, or host the complicated code that they want help with. But that’s exactly where you come in. Stepping through an obvious error, or teaching somebody the wondrous world of Codepen, is actually helping them solve their error. Simply typing “please read the rules” is not as useful. Just a thought.

Spammers are never wanted. I’m referring to those who advertise their service without being asked. You’ve probably seen them on discord or youtube, posting their website and whatnot. Sometimes, they are just being jerks. But when you talk to them, a whole different story comes out. Sometimes, they’ve been told to do it for marketing. Other times, they are trying to ask for help, but totally miss the mark. Once, I found a great resource and posted it on Gitter so people would use it, only to banned for spamming (I got back on eventually, but yeah). Spammers often mean well.

It’s very rewarding to help your sibling tie their shoes. Not all of us have a sibling or siblings of the relevant age, but we all have each other. I know that sounds cheesy, but hear me out, okay? As a moderator, I’m responsible for thousands of users daily. The environment must be safe, kind, and helpful. I’m proud of what I do, because as little as it may seem, I’m helping other people.

Finally, help can come in unexpected methods. It’s nice to know that a senior dev or designer is having the same issue as you, even if they can’t figure it out either. It’s also useful when someone points you to a guide without really answering your question. Of course, it’s better to give a complete answer, but there’s a next-best option. You don’t need to know it to be helpful.

I love answering questions or giving feedback. In my opinion, it helps me grow as a person. Additionally, I like the camaraderie that comes with being part of a community, if only an online one. It only takes a minute to help someone else, and with the internet you can find questions to be answered all of the time.

Summary

• people don’t always know what they’re asking for
• people don’t always think before asking questions
• spammers usually don’t mean to spam
• taking care of people is a healthy source of pride
• you don’t need to answer to be helpful

Come visit the DesignCourse discord server, and give me feedback on this article via email. That’s all for now. Take care.

Math

Adobe XD, as well as other programs such as Blender, Gimp and Inkscape, allows math in the input fields. Let’s say that I had two circles with a width of 258px each , and I wanted one to be half as big as the other. I could do the math mentally, which could get complicated. Or, I could type 258/2, and XD will do the math for me.

Assets

I use these all of the time.

Open the assets panel by typing ctrl/cmd + shift + y. Then, select a object and click on the plus sign next to the word “color”. That object’s color is now set based on the swatch in the assets panel. You can add that exact color to another object by selecting the object and clicking on the swatch. You can also edit the swatch by right-clicking and selecting “Edit”.

PS: This works for text styles as well.

Guides

XD has awesome automatic guides which can help you align things perfectly. Sometimes, though, the auto-guides just aren’t helping. Enter, guides. Well, manual guides. Drag from the top or left edge of an artboard to create a thin guide manually. You can position it wherever you like, and not worry about making XD understand where exactly you want to position your item.

Adjust Corners Separately

I found this awesome tip in a tweet from Elaine Chao.

Thanks Elaine.

Shortcuts

Shortcuts are awesome. They speed up your workflow, and make you look really professional 😎. You can find a comprehensive list here. Some useful shortcuts are:

• ctr/cmd + k: Create component from selection
• ctrl/cmd + shift + y: Toggle assets panel
• alt + drag: Duplicate selection