Add markup in the HTML head to display a beautifull card for posts on Twitter.
Study the possibility to generate an image dinamically with the title of the article in it.

References:

• https://github.com/joshbuchea/HEAD?utm_source=frontendfocus&utm_medium=email#twitter-card
• http://www.brianbunke.com/blog/2017/09/06/twitter-cards-on-jekyll/
• https://cards-dev.twitter.com/validator

As a user of the styleguide, I want to be able to toggle the visibility of the code snippets.

Description

Add a link to toggle the visibility of the code snippets before every <code> block.
Make it default to hide the code snippet.
Change the text of the link to display "hide code snippet" when code snippet is visible. "display code snippet" should be displayed when the code snippet is visible.

References

• https://css-tricks.com/snippets/javascript/showhide-element/

As a developer, I would like to be able to override the site URL at build time, so that I can test fully locally without overriding the _config.yml and I can test also on CI or QA instance with a custom URL.

Goal

• Create an environment variable SITE_URL with the desired URL to use.
• Create an environment variable OVERRIDE_SITE_URL with values true|false.
• Add these variables on the EnvironmentVariableGenerator class.

As a contributor, I would like to be able to add a link to my dev.to profile in the authors card.

• Add icon for dev.to (svg and png format).
• modify CSS to add the social item.
• Add the markup in the templates (author template and post template).

On a mobile device, and small screens, the tags are not staking well when there is 2 lines of them, they are overlapping on each other.

Design a better displaying mode, for example inlining them on small screens.

On mobile, the button to close the menu is a little bit on the right, so it appears not centered in the page.

As a reader, I would like to see a link to the RSS feed of the Blog.

• Add an RSS feed link at the bottom of the website, in the footer section, under the Menu items.

In order to enforce good practices and same styling behavior, use the Stylelint CSS linter in addition to Gulp.

• https://github.com/stylelint/stylelint
• https://github.com/olegskl/gulp-stylelint

As the website is collecting data for analytics using google analytics, it's important to respect the people that have set the "Do Not Track" feature included in their browsers.

Detect DNT using Javascript and therefor disable the GA tracking on the website.

Implement this in the analytics template file.

Description

• Update all the gems into their latest versions.

Description

There is several warnings during Jekyll build process, since the new version 3.7.0

Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly. web_1 | Source: /home/app web_1 | Destination: /home/app/_site web_1 | Incremental build: enabled web_1 | Generating... web_1 | Liquid Warning: Liquid syntax error (line 10): Unexpected character # in "{{ # site.data.authors }}" in author/index.html web_1 | Liquid Warning: Liquid syntax error (line 12): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in index.html web_1 | Liquid Warning: Liquid syntax error (line 17): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in /_layouts/archives-month.html web_1 | Liquid Warning: Liquid syntax error (line 17): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in /_layouts/archives-month.html web_1 | Liquid Warning: Liquid syntax error (line 17): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in /_layouts/archives-month.html web_1 | Liquid Warning: Liquid syntax error (line 17): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in /_layouts/archives-month.html web_1 | Liquid Warning: Liquid syntax error (line 17): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in /_layouts/archives-month.html web_1 | Liquid Warning: Liquid syntax error (line 17): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in /_layouts/archives-month.html web_1 | Liquid Warning: Liquid syntax error (line 12): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in page/2/index.html web_1 | Liquid Warning: Liquid syntax error (line 12): Expected id but found pipe in "{{ post.excerpt || strip_links || strip_imgs }}" in page/3/index.html

As a developer/maintainer, I would like to have all my static files (minus HTML) into an assets folder.

Goal

• Create an assets folder at the root of the project.
• Add a css folder into it and place it the generated CSS files.
• Add a js folder into it and place it the generated JS files.
• Add an images folder into it and place all the images of the project.
• Rename the styles folder into css, then change the gulp tasks accordingly with the correct name for input folder, and output folder.

Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading.

resources: https://developers.google.com/web/updates/2016/02/font-display

The articles pages are displaying the timestamp on the header, with dates and time of posting. The time part isn't bringing any value, so I suggest we remove it from the UI.

Ex: July 17, 2018 at 18:00 > July 17, 2018

Update the PR's Type Of changes section.

• Add the "Improvement" item (non-breaking change which modifies functionality).
• Reorder the bullet points: New feature > Improvement, Breaking Change > Bug fix

The viewport size is 1221px, whereas the window size is 1920px.

If the width of your app's content doesn't match the width of the viewport, your app might not be optimized for mobile screens.

resources: https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport

The archives pages have a design that doesn't quite match the rest of the website.

Goal

Review how the design is done on the different archives pages and found a new layout that integrates better with the rest of the blog.

On chrome browser, SVG icons are not displayed the same maner as on firefox. They are displayed as a giant pixel, it makes it very ugly and we dont recognize them anymore.

Theming the browser's address bar to match your brand's colors provides a more immersive user experience.

This is intended for Google chrome only.

resources: https://developers.google.com/web/tools/lighthouse/audits/address-bar

The different links pointing to parts of the site are all relatives to the current path on the blog. We need to add the host to every one of them to make sure they point to an https resource.

Goal

• Update links on the top bar.
• Update links on the footer.
• Update links in on the front page.
• Update links in the archive pages.
• Update links in the author pages.

Fix vulnerability in Ruby Gem Rack.

Up version to 1.6.11

As a reader, I want to be able to read articles with my favorite RSS/Atom reader.

References:

• https://github.com/jekyll/jekyll-feed
• http://joelglovier.com/writing/rss-for-jekyll

On the landing page of the blog, the list of posts is actually displaying a list of cards.

Redesign this list so it displays has a single list separated by a horizontal line.

Context

When browsing a single page, there is a Javascript error displaying in the console, because a script is failing to display a marker on one menu item.

Error Message

Unhandled Promise Rejection: TypeError: null is not an object (evaluating '$(".page-"+path[1]).classList')

OS/Browser

• MacOS High Sierra 10.13.6 (17G65)
• Chrome v68.0.3440.106
• Safari v11.1.2 (13605.3.8)

Steps to reproduce

• Go on the Home Page
• Click on one article to display it
• See the error message displaying in the Console

Expected Result

The Console should be empty and the script should not fail. Nothing should be highlighted in the menu has we are in a subcategory.

Since v1.0.3, the Dockerfile isn't building anymore on a local environment. NPM packages fails to install, and bundler dependencies cannot be installed after the container is built.

Fix this by making the Dockerfile more about development environment, using a sudo user.

Today we are writing the responsive image markup manually into the posts, for each images we need in articles.

What we need to simplify things, is using a reusable template to simplify the process and having the same markup for responsive image everywhere.

References:

• https://github.com/wildlyinaccurate/jekyll-responsive-image
• https://benseymour.com/2017/03/02/Responsive-Images-in-Jekyll-without-a-plugin
• https://olivermak.es/2016/05/jekyllconf-responsive-images/

Description

A Pull Request template file is missing for the repository.

Add a template with instructions on how to contribute to the project.

As Google lighthouse prescribe, do not use Javascript function document.write into the footer of the page. It can slow down the rendering of the page on slow connections.

Goal

Remove document.write, and use a native Ruby function to handle the generation of the footer date.

As a maintainer, I would like to have a template for authors links, so that I don't have to modify everywhere in the code base when a change is made for authors.

Goal

• Create a new layout for authors.
• Call this new layout everywhere the author links appears.

Update the README with instructions on how to contribute to the project.

We should highlight contributing to the code and to the articles.

As a contributor, I want to display only the social account that I've set up in the authors.yml file.

Description

Present situation: the social icons displayed on the Author card are the same for all the potential contributors, even if they didn't set up the values on the authors.yml file.

Proposed solution

Add conditionals on all the possible social accounts to display or not the accounts based on the values of the authors.yml file.

Goal

Run npm audit on the repository and fix npm dependencies.

Description

• Use Heroku 16 image instead of Heroku 16-build.
• Use a non-root user to execute container.
• Change the way to install Bundler and Nodejs.
• Update Package.json
• Don't install gems in a dedicated container (this will save space).

As a user, I want to be able to read tags and Back to top, without squinting my eyes.
Take the chance to align the elements on the same line, they seem to not appear on the same level.

Update the styleguide to reflect the UI changes introduced in the v2.1.0 complete with the code samples.

As the new Heroku environment is migrating to Heroku-18 (based on Ubuntu), use the new base Docker image to be aligned with Heroku.

Description

Update the README.md with new usage instruction for Docker.

As a maintainer, I want to not have the annoying warnings for icons when I am in development mode.

Goal

• Add a sub-folder dev in the img folder.
• Move the icons for development into this folder.
• Change the meta tags to point to this new resource.

For the menu on mobile view, add a subtle animation when the menu open or close. Fallback to no animation if JavaScript is disabled.

As per Bundler recommendation, set the paths of the gems into /usr/local/bundle and unset env variables of Bundler in the Dockerfile.

Add also an entrypoint pointing to bundle exec.

resources: https://bundler.io/v1.16/guides/bundler_docker_guide.html

As a user, I want to be able to see at first sight the tags in the footer.

Change the link display of the footer tags to better distinguish them.

• Add a hashtag (#) before the tag name.
• Choose a different color for the hashtag, use the color-primary-darker from the Styleguide.

Since Jekyll v3, the internal links between posts is broken. Probalbly some APi changes are a consequence of this.

Actual Result:

• Links are pointing to http://localhost:8080/my-article/my-article/ or http://my-article/

Expected Result:

• Links should be pointing to htttp://localhost:8080/my-article/

Resources:

• Jekyll documentation

With the growing codebase of this blog, we need to separate every component into its CSS file.

• Create a hierarchy of folders and file by component (ex: topbar/topbar.css)
• Create a build task that combine/concatenate and minify this into a style.css or bundle.css

Goal

Change the colors that are not readable by using more accessible colors using the tool https://dequeuniversity.com/rules/axe/2.2/color-contrast?application=lighthouse.

The colors that need changing, are:

• The grey text for dates on articles
• The grey colors for inactive menu items.

Ehance the Styleguide with code snippets corresponding to the examples.

Description

Add a .dockerignore file to exclude certain directories and files from the Docker build process.

Actual Behavior:
CSS file and it's minified version; plus the source maps, are hosted on the repository and have to be build locally and manually before pushing on the repo. If this step is not done, then we could have discrepencies between production and development.

Expected behavior:
We only host the base CSS file, and the sourcemap and the minified version are build when the app is built on Heroku.

References:

• https://devcenter.heroku.com/articles/nodejs-support
• https://stackoverflow.com/questions/24504476/how-to-deploy-node-that-uses-gulp-to-heroku#25319789

When possible, use small sized SVG icons for everything related to third parties social icons.
Add also the fallback PNG image corresponding to them.

References:

• https://github.com/edent/SuperTinyIcons