![\"GitHub's](\"https://virga.frontendweekly.tokyo/images/2021-01-18-n80ugn4M@2x.png\" "\\"It")
I regrettably forgot who actually said this: “Performance optimization is not an event, it’s process.” This always stuck in my mind when it comes to perf.
\nWhen it comes to process, it’s important to monitor. Seeing the change reminds us.
\nThere are lots of ways to do this, but I like lightweight solution of Speedlify which is created by Zach Leatherman.
\nAnd he explains how to use it at “I added Lighthouse Scores to my Site’s Footer and You Can Too”
\nI did follow his instruction, and it went as smoothly as expected.
\nI now have Lighthouse scores on my footer.
One thing I derailed from his instruction is that I didn’t use his web components. I went with server-side way.
\nI borrowed a bit of code from his web components.
I spend some time on CSS. This is the second most complicated style in Virga, next to typography(which I’m thinking about simplify).
\nI’m not sure how long I’m going to keep this style, but I like how it looks. I don’t like the code…
Well, then until next journey.
\n", "date_published": "2021-01-28T14:27:40Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2021-01-14-optimizing-images-with-eleventy/", "url": "https://virga.frontendweekly.tokyo/posts/2021-01-14-optimizing-images-with-eleventy/", "title": "Optimizing Images with Eleventy and GitHub Actions", "summary": "A story about optimizing image with Transforms and GitHub Actions", "content_html": "\n\nTo me, performance is a feature, and I simply like using fast websites more than slow websites, so naturally I’m going to build a site that I would want to use.
\n
This statement from Jeff Atwood had gotten me into the #perfmatters initiative which was started by many Googlers. I still love faster web.
\nOften, JavaScript gets blame on this performance, and I do think it is the one of the biggest hurdle.
\nI don’t have any client side JavaScript working on Virga, so what’s next on the list for the change of the slowness?
Images.
\nI don’t have those too many on Virga, but I sometime do. And I haven’t done anything to images for performance optimization.
\n<img> element is a veteran of HTML. It’s been in HTML since I had started to write HTML, but it has gone through many changes.
\nIt had introduced srcset attribute and image format like png, webp and the latest one avif. Moreover, <img> even has a new sibling <picture>.
What a journey it must’ve been.
\nAnd this is where my journey begins.
\nThis is a story about implementing performance optimization for images using Eleventy and GitHub Actions.
<picture> element #Some may think <div> has special power, and it is only element you’d use from HTML.
\nThose who resonated with that sentence, meet <picture>.
Now that webp and the more recently avif support on the way, it may not be performant enough using jpeg, png and gif anymore.
How would I use those newish image formats while keeping backward compatibility?
\nI’m pretty sure JavaScript can do it, but why would I need to have JavaScript to do it, when I can do it using HTML?
<picture>
<!-- load avif if supported -->
<source srcset=\"this-image-is.avif\" type=\"image/avif\">
<!-- load webp if supported -->
<source srcset=\"this-image-is.webp\" type=\"image/webp\">
<!-- fallback for `source` and use attributes for presentation -->
<img src=\"this-image-is.jpg\" alt=\"You'd better not omit alt\">
</picture>When it compares with <div> or <span>, <picture> looks complicated, but above snippet isn’t a complete “picture”.
Well, <picture> doesn’t do much, actually. The true power resides with srcset and sizes.
The above snippet demonstrates the power of srcset, let’s look at what sizes has in its sleeve.
<img srcset=\"elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w\"
sizes=\"(max-width: 600px) 480px,
800px\"
src=\"elva-fairy-800w.jpg\"
alt=\"Elva dressed as a fairy\">This snippet comes from “Responsive images” at MDN.
\nsizes looks complicated and even though MDN says it’s not that complicated, it is.
(max-width: 600px) part is called a media condition and “describes a possible state that the screen can be in. In this case, we are saying ‘when the viewport width is 600 pixels or less’.”, according to MDN.
480px which is right after a space is “The width of the slot the image will fill when the media condition is true.”
And I guess that 800px, one that never mentioned and right after a comma, is the width of the slot the image will fill when the media condition is FALSE.
sizes attribute determines which size of images should be used with in the viewport.
Let’s invert this, so it should make it a bit more understandable…
\nWhen we don’t want to use over-sized images for a small screen, use sizes to choose the appropriate image size.
So that means, I need to use sizes for every image formats.
Let’s combine both of snippets to unveil the true power.
\n<picture>
<!-- load avif if supported -->
<source srcset=\"elva-fairy-480w.avif 480w,
elva-fairy-800w.avif 800w\"
sizes=\"(max-width: 600px) 480px,
800px\"
type=\"image/avif\">
<!-- load webp if supported -->
<source srcset=\"elva-fairy-480w.webp 480w,
elva-fairy-800w.webp 800w\"
sizes=\"(max-width: 600px) 480px,
800px\"
type=\"image/webp\">
<!-- fallback for `source` and use attributes for presentation -->
\t<img srcset=\"elva-fairy-480w.jpg 480w,
\t elva-fairy-800w.jpg 800w\"
\t sizes=\"(max-width: 600px) 480px,
\t 800px\"
\t src=\"elva-fairy-800w.jpg\"
\t alt=\"Elva dressed as a fairy\">
</picture>This is powerful but surely a big chunk of codes.
\nLet’s not write this by hand.
I love markdown syntax for its simplicity.
\nLet’s turn this into the monstrously huge chunk of <picture>.
@11ty/eleventy-img with Eleventy Transforms #@11ty/eleventy-img is a plugin for Eleventy which uses the sharp image processor and outputs multiple sizes, save multiple formats, cache remote images locally.
Examples at Eleventy Doc shows using it with Shortcodes, but I only use images in one layout and want to keep using Markdown syntax, I’ll use the plugin at Transforms.
\n@11ty/eleventy-img is a simple yet very powerful plugin.
\nAfter about an hour of trial and error, I’ve settled with this:
const metadata = await Image(imagePath, {
\twidths: [1500, 750],
\tformats: ['avif', 'webp', 'png'],
\turlPath: '/images/',
\toutputDir: './11ty/images/generated',
});metadata will yield:
{
avif: [
{
format: 'avif',
width: 750,
height: 1168,
filename: 'ce28e207-750.avif',
outputPath: '11ty/images/generated/ce28e207-750.avif',
url: '/images/ce28e207-750.avif',
sourceType: 'image/avif',
srcset: '/images/ce28e207-750.avif 750w',
size: 23321
}
],
webp: [
{
format: 'webp',
width: 750,
height: 1168,
filename: 'ce28e207-750.webp',
outputPath: '11ty/images/generated/ce28e207-750.webp',
url: '/images/ce28e207-750.webp',
sourceType: 'image/webp',
srcset: '/images/ce28e207-750.webp 750w',
size: 37634
}
],
png: [
{
format: 'png',
width: 750,
height: 1168,
filename: 'ce28e207-750.png',
outputPath: '11ty/images/generated/ce28e207-750.png',
url: '/images/ce28e207-750.png',
sourceType: 'image/png',
srcset: '/images/ce28e207-750.png 750w',
size: 175924
}
]
}By looking at this output from the plugin, I can see what I’d need to construct <picture> and its siblings.
\nSince I’ve already had an Eleventy Transform for enhancing an article, I’m going to use it.
Transforms can modify a template’s output. I’d like to think of it as a post-processing tool in Eleventy.
\nSo for an article, a markdown file is used to build an HTML file, Transforms will take that output(the HTML file) and modify it.
By using this, I can “transform” this:
\ninto
\n<picture>
<source type=\"image/avif\" srcset=\"/images/ddf2e4b9-558.avif 558w\" sizes=\"(max-width: 768px) 100vw, 768px\">
<source type=\"image/webp\" srcset=\"/images/ddf2e4b9-558.webp 558w\" sizes=\"(max-width: 768px) 100vw, 768px\">
<source type=\"image/png\" srcset=\"/images/ddf2e4b9-558.png 558w\" sizes=\"(max-width: 768px) 100vw, 768px\">
<img src=\"/images/ddf2e4b9-558.png\" alt=\"Site flow for Virga\" title=\"This is a site flow for Varga\" loading=\"lazy\" decoding=\"async\" width=\"558\" height=\"678\">
</picture>If I needed more granular control how the final HTML turns out to be, I should use Shortcodes.
\nNow that I’m satisfied with my initial attempt for this Transform, I’ll move it to MOLLE for finalizing it.
\nI can always compress images at local using trusty ImageAlpha and ImageOptim. Or Squoosh CLI which can “optimize” webp.
\nIf I have an image on every article, then I would remember doing the optimization on local, but I don’t. So let’s automate it using calibreapp/image-actions.
\nI have previously worked with GitHub Action. Let’s say I did not have a good time back then.
\nLong story short, it is pretty difficult to test the action. For example, when I trigger GitHub Action by a pull request or push to the repository, I have to do it.
\nMy last attempt was scheduling deploy, so it was particularly difficult.
And there is always smart folk on Internet, nektos/act can “[r]un your GitHub Actions locally 🚀”.
\nThis tool seems like a godsend for me.
After installing Act via Homebrew, I run act -g which draws workflows:
act -g
╭──────────────────────────╮
│ calibreapp/image-actions │
╰──────────────────────────╯Oh, for the workflow, I did copy and paste from README.
\nSo I think it looks good so far, then I run act -n which is dry run.
*DRYRUN* [Compress images/calibreapp/image-actions] 🚀 Start image=node:12.6-buster-slim
*DRYRUN* [Compress images/calibreapp/image-actions] 🐳 docker run image=node:12.6-buster-slim entrypoint=[\"/usr/bin/tail\" \"-f\" \"/dev/null\"] cmd=[]
*DRYRUN* [Compress images/calibreapp/image-actions] ⭐ Run Checkout Branch
*DRYRUN* [Compress images/calibreapp/image-actions] ✅ Success - Checkout Branch
*DRYRUN* [Compress images/calibreapp/image-actions] ⭐ Run Compress Images
*DRYRUN* [Compress images/calibreapp/image-actions] ☁ git clone 'https://github.com/calibreapp/image-actions' # ref=main
*DRYRUN* [Compress images/calibreapp/image-actions] 🐳 docker run image=ghcr.io/calibreapp/image-actions/image-actions:main entrypoint=[] cmd=[]
*DRYRUN* [Compress images/calibreapp/image-actions] ✅ Success - Compress Images
*DRYRUN* [Compress images/calibreapp/image-actions] ⭐ Run Create Pull Request
*DRYRUN* [Compress images/calibreapp/image-actions] ☁ git clone 'https://github.com/peter-evans/create-pull-request' # ref=v3
*DRYRUN* [Compress images/calibreapp/image-actions] ✅ Success - Create Pull RequestIf I run act, it defaults to do push event, so I guess this is dry-running push.
act pull_request -n would mean run pull_request in dry-run mode.
I’ve got nothing. act pull_request gave me nothing as well.
# Only run on main repo on and PRs that match the main repo.
if: |
github.repository == 'frontendweekly/virga' &&
(github.event_name != 'pull_request' ||
github.event.pull_request.head.repo.full_name == github.repository)This was the culprit, more specifically github.event.pull_request.head.repo.full_name == github.repository line was the cause.
Remove entire if, then did act pull_request -n. It looks good.
Act is intended to work as a local task runner so, if I run it without -n it should actually compress images, but since I want to see, what actually happens when real push or pull_request have triggered.
Well, then until next journey.
\n", "date_published": "2021-01-14T12:44:31Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2021-01-09-indieweb-posse-using-eleventy-and-netlify-functions/", "url": "https://virga.frontendweekly.tokyo/posts/2021-01-09-indieweb-posse-using-eleventy-and-netlify-functions/", "title": "Indieweb: POSSE using Eleventy and Netlify Functions", "summary": "A story about testing and writing Netlify function", "content_html": "\n\nPOSSE is an abbreviation for Publish (on your) Own Site, Syndicate Elsewhere, the practice of posting content on your own site first, then publishing copies or sharing links to third parties (like social media silos) with original post links to provide viewers a path to directly interacting with your content.
\n
I’ve briefly mentioned POSSE at How Would I Extend Virga? and I’ve implemented “auto tweet posing when I deploy new article” by following Max Böck’s tutorial.
\nWhile Max Böck’s tutorial is great, I’ve been thinking about changing and exploring a few details.
\nWhat details I want to explore that comes to my mind right now:
\nAnd this is where my journey begins.
\nThis is a story about achieving POSSE practice using Eleventy and Netlify Functions and along its way, I want to visit unit testing, Netlify Dev and new (hopefully better maintained) Twitter library for API.
Again, I really appreciate for Max Böck for sharing a tutorial on this.
\nIn an essence, this is what I’m trying to do and everything can be done using Netlify Functions.
\nIn order to accomplish this, I would need to get the title and URL of the article.
This shouldn’t be difficult since Eleventy gives me many ways to access contents data.
\nHowever…
\n.
├── 11ty # ⇒ This is input dir for Eleventy
├── dist # ⇒ This is output dir for Eleventy
├── functions # ⇒ This is for Netlify Functions
├── .eleventy.js
└── README.mdI suppose I could move functions/ directory into 11ty/ so I can use contents data for tweets from Eleventy.
But I’ve decided to use the JSON Feed as the input for Netlify Functions.
\nThe JSON Feed is a syndication format, like RSS and Atom, but with one exception: it’s JSON instead of XML.
This is my JSON Feed(You can subscribe it with Feedbin or Feedly and I’m sure other RSS services support it.)
\nThe JSON Feed has all the data I need for a tweet, I don’t see why not using it.
\ndeploy-succeeded events #I need trigger serverless function calls when certain Netlify events happen. Netlify does allow me doing this.
\n\n\nto trigger a synchronous serverless function on deploy-succeeded events, name the function file
\ndeploy-succeeded.jsordeploy-succeeded.go.
This is exactly what I’m looking for. This means that I need to save a deploy-succeeded.js at functions/ directory.
According to “Synchronous function format” from Netlify Doc I need to export a handler method with async.
exports.handler = async () => {
\t// 1. Fetch the JSON Feed
\t// 2. Process that info so that I can tweet
};deploy-succeeded.js #\n\nFor me, TDD is far more than a safety net. It’s also constant, fast, realtime feedback. Instant gratification when I get it right. Instant, descriptive bug report when I get it wrong.
\n
I did implement deploy-succeeded.js already, I’ll delete it and try TDD(Test Driven Development).
A couple of questions I have before start doing TDD:
\nhandler method?For mocking, I’ll use Mock Service Worker which “is an API mocking library that uses Service Worker API to intercept actual requests.” It sounds like for client-side only, but it actually works in Node.js too.
\nFor testing non-export functions, I’ve decided to use jhnns /rewire. This looks like very black magic. I could export functions that I’m going to write for test, but that’s not what I intended to do with deploy-succeeded.js so I’ll take the black magic this time.
Experimenting is fun.
\nI like Comment Driven Development(CDD).
\n\n\nAn empty white page is a mirror into your mind. When the ideas in your mind are clouded, so are the words on the page in front of you. Re-writing is re-thinking. It’s the single best way to sharpen your ideas.
\n
I’m not smart. I don’t have CS degree. But I love writing. I just don’t pick and choose what language I write. Just like on this blog, I write in English (pardon me writing poorly), I usually write things in Japanese. I’m fluent in HTML and CSS, but not so much in JavaScript.
\nBut an important thing which still keep me working on Web development is: I love writing.
\nSo whenever I work on programming stuff, I write comment first.
\nIt’s frightening for me to looking a blank empty white page. This is why I like the dark theme. The dark theme makes me feel a little safer.
\nI write comments because it takes time to clarify what I want my code to do.
\nI want to my ideas to be as clear as a Neiman Marcus mirror as David Perell said before writing any codes.
// Require libraries
// Configure libraries
// Fetch JSON Feed
// Test if the most recent item in feed should be tweeted
// Create a text for a tweet. Remember there is 280 characters limit on Twitter
// Post a tweet
// Lambda Function Handler
exports.handler = async () => {};My first rough draft would look like this. Even though Jeff Bezos might not approve, I like writing in bullet lists.
\nLet’s dig a bit deeper using an example.
\nHow should I go about addressing this idea?: “Test if the most recent item in feed should be tweeted”
\nFinding the most recent item in feed is easy since JSON Feed has an “items” as an array so items[0] should be the most recent item.
\nHowever, what is the criteria for deciding an item “should be tweeted”?
I can tell by reading the comment that I’d need more research for that part. It’s too vague.
\nJust like writing an essay, I need find out something to rely on.
For this case, I think the Inversion Principle would help me.
\nWhat don’t I want to tweet? How can I avoid the same tweet appearing on my Twitter stream? How can I tell that I’ve already tweeted for the article which I just fixed typos?
The answers for those questions are in Twitter API document because I need to find out how the search in Twitter works.
\nI write comments like this. My rough draft becomes an outline, and an outline will become headings then questions and answers thrive in that headings.
\nI don’t commit them so nobody gets to read it but this is what I meant for writing helps me clarify my ideas.
\nUnfortunately, I don’t yet to know how GPT-3 works, but I don’t think even GPT-3 cannot generate JavaScript expressing my idea. (Well, maybe it does, but I don’t know)
\nTherefore, I need a validator to ensure that I expressed what I want correctly for now.
\nAfter researching Tweeter API Doc, I did find out about the search feature. In short, “the Twitter Search API searches against a sampling of recent Tweets published in the past 7 days.”
\nIf I were simply used the Search API to find out I tweeted the article or now by searching article URL which I think it’s unique enough for this kind of search, then there would be a couple of issues.
\nThe issues I can see now would be situation like this: if I did tweet the most recent article but after 7 days, I’ve noticed typos, so I fix them and deploy it, then that article is still the most recent article, and it’ll be after 7 days, so the article will get tweeted again.
\nI can’t speak for the others but for me, Twitter is already noisy, so it would be great if I can avoid being the noise…
\nAgain, the Inversion Principle works here.
\nWhich will lead me: How can I prevent hitting Search API if the article is more than 7 days old?
Let’s invert again, so it would sound more natural: If the most recent article is less than 7 days old, let’s hit Search API to make sure it’s not in Twitter yet.
\nDoesn’t this sound like a function?
\nIt does to me, so I write a test for it.
test('The most recent post is LESS than 7 days old', () => {
// Arrange
advanceTo(new Date(2021, 0, 1, 0, 0, 0));
const now = new Date();
const morethan7days = '2021-01-10T12:15:31.627Z';
const lessthan7days = '2021-01-06T12:15:31.627Z';
// Assert
expect(isLessThan7DaysOld(now, morethan7days)).toBe(false);
expect(isLessThan7DaysOld(now, lessthan7days)).toBe(true);
});And write the function.
\nconst isLessThan7DaysOld = (now, compare) => {
return Math.ceil((now - new Date(compare)) / 1000 / 60 / 60 / 24) >= -7;
};Next, I need to find out if my latest article’s URL is in the Twitter Search API or not.
\nI have to manipulate the response from Search API for this. Well, technically, I could use fake URL as a query to get “Not found” response and real URL to get “found” one, but 1) GET is safer to experimenting and 2) I want to avoid flakiness in my tests.
\nImportantly, I want to try out Mock Service Worker.
Whenever I experiment a new tool for the first time, I start by making an isolated environment for it. So I have a dedicated directory for this kind of work. The benefits of doing this is that it’s safe and clean, meaning I don’t have to worry about muddying the ongoing project, and I have a central place to look up how actually things work.
\nMock Service Worker has a great document helping me set it up, and I did create an example using a publicly available API (means that I don’t have to go through Auth process to GET responses).
\nI don’t exactly know how this thing works, but I know how to make it works for me.
\nMy initial test against this function looked like this:
\ntest('Twitter Search API returns ZERO result', async () => {
// Arrange
const query = 'TEST';
// Act
const actual = await doesSearchReturnZero(query);
// Assert
expect(actual).toBe(true);
});But, I soon realized this doesn’t add any value as a test since I’ve mocked response from https://api.twitter.com/1.1/search/tweets.json to always return [].
Eliel Saarinen, a finnish-American architect once said:
\n\n\nAlways design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan.
\n
Whenever I face the situation like this, I always come back to his quote and always remind me what I’m intended to do originally.
\nI want to design a gateway. This gateway will stop the process when criteria have met. Before thinking about designing this gateway, I need to think about more detail about the next action.
\nHowever, I’ve learned what to do with Mock Service Worker.
\nMy next action, according to my initial outline is: “Create a text for a tweet. Remember there are 240 characters limit on Twitter”.
\nI’ve decided to go with this simple format: ${title} via ${siteTitle}: ${url} and I need get those from the JSON Feed.
Let’s get it visualized.
\n![\"Explaining](\"https://virga.frontendweekly.tokyo/images/2021-01-09-indieweb-posse-using-eleventy-and-netlify-functions.fig1.png\" "\\"Fig")
Dashed boxes on Fig 1 are ones that need to be mocked and now I can see the whole picture, I should go ahead work on “Prepare Status Text”.
\ntest('Prepare a status text for a tweet', () => {
\t// Arrange
\tconst ingredient = {
\t status: 'This is a test tweet with in 240 characters limit',
\t url: 'https://virga.frontendweekly.tokyo/test-',
\t siteName: 'Virga',
\t};
\t// Act
\tconst actual = prepareStatusText(ingredient);
\t// Assert
\tconst expected =
\t 'This is a test tweet with in 240 characters limit via Virga: https://virga.frontendweekly.tokyo/test-';
\texpect(actual).toEqual(expected);
});Based on my visualization, I’d say this is the most complicated part of all, and it’s not too difficult to do. (I’m assuming URL is 40 characters, by the way.)
\nprepareStatusText() would be only test that have value, but I’m going to add mocks for “Fetch JSON Feed” and “Post a tweet”, too.
At this point, I’d have sufficient tests, so I’ll delete most of my implementation.
\nWell, I don’t literally delete it, but I put them away from the editor. Then try to remember what I had written and generate new implementation from the memory.
I’m not smart, but I still can use my memory as a filter, removing excessive and organizing what is vital.
\nMy unit tests are there to guide me where I’m going.
I don’t have to do this every time, but I do this often. I really like the part where I delete the implementation. This helps me think and remember. I might end up with the same lines of codes, but that’s ok. Some will say, it’s wast of time. Sure, I don’t disagree with it at all.
\nBut having a good feedback cycle helps me grow. And I believe feedbacks are not just from someone else. When a feedback comes from myself, that may be called a reflection, but the concept is same.
\nI love writing. I don’t discriminate what language I write. HTML, CSS and JavaScript are languages that I’ve learned and use. (I don’t speak them, but I do read them, sometimes just for fun.)
\nWriting is writing. It shouldn’t be matter what language I’m writing. This is how I learn to write better.
\nI’m going to finish my implementation, and it’ll be at my functions/ directory.
I haven’t finished it yet, and I haven’t touched Netlify Dev, but I’ll end my story here.
\nThis one has become very long one, and I’m going to need editing.
I might write a story for creating a component just like this one.
\nWell, then until next journey.
\n", "date_published": "2021-01-09T00:06:25Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2021-01-01-shareable-configs/", "url": "https://virga.frontendweekly.tokyo/posts/2021-01-01-shareable-configs/", "title": "Shareable Configs", "summary": "A story about creating shareable configurations for ESLint, stylelint, Jest preset and Browserlist", "content_html": "Static testing AKA linting has been integrated with my development for some times; however, my configurations for ESLint and stylelint haven’t had a single source of truth.
\nI’ve been copy and pasting configurations for long so that there are several versions of them.
\nIn addition, I run linting as a part of tests using Jest runners, and I realized that I have several versions for Jest configuration.
\nI knew there are a way to create a shareable configuration for ESLint, but didn’t know how.
\nI didn’t know there are a way to do a shareable configuration for stylelint nor Jest.
I need a home for those configurations.
\nAnd this is where my journey begins.
\nThis is a story about creating shareable configurations for ESLint, stylelint, Jest preset and Browserlist.
\nESLint has a dedicated page for shareable configs therefore it is relatively easy to set it up.
\n\n\nShareable configs are simply npm packages that export a configuration object. To start, create a Node.js module like you normally would. Make sure the module name begins with
\neslint-config-, such aseslint-config-myconfig.
“[A] configuration object” means what .eslintrc.js has in it. I had several of those scattering around all over my repositories, so I decided to start from scratch for new year.
I’ve used GitHub package instead of npm and that works great.
\nI’m using 11 plugins and here is 5 of them:
\n.eslintrc.js has become one-liner #module.exports = {
extends: '@frontendweekly/eslint-config-molle',
};Technically it is not a one-liner, but once I have set up my shareable config at GitHub package, all I need in .eslintrc.js is extends it.
Fortunately, stylelint has similar approach to ESLint one for creating a shareable config and stylelint/stylelint-config-standard has great rules for writing CSS so I only have 5 plugins.
\nAgain, I’ve used GitHub package instead of npm.
\nAll in all, my .stylelintrc.js has:
module.exports = {
extends: '@frontendweekly/stylelint-config-molle',
};Last year, I’ve spent some time renewing my knowledge and skill for testing via Testing Javascript by Kent C. Dodds.
\nI love tinkering with my config(that’s why I’m writing this story), so “Configure Jest for Testing JavaScript Applications” is one of my favorite sections.
\nIn that section, Kent C. Dodds showed real-world configuration for a large real-world application, and I have distilled it for my environment.
\njest-preset.js #First, Jest has jest.config.js so I thought I could use same approach as ESLint and stylelint for creating a shareable config.
\nEven though, I think I could make it work, but I’ve found a better way.
I’ve stumble upon preset when I’m reading Jest documentation.
\n\nA preset that is used as a base for Jest’s configuration. A preset should point to an npm module that has a jest-preset.json or jest-preset.js file at the root.
\n
In Jest world, I need jest-preset.js for a shareable config, yet differences between ESLint and stylelint basically end here.
Once I’ve set up jest-preset.js, my jest.config.js has:
module.exports = {
preset: '@frontendweekly/jest-preset-molle',
};My renewed ESLint and stylelint has rules for linting browser compatibilities so having a shared Browserlist setting comes in handy.
\nI’ve realized that I depend on Browserlist tightly, yet I only know a few things about it.
\nNaturally, I didn’t know about its shareable configs capability.
However, how to set it up is quite similar to ESLint and stylelint.
\nOnce I have exported an array which has browsers queries at index.js, I need to import at browserslistrc.
extends @frontendweekly/browserslist-config-molleWhile I’m digging into Browserslist document, I did found a gem.
\nnpx browserslist@latest --update-dbBrowserslist relies on caniuse-lite for doing last 2 versions or >1% so about once a month I would need to run above command to update it.
As of the time of writing, Browserslist is seeking help for its funding and I’m considering to become a backer.
\nAll of my shareable configs have now a home.
\nSince I mainly use it for my side project which is done in Eleventy, I consider it as a part of my MOLLE family.
\nmolle-rc is a new home.
\nI don’t recommend using them at all…this is my config for my side project.
\nI use yarn 2 without Lerna for mono-repo setup for this, but that’s another story.
\nI’ve spent some time to re-create new configs for ESLint, stylelint, Jest and Browserslist, and I’m happy for now.
\nI might add my prettier config to molle-rc later.
Well, then until next journey.
\n", "date_published": "2021-01-01T12:15:31Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-05-30-making-of-six/", "url": "https://virga.frontendweekly.tokyo/posts/2020-05-30-making-of-six/", "title": "Making of Six", "summary": "This is a story about creating new theme \"Six\" for Sixty Six", "content_html": "@ 00:05 May 31, 2020
\nI finally get to read “Redesign: Clearing A Path” by Frank Chimero. This post was the final note from his redesign journey.
\nNot only I love his design, I do also love what he writes. Reading these redesign notes got me think that it’s time to find a new home for Sixty Six.
Virga was created for Frontend Weekly Tokyo. Not for Sixty Six. Moreover, Sixty Six is in an unique territory since it collects quotes.
\nThat is why I’ll create a new theme “Six” for Sixty Six. (I like naming stuff. Well, “Six” is not that difficult to come up, but I like it anyway.)
\nAnd this is where my journey begins.
\nThis is a story about creating a theme for Eleventy, and I’ll do it on open as Frank Chimero has done.
\nAs always I don’t know how this story going to end, but I’ll document what happened to me along the way.
\nNotice the time stamp right after the header?
\nI think this journey will be long one, so I’m going to write this story open as well which means when I finished writing an “update”, I’ll make it public.
\nThe time stamp indicates modification time.
@ 22:18 May 31, 2020
\nI’m not a designer. I had once called myself one but not anymore.
\nI haven’t done any development as a professional for long time either.
\nI definitely work around this area, but I’m not there.
Anyway.
\nSixty Six has been distilled to blank state. Surprised to find out it is not broken. Surprised to see how simple Sixty Six is.
\nWhich forces me to think about what Sixty Six is.
Here’s what I have come up so far.
\n“Sixty Six is a collection of highlights which makes a foundation for the discoverable mental notes.”
\nMy english skill has been diminishing, but I still can tell this isn’t good one, but it is not broken.
\nWhat is the kernel of Sixty Six?
\nI’m not a designer. I may not be able to introduce myself as an engineer anymore, however I still love HTML and CSS. That has to account for something.
\nI’m nowhere close to answer the question.
\nI’ll start with HTML to find a way in.
@ 23:17 June 3, 2020
\nIn “The Festival of Sunflower” (Translation is mine. It’s titled “ひまわりの祝祭” in Japanese) which is one of my favorite mystery book by Iori Fujiwara, main character had always built his canvas from a plywood in his high school.
\nHe paint it white, torch it, make it flat and paint it white again. He does this several times to build his canvas.
\nI’m no artist. I’ve never done any oil painting, but I can empathize why he does this.
He said by doing this, he can produce interesting “matière”.
\nI’ve been thinking that browsers are the canvas.
\nThe browser is not the canvas. HTML is.
\nThe browser is the plywood.
I paint it white, torch it, make it flat and paint it white again. And I do this several times.
\nI think I now have interesting “matière”.
\nI now own the material I can build upon.
@ 23:15 June 9, 2020
\nI love tinkering with footer. When I design stuff, I tend to start working from footer.
\nApparently so does Frank Chimero.
\nI bet there is a collection of footer design somewhere.
So that’s what I’ve done.
\n![\"Footer](\"https://virga.frontendweekly.tokyo/images/2020-06-08-qtnrwZZm@2x.png\")
It’s been there for about one week.
\nI thought about using grid, but decided to go with The Switcher.
Every content are in it, but I think it’s too vanilla.
\nBut It’s too early to talk about personality of Six yet.
Let’s work on other kind of footer: meta.
\nThat’s where I put something like author, publish date etc.
\nIt’s kind of like footer. I often even use <footer> for it.
Sixty Six has only one meta, yet again working from footer make sense for me.
\nI’ve prepended a symbol — to bylines which carry the message about Sixty Six.
I’ve gone back and forward if I should have other metadata other than authors.
\n@ 21:18 June 15, 2020
\nMain contents for Sixty Six are quotes, and I have been working on it since I’ve started to do redesign.
\nI tend to quote the whole paragraph if it’s not too long; therefore, my contents tend to be short. It’s quite safe to say they are not long-form at all.
\nI need them to stand out, so the quote have given the largest font size.
\nGeorgia is my choice for this redesign. I love working with typeface since I don’t get to do so in my day job. Japanese fonts are very heavy so for performance budget we’ve set, I cannot use custom fonts.
\nHowever, I still choose Georgia since this is how typically read in my Instapaper app which is where the most of the quotes come from.
\nSixty Six is my bedrock for the discoverable memory. I don’t have any research to back this up, but I think it helps me to remember if the typeface for reading and recalling is same. I don’t have to question my self why I chose different typeface at least.
\nIt’s been about one week since I’ve finished working on the quote and list of quotes.
\nIt’s still very minimum, but I like minimum.
@ 21:39 June 18, 2020
\n\n\nOne of the ways that I’ve found to add spirit to simple designs is through color. The color need not be showy, only rich and nuanced.
\n
I am going to follow his advice. It seems very good one since I do like to work on color.
\nI want to add hint of my personality via color. I like green. I like red. And I like black and white. I was gonna pick one, but I use them all.
\nI’ve got a lot of help from Color Ninja and Sip for doing this.
\nAnd I think I’ve settled with current setting. I wouldn’t call it as a scheme since there no science behind my choice, but I think that’s what make this personal.
\nI also used a texture(it’s from Hero Patterns). It’s very subtle. fill-opacity='0.08' subtle.
1.0.0 #@ 23:50 June 24, 2020
\nSixty Six is stable, so Six is 1.0.0.
\nIt’s been 24 days. I’ve been working on this whenever I have time, yet I feel I haven’t done much.
\nHowever, this journey has come to the end for now.
\nI’m sure I’m going to nurture this design time to time.
Very minimum but has a split. That’s how I see Six.
\nI’m happy with the result.
\nIt’s been fun for sure.
Well, then until next journey.
\n", "date_published": "2020-05-30T14:15:35Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-05-15-does-netlify-build-plugin-improve-my-build-speed/", "url": "https://virga.frontendweekly.tokyo/posts/2020-05-15-does-netlify-build-plugin-improve-my-build-speed/", "title": "Does Netlify Build Plugin improve my build speed?", "summary": "This is a story about untangling Netlify Build Plugin to improve my build speed.", "content_html": "Meet the Hero—their world, what they want, what they fear.
\nMy last journey was to auto generate image from article data and by adding this feature, I’ve also added 2 mins of build time since generating screenshots takes time.
\nIn the finale of my story, I’ve mentioned Netlify Build Plugins, and their capability to access to the cache between build.
\nI was going to wait for a blog post from Phil Hawksworth as he mentioned writing it on his Tweet, but it would be more fun for me to get my own hand dirty on this topic.
\nAs always, I’m not sure how this story is going to end, but I’ll record what happened to me along the way.
\nAnd this is where my journey begins.
\nThis is a story about untangling Netlify Build Plugins so that I can create one to speed up my build.
Your Hero’s worst fears realized.
\nBefore I actually write some JavaScript(I’m assuming that is the language I can use to build Netlify Build Plugins), I need to find out about I can run Netlify Build Plugins locally.
\nHere are references I’ve found so far, and I haven’t read it all yet.
\nAccording to netlify/build, after enabling Build Plugins at Netlify, what I need to do is add:
\n[[plugins]]
package = \"netlify-plugin-debug-cache\"Something like this to my netlify.toml.
Before I’ve added above, I run npx netlify build --dry and that gave me this:
┌─────────────────────────────┐
│ Netlify Build │
└─────────────────────────────┘
❯ Version
@netlify/build 0.4.26
❯ Flags
dry: true
mode: cli
❯ Current directory
/Users/studiomohawk/Sync/Hack/sixtysix
❯ Config file
/Users/studiomohawk/Sync/Hack/sixtysix/netlify.toml
❯ Context
production
❯ Netlify Build Commands
For more information on build events see the docs https://github.com/netlify/build
Running `netlify build` will execute this build flow
┌──────────────────┬──────────────────┐
│ Event │ Location │
└──────────────────┴──────────────────┘
┌──────────────────┐
│ 1. onPreBuild ↓ │ Plugin @netlify/plugin-functions-install-core
└──────────────────┘
┌──────────────────┐
│ 2. onBuild ↓ │ build.command from netlify.toml
└──────────────────┘
┌──────────────────┐
│ 3. onPostBuild │ Plugin @netlify/plugin-functions-core
└──────────────────┘
If this looks good to you, run `netlify build` to execute the buildThis is what I get from the same command after I’ve added the configuration to netlify.toml.
┌─────────────────────────────┐
│ Netlify Build │
└─────────────────────────────┘
❯ Version
@netlify/build 0.4.26
❯ Flags
dry: true
mode: cli
❯ Current directory
/Users/studiomohawk/Sync/Hack/sixtysix
❯ Config file
/Users/studiomohawk/Sync/Hack/sixtysix/netlify.toml
❯ Context
production
❯ Installing plugins
- netlify-plugin-debug-cache
❯ Loading plugins
- netlify-plugin-debug-cache@1.0.3
❯ Netlify Build Commands
For more information on build events see the docs https://github.com/netlify/build
Running `netlify build` will execute this build flow
┌──────────────────┬──────────────────┐
│ Event │ Location │
└──────────────────┴──────────────────┘
┌──────────────────┐
│ 1. onPreBuild ↓ │ Plugin @netlify/plugin-functions-install-core
└──────────────────┘
┌──────────────────┐
│ 2. onBuild ↓ │ build.command from netlify.toml
└──────────────────┘
┌──────────────────┐
│ 3. onPostBuild ↓ │ Plugin @netlify/plugin-functions-core
└──────────────────┘
┌──────────────────┐
│ 4. onEnd │ Plugin netlify-plugin-debug-cache
└──────────────────┘
If this looks good to you, run `netlify build` to execute the buildNice.
\nIt did automatically install the plugin as a npm module and looks like netlify-plugin-debug-cache is executed onEnd event.
When I do npx netlify build (without --dry), there is cache-output.json in my dist directory. Since I haven’t save anything in cache yet, I have [] in my cache-output.json.
The Hero makes a decision about how to resolve the problem created by the Inciting Incident.
\nNow I’ve learned how to run a Netlify Build Plugin locally, let’s dig a bit deeper. Next objective will be saving the cache, but before doing that I need to know how to create own Netlify Build Plugin.
\nAccording to netlify/build, a plugin consists of two files: a manifest.yml and a JavaScript file exporting an object, so I made those.
plugins
└── netlify-plugin-molle-cache
├── index.js
└── manifest.ymlmanifest.yml has:
name: netlify-plugin-molle-cacheindex.js has:
module.exports = {
onPreBuild: () => {
console.log('Hello world from onPreBuild event!');
},
onPostBuild: () => {
console.log('Hello world from onPostBuild event!');
},
onEnd: () => {
console.log('Hello world from onEnd event!');
},
};And I’ve updated netlify.toml:
[[plugins]]
package = \"./plugins/netlify-plugin-molle-cache\"
[[plugins]]
package = \"netlify-plugin-debug-cache\"Then again run npx netlify build.
┌─────────────────────────────────────────────────────────────────┐
│ 2. onPreBuild command from ./plugins/netlify-plugin-molle-cache │
└─────────────────────────────────────────────────────────────────┘
Hello world from onPreBuild event!🎉 Yay.
\nI wish I could get this info by doing npx netlify build --dry, but worked as I’ve expected.
The Hero makes the first major progress in their journey.
\nMy objective is to save cache which means I need to save something. It really doesn’t matter what that is since I’m just trying to figure out how Netlify Build Plugin cache thing works.
\nIn the Tweet of Phil Hawksworth, he shared this screenshot about cache and looks like there is utils.cache available somewhere.
So let’s find out what utils is:
module.exports = {
onPreBuild: () => {
console.log('Hello world from onPreBuild event!');
},
onPostBuild: ({utils}) => {
console.log('Hello world from onPostBuild event!');
console.log(utils);
},
};This will log:
\n{
build: {
failBuild: [Function: failBuild],
failPlugin: [Function: failPlugin],
cancelBuild: [Function: cancelBuild]
},
git: {
modifiedFiles: [],
createdFiles: [],
deletedFiles: [],
commits: [],
linesOfCode: 0,
fileMatch: [Function: bound fileMatch]
},
cache: {
save: [Function: save],
restore: [Function: restore],
remove: [Function: remove],
has: [Function: has],
list: [Function: list],
getCacheDir: [Function: getCacheDir]
},
run: [Function: run] { command: [Function: runCommand] },
functions: { add: [Function: add] }
}Looks like I can use util.cache.save() to fulfill my objective, so my next action is figuring out what to save.
My ultimate objective here is to avoid taking screenshots as much as I can so that I can speed up my build.
\nSo let’s save screenshots which are saved at dist/previews.
There are Plugin constants which allows me to access to a directory which contains the deploy-ready HTML files and assets generated by the build.
\nI’ve stolen and modified this snippet from jlengstorf /netlify-plugin-gatsby-cache:
\nmodule.exports = {
onPreBuild: () => {
console.log('Hello world from onPreBuild event!');
},
async onPostBuild({constants, utils}) {
if (await utils.cache.save(constants.PUBLISH_DIR)) {
console.log(`Stored the ${constants.PUBLISH_DIR} to speed up future builds.`);
} else {
console.log('Nothing found.');
}
},
};await utils.cache.save(constants.PUBLISH_DIR) saves everything inside of constants.PUBLISH_DIR and will create a cache directory in a .netlify directory contains the cache.
This means I can remove netlify-plugin-debug-cache since I save this for debugging cache but .netlify has enough info to do that.
The point of no return. Something big and unexpected happens, and now there’s no going back to the Hero’s normal life.
\nSaving caches are only half the battle. I need to figure out how to restore them.
\nI think Eleventy doesn’t come with “increment build”, so I need a way to prevent taking screenshots if there are caches.
My screenshot.11ty.js has this as a main function.
async render(data) {
if (process.env.ELEVENTY_ENV === 'production') {
const dom = markup(data.screenshot.data);
return this.getscreenshot(dom.toString());
}
}So I need a new condition to prevent running those 2 functions.
\nutils.cache.list() returns list of cached file names in an array which can be executed on onPreBuild, so if I can write this to a file then I can load that file in screenshot.11ty.js.
It looks like a solid plan. Let’s see if fits in reality.
\nThe Hero confronts that obstacle by making a leap of faith that allows them to overcome it.
\nAnd after an hour or so, I have finished modifying my plugin and screenshot.11ty.js:
screenshot.11ty.js: https://github.com/frontendweekly/sixtysix/blob/master/src/previews/screenshot.11ty.jsSo Does Netlify Build Plugin improve my build speed?
\nWith caching, I’ve got Build time: 1m. Total deploy time: 1m 1s when there is no new quote. I have Build time: 2m 56s. Total deploy time: 3m 11s without caching.
\nIf I have a new quote, I have Build time: 1m. Total deploy time: 1m 3s.
The answer is yes.
\nNetlify Build Plugins have lots of possibilities, and it is relatively easy to debug, so it’s enjoyable to implement.
\nI’ll see what could I’ve done with this for Eleventy.
Well, then until next journey.
\n", "date_published": "2020-05-15T23:42:06Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-05-06-auto-generate-ogp-image-with-eleventy-and-puppeteer/", "url": "https://virga.frontendweekly.tokyo/posts/2020-05-06-auto-generate-ogp-image-with-eleventy-and-puppeteer/", "title": "Auto Generate Images from article data with Eleventy and Puppeteer", "summary": "This is a story about auto generating image from article data", "content_html": "I’ve been publishing weekly roundup of frontend related news and articles for about 6 or 7 years.
\nIt’s safe to say I like reading, and I’ve started to highlight when I read. (I use Pocket for reading on Web and Kindle for books. I’ve been switching between Pocket and Instapaper)
\nI used to give talks on meetups and conferences and all the talks I’ve given (about 40 talks), I always ended with a quote.
\n\n\nDerek says it’s always good to end a paper with a quote. He says someone else has already said it best. So if you can’t top it, steal from them and go out strong.
\n
I’ve followed this advice and quotes are not just in the end. Moreover, If quotes are in English which are almost always, I translate them into Japanese. I needed to have a system not to redo my translation therefore I made a collection of quotes.
\nI want to create a new home for highlights from my newly found habit and old quotes I’ve collected.
\nThat’s why I’ve started Sixty Six. (What’s with the name? It comes from quote symbol which looks like 66.)
\nSixty Six has been very useful for me since I still quote when I write in Virga.
\nThen I remembered I’ve tried to implement generating social media preview images, but I thought it’s not all that worth to put efforts into implementing, generating and storing images just for social media.
\nWhile I need to figure out how to tackle accessibility obstacles using images which primary content is text, I could use good-looking quotes.
\nThere are many excellent tutorials on this topic already:
\nAll right, let’s give it another shot.
\nAnd this is where my journey begins.
\nThis is a story about implementing auto-generate Images from article data with Eleventy and Puppeteer.
Although I haven’t thought about how I want this image would look like, I’ve given a thought about what I need to do to make this happen.
\nEleventy is a static site generator, so it’s very good at doing 1) and 2).
\nFor 3), I’ll be using Puppeteer for taking a snapshot.
For 1) and 2), Generate Social Media Preview Images by Dennis Hagemeier is quite helpful.
\nEleventy has this pagination feature and despite its name, I can use this to iterate over a data set and create pages for individual chunks of data.
\nI already have a “data set” which is my quote which is my main content for article in Sixty Six.
\nEach of my article has this in its front matter:
\n---
date: '2014-02-13'
quote: |-
You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.
tags:
- Steve Jobs
when: '2005, Jun 12'
cite: Stanford Commencement Address.
---
I already have whole quote which comes in very handy for this story.
\nAs for “create pages”, it can be done by “just” creating a template. It is rarely justified to say “just” in this kind of story but with Eleventy, I think it’s OK to say “just” here.
\nI did follow Dennis Hagemeier’s tutorial with a few modifications.
\n---
pagination:
data: collections.posts
size: 1
alias: preview
permalink: \"/previews/{{ preview.data.page.fileSlug }}/index.html\"
eleventyExcludeFromCollections: true
---I want to name generated HTMLs same as my article’s and that is what permalink: "/previews/{{ preview.data.page.fileSlug }}/ is doing. I did need help of console.log() for figuring out to come up with {{ preview.data.page.fileSlug }}. It turned out official document has this documented.
And here it is, after an hour or so, I’ve come up with the design:
\n![\"Preview](\"https://virga.frontendweekly.tokyo/images/2020-05-09-ow3H5TJq@2x.png\" "\\"Final")
Now I need to take screenshots.
\nPuppeteer does all the heavy work for me. From its README, Puppeteer works like this:
\nconst puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();Now I need to figure out how to provide URLs of all the generated HTML and file name for {path: 'PATH/FILE-NAME.png'}.
Tutorials I’ve mentioned earlier have done this via JSON file which is generated by Eleventy, and I’ve been following this path along as well.
\nAgain, from Dennis Hagemeier’s tutorial:
\n[
{
\"filename\": \"import-tweets-from-twitter-api-in-11ty-en-preview\",
\"path\": \"https://www.d-hagemeier.com/assets/preview-images/import-tweets-from-twitter-api-in-11ty-en-preview.html\"
}
]It does look simple, and I can imagine how this would be used in Puppeteer for taking screenshots.
\nThen I took another look at Stephanie Eckles’s article. Her approach is a bit different from Dennis Hagemeier’s.
\nShe has a template which will be feed into Puppeteer as plain HTML, then she used generated JSON file(which is done by Eleventy) to manipulate that HTML. Puppeteer has page.setContent() method which can consume strings of HTML to setContent on page.
Then I thought, could I combine these approaches together?
\nEleventy allows me to use JavaScript as one of the template language which means I can use Puppeteer in it and I’m sure I can use Pagination feature which provides data I need to generate HTMLs.
\nAt this point, I already have created HTMLs using Pagination feature, but I need to port that to JavaScript Template Language(Let’s call this .11ty.js from here on).
I could’ve created a boilerplate HTML like Stephanie Eckles’s solution, but I decided to do all the HTML generation in .11ty.js since my entire HTML is about 50 lines or so.
It was turned out to be a bad decision.
\nI’m sure I’m missing something but…:
include in .11ty.js - ↪ I have loaded it via fs.readFileSync()console.log() to see where the data I need - ↪ I should’ve done TDD using Jest, so I could have used toMatchSnapshot().Despite my bad decision, I have made it work so let’s use them to display on social media. I always consult HEAD by Josh Buchea whenever I need to add metatags in <head> and it does indeed have Social section.
I wanted to add socialImage field to each posts’ data, but couldn’t get it work as expected so:
<meta
property=\"og:image\"
content=\"{{ site.url }}/previews/{{ page.fileSlug }}/preview.png\"
/>I did this instead which works fine, I think.
\n…And it works:
![\"Validated](\"https://virga.frontendweekly.tokyo/images/2020-05-10-DRS76CHa@2x.png\" "\\"It")
Generating screenshots takes a lot of time, so I only do it when process.env.ELEVENTY_ENV === 'production';. I haven’t pushed it to GitHub, so I don’t know what will happen on Netlify build yet.
I’m thinking about using Netlify Build Plugins. According to Phil Hawksworth, it can access to the cache between build which sounds like a godsend to my situation.
\nExploring Netlify Build Plugins will be a great story.
\nFinally, Netlify build is done: Build time: 3m 17s. Total deploy time: 3m 27s and last time I had deployed Sixty Six, it was Build time: 1m 18s. Total deploy time: 1m 30s.
\nFor now, I can live with it, but I won’t be porting this feature to any other blogs right now.
Well, then until next journey.
\n", "date_published": "2020-05-06T08:33:34Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-05-03-setting-up-webmentions-on-eleventy/", "url": "https://virga.frontendweekly.tokyo/posts/2020-05-03-setting-up-webmentions-on-eleventy/", "title": "Setting Up Webmention on Eleventy", "summary": "This is a story about setting up Webmention on Eleventy", "content_html": "ACT I: Meet the Hero — their world, what they want, what they fear.
\nFrontend Weekly Tokyo was used to be on Medium, but it has gone a bit rogue in my opinion. Eleventy and Netlify allow me to own my contents with ease, so I’ve decided to give them a try.
\nOwning contents is the very foundation of IndieWeb. I wanted to expand my boundary a bit further.
\n“You are better connected” is one of three principles of IndieWeb which includes this statement:
\n\nEven replies and likes on other services can come back to your site so they’re all in one place.
\n
Inciting Incident: Your Hero’s worst fears realized.
\nSo to answer the question, I should own reactions to my contents, but how can I do that?
\nThis is what Webmention tries to solve.
\nThere are numbers of excellent tutorials on setting up Webmention on Eleventy and one I’m going to follow is Static Indieweb pt2: Using Webmentions by Max Böck.
\nHe also shares a basic starter template for Eleventy blogs with added support for webmentions on GitHub.
\nI’ll use these as my base to start the implementation.
\nAnd this is where my journey begins.
\nThis is a story about implementing Webmention in Eleventy.
ACT II: The Hero makes a decision about how to resolve the problem created by the Inciting Incident.
\nTo enable Webmention, I need to do 1) Receive, 2) Transform the data, 3) Display the data on Post pages.
\neleventy-cache-assets can be used to minimize my implementation_data/webmention.js to fetch the data - Try out eleventy-cache-assetswebmentionsForUrl as the base![\"Webmention](\"https://virga.frontendweekly.tokyo/images/webmention-virga.png\" "\\"Fat")
First Reversal: The Hero makes the first major progress in their journey.
\nIn order to receive webmentions, I need to declare an endpoint to accept them.
\nI could host this on my server, but for Eleventy (in the case of static sites), I need a third-party service for this.
\nWhich is where webmention.io comes in.
Webmention.io is a free service and using IndieAuth to sign in.
\nI could sign it in using Twitter or GitHub, but I will use my e-mail to sign in.
\n\"author\": {
\"name\": \"Yuya Saito\",
\"mail\": \"hello@studiomohawk.com\"
}I have this field filled at _data/site.json which in result outputs <link rel="me" href="mailto:"> so I can go ahead enter my URL at Webmention.io.
After successful sign in, Webmention.io will navigate me to https://webmention.io/settings and there is it a snippet to copy & paste. Handy.
<link rel=\"webmention\" href=\"https://webmention.io/virga.frontendweekly.com/webmention\" />
<link rel=\"pingback\" href=\"https://webmention.io/virga.frontendweekly.com/xmlrpc\" />I can copy & paste this into <head>.
When I’m writing this I’ve already finished implementing a part where I fetch webmentions, so I can answer this question.
\nAnswer is no. At least, not for me.
\nSo I need another tool. Bridgy.
\n\nBridgy is another free service that can monitor your Twitter, Facebook or Instagram activity and send a webmention for every like, reply or repost you receive.
\n
I went to Bridgy and connected with my Twitter account.
\nI have THREE(!) webmentions (which are not mine) on virga.frontendweekly.tokyo.
\nWell, three is better than zero.
Because you see, this story about implementing Webmentions on Eleventy is actually the second try for me.
\nWhat happened to the first one?
\nI DIDN’T have any webmentions on Virga, so I couldn’t go further.
Having a not so popular blog which tries to tell a story about Webmention turned out to be a challenge, I must say.
\nI have rediscovered the power of Eleventy when I look at the starter template by Max Böck.
\nI can use JavaScript at src/_data to fetch data, and the object will be available to all templates. I somehow believed that data in src/_date have to be JSON, but they just need to return object.
His example code is here.
\nMy favorite bit from his code is here:
\nmodule.exports = async function () {
const cache = readFromCache();
const {lastFetched} = cache;
// Only fetch new mentions in production
if (process.env.ELEVENTY_ENV === 'production' || !lastFetched) {
const feed = await fetchWebmentions(lastFetched);
if (feed) {
const webmentions = {
lastFetched: new Date().toISOString(),
children: mergeWebmentions(cache, feed),
};
writeToCache(webmentions);
return webmentions;
}
}
console.log(`${cache.children.length} webmentions loaded from cache`);
return cache;
};lastFetched.This is brilliant, but I wanted to try eleventy-cache-assets for more versatility.
eleventy-cache-assets #Zach Leatherman has shared eleventy-cache-assets a couple weeks ago.
I can use this to remove writeToCache() and readFromCache() functions from Max Böck’s original.
// url is API endpoint
const response = await CacheAsset(url, {
duration: '1d',
type: 'json',
});This means cache this request to url for 1 day and save it as json.
\nI could still use process.env.ELEVENTY_ENV === 'production' to prevent running in PROD, but this will be cached for 1 day, so I don’t think I need to worry about performance anymore.
I wish there is a way to read the cache data, or maybe there already is.
Midpoint: The point of no return. Something big and unexpected happens, and now there’s no going back to the Hero’s normal life.
\nNow I need transform this fetched data to be UI ready.
\n{
\"type\": \"entry\",
\"author\": {
\"type\": \"card\",
\"name\": \"Yuya Saito\",
\"photo\": \"https://webmention.io/avatar/pbs.twimg.com/b80465a02c7f06aa18d2116b0661ca1e7965c7b81f79d6ec217db070ae6dc5ae.png\",
\"url\": \"https://twitter.com/cssradar\"
},
\"url\": \"https://twitter.com/cssradar/status/1256682246607474688\",
\"published\": \"2020-05-02T20:29:30+00:00\",
\"wm-received\": \"2020-05-02T20:59:36Z\",
\"wm-id\": 790847,
\"wm-source\": \"https://brid-gy.appspot.com/repost/twitter/frontend_weekly/1256607056313888770/1256682246607474688\",
\"wm-target\": \"https://virga.frontendweekly.tokyo/posts/2020-04-30-creating-plugins-for-eleventy/\",
\"content\": {
\"text\": \"Virga: Creating Plugins for Eleventy virga.frontendweekly.tokyo/posts/2020-04-…\"
},
\"repost-of\": \"https://virga.frontendweekly.tokyo/posts/2020-04-30-creating-plugins-for-eleventy/\",
\"wm-property\": \"repost-of\",
\"wm-private\": false
}This is one of the Webmentions I received. (Well, I send this one.)
\nLet’s look at wm-property field since this piece of data will define how to display the data.
According to webmention.io’s README, there are 6 properties:
\nI don’t know what rsvp is, and I’ll ignore that and bookmark-of for now.
\nIn the world of Twitter, repost-of is Retweet, and I can tell others by its name.
Before I start transforming the data, I need to know how I would transform them so here there are:
\nIF wm-property === repost-of AND like-of, I want something like this:
![\"repost-of](\"https://virga.frontendweekly.tokyo/images/repost-like-of-webmention-virga.png\" "\\"Fat")
ELSE IF wm-property === mention-of AND in-reply-to, I want something like this:
![\"mention-of](\"https://virga.frontendweekly.tokyo/images/in-reply-to-mention-of-webmention-virga.png\" "\\"Fat")
Low Point: The Hero loses all hope, believes all is lost. But out of this darkness comes a plan to win the movie.{explanation}
\nwebmentionData() #Webmention.io gives me Webmention data associated with my domain which is fetch by src/_data/webmentions.js.
\nIn another word, the data have all the Webmentions for Virga, but my plan is to display Webmentions related to articles.
webmentionData() filter does exactly this and is almost same as Max Böck’s.
When it comes to build UIs, HTML is the center of my universe. However, I need contents when I design UIs and when I design, I do it using HTML & CSS with a help with fat marker sketches. (I’ve started to use Excalidraw for doing this recently.)
\nI’ve made the fat marker sketch in strategy phase because it helps me navigate.
\nsrc/_data/webmentions.js and webmentionData() have given me contents I need for design.
Now it’s time to do HTML. Don’t think about the style yet, but think about structure. I mean, really. Think hard until I could almost start to see HTML when I look at the fat marker sketch.
\nStructuring means almost same as naming because naming means almost same as finding patterns and patterns “[…] describe[s] the problem and solution to that problem, in such way that you can use this solution a million times over, without ever doing it the same way twice.” (Christopher Alexander, Sara Ishikawa and Murray Silverstein, A Pattern Language: Towns, Buildings, Construction. (1977)).
\n![\"UI](\"https://virga.frontendweekly.tokyo/images/2020-05-05-fQ4kWrUv@2x.png\" "\\"Final")
This is the UI what I’ve ended up with for now.
\nI have introduced 3 objects(Media Object, Sidebar and Switcher, which I’ve ended up not using it) to CSS. I have also learned how to use macro.
The Hero confronts that obstacle by making a leap of faith that allows them to overcome it.
\nWell, then until next journey.
\n", "date_published": "2020-05-03T03:49:56Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-04-30-creating-plugins-for-eleventy/", "url": "https://virga.frontendweekly.tokyo/posts/2020-04-30-creating-plugins-for-eleventy/", "title": "Creating Plugins for Eleventy", "summary": "A story about creating plugins for Eleventy", "content_html": "Before I introduced my story about creating plugins for Eleventy, let me write about How I’m imaging to publish stories on Virga.
\nVirga was born to learn about Eleventy, so I forked Hylia as a starting point so Virga is also a starter kit for Eleventy. I’m using it for 2 other blogs(Frontend Weekly Tokyo and Sixty Six) and I’ve started use Virga as a blog since I didn’t think anyone actually using this as a starter kit.
\nI’ve written a few articles mostly about Virga itself, and I have nothing to left to write.
\nNow I need to think about what I’m going to write. I know. This is where blogging becomes difficult, right?
So here it is, this is what I’m doing about it.
\nI write a story about what I’m going to implement, and I write about it as I do. I don’t even know how this story is going to be and that I think makes it interesting.
\nThis is like a diary, but I’ll call it a story anyway.
This is a story about implementing plugins for Eleventy.
\n/ˈmɒl.liː/) #What do I want for plugins? And what does “plugins” mean in Eleventy?
\nTo answer the latter, I’m using plugins such as eleventy-plugins-rss and eleventy-plugin-syntaxhighlight but I haven’t look at how they work.
eleventy-plugin-blog-tools by Bryan Robinson is why I thought about making plugin at first.
I have 3 blogs including this one, and they all use same 5 filters and 2 transforms. I update these scarcely but whenever I do, I have to do it 3 times.
\nThis is the very problem I’m trying to fix it with my soon-to-be created plugins and this is where MOLLE comes in.
\nMOLLE is where I place my tiny plugins, and I want to tryout monorepo using Lerna. While I could have published my plugins at npm, but I also want to try GitHub Packages.
\nThis is where my journey begins.
\nWhat’s with the name?
\nMOLLE is an acronym for Modular Lightweight Load-carrying Equipment and according to Wikipedia, “It is used to define the current generation of load-bearing equipment and backpacks used by a number of NATO armed forces, especially the British Army and the United States Army.”
\nI think the name rings true to what it’s going to achieve.
\n\nLerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
\n
In my word, Lerna will help me to manage multi-package in one repository.
\nI won’t go into deep dive on Lerna since I’m figuring it out right now.
While official GitHub repo page offers detailed documentation, I’ve grasped the gist of it by reading 2 articles below:
\nI want to choose which plugin to install even though I need most of the plugins to run my blogs. Therefore, each of my plugins are going to have different version. This is what “Independent mode” means in Lerna.
\nAnd that’s what lerna init --independent does.
There are many commands available on Lerna, but so far I’ve only used lerna publish which publishes updated packages to the registry.
I’m going to need to learn more about Lerna, but I initialized it and am able to publish my packages to GitHub Packages (with a couple of mistakes along the way, of course).
\nMy current config for Lerna looks like this:
\n{
\"npmClient\": \"npm\",
\"command\": {
\"publish\": {
\"ignoreChanges\": [\"ignored-file\", \"*.md\"],
\"message\": \"chore(release): publish\",
\"registry\": \"https://npm.pkg.github.com\"
}
},
\"packages\": [\"packages/*\"],
\"version\": \"independent\"
}Publishing a package to GitHub Packages is same process as npm org, and I already have done it before at work.
\nI needed to generate GitHub Personal Token since I forgot I already had one for GitHub Packages (Dear future me, you should save tokens on 1 password whenever you make new one).
\nI need have .npmrc at my project root which have this.
//npm.pkg.github.com/:_authToken=${GITHUB_PKG_TOKEN}
registry=https://npm.pkg.github.com/frontendweeklyI use direnv to load and unload environment variables so actual value of ${GITHUB_PKG_TOKEN} is in .envrc file.
I haven’t figure out how to use GitHub Actions to automate publishing a package yet but that’s something I am going to do in the future.
\nAccording to official document, “Plugins are custom code that Eleventy can import into a project from an external repository.”
\nconst pluginRss = require('@11ty/eleventy-plugin-rss');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
};And this is how a plugin might be “imported” from an “external repository”.
\nI’ve read some of the plugins’ code, but I didn’t know why I want to do addPluin() when you could do addFilter() or addTransform()?
eleventy-plugin-blog-tools by Bryan Robinson offers 5 shortcodes, 2 filters and 1 collection as a plugin and I can import all by doing addPluin() which is handy for sure.
And I could do that by setting up .eleventy.js as I would normally do in Eleventy.
\nNow I see what makes a plugin a plugin.
I’ve already had 4 packages ported to MOLLE, and I’ve published each packages, but those packages don’t have .eleventy.js.
\nI should have come to that realization before publishing packages, however I have a good idea to save my mistake.
Published packages are going to stay as there are. Just packages. But I can import them individually if I want.
\nAnd I’ll make a new package which will be a proper Eleventy plugin, which has all filters and transforms.
I’ve already have published 4 packages on GitHub so I would say it’s good time to make an Eleventy plugins.
\nAs Joe Armstrong who is a creator of Erlang wrote “The first in acquiring any new skill is not being able to do your own thing but being able to reproduce what other people before you.”, I’ve looked at how eleventy-plugins-rss implements a plugin and stole useful bits (Thank you, Mr. Zach Leatherman) and ended up like this:
.
├── example/
├── node_modules
├── .eleventy.js
├── .eleventyignore
├── .npmignore
├── LICENSE.md
├── package-lock.json
├── package.json
└── README.mdInside of .eleventy.js, I have:
const filterDateOrdinalSuffix = require('../filter-date-with-ordinal-suffix');
const filterDateIso = require('../filter-date-iso');
const transformHtmlMin = require('../transform-htmlmin');
const transformEnhancePostHtml = require('../transform-enhance-post-html');
module.exports = function (eleventyConfig) {
eleventyConfig.addFilter('dateOrdinalSuffixFilter', filterDateOrdinalSuffix);
eleventyConfig.addFilter('dateIsoFilter', filterDateIso);
eleventyConfig.addTransform('htmlmin', transformHtmlMin);
eleventyConfig.addTransform('enhancePostHtml', transformEnhancePostHtml);
};And this is how I would use it:
\nconst molle = require('@frontendweekly/molle');
module.exports = function (config) {
config.addPlugin(molle);
};Although I haven’t use it on my blog yet, I have an example dir to confirm it seems working as intended.
As I’ve mentioned above, I have this in .eleventy.js.
\nShould I make those requires from registry?
\nThe answer is Yes because I want to update individual packages without breaking molle.
const filterDateOrdinalSuffix = require('../filter-date-ordinal-suffix');
const filterDateIso = require('../filter-date-iso');
const transformHtmlMin = require('../transform-htmlmin');
const transformEnhancePostHtml = require('../transform-enhance-post-html');I made the change and run npx lerna bootstrap.
\nI don’t know what exactly lerna bootstrap does, and I thought it’ll install all packages I’ve specified in the code.
Nope.
\nLooks like I need to do that manually, so I did:
\nnpx lerna add @frontendweekly/filter-date-ordinal-suffix packages/molle --registry https://npm.pkg.github.com
npx lerna add @frontendweekly/filter-date-iso packages/molle --registry https://npm.pkg.github.com
npx lerna add @frontendweekly/transform-enhance-post-html packages/molle --registry https://npm.pkg.github.com
# ... and other dependenciesIt seems like I have to do this for every dependency I need to add, but this does the tricks.
\nnpm install @frontendweekly/molle --saveand add this at .eleventy.js and of course, removing local filters and transforms…
const molle = require('@frontendweekly/molle');
module.exports = function (config) {
config.addPlugin(molle);
};… and It works 🎉
\nMOLLE now lives in https://github.com/frontendweekly/molle and I’m using it on Virga as I write this very sentence.
\nWell, then until next journey.
\n", "date_published": "2020-04-30T10:46:06Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-04-05-eleventy-with-rollup/", "url": "https://virga.frontendweekly.tokyo/posts/2020-04-05-eleventy-with-rollup/", "title": "Eleventy with Rollup", "summary": "My favorite languages are HTML and CSS, but sometimes I do need JavaScript and when I do I use Rollup", "content_html": "I’ve written on “Eleventy with Theo, Sass and PostCSS” which is about how to utilize Eleventy JavaScript Templates to build Theo, Sass and PostCSS.
\nThis time, I’ll demonstrate how to build JavaScript using Rollup with the same method I’ve mentioned above.
\nAccording to Rollup guide:
\n\n\nRollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
\n
If you like to add some JavaScript into Eleventy, having Rollup to bundle JavaScript files comes in handy.
\nRollup does recommend having a config file so…
\nconst resolve = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');
const {terser} = require('rollup-plugin-terser');
module.exports = {
input: 'src/_js/main.js',
plugins: [resolve(), commonjs()],
output: {
file: 'dist/_js/bundle.js',
format: 'iife',
sourcemap: true,
plugins: [terser()],
},
};This is the config file for this example. You can do a lot in this config so if you’re interested to learn, please read official guide.
\nI’ll use this in both Eleventy JavaScript Templates and CLI.
\nLet’s look at Eleventy JavaScript Templates.
\nI’d say 99% of this code comes from the official guide.
const rollup = require('rollup');
const loadConfigFile = require('rollup/dist/loadConfigFile');
const {resolve} = require('path');
const rollupConfigFile = resolve(__dirname, '../../rollup.config.js');
module.exports = class {
async render(data) {
// Stolen from:
// https://rollupjs.org/guide/en/#programmatically-loading-a-config-file
loadConfigFile(rollupConfigFile, {format: 'iife'}).then(
async ({options, warnings}) => {
const option = options[0];
// \"warnings\" wraps the default `onwarn` handler passed by the CLI.
// This prints all warnings up to this point:
console.log(`We currently have ${warnings.count} warnings`);
// This prints all deferred warnings
warnings.flush();
// options is an \"inputOptions\" object with an additional \"output\"
// property that contains an array of \"outputOptions\".
// The following will generate all outputs and write them to disk the same
// way the CLI does it:
const bundle = await rollup.rollup(option);
await Promise.all(option.output.map(bundle.write));
// You can also pass this directly to \"rollup.watch\"
rollup.watch(option);
}
);
}
};So this code does “loadConfigFile”:
\nconst loadConfigFile = require('rollup/dist/loadConfigFile');
...
const rollupConfigFile = resolve(__dirname, '../../rollup.config.js');And “bundle” JavaScript:
\nconst bundle = await rollup.rollup(option);And “write” file:
\nawait Promise.all(option.output.map(bundle.write));This will also write a map file as well.
\nFinally, “watch” file changes:
\nrollup.watch(option);If you’re familiar with CLI of Rollup, you might see the similarities.
\n\"scripts\": {
\"build:js\": \"rollup -c\"
}rollup -c means build JavaScript files with the config file.
\nSo if you’ve set up a config file, you can do production build very easily.
Eleventy is very flexible on how you want to process a file. In the recent post “How Virga processes PostCSS”, I explained how I use JavaScript as Eleventy templates to process PostCSS.
\nWith the same idea with little changes, you can do more complex process.
I’ll demonstrate this in this post with using Theo, Sass and PostCSS(again).
\nBefore I get into the details, I believe I owe an explanation on Theo and Sass.
If you want to see the example repo I have created for this post, It’s at 11ty-theo-sass-postcss-example.
\nTheo is an abstraction for transforming and formatting Design Tokens which is open sourced by Salesforce.
\nIn short, Theo transforms yaml files which define Design Tokens into various formats like sass variables.
\n\nDesign tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
\n
This is how Design Tokens are defined in Lightning Design System of Salesforce.
\nDesign Tokens now have own W3C Community Group and I’m really excited about this.
\nHave you noticed that Sass has changed its primary implementation of Sass?
\nSass was originally written in Ruby and then LibSass is a C/C++ port of the Sass engine. LibSass is just a library, so it has been used with a wrapper like Node Sass.
\nNow Sass is written in Dart, and it is the primary implementation of Sass which means it gets new features before any other implementation.
\nIn this post, when I mention Sass, I’m taking about Dart Sass.
\nYou can install Dart Sass via npm.
npm install sass (--save-deps|--save)\nyaml into Sass #Theo provides a command line tool to transform yaml files into various format.
theo tokens.yml --format map.scss --dest .\nAbove command means tokens.yml file will be transformed into map.scss format and output file in . (which is same directly as the command executed).
The output file, in this case will be tokens.map.scss which contains something like this:
$tokens-map: (
'${props}': (${value}),
);However, Sass has importer option which can be utilized to do some thing like this in Sass file.
@import './tokens/token.yml';importer executes JavaScript function(s) when a @use rule or an @import rule is encountered.
\nThat means Sass can run theo in importer function to do the transformation.
/* Stolen from https://basalt.io/blog/theo-design-tokens-using-node-sass-importer-for-any-build-method */
const {resolve, parse} = require('path');
const theo = require('theo');
/**
* Theo Design Token Sass Importer
* Import scss variables from Yaml files directly
* @param {string} url - path to the file passed into import statement, i.e. `@import \"design-tokens.yml\";`
* @param {string} prev - path to the file the import statement is located at, useful for calculating relative paths
* @link <https://www.npmjs.com/package/theo>
*/
function theoImporter(url, prev) {
// If the imported file doesn't end in `.yml` or `.yaml`, then `return null` early to tell node-sass that we're not going to do anything. It'll go on to the next function or just try to handle the import itself.
if (!/\\.ya?ml$/.test(url)) return null;
// `prev` is the where it was imported from, we just want the directory it is in
const prevDirectory = parse(prev).dir;
// imports are almost always relative, so let's figure out how to get to there from here so we end up with an absolute url
const designTokenFilePath = resolve(prevDirectory, url);
const theoConverted = theo.convertSync({
transform: {
type: 'web',
file: designTokenFilePath,
},
format: {
// This can be any format Theo supports (or your own custom one!) <https://www.npmjs.com/package/theo#formats>
// I'm choosing map.scss
type: 'map.scss',
},
});
return {
contents: theoConverted,
};
}
module.exports = theoImporter;And you can “load” this importer function like:
const theoImporter = require('../../_theo-importer');
const sassResult = sass.renderSync({
file: rawFilepath,
outputStyle: 'expanded',
importer: [
theoImporter, // Here
],
});With this importer(and JavaScript API from Sass), I can use same technique from “How Virga processes PostCSS”.
So to recap, what I want to do is:
\nimporter function option in Sass will process Theoscss to CSSAll this can be done with Eleventy JavaScript Templates.
\n\nI’ll explain interesting parts.
\nconst sassResult = sass
.renderSync({
file: rawFilepath,
outputStyle: 'expanded',
importer: [theoImporter],
})
.css.toString();As I showed few lines above, this is Sass JavaScript API which use importer option.
module.exports = class {
data() {
return {
permalink: `_css/${fileName.css}`,
};
}
render(data) {
return postcss(plugins)
.process(sassResult, {
from: rawFilepath,
})
.then((result) => result.css);
}
};And this is Eleventy JavaScript Templates part.
\nI was very happy since it looked like easy thing to do.
sass command line doesn’t come with importer option #node-sass cli does have importer option but Dart Sass doesn’t.
# This works
node-sass --importer ./theo-importer.js src/_sass/main.scss src/_includes/assets/styles/main.css
# But this IS NOT
sass --importer ./theo-importer.js src/_sass/main.scss src/_includes/assets/styles/main.cssimportater has been “Experimental” in node-sass. I’m not sure if Dart Sass will have this available in the future.
\nSo I’ve decided to reuse sass.11ty.js to run from command line.
\nYou can do node src/_sass/sass.11ty.js to invoke it.
\nAnd since I only run this from command line in production, I’ve added this lines of codes.
if (process.env.ELEVENTY_ENV === 'production') {
console.log(`Writing CSS to ${prodDistpath}...`);
fs.writeFileSync(prodDistpath, sassResult);
}Well, actually you’d need fs.writeFileSync(prodDistpath, sassResult); this line to make it work.
\npostcss CLI will pickup the file generated from above and do Autoprefixer and cssnano.
I have set up an example files on GitHub.
\nhttps://github.com/frontendweekly/11ty-theo-sass-postcss-example
\nFork this repo and clone it into your local machine then:
\nnpm installnpm start for watching file changes and run build and server. CSS file will be at dist/_css/main.cssnpm run build:prpduction will generate minified CSS file in src/_includes/assets/styles/main.cssI’m assuming you have node installed on your machine.
“Eleventy is zero-config by default but has flexible configuration options.”, according to Eleventy Documentation, which often means that you will most likely have to set up “configuration options” yourself.
\nOne of the options I always set up is tooling around CSS.
Virga is based on Hylia and one of the reason why I’ve created Virga is to use PostCSS instead of Sass which is what Hylia uses.(I have written about “Differences between Hylia and Virga”.)
\nIn this post, I’ll explain how Virga process PostCSS.
\nI have already explained how Virga structures CSS.
\nIn short, since Virga has several directories and files inside of them, main.pcss is there to “glue” them together.
\nWhich is why I use postcss-import and the process starts from here.
PostCSS can be configured by having .postcssrc.js file(well, there are several ways). And here is Virga’s one.
// .postcssrc.js
module.exports = (ctx) => ({
map: ctx.env !== 'production' ? {inline: true} : false,
plugins: {
'postcss-import': {},
'postcss-preset-env': {
stage: 1,
},
autoprefixer: {},
cssnano: ctx.env === 'production' ? {} : false,
},
});Next step of process is to “convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments” via PostCSS Preset Env.
\nIt is like Babel for CSS.
the third step is autoprefixer which parses CSS and adds vendor prefixes to rule by Can I Use. Even though needs for “vendor prefixes” getting smaller now, I would still include this plugin.
The final step is cssnano which is a modular minifier, built on top of the PostCSS ecosystem.
cssnano: ctx.env === 'production' ? {} : false;Are you wondering what’s with this line?
\nThis is a condition to use cssnano or not based on environment variable. If it is production then use cssnano to minify CSS.
Unfortunately having .postcssrc.js isn’t going to do all the process above so let’s dig deeper.
A “build” process is to have a file(in this case, CSS) which will be load into browsers.
\nVirga does this at src/_postcss/postcss.11ty.js for development environment.
const fs = require('fs');
const path = require('path');
const postcss = require('postcss');
const postcssrc = require('postcss-load-config');
const {plugins, options} = postcssrc.sync();
const fileName = {
postcss: 'main.pcss',
css: 'main.css',
};
module.exports = class {
async data() {
const rawFilepath = path.join(__dirname, `./${fileName.postcss}`);
return {
permalink: `css/${fileName.css}`,
eleventyExcludeFromCollections: true,
rawFilepath,
rawCss: await fs.readFileSync(rawFilepath),
};
}
async render({rawCss, rawFilepath}) {
return postcss(plugins)
.process(rawCss, {
...options,
from: rawFilepath,
})
.then((result) => result.css);
}
};I stole this from EleventyOne by Phil Hawksworth.
\nThis file is processed by Eleventy. Although it doesn’t look like a “template language”, it actually is.
According to Eleventy Documentation, “Eleventy looks for classes that have a render method and uses render to return the content of the template.”
\nSince YAML Front Matter is not supported in JavaScript template types. data method is there to pass data to control how this template will render(in other words, build) a file.
\nSo according to this setting, the final css will be generated into dist/css/main.css.
Finally, you would want to add addWatchTarget at .eleventy.js so that when the file or the files in this directory change Eleventy will trigger a build which would look like this:
module.exports = function (config) {
config.addWatchTarget('./src/_postcss/');
};You can take a look at actual .eleventy.js file here.
As for production build, Virga utilizes PostCSS CLI to do the build.
Why do you separate the build process between development and production?
\nIt is a very good question.
Hylia inlines all CSS into <style> in <head> and Virga does this too.
\nIn development environment, Virga generates CSS into dist/css/main.css directly but In production, it is src/_includes/assets/styles/main.css so CSS file is in Eleventy Layouts.
<style>
{% include \"assets/styles/main.css\" %}
</style>By using include you can “inline” CSS like above.
\"build:postcss\": \"cross-env NODE_ENV=production postcss src/_postcss/main.pcss -o src/_includes/assets/styles/main.css\"When you run npm run build:postcss, above command will be executed.
\n-o src/_includes/assets/styles/main.css does the “output” build css into src/_includes/assets/styles/main.css.
All in all, this is why Virga separate build process.
\n", "date_published": "2020-03-28T11:30:00Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-03-28-money-blues/", "url": "https://virga.frontendweekly.tokyo/posts/2020-03-28-money-blues/", "title": "Money Blues", "summary": "Virga is now used for my personal blog and Coil for experimenting web monetized standard", "content_html": "I have decided that I’ll use Virga for my personal blog, so I have added paymentPointer in src/_data/site.json which is to experiment web monetized content in your browser while supporting sites by using Coil.
Coil is very cool since:
\n<meta> tag in the <head> of your siteExample:
\n<meta
name=\"monetization\"
content=\"$pay.stronghold.co/1a1d5ecbf6f988e4be3abc11cfb0a0b912d\"
/>Honestly, I don’t intend to earn money at all.
\nI want to support the web standard.
If you were to decide to fork Virga to start your own blog, do please replace paymentPointer value in src/_data/site.json otherwise your hard work will be contributing my earning.
Chris Coyier from CSS Tricks has covered about Coil on “Site Monetization with Coil (and Removing Ads for Supporters)”. You should check out the article and hope you would experiment with Coil.
\nBy the way, the title of this post is form Bob Dylan’s song.
\n", "date_published": "2020-03-28T09:07:19Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-03-07-extend-ideas-for-virga/", "url": "https://virga.frontendweekly.tokyo/posts/2020-03-07-extend-ideas-for-virga/", "title": "How Would I Extend Virga?", "summary": "Virga is a starter kit for who love to extend after all.", "content_html": "Virga is based on Hylia without Netlify CMS bit and few modifications (I did wrote about differences between the two).
\nVirga is pretty much ready for starting a blog, I think. I don’t own a blog, but I’m thinking about using Virga on this site called Frontend Weekly Tokyo which was build using Hylia.
\nAt Frontend Weekly Tokyo, I’ve done some modifications on Hylia. So these are good candidates to extend Virga, too.
\n\n\nThere are many reasons why you should use the IndieWeb.
\n
Eleventy is very good at practicing IndieWeb since using it means you already own your content.
\nVirga surely not covering every aspect of IndieWeb but does offer a starting points.
\nNetlify is good place to serve your content.
\nVirga has been configured to deploy to Netlify.
\nNetlify has DNS service, so you can set up your custom domain very easily.
Virga utilizes rel-author to help provide authorship information.
Virga is flexible when it comes to authorship. Any numbers of writer can can authorship via front matter data.
\n---
title: How Would I Extend Virga?
date: 2020-03-07
author: Yuya Saito
desc: Virga is a starter kit for who love to extend after all.
---If you omit author in front matter, Virga uses data from src/_data/site.json.
You could dig really deep on IndieWeb with Eleventy and Virga in that direction.
\n", "date_published": "2020-03-07T00:00:00Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-03-05-yet-another-post-example/", "url": "https://virga.frontendweekly.tokyo/posts/2020-03-05-yet-another-post-example/", "title": "Yet Another Post Example", "summary": "Table, Video embed and other markdown enhancement", "content_html": "| Color Name | \nHex | \n
|---|---|
| Gray 100 | \n#F9F9F9 | \n
| Gray 200 | \n#E9E9E9 | \n
| Gray 300 | \n#DADADA | \n
| Gray 400 | \n#BABABA | \n
| Gray 500 | \n#9A9A9A | \n
| Gray 600 | \n#7A7A7A | \n
| Gray 700 | \n#5A5A5A | \n
| Gray 800 | \n#3A3A3A | \n
| Gray 900 | \n#1A1A1A | \n
Here is a footnote reference,[1] and another.[2]
\nSubsequent paragraphs are indented to show that they belong to the previous footnote.
\n![\"Site](\"https://virga.frontendweekly.tokyo/images/virga-site-flow.png\" "\\"This")
h1,
.h1,
.alpha,
h2,
.h2,
.beta,
h3,
.h3,
.gamma,
h4,
.h4,
.delta,
h5,
.h5,
.epsilon,
h6,
.h6,
.zeta {
}and here is inline code.
First off, I’m Apple guy so tools I’ll Introduce here are heavily leaning to that direction.
\nMy current is MacBook (Retina, 12-inch, 2017).
\nI don’t own an external keyboard nor monitor.
I used be a Vimmer, but I’ve been using IntellJ IDEA for 4 or 5 years now for coding.
\nAnd I use iA Writer for any other writing which is where Virga’s inspiration comes from by the way.
\nI love iA Writer. I’ve been using it since it’s released.
I’ve been looking for very lightweight editor for coding. IntellJ IDEA is too heavy for small changes.
\nXi editor looks very promising, so I’m looking forward its progress.
iTerm2 is my choice for a Terminal app. I’ve tried Hyper for while, but I went back to iTerm2.
\nMy default shell is now fish which I’ve made the switch after I upgrade to Catalina.
I have so many command line tools with me, so I’m not going to share them all here, but I’ll list ones I use in developing websites.
\ndirenvjqlynxbatzghfnmtidy-html5ripgrepimageoptim-clinpm-check-updatesI don’t do UI design but when I need to do some vector related stuff, I use Sketch.
\nI like color. So I have Sip and Spectrum. The former is a color picker app though I love its color contrast ability for it. The latter is a color scheme design app.
\nMy default browser is Firefox Developer Edition.
\nI’ve made the switch from Chrome from this year, and I only go back to Chrome when I need to do some serious performance audit.
There are other tools I use at work regularly but for building Virga, I use those 2 tools.
\n", "date_published": "2020-03-04T00:00:00Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-03-03-TROCT-CSS-Architecture/", "url": "https://virga.frontendweekly.tokyo/posts/2020-03-03-TROCT-CSS-Architecture/", "title": "TROCT CSS Architecture", "summary": "TROCT is not even a word but this is how I apply ITCSS.", "content_html": "The title is just a clickbait and I won’t claim I invented this since it is just my way of applying the Inverted Triangle architecture (AKA ITCSS) which was first introduced by Harry Roberts.
\nIn simplest words, ITCSS is a methodology for organizing CSS files within layers-from generic to explicit, and from low to high specificity.
\nIf you want to learn more in depth, you should check out Harry’s talk.
While ITCSS has 7 layers (Settings, Tools, Generic, Elements, Objects, Components, Utilities), TROCT has 5 layers which are:
\nBefore I’m explaining responsibilities for each layer, I’ll show you how I’m applying it at this very project.
\n.
├── tokens
│ ├── _color.pcss
│ └── _space.pcss
├── roots
│ ├── _element.pcss
│ ├── _theme.pcss
│ └── _typography.pcss
├── objects
│ ├── _hr.pcss
│ ├── _wrapper.pcss
│ └── _skip-link.pcss
├── components
│ ├── _intro.pcss
│ ├── _navigation.pcss
│ ├── _post-list.pcss
│ ├── _post-meta.pcss
│ ├── _post.pcss
│ ├── _site-foot.pcss
│ └── _site-head.pcss
├── tools
│ ├── _prefers-reduced-motion.pcss
│ ├── _syntax-highlighting.pcss
│ └── _visually-hidden.pcss
├── main.pcssLet’s dig in to each layer.
\nTokens layer is for Design tokens. Now Design tokens has own W3C Community Group and since the name comes from the Salesforce design system team, I’ll quote the original definition here.
\n\n\nDesign tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes.
\n
I might be able to put these “tokens” into Roots, but I really love the principles of Design tokens so it stays.
\nResponsibilities for Roots layer are same as Generic AND Elements in ITCSS.
\nIn ITCSS, Generic houses all the very high-level, far-reaching styles. it often contains things like normalize.css, CSS resets, and for example box-sizing rules.
\nAnd Elements refer to all un-classed HTML tags. Styles in here get applied to specific HTML tags, like headings, links, and lists. This is the last layer where we use type selectors.
\nIt has both “very high-level and far-reaching styles” and project default styles AKA “all un-classed HTML tags”.
\nBoth belongs to “roots” of project so that’s where the name comes from.
_element.pcss has most styles for “all un-classed HTML tags” which also has “reset” or “normalize” rules.
\n\n[Reset CSS] is a starting point, not a self-contained black box of no-touchiness.
\n
This is from Eric Meyer who introduced “Reset CSS” into this world so I’m following his words.
\nThis layer houses same responsibilities as ITCSS does which follow OOCSS (Object-Oriented CSS) principles. They are small and reusable pieces with no aesthetics which can be used in UI composition.
\nThis is same as ITCSS as well.
\nIt houses specific UI components.
This layer would be very confusing for those who are familiar with ITCSS.
\nIn ITCSS, “Tools” means globally used mixins and functions for preprocessors like Sass.
\nBut since I’m using PostCSS, I’m using the name “Tools” as “Utilities” and/or “Trumps” in ITCSS.
Reason behind this is, “Utilities” is hard for me to type, and I always have to look up what “Trumps” means so in other word, it is “language barrier” for me, so I want to change it so that it would be easier for me.
\nITCSS, at its core, is a set of principles to answer many of issues around writing scalable and predictable CSS in large projects.
\nSo TROCT just applies those principles accordingly.
Just like how I had opened this post, title of this post is just a clickbait. It’s just showing example of ITCSS as I understand it.
\n", "date_published": "2020-03-03T00:00:00Z", "authors": [ { "name": "Yuya Saito" } ] }, { "id": "https://virga.frontendweekly.tokyo/posts/2020-03-02-differences-between-hylia-and-virga/", "url": "https://virga.frontendweekly.tokyo/posts/2020-03-02-differences-between-hylia-and-virga/", "title": "Differences between Hylia and Virga", "summary": "Virga is based on Hylia but there are some differences you should know", "content_html": "First, Hylia is a great Eleventy starter kit, and I’ve learned a lot about Eleventy from this kit so I thank Andy Bell for creating and sharing Hylia.
\nEasy and short answer is because this is how I learn new stuff.
\nI’ve been reading a lot of good things about Eleventy, but I haven’t had chance to get my hand on it.
\nI had been running this blog(sorta) called “Frontend Weekly” for while on Medium, but I’ve wanted to go back hosting it on my own.
\nSo I’ve decided to get my hand dirty once for all to use Eleventy to host my blog.
\nHylia is very easy to learn, and it is also easy to extend for my own needs, yet I want to change a few things about it.
\nWhile Hylia uses Sass, Virga uses PostCSS.
\nI’ve used Sass in production, and I do think it’s great companion for writing CSS but relying heavily on Sass make me feel like I’ve detached from reality of CSS.
I realized that I haven’t used new CSS spec like Custom Properties, Custom Media Queries and/or :matches pseudo-class because I don’t really need to since I’ve already “using” them in Sass.
So in Virga, I’ve decided to use PostCSS with PostCSS Preset Env alone(well, plus Autoprefixer, postcss-import and cssnano) so I can write CSS.
\nOther than the choice of preprocessor, Virga and Hylia is almost same.
\nThere are slight differences in directory structure, but those are come from personal preference.
Oh, I’ve dropped few small features from Hylia, too.
\nThe most notable would be use of Netlify CMS.
I’m not sure why you choose Virga over Hylia, to be honest, but if you do, please be aware those differences.
\nVirga is incomplete and minimum on purpose so that I can extend it faster.
\nAs you can probably tell, I’m not native English speaker, and I have no idea Virga is meteorological term(well, I’ve never heard the term in Japanese, which is my native language, either).
\nVirga comes from a name of backpack by Granite Gear which I own and love. I actually have color scheme set up taken from the bag.
\nWhile I’ve ended up not using the scheme, the name stuck.
This is body copy lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nThis is body copy duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\nThis is body copy duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\nThis is body copy duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\nThis is body copy duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\nThis is body copy duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\nCode block would looks like this:
\nh1,
.h1,
.alpha,
h2,
.h2,
.beta,
h3,
.h3,
.gamma,
h4,
.h4,
.delta,
h5,
.h5,
.epsilon,
h6,
.h6,
.zeta {
}
h1,
.h1,
.alpha {
}
h2,
.h2,
.beta {
}
h3,
.h3,
.gamma {
}
h4,
.h4,
.delta {
}
h5,
.h5,
.epsilon {
}
h6,
.h6,
.zeta {
}and here is inline code.
\n\nYou can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.
\n
Here is a footnote reference,[1] and another.[2]
\n\n