Adriano de Azevedo drianoaz

FORK: Highlight Active Nav Link On Page Scroll (Plain JS)

THIS IS A FORK: of the original by Danilo Bilanoski, updated to allow the sections to be placed inside a relative parent. See the JS file comments for details.

ORIGINAL: Simple Vanilla Javascript solution to highlight an active menu item / navigation link when scrolling the page without the need for jQuery. Idea is to watch scroll position and add a certain CSS class to active menu item when you scroll to corresponding section.

A Pen by khuongyolo on CodePen.

License.

Using Stitches with Storybook

The setup for storybook is the same as their docs. Once you're repo is set up (Im using Typescript) and you have Stitches imported and set up (as per the stitches docs), the next step is to install Storybook.

I went with their npx setup: npx sb init (note: since my project was already set up with React/TS this command detected everything it needed to know, so there was no interactive prompt for me)

When using a styled stitches component everything will work as expected:

export const Button = styled('button', {

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

How to add a collapsible section in markdown

1. Example

Click me

Heading

Foo
Bar
- Baz

Qux

Por: Paulo Torrens
Originalmente portado no facebook em 2014-03-08

#["LÓGICA DE PROGRAMAÇÃO" É BOBAGEM, e explicarei porquê.]

Se preparem que o texto é longo.

Várias vezes chegam novatos aqui perguntando como começar, e a galera diz "estuda lógica primeiro, depois vai pra linguagem X". Vivo dizendo que é bobagem. Ontem, em particular, falei isso, e vieram várias pessoas por inbox me perguntar porquê (e uma pra me xingar, achando que falei por arrogância).

Pra facilitar, eu vou escrever uma boa explicação de porquê "lógica de programação" é furada, doa a quem doer, e postar na APDA e no fórum da EnergyLabs (para futuras referências, porque esse assunto vai voltar, ctz).

	[user]
	name = <user>
	email = <mail>
	[alias]
	co=checkout
	st=status
	up = !git fetch origin && git pull --rebase origin main
	upto = !git fetch origin && git pull --rebase origin
	sup = !git branch --set-upstream-to=origin/`git symbolic-ref --short HEAD`
	ammend = !git add -A; git commit --ammend --no-edit

	// ----------- Criando Classes ----------------------

	var Modal = function(options) {
	// aqui vai o construtor do objeto, código que vai ser rodado durante o instanciamento
	this.options = options
	}

	Modal.prototype = {
	// aqui vão os métodos da instancia, um a um como chaves/valores desse objeto
	open: function(){

	function calcChecker1 (firstNineDigits) {
	let sum = null

	for (let j = 0; j < 9; ++j) {
	sum += firstNineDigits.toString().charAt(j) * (10 - j)
	}

	const lastSumChecker1 = sum % 11
	const checker1 = (lastSumChecker1 < 2) ? 0 : 11 - lastSumChecker1

	# most people include something like this. don't.
	# check your default nginx.conf, it's already covered in a much better way.
	#gzip_disable "MSIE [1-6]\.(?!.*SV1)";

	# compress proxied requests too.
	# it doesn't actually matter if the request is proxied, we still want it compressed.
	gzip_proxied any;

	# a pretty comprehensive list of content mime types that we want to compress
	# there's a lot of repetition here because different applications might use different

	function string_to_slug (str) {
	str = str.replace(/^\s+\|\s+$/g, ''); // trim
	str = str.toLowerCase();

	// remove accents, swap ñ for n, etc
	var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
	var to = "aaaaeeeeiiiioooouuuunc------";
	for (var i=0, l=from.length ; i<l ; i++) {
	str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
	}