freecodecamp / news

freeCodeCamp's JAMstack Developer News publication. Built with 11ty, Ghost, and help from kind contributors like you.

Developer News

Welcome to freeCodeCamp's Developer News codebase — A JAMStack app built with Ghost & 11ty & lots of love from the community.

The code is based on this template. We use this project to build and deploy multiple instances of our publications in several world languages. All of the services are then distributed globally by our CDN provider.

Contributing

Note: We limit direct contributions (in the form of pull requests) to this project due to limitations with our QA & deployment workflows.

We welcome you to work on any of our other available open-source projects instead. You can find our contributing guidelines here.

If you found an issue or a bug on this repository, please connect with us in the contributor's chat room first.

Happy Contributing!

Build

Deployment Status

You can click on the badges below to go to the dashboards detailing the status of the latest deployments. If you see something is not right, wait for a few hours. Our team is usually on top of these with automated alerts.

Language	Status (Click to see details)
English
Others(i18n)

Build Schedules

New builds to the /news sites are triggered as per the below schedule:

Language	Schedule (UTC)
English	Every 3 Hours - except between UTC 00:00 - UTC 06:00 on Wed & Sat for maintenance
Others(i18n)	Every 6 Hours - except between UTC 00:00 - UTC 06:00 on Wed & Sat for maintenance

Note: Once a build is triggered, it can take upto an hour to complete, and cascade to all regions in the world.

Frequently Asked Questions

Where do I check the status of the latest build?

You can check the status of the latest builds by clicking the Deployment Status badge in the previous section.

I published an article. Why has it not appeared on news yet?

Your published article and changes may take longer than usual to appear. We also have multiple layers of caching. This helps us to serve the content faster to our users.

When you publish a change, like updating scripts, a new article, updating old articles, adding or updating pages, etc., in Ghost CMS, it will eventually appear on the public-facing site.

It can take up to 1 hour for the changes to appear on the site. If you are still not seeing the changes, please wait for a few hours.

I see a build has failed, what should I do?

We recommend giving changes at least a day before reaching out to someone to take a look. We have recovery workflows in place to fix most of the issues.

Also, the team gets alerts for all build failures, etc. You need not alert them again.

Copyright & License

Copyright (c) 2021 freeCodeCamp.org - Released under the BSD 3 license.

news's Issues

freecodecamp.org/news/ dark mode theme

Is your feature request related to a problem? Please describe.

I currently use a Google extension to enable dark mode for articles on /news in freeCodeCamp =>
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More. However, I would prefer not to rely on an extension for this feature. Could you consider implementing a native dark mode theme for freeCodeCamp news?

Describe the solution you'd like

I would like to use the theme mode selected in my freeCodeCamp account settings for the /news extension.

Describe alternatives you've considered

If feasible, these pages could default to the system theme color (dark or light) for the user's operating system.

Additional context

No response

There should be a floating button for scrolling to top

Describe the bug
I think there should be a floating button that helps users to scroll to top after clicking on that button so that users don't have to scroll to top manually.

Screenshots

Additional context

I would love to work on this

Remove references to retired languages

Remove references to the languages below from the codebase:

• Arabic
• German
• Haitian Creole
• Hindi
• Indonesian
• Swahili
• Turkish
• Vietnamese

Remove `sanitize-html` dependency

Updating sanitize-html to a newer version seems to break AMP pages.

Rather than updating this dependency, it would be better to remove sanitize-html entirely. We only use it for AMP pages and already do quite a bit of manual transformations for AMP HTML.

We would mainly just need to make sure that the AMP HTML that isn't run through sanitize-html is valid. Using a manual AMP checker on some pages should be enough to verify that.

Ref: #562

Listing the translated versions of each article on news.

Is your feature request related to a problem? Please describe.

Based on a discussion with a few of our language Leads, It would be great to have a list of translated versions of each article to increase awareness to our i18n efforts and allow users to read articles in their preferred language.

Describe the solution you'd like

A similar feature could be found on wikipedia:

Describe alternatives you've considered

I'm tagging @scissorsneedfoodtoo so we could discuss the feasibility of such feature.

Additional context

No response

Improve the behavior when fetching the original author/article failed

Currently, the original author and the link to the original article will be missing when it fails to fetch the original post.

How about at least showing the URL? It's not the best appearance but should be better than nothing.
Like this:

To Reproduce
This issue happens when fetching the original post failed during the build.

Expected behavior
Show the URL of the original article as a link.

Package json not updated

These Package need to update
"@11ty/eleventy": "1.0.2",
"@11ty/eleventy-upgrade-help": "1.0.1",
"cypress": "10.11.0",
"eslint-plugin-ghost": "2.18.1",
"i18next": "21.10.0",
"i18next-fs-backend": "1.2.0",
"jest": "27.5.1",
"jsdom": "19.0.0",
"libxmljs": "0.19.10",
"lint-staged": "12.5.0",
"node-fetch": "2.6.12",
"piscina": "3.2.0",
"prettier": "2.8.8",

No search bar on mobile

Looking forward for reporting a security issue:
Please report security issues by following our security policy: https://contribute.freecodecamp.org/#/security

Describe the bug
Browsing on the FreeCodecamp news page on mobile does not allow for searching. There is no search bar to filter down.

To Reproduce
Steps to reproduce the behavior:

1. Go to FreeCodeCamp News Page
2. Right at the top of the page.
3. See error. Not sure if this is an error?

Expected behavior
Ideally, one would like to be able to search for related articles instead of having to scroll down the entire feed of articles.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chromium and FireFox
• Version: Chromium(Version 103.0.5041.0) FireFox(Version 105)

Smartphone (please complete the following information):

• Device: iPhone 11
• OS: iOS 15.6.1
• Browser: Firefox
• Version: 104

Additional context
Again, I'm not sure if this was even an accident on your end, just something I noticed and thought I would bring to the teams attention.

[ Feature Request ] - Dark theme and Syntax highlighting

Dark theme and Syntax highlighting please

Here's a great example.: https://kentcdodds.com/blog/react-hooks-array-destructuring-fundamentals

search placeholder should not pass through crowdin

I think it might be better to close this string and fix it on Crowdin for the next sync action.

The English string was update recently to "Search 9,000+ tutorials", but it should read "Buscar entre os mais de 300 tutoriais" or even "Buscar entre os mais de 350 tutoriais" in Portuguese.

Do you know what might have happened here @naomi-lgbt?

Also, it might be worth moving the search related strings into a separate file so it's clear that each publication should change the placeholder based on the number of articles they've published.

Originally posted by @scissorsneedfoodtoo in #441 (comment)

Self-hosted runners on GitHub Actions loses connection before job completion

We want to build and deploy news builds with GitHub Actions and self-hosted runners. This is so that we can guarantee that runners are available and we do not wait on GitHub to provision free runners, which we use for other things like CI tests, etc.

We have implemented such a setup, with our localized versions of the JAMStack news. That is, we use auto-scalable self-hosted runners on AWS (spot instances), to handle our build workloads for those instances.

However, we have been seeing issues where a self-hosted runner loses connection with GitHub's backend. The setup details are available in our staff-wiki:

🔒 - https://staff-wiki.freecodecamp.org/docs/flight-manuals/self-hosted-runners#runners-on-aws-on-aws

Here is a failed run: https://github.com/freeCodeCamp/news/actions/runs/1641250226

Other implementations are seeing the same issues as us: actions/actions-runner-controller#466

As a troubleshooting measure, we even deployed an always available runner on Azure instead and got the same failures.

As a workaround, we moved to use Azure Pipelines (which we can guarantee to have runners available, because of our low usage on that platform). A self-hosted runner on Azure Pipelines will work fine, but it's a tedious process to set up.

Really looking forward to a sane way of using self-hosted runners with English builds.

Links that copy the table content headers

Describe the feature

I may be misremembering, I have discussed this with @ahmadabdolsaheb a while back and talked about turning the heading into links, so it's easier for people to share sections of the articles.

The feature will be like this

• script that create a link in front of it

const headers = queryselectorAll('h1, h2, h3');
headers.forEach((header) => {
const Link = createELement('a')
const navigationHead = Link.href(${header.id})
const LinkStyle = Link.class('navigationHead srOnly')
const LinkText = Link.innerText('Click to copy Headers link')

header.append('Link')
header.addEventListener("click", () => {
clipboard(`${href}#${header.id}`,);
});
})

• ::after pseudo-class that cover the heading and doesn't harm screen readers.

Because the text is srOnly, we can use pseudo-classes like mentioned in this article to cover the heading with the link https://inclusive-components.design/cards/#thepseudocontenttrick

This trick used for the cards tho, but maybe it's okay to apply it here too, this will make the heading stay heading and link after it can cover, and for screen readers, they won't read the heading when focused over the link.

---

I have been thinking hard how to make the screen-reader text translatable in crowdin, but I can't. I just hope that browser translation is good enough for that.

Use a different build tag than current

Currently, we are tagging the images with the SHA of the latest commit & additionally a friendly tag of latest. Should we move to time stamp-based tags, because the images can now have updated "content" because we build the latest articles but the "code" remains the same?

Source Footer Data From a Single Location

Continuing the discussion from #218, we want to move to a model of having all the footer data for each locale in a single location (probably the CDN) as YAML, and use that to build the footers for News, Learn, the forum, and so on.

11ty can't source YAML by default, but we should be able to fetch the correct YAML file at the beginning of the build process, convert it into a JS object with the JS-YAML package, and then use that object to build the footer for each page.

This should also allow us to clean up the footer template here, as escaping the translated strings is a bit messy because of the way I implemented the translation function / shortcode.

We could do this as a collection or as global data, though I'm leaning toward global data as that's how we're sourcing data from Ghost. It'll just be a matter of adding a file to the _data directory and implementing the feature there.

Fail building a site if Ghost is set to private

Sitemaps Not Getting Fetched During Build

Sitemaps aren't fetched reliably during the build process.

Here are some examples from English News:

• Index: https://www.freecodecamp.org/news/sitemap.xml
• Pages: https://www.freecodecamp.org/news/sitemap-pages.xml
• Posts: https://www.freecodecamp.org/news/sitemap-posts.xml
• Authors: https://www.freecodecamp.org/news/sitemap-authors.xml
• Tags: https://www.freecodecamp.org/news/sitemap-tags.xml

The index page is empty, and should look similar to this:

Looking at the posts sitemap, it seems like it hasn't been updated since we switched over to JAMstack.

I believe the reason we still have sitemaps for pages, posts, authors, and tags is that they were previously available through the Ghost served site. But for newer sites like Ukrainian, which was never available as a Ghost served site, the sitemap is completely empty.

We have most of the data we need to build the sitemaps during the build. However, some things like the timestamp when a tag or author profile was updated isn't available through the Ghost API.

It seems like the best we can do is build the sitemaps using whatever data we have available, and to omit the "Last Modified" / <lastmod> date for tag and author profile pages.

Build - Prevent all keys required at all times

See: https://github.com/freeCodeCamp/news/runs/4669071805?check_suite_focus=true#step:5:48, this build was specifically for English but it needed all the other keys to be defined.

Add trailing slash to `proxy_pass` config

diff --git a/sites-enabled/20-www.freecodecamp.dev.conf b/sites-enabled/20-www.freecodecamp.dev.conf
index 9cf2fff..8bdeda0 100644
--- a/sites-enabled/20-www.freecodecamp.dev.conf
+++ b/sites-enabled/20-www.freecodecamp.dev.conf
@@ -188,7 +188,7 @@ server {
       return 503;
     }
     access_log /var/log/nginx/access.log combined if=$log_4xx_5xx;
-    proxy_pass http://news-ita;
+    proxy_pass http://news-ita/;
     proxy_cache            NEWS_CACHE_STG_ITA;
     proxy_cache_valid      200  1d;
     proxy_cache_use_stale  error timeout invalid_header updating

Syntax highlighting breaks when visiting publication from Google

Describe the Issue

When visiting a publication tutorial from Google, syntax highlighting will not immediately show up. Only upon refreshing will the syntax highlighting show up.

Affected Page

All publication tutorials tested, including this one: https://www.freecodecamp.org/news/append-a-string-in-python-str-appending/

Steps to Reproduce

1. Go to a publication tutorial from Google search, using its URL such as https://www.freecodecamp.org/news/append-a-string-in-python-str-appending/
2. Scroll down to a code snippet. It will initially not have syntax highlighting.
3. Hit control+r to refresh the page. Boom, the syntax highlighting will now show up like it is supposed to.

Expected behavior

Syntax highlighting is important, and we want it to show up correctly the first time without a refresh.

Screenshots

System

• Device: Mac
• OS: MacOS latest
• Browser: Chrome
• Version: Version 111.0.5563.110

Additional context

No response

Where can I find the original markdown file for this article?

Where can I find the original markdown file for this article?

https://www.freecodecamp.org/news/how-to-learn-javascript-effectively/

Don't show top image on AMP version of article

For the mobile version of freeCodeCamp publication articles, we don't show the top image. These images are usually cosmetic.

This said, the image still shows up on the AMP version of the article. We should remove this.

RTL direction isn't respected in specific safari version

Describe the bug

A camper, with the specs below, will have their page set to ltr still.

Mozilla/5.0 (iPhone; CPU iPhone OS 16_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/108.0.5359.112 Mobile/15E148 Safari/604.1

---

Originally reported in discord https://discord.com/channels/692816967895220344/986359243072471070/1063743362852716585.

Create extensible serve configs

The serve config we currently have is a lot of duplication that is not scalable. Instead, we need something that is extensible.

I intend to keep config more modular with this.

Clean up registry for items older than 2 days on DigitalOcean

ref #704

footer column size mismatch between learn and news

The columns of the news footer seem to be tighter comparing to learn:

Learn:

News:

Footer tending guides' links outline is touching the text

Edit: the issue has been changed in freeCodeCamp, I have transferred it here to start changing news here as well.

Describe the bug
While navigating the footer using the keyboard, the outline is touching the text, which doesn't look visually clean.

rec-tab.12.webm

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.freecodecamp.org/
2. Click on tab until you reach the footer
3. See outline

Expected behavior
the outline shouldn't touch the text

Additional context
the outline is touching the text because of this property

 .footer-col a {
    padding: 5px 0;
}

we can remove the 0 or add offset to the outline in the footer if it's a link. yes it's affect the tax link

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Error updating branch: update failure

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-plugin-cypress to v3
• chore(deps): update dependency graphql-request to v7
• 🔐 Create all pending approval PRs at once 🔐

Errored

These updates encountered an error and will be retried. Click on a checkbox below to force a retry now.

• chore(deps): update github actions (actions/checkout, raisedadead/action-docr-cleanup)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency node to v20

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency node-fetch to v3
• chore(deps): update ghost docker tag to v5

Detected dependencies

docker-compose

docker/ghost/docker-compose.yml

• ghost 3
• ghost 3
• ghost 3

dockerfile

docker/Dockerfile

• node 18-alpine

registry-test/Dockerfile

• node 18-alpine

github-actions

.github/workflows/crowdin-download.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• freecodecamp/crowdin-action main
• crowdin/github-action master
• crowdin/github-action master
• crowdin/github-action master
• crowdin/github-action master
• crowdin/github-action master
• crowdin/github-action master
• crowdin/github-action master
• crowdin/github-action master
• crowdin/github-action master
• freecodecamp/crowdin-action main
• freecodecamp/crowdin-action main
• ubuntu 22.04

.github/workflows/crowdin-upload.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• freecodecamp/crowdin-action main
• crowdin/github-action master
• ubuntu 22.04

.github/workflows/cypress.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8
• docker/login-action v3@e92390c5fb421da1463c202d546fed0ec5c39f20
• cypress-io/github-action v6
• ubuntu 22.04

.github/workflows/deploy-eng.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8
• digitalocean/action-doctl v2
• colpal/actions-clean v1@36e6ca1abd35efe61cb60f912bd7837f67887c8a

.github/workflows/deploy-i18n.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8
• digitalocean/action-doctl v2
• colpal/actions-clean v1@36e6ca1abd35efe61cb60f912bd7837f67887c8a
• ubuntu 22.04

.github/workflows/docr-cleanup.yml

• digitalocean/action-doctl v2
• raisedadead/action-docr-cleanup latest
• digitalocean/action-doctl v2

.github/workflows/no-forks.yml

• actions/github-script v7@60a0d83039c74a4aee543508d2ffcb1c3799cdea
• ubuntu 22.04

.github/workflows/node.js-test.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8
• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8
• docker/login-action v3@e92390c5fb421da1463c202d546fed0ec5c39f20
• ubuntu 22.04
• ubuntu 22.04

npm

package.json

• @11ty/eleventy 2.0.1
• @11ty/eleventy-plugin-rss 1.2.0
• @tryghost/content-api 1.11.21
• @tryghost/helpers 1.1.90
• algoliasearch 4.23.3
• clean-css 5.3.3
• cross-env 7.0.3
• cypress 13.9.0
• dayjs 1.11.11
• dotenv 16.4.5
• eslint 8.57.0
• eslint-config-prettier 9.1.0
• eslint-plugin-cypress 2.15.2
• eslint-plugin-ghost 3.4.0
• eslint-utils 3.0.0
• get-video-id 4.1.5
• graceful-fs 4.2.11
• graphql-request ^6.1.0
• husky 9.0.11
• i18next 23.11.4
• i18next-fs-backend 2.3.1
• jest 29.7.0
• jest-json-schema-extended 1.0.1
• js-yaml 4.1.0
• jsdom 24.0.0
• libxmljs 1.0.11
• lint-staged 15.2.2
• lodash 4.17.21
• md5 2.3.0
• node-fetch 2.7.0
• npm-run-all2 6.2.0
• piscina 4.4.0
• prettier 3.2.5
• probe-image-size 7.2.3
• shx 0.3.4
• terser 5.31.0
• node >=18
• npm >=8

nvm

.nvmrc

• node 18

---

• Check this box to trigger a request for Renovate to run again on this repository

Remove NGINX Cache to prevent stale content

Currently, we use the inbuilt caching features of NGINX on our web servers. These work perfectly fine because we have Ghost doing the invalidation (when NGINX checks for updated content) for a given page. Then on Cloudflare's dynamic caches handle the rest, and the setup is decently good.

But with the new SSG based news, we have all the paged pre-rendered and readily available. This brings in the additional overhead of doing cache invalidation.

In future, we may be able to do just that by listening to Ghost for changes and with 11ty's upcoming hybrid builds - but while that happens it's best we completely remove the NGINX caches because we no longer need them (although the cache would make the pages faster).

As an interim solution, I believe we can add a Varnish Cache layer instead.

Improve Testing

Currently the Cypress tests use local JSON page and post files sourced from the English Ghost instance (Content API, v3).

Going forward, we'll want to set up a Docker instance of Ghost with the following:

• Articles, tags, and at least two authors (one for regular posts, another to act as a translator for a later feature)
• A preconfigured Content API key for 11ty to use during test builds

Once the Dockerized Ghost instance has been set up, we'll need to:

• Create a SQL dump and zip it
• Create a workflow / modify the Cypress test GH Action (still in progress) to spin up the Docker container and restore the dump
• Run the Cypress tests once the dump has been restored

We should also have detailed documentation on how to start the Docker image, unzip and restore the SQL dump locally, make modifications (add more articles, authors, and so on), and create / zip a new SQL dump.

Tasks

• Use Dockerized Ghost instances for Cypress test suite. Closed via #207
• Write tests for pre-production containers, and adjust workflow to run tests before the deployment step

Set defaults in the config

Need to audit set sane defaults in https://github.com/freeCodeCamp/news/tree/main/config once we go full JAMStack.

Extra Scroll padding for linked section

Describe the feature
When you visit a linked section like this https://www.freecodecamp.org/news/developer-news-style-guide#headlines-the-only-part-of-your-tutorial-that-100-of-people-will-read, you will face a missing section of the heading.

---

We can use scroll-padding-top to set offset for this, here is the link for it

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top

Audit the RTL layout with the Arabic articles

@islamh-mahfouz, I was wondering if you could kindly audit the RTL layout with the Arabic articles and create an umbrella issue so we could address all of the inconsistencies together.

Here is what we have came across so far:

• The word break issue explained above.
• Twitter button tweets left to right titles.

Originally posted by @ahmadabdolsaheb in #194 (comment)

Donating users see the authenticated Banner instead

Although the related cookies are present, the donor banner is not displayed.

Ensure post & page redirects work just as the current Ghost version

Ghost has been handling the redirects for us, which we've been tracking in the Ghost Config repo.

We'll need a way to handle these redirects, too, either at the NGINX level, or with Serve.

Ensure RSS feeds work just as the current Ghost version

Currently to view RSS feeds on the landing, author, and tag pages, you need to go to .../rss.xml directly, rather than .../rss like on Ghost.

We'll need a way to serve rss.xml files when readers visit .../rss, either on the NGINX level, or with Serve.

Remove redundant author/translator’s name

Can we remove the duplicate author/translator’s name at the beginning of the article? (The part I marked yellow in the image below)
It seems redundant, especially on mobile layout since there is no cover image displayed.

We can keep the original article's title.

To Reproduce
Steps to reproduce the behavior:

1. Open a translated article such as: https://www.freecodecamp.org/japanese/news/freecodecamp-2022-top-contributors/

Additional context
I proposed this in the i18n team meeting and we agreed on removing it.

Update the copyright disclaimer on LICENSE and README.md to 2022

Menu Button on News Platform

Describe the Issue

An idea was proposed on the Discord.

Right now the news platform only has a link to the Forum, while the learn platform has a drop down menu with links to donate, curriculum, forum, news, radio, and language options. It might be nice to offer a similar set of links on the news platform.

Affected Page

https://www.freecodecamp.org/news/

Steps to Reproduce

N/A

Expected behavior

Consistency is nice between our various platforms.

Screenshots

No response

System

All

Additional context

No response

How to Help Translate freeCodeCamp into Your Native Language

https://www.freecodecamp.org/news/help-translate-freecodecamp-language/

Strong characters breaks English letter structure in RTL language

Describe the bug
If someone type (C++) in RTL languages the renderer markdown will be (++C). this harms trying to duplicate functions in headers, as the string (range()) will result (()range).

And this affect tags as well as shown in the picture below

To Reproduce
Steps to reproduce the behavior:

1. Go to arabic/news/

Expected behavior
in the paragraphs, the string is rendered correctly, len(). Can this be replicated into the headers and tags?

Screenshots

make code elements copiable to help with improving the flow state on mobile devices.

We have two ways to display code: <code>code tags</code> and code blocks

As pointed by Ahmad, we can add feature that copy code tags when you interact with them, on mobile devices.

And for code blocks, we can display icon like the one in docs which copy the block if needed.

Originally posted by @ahmadabdolsaheb in #518 (comment)