Forem: Binyamin Green

A template for building a mind garden in 11ty

Binyamin Green — Fri, 24 Jul 2020 18:37:54 +0000

There's a trend growing called mind-gardening. Some refer to it as evergreen note-taking, while others use the term "building a second brain".

// Detect dark theme var iframe = document.getElementById('tweet-1286034321275596801-902'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1286034321275596801&theme=dark" }

As mind gardens have grown, people have built tools to help
grow. I've noticed starter templates for Gatbsy and Jekyll, but none for Eleventy (my favorite SSG).

I've been coding my own digital garden with Eleventy, and I realized that it was pretty simple. So, I created a minimal template for building a mind garden in Eleventy.

binyamin / eleventy-garden

🌱 A starter site for building a mind garden with eleventy

It's on GitHub, and there's a live demo. Oh, and don't forget to star the repo!

Filter Posts by Tag

Binyamin Green — Wed, 10 Jun 2020 00:00:00 +0000

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]">.

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.

HTML

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

JavaScript

// 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 => JSON.parse(l.dataset.tags).includes(tag) === false);

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

List all posts using 11ty

Binyamin Green — Mon, 04 May 2020 13:08:34 +0000

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. 11ty, however, creates collections based on the tags. In other words, the only way to tell 11ty 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");
    });

}

All About the Template Tag

Binyamin Green — Tue, 07 Apr 2020 15:00:05 +0000

The template tag was first introduced in HTML 5.2, and has not received much fame since. It has ninety-five percent global browser support (source), so there’s not much of a reason to avoid it.

But what does the template tag actually do?

It stores HTML for later, so complex items are easy to replicate.
It’s invisible to users, screen-readers, and Search Engines, making SEO and accessibility (a11y) simple.
Since you are writing HTML in the HTML file, your code will read as simply as if it were written for two-year old children. (Disclaimer: I have not tested this).

Let’s give an example of somewhere we would use the template tag.

Consider a static page which pulls news from an API such as Hacker News’. We aren’t using React, nor Express. We can pull data from the Hacker News API, but how do we display them to the user?

We could use document.createElement. However, someone reading our code wouldn’t look for HTML inside the JavaScript file.
We could set the innerHTML to an HTML string. Except, this exposes a security risk called Cross Site Scripting. Thank you to moomin for pointing this out.
The best option seems to be the template tag.

You can learn more about using the template tag on MDN. Also, check out the Hacker News example on Codepen.

Note: This post first appeared on my blog.

[A boring title]

Binyamin Green — Thu, 12 Mar 2020 19:15:06 +0000

Here, I subtly introduce you to the topic at hand, and grab your attention. I may use fantastic words and extravagant linguistics, or I can just be really boring and stuff. That's called an introduction. Use it.

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

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.

Small projects for the long-term

Binyamin Green — Tue, 10 Mar 2020 18:33:35 +0000

Many open-source enthusiasts are familiar with the name "Sindre Sorhus". Sindre is a Norwegian developer with more than 1,000 packages on NPM and over 46,000 Twitter followers. He created chalk for coloring terminal output. His project ava helps with running JavaScript tests. He also spearheads the popular awesome lists collection on GitHub.

When asked how he "gets so much done", he responded,

...I think making small focused reusable modules has had the biggest impact on my productivity....

This statement has had a big impact on me recently. I've found that if I finish small goals often, I get more satisfaction than if I would have gotten with a large, never-ending project. I even revisited some old creations, and touched them up. I hope it makes your life more effective as well.

See also:

Small Focused Modules. Make small focused modules for… | by Sindre Sorhus | 🦄 Sindre Sorhus’ blog

Sindre Sorhus ・ May 3, 2021 ・
blog.sindresorhus.com

Unicorns on DEV 🦄🦄

Binyamin Green — Mon, 02 Mar 2020 01:35:15 +0000

I've been here since October of 2019, and I'm still wondering. What are unicorns on DEV?

Situation: A new computer

Binyamin Green — Mon, 24 Feb 2020 23:45:40 +0000

Recently, I installed a fresh installation of Ubuntu on my eight-year-old laptop. Specifically, I used - don't judge me - Elementary OS. Before I wiped the hard drive, I made a list of the tools I had on my laptop and used frequently. The list included developer tools such as postman and node, utilities such as spotify and dropbox, and office software like LibreOffice and Inkscape.

What are the very first tools you just need to install on a fresh operating system?

DEV logo on Boxicons

Binyamin Green — Tue, 18 Feb 2020 16:12:32 +0000

The DEV badge is available on Font Awesome!

Ben Halpern ・ Oct 15 '18 ・ 2 min read

#meta #webdev

The Dev.to logo is now available on https://boxicons.com/. Nothing against Fontawesome, but the Boxicons license (CC 4.0) allows both commercial reuse and requires no attribution.

By creating the issue and related pull request, I learned how easy open-source contribution can be. All it takes is time, patience, and ideas. The hardest part, to be honest, was waiting for the PR to be accepted.

atisawd / boxicons

High Quality web friendly icons

Notes on Startup Ideas

Binyamin Green — Tue, 17 Dec 2019 17:21:01 +0000

Note: This is a rehash 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.

I need to "get out"

Binyamin Green — Sun, 15 Dec 2019 19:45:49 +0000

Recently, I came upon the realization that there are a couple of reasons why I should leave my computer more often.

Firstly, talking with someone on Discord or Telegram will not produce the same human relationship as talking in real-life would. I don't see facial expressions or body language. If it's simply text, without voice, I can't even detect tones-of-voice.

Staying on the computer also creates the fallacy that I'm being productive. Sometimes, checking email, twitter, facebook and GitHub in a loop is not accomplishing anything. Granted, I can be productive online, but I can also fool myself into feeling productive while I'm wasting time. In the long run, this doesn't make me feel more productive at all.

Lastly, I miss out on so much. The world is full of sunshine, whereas screens don't usually work well in the sunlight. They force me to stay inside, in my room, just talking to Alexa. So I go to the coffee shop and work there.

And so, a message for Elon Musk: Create a computer that loves parks and birds. Make a machine that moves with music and whets you with waves of water.

[Insert applause here]

📬 Mailing Lists

Binyamin Green — Mon, 09 Dec 2019 21:25:04 +0000

I recently embarked on a side-project called DevMe, and I was told to start collecting emails even though I hadn't launched yet. (DevMe will be a website where developers can show off their interests, projects, job history and more). I tried many free bulk email services, such as Mailchimp, Tinyletter, EmailOctopus, and MailerLite. I used MailerLite for my latest email, but I'm not sure which service I'll use going forward.

Does your project have a mailing list? What (free) bulk email service do you enjoy using?