34 |
35 | {
36 | menu.map((l) => { l.title })
37 | }
38 |
39 |
40 |
41 | )
42 | }
43 |
44 | export default Sidebar
--------------------------------------------------------------------------------
/src/layouts/Sidebar/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { down } from '../../styles/MediaQueries/queries';
3 |
4 | export const SidebarContainer = styled.div`
5 | display: flex;
6 | flex-direction: column;
7 | background: ${props => props.theme.colors.primary};
8 | order: -1;
9 | flex: 0 0 270px;
10 | padding: 20px 30px;
11 | min-height: 100vh;
12 | transition: 0.25s ease-out;
13 | transform: translateX(0);
14 | ${down('lg')} {
15 | transition-timing-function: ease-out;
16 | transform: translateX(-100%);
17 | position: fixed;
18 | }
19 | `;
20 |
21 | export const SidebarTitle = styled.div`
22 | height: 40px;
23 | display: flex;
24 | align-items: center;
25 | font-size: 15px;
26 | /* font-weight: 600; */
27 | transition: opacity .25s;
28 | img {
29 | width: 30px;
30 | margin-right: 10px;
31 | }
32 | `;
33 |
34 | export const SidebarGroup = styled.div`
35 | border-top: 1px solid ${props => props.theme.colors.border};
36 | height: 100%;
37 | margin-top: 20px;
38 | padding-top: 25px;
39 | h2 {
40 | font-weight: bold;
41 | font-size: 14px;
42 | }
43 | `
44 |
45 | export const SidebarItems = styled.div`
46 | margin: 15px 0;
47 | a {
48 | display: block;
49 | margin: 15px 0;
50 | color: ${props => props.theme.colors.secundary};
51 | text-decoration: none;
52 | transition: .25s;
53 | }
54 | a:hover {
55 | color: ${props => props.theme.colors.text};
56 | }
57 | .active {
58 | color: ${props => props.theme.colors.purple};
59 | }
60 | `
61 |
62 |
63 | // #6970ff
64 | // #9297fb
65 | // rgb(146,151,251)
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { BrowserRouter } from "react-router-dom";
4 | import App from './App';
5 |
6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
--------------------------------------------------------------------------------
/src/markdown/uma-nova-maneira-de-pensar-em-javascript.md:
--------------------------------------------------------------------------------
1 | # Uma nova maneira de pensar em JavaScript
2 |
3 |
4 |
5 | ## 📓 Transcrição da aula
6 |
7 | Você já parou para pensar no porquê de você pensar da forma como pensa quando está codificando?
8 |
9 | Já considerou que pode ter aprendido algo da maneira errada e estar levando isso para a sua vida como uma verdade?
10 |
11 | Perguntas como essas são meio pretensiosas, eu reconheço! Contudo, temos que considerar que essa é uma possibilidade real e que, identificando essa possível realidade, podemos melhorar a forma que pensamos ao construir nosso código.
12 |
13 | Vamos seguindo tópico por tópico. Abra somente conforme você progredir no vídeo!
14 |
15 | ### Dando a partida
16 |
17 | Sem recorrer a ferramentas, leia o seguinte código e tente identificar os valores de `n1` e `n2`
18 |
19 | ```javascript
20 | let n1 = 6;
21 | let n2 = n1;
22 | n1 = 0;
23 | ```
24 |
25 | Relaxe: a intenção aqui não é te ensinar sobre variáveis no JavaScript. Eu sei que você já manja disso! Quero somente que perceba e reflita sobre como você _pensa no código._
26 | Como segundo exercício de pensamento, quero que você releia o código acima. Contudo, desta vez com a intenção de realmente ter a certeza do resultado.
27 | Preste bastante atenção! A intenção disso tudo é muito importante. E preste atenção ao que acontece na sua mente ao pensar!
28 | Talvez você tenha construído um monólogo como este:
29 |
30 | - `let n1 = 6;`
31 | - Declarar a variável chamada `n1` e definir como 6
32 | - `let n2 = n1;`
33 | - Declarar a variável chamada n2 como igual a n1
34 | - Então, se `n1` é igual a 6, logo `n2` também é igual a 6
35 | - `n1 = 0;`
36 | - Mudar o valor da variável n1 para 0
37 | - Então `n1` agora é 0, e `n2` é 6
38 | Enfim, talvez a sua conversa interior tenha sido diferente, ou talvez você tenha usado termos como atribuir valor tal em vez de definir, ou até algo diferente e até em um resultado diferente. Quem sabe?
39 | O que temos que observar é que essa conversa interior não captura realmente o que acontece! Se você falou `definir/atribuir n2 como n1`, somos levados a pensar seguinte: o que significa definir uma variável?
40 | Descobriremos que, em cada conceito fundamental da programação, tais como variáveis ou mesmo operações sobre variáveis (como é o caso de definição de valores), há conjuntos de analogias enraizadas que podemos ter associado em nossas mentes.
41 | Um tipo de analogia muito comum é aquela de que variáveis são como caixas que guardam as coisas. Mesmo que você não imagine mais caixas quando vê uma variável, elas podem estar se comportando como tal em sua imaginação, e é esse tipo de coisa que consideramos como modelos mentais.
42 | Infelizmente, às vezes, nossos modelos mentais estão errados, por talvez termos acompanhado algum tutorial que lemos no início da carreira, o qual pode ter sacrificado a precisão conceitual ao explicar algo em prol de torná-lo mais facilmente explicável naquele momento.
43 | Pode ainda acontecer de trazermos comportamentos e pensamentos vindos de outras linguagens que aprendemos anteriormente ao JavaScript, e esse é um problema que iremos juntos corrigir nesse mini-treinamento.
44 |
45 | ### Aquecendo os motores
46 |
47 | Existe um livro chamado ["Rápido e devagar: Duas formas de pensar”](https://amzn.to/3JeCZEE) que explora dois sistemas diferentes que nós usamos quando pensamos.
48 | Geralmente e quase sempre usamos o sistema "rápido”, que é muito bom em padrões e reações institivas, que, alías, são necessárias para nossa sobreviência. Um bom exemplo disso é a nossa capacidade de andar sem cair. Contudo, é preciso reconhecer: ele não é muito bom em planejamento.
49 | O nosso sistema "lento”, por outro lado é responsável pelo raciocínio estilo passo a passo, mais complexo. Ele é o que nos permite planejar coisas futuras, argumentar e resolver, por exemplo, problemas matemáticos.
50 | Contudo, usar esse sistema "lento” é desgastante mentalmente, e é por isso que tendemos a sempre optar pelo sistema "rápido”, inclusive quando lidamos com tarefas intelectivas como programar.
51 | Vamos ao seguinte exercício:
52 | Imagine que você está atolado em trabalho e quer identificar rapidamente o que essa função faz. Dê uma olhada nela abaixo:
53 |
54 | ```javascript
55 | function duplicateSpreadsheet(original) {
56 | if (original.hasPendingChanges) {
57 | throw new Error('Salve o arquivo antes de duplicar.');
58 | }
59 | let copy = {
60 | created: Date.now(),
61 | author: original.author,
62 | cells: original.cells,
63 | metadata: original.metadata
64 | };
65 | copy.metadata.title = 'Copia de' + original.metadata.title;
66 | return copy;
67 | }
68 | ```
69 |
70 | Você provavelmente percebeu o seguinte:
71 |
72 | - Esta função duplica uma planilha.
73 | - Ela lança um erro se a planilha original não estiver salva.
74 | - Ela acrescenta "Cópia de” ao título da nova planilha.
75 | - Porém…
76 | O que você pode não ter notado (e parabéns se notou), é que essa função altera de maneira acidental o título da planilha original. Acredite, esse tipo de bug acontece todos sempre durante o dia a dia da pessoa que programa.
77 | Quando usamos o sistema "rápido”, tentamos adivinhar o que o código faz com base em sua estrutura geral, convenções, nomenclaturas e comentários. Contudo, ao usar o sistema "lento”, refazemos mentalmente o passo a passo do que o código faz, o que é mais cansativo e demorado.
78 | É por isso que ter um modelo mental preciso é tão importante. Simular um computador em sua cabeça é difícil e, quando você precisa usar o sistema de pensamento "lento”, seu modelo mental é tudo em que você pode confiar.
79 | Se, porém, o seu modelo mental estiver errado, você entenderá fundamentalmente mal o que esperar do seu código e todo o seu esforço terá sido em vão.
80 | Não se preocupe se você não conseguir encontrar o bug - isso significa apenas que você aproveitará ao máximo este curso!
81 |
82 | ### Trocando de marcha
83 |
84 | Espero que você tenha percebido o quão importante é o modo como pensamos quando vamos codar! Na próxima aula, começaremos a construir nossa nova maneira de pensar. Começaremos com alguns conceitos dos mais fundamentais do JavaScript, que são _valores_ e _expressões._
85 |
86 | Estaremos juntos nesta jornada, Aventureiros e Aventureiras! 🧗
87 |
88 | Créditos: [Dan Abramov](https://overreacted.io/) | Adaptação: [Frank Rocha](https://www.frankrocha.dev/)
89 |
--------------------------------------------------------------------------------
/src/markdown/uma-viagem-pelo-universo-chamado-javascript.md:
--------------------------------------------------------------------------------
1 | # Segunda lição
2 |
--------------------------------------------------------------------------------
/src/pages/MarkdownLessons.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from 'react';
2 | import { useLocation } from 'react-router-dom';
3 | import rehypeRaw from "rehype-raw";
4 | import CodeBlock from '../Components/CodeBlock/CodeBlock';
5 | import VideoBlock from '../Components/VideoBlock/VideoBlock';
6 |
7 | import { StyledMarkdown } from './styles';
8 |
9 | const MarkdownLessons = () => {
10 | const location = useLocation()
11 | const currentSlug = location.pathname.split('/')[2]
12 | const [lesson, setLesson] = useState('')
13 |
14 | useEffect(() => {
15 | import(`../markdown/${currentSlug}.md`).then((res) => {
16 | setLesson(res.html)
17 | }).catch((e) => alert('nao tem essa licao'))
18 | }, [location]);
19 |
20 | return (
21 |
28 | {lesson}
29 |
30 | )
31 | }
32 |
33 | export default MarkdownLessons
--------------------------------------------------------------------------------
/src/pages/styles.ts:
--------------------------------------------------------------------------------
1 | import ReactMarkdown from 'react-markdown';
2 | import { Link } from 'react-router-dom';
3 | import styled from 'styled-components';
4 |
5 | export const StyledMarkdown = styled(ReactMarkdown)`
6 | display: flex;
7 | width: 100%;
8 | flex-direction: column;
9 | padding: 0 10%;
10 | font-size: 16px;
11 | color: ${props => props.theme.colors.text};
12 | line-height: 30px;
13 | p {
14 | text-align: justify;
15 | width: 100%;
16 | }
17 | table,
18 | tr,
19 | td,
20 | th {
21 | border: 1px solid #555;
22 | }
23 | h1,
24 | h2,
25 | h3 {
26 | margin-top: 25px;
27 | }
28 | pre {
29 | margin-top: 5px;
30 | }
31 | h2,
32 | h3 {
33 | color: ${props => props.theme.colors.purple};
34 | }
35 | summary {
36 | font-size: 16px;
37 | }
38 | details {
39 | font-size: 15px;
40 | line-height: 20px;
41 | }
42 | blockquote {
43 | padding: 0 1em;
44 | color: #6a737d;
45 | border-left: 0.25em solid #dfe2e5;
46 | }
47 | ul {
48 | margin-left: 30px;
49 | }
50 | ul li {
51 | /* padding: 5px 0; */
52 | }
53 | a {
54 | text-decoration: none;
55 | color: ${props => props.theme.colors.secundary};
56 | }
57 | a:hover {
58 | text-decoration: none;
59 | color: #fff;
60 | }
61 | `;
62 |
--------------------------------------------------------------------------------
/src/styles/MediaQueries/queries.ts:
--------------------------------------------------------------------------------
1 | import { up, down, between, only, createTheme } from 'styled-breakpoints';
2 |
3 | const queries = createTheme({
4 | sm: '576px',
5 | md: '768px',
6 | lg: '992px',
7 | xl: '1200px',
8 | });
9 |
10 | export { queries, up, down, between, only }
--------------------------------------------------------------------------------
/src/styles/global.ts:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle } from "styled-components";
2 |
3 | export default createGlobalStyle`
4 | * {
5 | margin: 0;
6 | padding: 0;
7 | outline: 0;
8 | box-sizing: border-box;
9 | -webkit-box-sizing: border-box;
10 | -moz-box-sizing: border-box;
11 | }
12 | body {
13 | background: ${props => props.theme.colors.background};
14 | font-size: 14px;
15 | color: ${props => props.theme.colors.text};
16 | font-family: sans-serif;
17 | }
18 |
19 | body html #root {
20 | height: 100%;
21 | }
22 | `;
--------------------------------------------------------------------------------
/src/styles/styled.d.ts:
--------------------------------------------------------------------------------
1 | import 'styled-components'
2 | declare module 'styled-components' {
3 | export interface DefaultTheme {
4 | title: string,
5 |
6 | colors: {
7 | primary: string,
8 | secundary: string,
9 |
10 | purple: string,
11 |
12 | background: string,
13 | text: string,
14 |
15 | border: string,
16 |
17 | switchBg: string
18 |
19 | skeletonBase: string,
20 | skeletonHighlightColor: string
21 | }
22 | }
23 | }
--------------------------------------------------------------------------------
/src/styles/themes/dark.ts:
--------------------------------------------------------------------------------
1 | import { shade } from 'polished'
2 |
3 | export default {
4 | title: 'dark',
5 |
6 | colors: {
7 | primary: '#1a1a1a',
8 | secundary: '#898989',
9 |
10 | purple: '#646cff',
11 |
12 | background: '#232323',
13 | text: '#e3e3e3',
14 |
15 | border: shade(0.6, '#898989'),
16 |
17 | link: '#898989',
18 | linkHover: '#646cff',
19 |
20 | switchBg: '#3a3a3a',
21 |
22 | skeletonBase: '#202020',
23 | skeletonHighlightColor: '#444'
24 | }
25 | }
--------------------------------------------------------------------------------
/src/styles/themes/light.ts:
--------------------------------------------------------------------------------
1 | import { lighten, shade } from 'polished'
2 |
3 | export default {
4 | title: 'light',
5 |
6 | colors: {
7 | primary: '#f9f9f9',
8 | secundary: '#747474',
9 |
10 | purple: '#646cff',
11 |
12 | background: '#fff',
13 | text: '#213647',
14 |
15 | border: lighten(0.45, '#747474'),
16 |
17 | link: '#747474',
18 | linkHover: '#646cff',
19 |
20 | switchBg: '#f1f1f1',
21 |
22 | skeletonBase: '#f3f3f3',
23 | skeletonHighlightColor: '#f1f1f1'
24 | }
25 | }
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"],
20 | "files": [
21 | "src/styles/styled.d.ts"
22 | ],
23 | "references": [{ "path": "./tsconfig.node.json" }]
24 | }
25 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "include": ["vite.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
3 | }
4 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react';
2 | import { defineConfig } from 'vite';
3 | import { Mode, plugin } from 'vite-plugin-markdown';
4 |
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | plugins: [react(), plugin({ mode: [Mode.HTML] })]
9 | })
10 |
--------------------------------------------------------------------------------
/vite.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.md' {
2 | // "unknown" would be more detailed depends on how you structure frontmatter
3 | const attributes: Record;
4 |
5 | // When "Mode.TOC" is requested
6 | const toc: { level: string, content: string }[];
7 |
8 | // When "Mode.HTML" is requested
9 | const html: string;
10 |
11 | // When "Mode.React" is requested. VFC could take a generic like React.VFC<{ MyComponent: TypeOfMyComponent }>
12 | import React from 'react';
13 | const ReactComponent: React.VFC;
14 |
15 | // Modify below per your usage
16 | export { attributes, toc, html, ReactComponent };
17 | }
--------------------------------------------------------------------------------