Free Project: Coding Tips Tab

Hi coders!

You may have seen our Medium post recently with a free step-by-step project guide, teaching you to make your own Chrome Extension – one that will show you a coding tip in every new tab!

We’ve now posted a finished version of the coding tips tab project to the Chrome Web Store, check it out.

We’re inviting you, the community, to take what’s in the guide and the finished version and make them your own!

You can easily publish your own versions to the Chrome Web store, but we’re hoping that you’ll open up the code for others too, just as we did. If you share your work on these community boards, you could be helping tens of thousands of other learners to learn and retain their coding knowledge.

Please share and discuss any modifications and improvements to the JavaScript Tips Tab project here!

Just hit reply to get started. We’re excited to see what you create!

Some suggested improvements to get you going:

  • You will almost certainly want to add more coding tips – eventually you’ll get very familiar with the ones we’ve included by default!
  • You may want to make modifications to turn the extension into a flash card generator where there’s a button to reveal the answer to a prompt.
3 Likes

Do you have any repository where I can contribute to?

Good question, let’s see if we can spin one up! @jonsamp

4 Likes

How can I have this Tips Tab display images from a folder?

I’d love to just dump bunch of flashcards into a folder and have them pop up.

You could have it display images by creating an image element in JavaScript and then appending it to the HTML (the DOM).

It could look something like:

var elem = document.createElement("img");
elem.setAttribute("src", "images/flashcard-1.jpg");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
document.getElementById("flashcardImage").appendChild(elem);

Alternatively, it’s probably possible to put an image element in the HTML, then use setAttribute("src", "your-image-source-here") to set a random source for the image on each button click.

Hope this helps some, and there may be other ways to accomplish this.

PS: I got most of this answer from here.

5 Likes

I added possibility to write tips in a more readable format:
HTML:

<div id="tips">
	...
	<textarea class="hidden">
		`if`/`else` statements look like
```
if (_condition_) {
  ...
} else {
  ...
}
```
	</textarea>
	...

JS:

const tips = Array.from(document.querySelector("#tips").children)
	.map(element => element.textContent);

const showRandomTip = () => {
	...
	tipElement.innerHTML = parse(randomTip);
	...
};

const parse = markdown => {
	const INLINE_CODE = /`(\S*?)`/g;
	const BLOCK_CODE = /```(\s+?)([\s\S]*?)(\s+?)```/g;
	const EM = /_(\S*?)_/g;
	return markdown
		.replace(BLOCK_CODE, "<span class='code-block'>$2</span>")
		.replace(INLINE_CODE, "<span class='code'>$1</span>")
		.replace(EM, "<em>$1</em>");
};

CSS:

.code-block {
	...
	white-space: pre;
}

.hidden {
	display: none;
}

Full source:

2 Likes