Binyamin Green - Articles

Writing CSS with Purpose

Thu, 20 Jan 2022 19:00:58 GMT

I've been paying more attention to my website recently. I've been asking why it exists, what I want it to look like, and other such questions.

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.^[1] 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.

Not literally. I mean, I suppose you are typing on a keyboard. Unless your name is Josh Comeau, and you can code without using your hands. But, I digress. ↩︎

My Reading Goals in 2020

Mon, 04 Jan 2021 20:38:53 GMT

At the beginning of 2020, after seeing a Goodreads challenge, I decided to read twelve books that year. And I did read some wonderful books and novels. In Norse Mythology, Neil Gaiman paints a pretty picture of the Norse pantheon. Letters to a Young Writer, by Colum McCann, advises young writers on how to hone their craft, and itself exhibits excellent writing.

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.

Norse Mythology, by Neil Gaiman
The Voyage of the Dawn Treader (Chronicles of Narnia #5), by C. S. Lewis
Writer's Digest Guide to Magazine Article Writing, by Kerrie L. Flanagan
Letters to a Young Writer, by Colum McCann
Tuesdays with Morrie, by Mitch Albom
Mister Monday (The Keys to the Kingdom #1), by Garth Nix
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.

Filter Posts by Tag

Wed, 10 Jun 2020 16:00:00 GMT

Blogs can quickly become disorganized. You might want to link to a page on your website which only lists posts about CSS. With a bit of javascript, you can use /blog?tag=css to filter your posts.

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^[1]. 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);
    });
}

For more details, see this page on MDN. ↩︎

List all Posts using 11ty

Mon, 04 May 2020 16:00:00 GMT

On the front page of a blog, we often list the title of every post on the site. Jekyll will automatically list all pages within the _post directory under one collection. Eleventy, however, creates collections based on the tags. In other words, the only way to tell Eleventy that your page is a blog post is by adding an extra tag. You may not want to add the same tag for every post, especially if you already categorize your posts.

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");
    });
    //...
}

My top reading picks

Mon, 23 Mar 2020 16:00:00 GMT

Intricate worlds ensnare the mind. For this reason, I enjoy reading fantasy and science-fiction books. There are so many good novels, and endless amounts of excellent short-fiction. To create a list of my favorite stories is impossible — I have so many! What follows, then, is a rough list of a couple books which I adore.

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.

Notes on Startup Ideas

Tue, 17 Dec 2019 01:37:30 GMT

Note: This article is a summary of https://peterthaleikis.com/business-idea-validation/

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.

Six Uses for Webpack

Fri, 15 Nov 2019 11:05:00 GMT

I've always tried to avoid Webpack. I would tell myself it was either too complicated or unnecessary. After all, it's not the only tool of its kind on the market. Yet recently I've come to terms with Webpack. Once you know how to use it, it can be a very effective tool.

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.

My Year as a Moderator

Fri, 25 Oct 2019 19:10:26 GMT

Okay, so it hasn't actually been a year. It's been slightly over eight months. But I digress. Since February of 2019, I have been a moderator on a discord community named DesignCourse (Coursetro). Created by YouTuber Gary Simon, this place serves as a forum for questions and discussions regarding all sorts of design and development related topics. Recently, I realized that I have grown as a mod, as a developer, and as a person, since that day in February.

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.

Five Useful Tips for Adobe XD

Tue, 18 Jun 2019 16:11:04 GMT

Adobe XD is becoming the go-to tools for UI/UX Designers in 2019. It’s free, modern, and extensible. XD has many features, some of which you may not be aware of. Here are five useful tips for working within Adobe XD.

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.

#adobexd #protip Want to adjust the corners independently? Simply hold down Alt/Opt while dragging the corner to detach it from the others. @adobexd
By @elaincchao on Twitter

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