llighter / yunha-ind Goto Github PK

An aside highlights a specific section of the page to call it out for user's attention.

In web.dev, there's many implementation of asides like caution, note, etc.

I'm gonna integrated this with my site.

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date: <2019-09-05>

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

GoogleChrome/web.dev@c6ce69e
hero

image

src/site/_includes/partials/post.njk
heroFit: hero_fit

{{ page.date | prettyDate }} -> {{ date | prettyDate }}

src/site/_includes/styles.njk

styles...

webpack file loader

In web.dev, They use gulp to copy images.

For example.

const assetTypes = `jpg,jpeg,png,svg,gif,webp,webm,mp4,mov,ogg,wav,mp3,txt,yaml`;

...

// Images and any other assets in the content directory that should be copied
// over along with the posts themselves.
// Because we use permalinks to strip the parent directories form our posts
// we need to also strip them from the content paths.
gulp.task('copy-content-assets', () => {
  return gulp
    .src([
      `./src/site/content/en/**/*.{${assetTypes}}`,
    ])
    .pipe(gulpif(isProd, imagemin([
      pngquant({quality: [0.8, 0.8]}),
      mozjpeg({quality: 80}),
    ])))
    // This makes the images show up in the same spot as the permalinked posts
    // they belong to.
    .pipe(
      rename(function(assetPath) {
        const parts = assetPath.dirname.split('/');
        // Let the en/images directory pass through.
        if (parts[0] === 'images') {
          return;
        }
        // Let en/handbook images pass through.
        if (parts[0] === 'handbook') {
          return;
        }
        return assetPath.dirname = path.basename(assetPath.dirname);
      })
    )
    .pipe(gulp.dest('./dist/en'));
});

내가 홈페이지에 작성하는 글은 현재 대부분 포스트 형식으로 블로그에 할당이 되어 있다.

짧은 수정이나 조작으로 이루어지는 내용들도 자주 모인다.
그래서 이런글들을 따로 분류하여 쉽게 볼 수 있도록 하는 것이 목표이다.

나중에 태그나 검색으로 검색하고 싶을 때는 algoria 를 적용하여 해결하려고 한다.
이부분은 web.dev에서 작업중인 사람이 있으니 10월 말 정도에 확인해보고 참고하여 적용하도록 하자.

Author: @[Author's GitHub username.]
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

Author: @[Author's GitHub username.]
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date: <2019-11-30>

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Go to lighthouse audit
2. Enter 'llighter.github.io'
3. See the instructions

Expected behavior
postcard element should have role attribute like listitem

Screenshots

Additional context
web.dev instuction
Google developer ARIA introduction
W3C ARIA spec

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date: 2019-09-14

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

To improve readability, I will seperate header from the app.scss

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date: 2019-11-24

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

Describe the bug
spelling of permalink is incorrect

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://llighter.github.io/elements-with-role-that-require-specific-children-rols/'
2. See incorrect typo - rols -> roles

Expected behavior
Edit rols to roles

This issue mentioned pwa on 11ty.

you can access documents from Workbox.

This article is a sample blog post in web.dev.

This form is generated by 11ty which is static site generator. They use gulp for bundle css, js. But I'm going to use webpack. The reason I use this is there is a document on the material website.

Also, I will build a website by applying the semantic web.

reference: https://github.com/GoogleChrome/web.dev/blob/master/src/styles/generic/_images.scss

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

EXAMPLE: NAVIGATION LINKS WITH AN active CLASS ADDED FOR ON THE CURRENT PAGE

<ul>
{%- for post in collections.post -%}
  <li{% if page.url == post.url %} class="active"{% endif %}>{{ post.data.title }}</li>
{%- endfor -%}
</ul>

Implement in conjunction with navigation.

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date: 2019.11.16

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

Author: @[Author's GitHub username.]
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

현재는 구글 폰트를 사용하고 있어서 한글을 사용할 때는 딱딱하고 한글의 아름다움이 덜하다는 느낌이 있다.
한글날을 맞이하여 여러 한글 폰트들을 홈페이지에 적용할 수 있는지 확인해보자.

다만 구글 폰트는 CDN방식으로 온라인에서 바로 받아오는데 직접 서버에 올리면 잘 적용될 것이지와 성능 측면에서 불리한 점이 없는지는 확인해보아야 겠다.

TEMPLATE AND DIRECTORY SPECIFIC DATA FILES

blog.11tydata.js need to chage like this(web.dev-blog.11tydata.js)

So I can apply post.njk to my blog posts.

I need to generate index.njk at blog directory for view blog list.
At web.dev, I can see how to make this layout.

At this moment, My website show the url at the toolbar.
But I want to change this to represent page's title.

here is the link I can refer: HTML <title> Tag

I think the reason why hero images didn't shown on the post is wrongly configured url.

So, I need to compare with local and public.

like this..

logo [...sitemap]
license

Chrome 76 버전 부터 lazy 로딩이 브라우저 단에서 지원이 된다.
현재로서는 크롬에서만 지원하지만 이후 다른 브라우저도 지원을 하게 될 것이라 기대한다.

이미지나 iframe을 로딩하는 것은 브라우저에서 큰 부담을 주는 작업이기 때문에 viewport 내에서 바로 보여지는 값이 아니라면 페이지 초기 로드시에 전부 로딩할 필요가 없다. 따라서 lazy 로딩을 적용하면 이미지나 iframe 영상이 많으면 많을 수록 성능 향상에 도움이 될 것이다.

다행히 lazy 로딩을 적용하려면 이미지 태그나 iframe 태그에 loading 옵션에 lazy를 넣어주기만 하면 된다.
우선 현재 홈페이지 구성이 mdc-web과 섞여 있어서 메인 페이지 로드 시 이미지를 백그라운드 이미지 옵션으로 지정을 한다. 홈페이지 UI를 전반적으로 개편할 때 lazy 로딩 옵션을 넣도록 하자.

관련 블로그(web.dev): https://web.dev/native-lazy-loading

Describe the bug
각 글의 메인 이미지 및 세부 이미지들이 캐시가 안됨

To Reproduce
Steps to reproduce the behavior:

1. Set offline in Chrome
2. Go to 'llighter.github.io/'
3. Browse my site
4. See missing images

Expected behavior
Caching all of images

Screenshots

Deploy assets to GitHub pages

with this action, I think I can migrate ci code from travis to github action

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to main page
2. Click on any post
3. Scroll down to heading anchor
4. Click link
5. See overlap

Expected behavior
When click the link, User can see their heading

cf. https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date: <2019-09-08>

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

cf. MDN Web Docs head 태그에는 무엇이 있을까? HTML의 메타데이터

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

<ul>
{%- for post in collections.post -%}
  <li>{{ post.data.title }}</li>
{%- endfor -%}
</ul>

In the same way as above, Print the list of posts on the main blog page.

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

At this point, My main page is same as Blog page.
To distinguish this pages, I need to make different view of Main page.
To do that, I'll make a new collection of recent post and show three of them.

Reference link

<meta name="viewport" content="width=device-width, initial-scale=1.0">

site/_includes/*

I have to figure out this layout mechanism.

https://web.dev/style-focus/

Describe the bug
MDC Drawer automatically set site to top and this message

Expected behavior
When Drawer open, Main screen should stay original position.

Screenshots
If applicable, add screenshots to help explain your problem.

기본적인 글을 작성하면 카드형식으로 보여주고 있다.

팁은 카드 형식이 아닌 리스트 형식을 사용하는 것을 고려해보려고 한다.
디자인이나 배열 방식은 논의해야한다.

Describe the bug
In 11ty, H tag(#, ##, ###, etc) transform with link.

But, When I use hangul(Korean), this module can't transform to link rather return empty space.
So, I need to figure out to apply hangul to slug.

11ty use slugify.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://github.com/simov/slugify'
2. Clone this repo
3. Write test with hangul
4. See error

Expected behavior
ex. 테 스 트 -> 테-스-트

A Hero Image is a large image with text, often placed at the top of a webpage

For using Hero, I should prepare two file: Hero.js, images.scss

Both, Already implemented by web.dev. So, All I have to do is applying this file to my website.

PS. object-position is property specifies the alignment

Describe the bug
improve article link is invalid

To Reproduce
Steps to reproduce the behavior:

1. Go to 'llighter.github.io'
2. Click on 'any article'
3. Scroll down to 'bottom'
4. Click 이 포스트를 개선해주세요(Improve this article!)
5. 404 error

Expected behavior
When you click the link of the article, I shoud see the original md file of this article

Screenshots
404

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

Author: @llighter
Reviewer: [Leave blank. I will assign a reviewer.]

Target publish date:

• Check this box if this is a hard deadline.

• Check this box if you'd like your reviewer to fix grammar and punctuation issues for you.

Process

Check out the web.dev writing process.

When you're ready, make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #
• 6. Pull request approved — reviewer checks this

기존에 최근 글(포스트)들을 가져오는 컬랙션을 참고해서 만들면 된다.