diff --git a/assets/data/cards_en.json b/assets/data/cards_en.json new file mode 100644 index 00000000..5a8ed7c6 --- /dev/null +++ b/assets/data/cards_en.json @@ -0,0 +1,450 @@ +{ + "cards": [ + { + "title": "Abstraction", + "description": "Abstraction is a simplification of specific points of a system or behavior we're trying to understand. In programming, we use abstractions all the time, meaning we don't need to understand all the deep technical details to write code, such as the inner workings of a computer.", + "tags": [ + "Concept" + ] + }, + { + "title": "Typed Variable", + "description": "A typed variable is one that has a specific data type associated with it.", + "tags": [ + "Concept" + ] + }, + { + "title": "Parameter", + "description": "A parameter is information passed to a function or method as part of its call.", + "tags": [ + "Concept" + ] + }, + { + "title": "Named Parameter", + "description": "A named parameter is a way of passing values to a function or method by specifying the name of the corresponding parameter.", + "tags": [ + "Concept" + ] + }, + { + "title": "Computed Variable", + "description": "A computed variable doesn’t store a value directly; instead, it calculates or derives its value from other variables or data.", + "tags": [ + "Concept" + ] + }, + { + "title": "Ternary", + "description": "A conditional expression.", + "content": { + "code": "Expression ? True : False;" + }, + "tags": [ + "Concept" + ] + }, + { + "title": "Stateless Widget", + "description": "In Flutter, a StatelessWidget is a component without mutable internal state, ideal for parts of the user interface that don’t change over time and don’t depend on state.", + "tags": [ + "Concept", + "Mobile" + ] + }, + { + "title": "Stateful Widget", + "description": "In Flutter, a StatefulWidget is a component with mutable internal state, allowing it to respond to state changes and dynamically update the user interface.", + "tags": [ + "Concept", + "Mobile" + ] + }, + { + "title": "Function", + "description": "A function is a block of code that performs a specific task and can be called from other parts of the program. It helps to organize and reuse code, making software more modular and readable. Functions receive inputs (called arguments) and can return a result (return value) or simply perform an action.", + "tags": [ + "Concept" + ] + }, + { + "title": "Argument", + "description": "An argument is a value or information that you provide to a function or method during its call. These arguments are used by the function to perform a specific task or to make decisions based on the provided values. In short, arguments are input data that allow a function to perform its work and produce a result or carry out desired actions.", + "tags": [ + "Concept" + ] + }, + { + "title": "Object-Oriented Programming", + "description": "Object-Oriented Programming (OOP) is a programming paradigm that models software around objects, which are instances of classes. Each object contains attributes (data) and methods (functions) that operate on these data. It allows for more modular, reusable, and real-world object-oriented code organization. OOP promotes concepts such as encapsulation, inheritance, and polymorphism, facilitating the creation of more flexible, comprehensible, and scalable systems.", + "tags": [ + "Concept", + "Paradigm" + ] + }, + { + "title": "Recursion", + "description": "Recursion is a method/function that calls itself to solve a problem.", + "tags": [ + "Concept" + ] + }, + { + "title": "Class", + "description": "In software development, a class is a 'mold' or 'model' for creating objects. It defines the attributes (data) and methods (functions) that objects created from it will have. Classes help organize code, allowing for the reuse and abstraction of data and functionalities in a coherent structure.", + "tags": [ + "Concept" + ] + }, + { + "title": "Object", + "description": "In software development, an object is like a character in a video game. It has characteristics (data) and can perform actions (methods). For example, a 'car' object may have color, speed, and brand (characteristics) and can accelerate, brake, and turn (actions/methods). Objects are instances of classes and allow code to be organized in a way that represents real-world entities, making it more comprehensible and reusable.", + "tags": [ + "Concept" + ] + }, + { + "title": "Encapsulation", + "description": "Encapsulation acts like a 'magic box' that hides the internal details of an object. This means that an object's data and internal workings are kept private and can't be accessed directly from outside. Instead, the object provides controlled interfaces (public methods) to interact with it. This helps protect the object's data and control how it is used, promoting code safety and organization.", + "tags": [ + "Concept" + ] + }, + { + "title": "Inheritance", + "description": "Inheritance works like a 'genealogical tree'. It allows a class or object to inherit characteristics and behaviors from a parent class. This means the child class inherits the attributes and methods of the parent class, saving time and promoting code reuse. Inheritance is a way to organize and structure code, creating class hierarchies that represent relationships between real-world objects.", + "tags": [ + "Concept" + ] + }, + { + "title": "Polymorphism", + "description": "Polymorphism allows objects of different types to behave similarly through a shared interface.", + "tags": [ + "Concept" + ] + }, + { + "title": "Front-end Development", + "description": "Front-end development is the development of the graphical interface, allowing users to visualize and interact with what has been developed.", + "tags": [ + "Front-end" + ] + }, + { + "title": "HTML", + "description": "HTML is a markup language used in the construction of web pages. HTML documents can be interpreted by browsers.", + "tags": [ + "Front-end" + ] + }, + { + "title": "CSS", + "description": "Cascading Style Sheets is a mechanism for adding styles to a web page, such as colors, sizes, fonts, etc. It is possible to link the HTML file to CSS by adding a link to a CSS file containing the styles.", + "tags": [ + "Front-end" + ] + }, + { + "title": "JavaScript", + "description": "JavaScript is a high-level, structured, interpreted programming language with weak dynamic typing and supports multiple paradigms. Along with HTML and CSS, JavaScript is one of the three main technologies for website creation.", + "tags": [ + "Front-end", + "Back-end" + ] + }, + { + "title": "jQuery", + "description": "jQuery is a JavaScript library that interacts with HTML in a much faster and simpler way than using pure JavaScript.", + "tags": [ + "Front-end", + "Library" + ] + }, + { + "title": "Python", + "description": "Python is a widely used programming language in web applications, software development, data science, and machine learning (ML). Developers use Python because it is efficient, easy to learn, and can be run on many different platforms.", + "tags": [ + "Back-end" + ] + }, + { + "title": "UI Design", + "description": "UI Design involves designing and executing an interface for the user. For example, ensuring that a button is visible and clickable.", + "tags": [ + "Concept", + "Front-end", + "Design" + ] + }, + { + "title": "UX Design", + "description": "UX Design involves designing and executing an experience for the user. For example, designing actions that make a person feel good when entering a page, or engaged, etc.", + "tags": [ + "Concept", + "Front-end", + "Design" + ] + }, + { + "title": "Frameworks", + "description": "Frameworks are like collections of tools, components, and solutions found in a single package that facilitate the creation of complex applications.", + "tags": [ + "Framework", + "Concept" + ] + }, + { + "title": "Spread Operator", + "description": "The spread operator is a feature present in several programming languages that allows copying and combining elements from one data structure into another, facilitating efficient manipulation of information.", + "tags": [ + "Concept" + ] + }, + { + "title": "Algorithm", + "description": "An algorithm is like a recipe for a computer. It's a set of organized steps that help solve a problem, like doing calculations or analyzing information.", + "tags": [ + "Concept" + ] + }, + { + "title": "Git", + "description": "Git is a widely used distributed version control system for tracking changes in files and coordinating work on software development projects.", + "tags": [ + "Concept", + "Versioning", + "Tool" + ] + }, + { + "title": "GitHub", + "description": "GitHub is a web-based source code hosting platform offering a variety of version control and software development collaboration services (used in conjunction with Git). It is widely used by developers worldwide to store, collaborate, manage, and control the source code of software projects.", + "tags": [ + "Concept", + "Versioning", + "Tool" + ] + }, + { + "title": "Optional Chaining", + "description": "Optional Chaining is a feature in Javascript for dealing with situations where you need to access properties of nested objects but are unsure if those properties actually exist. It helps avoid 'TypeError' errors when trying to access something that hasn't been defined.", + "content": { + "code": "const person = name?.city?.address;" + }, + "tags": [ + "Concept" + ] + }, + { + "title": "Low-Level Language", + "description": "A low-level programming language has little or no abstraction from a computer's language. It is closer to machine language.", + "tags": [ + "Concept" + ] + }, + { + "title": "Memory Address", + "description": "A memory address is a unique number that identifies a specific memory location in a computer. Everything declared in a programming language is stored in the computer's memory, and accessing these data requires knowing the memory address where they are stored.", + "tags": [ + "Concept" + ] + }, + { + "title": "Pointers", + "description": "A pointer is a type of data in a programming language that stores or refers to the memory address of another value located in the computer's memory. A pointer refers to a location in memory and retrieves the value from that location. As such, a pointer is a type of data that 'points' to a value.", + "content": { + "code": "int *pointer; // pointer to an integer in C/C++" + }, + "tags": [ + "Concept" + ] + }, + { + "title": "C", + "description": "C is a general-purpose, structured, imperative, procedural programming language compiled and standardized by ISO. It was created in 1972 by Dennis Ritchie at AT&T Bell Labs to develop the Unix operating system (originally written in Assembly).", + "tags": [ + "Concept" + ] + }, + { + "title": "C++", + "description": "C++ is a compiled multi-paradigm (supporting imperative, object-oriented, and generic programming) general-purpose programming language. It has been one of the most popular commercial languages since the 1990s and is also widely used in academia for its high performance and user base.", + "tags": [ + "Concept" + ] + }, + { + "title": "Bug", + "description": "The term 'Bug' is commonly used to report a problem in a program or environment. It can be an incorrect or unexpected behavior, generally caused by incorrect logic in the code, leading to failures during software execution.", + "tags": [ + "Concept" + ] + }, + { + "title": "Compiler", + "description": "A compiler is like a language translator for computers. It takes code written by programmers in a form that's easy for them to understand (called high-level code) and transforms it into a language that the computer can understand and follow (called low-level code). It does this step by step, as if breaking the process into smaller parts.", + "tags": [ + "Concept" + ] + }, + { + "title": "React Native", + "description": "React Native is a JavaScript framework based on React for the development of multi-platform mobile applications.", + "tags": [ + "Concept", + "Front-end" + ] + }, + { + "title": "Mobile First", + "description": "The mobile-first concept determines that when creating a website, we should first address the needs of mobile devices.", + "tags": [ + "Concept", + "Front-end" + ] + }, + { + "title": "SQL", + "description": "Structured Query Language (SQL) is a programming language used to manage data in relational databases. It's like a language that allows us to talk to databases to do things like fetching, adding, updating, and deleting information.", + "tags": [ + "Concept", + "Back-end" + ] + }, + { + "title": "Node.js", + "description": "Node.js is an environment that allows JavaScript to be executed on the server. This means we can use JavaScript to create and run server-side applications.", + "tags": [ + "Back-end" + ] + }, + { + "title": "Cache", + "description": "Cache is a technique for the temporary storage of frequently used data to improve performance and access speed in computer systems.", + "tags": [ + "Concept" + ] + }, + { + "title": "React", + "description": "React is an open-source JavaScript library used to create interactive and dynamic user interfaces in web applications and other environments like mobile, TV, virtual reality, among others. It stands out for its component-based programming model and efficiency in updating the user interface, making it a popular choice in front-end development.", + "tags": [ + "Concept", + "Front-end" + ] + }, + { + "title": "Component", + "description": "A component is a fundamental and reusable unit for building user interfaces. It encapsulates logic and presentation related to a specific part of the interface. Components can be likened to building blocks that, when combined, form complex interfaces. They promote code organization and maintainability, as they can be developed and tested independently. Components can accept properties (props) as input and render information based on these data, allowing for flexible customization.", + "tags": [ + "Concept" + ] + }, + { + "title": "Property", + "description": "Properties, often abbreviated as 'props', are mechanisms that allow passing data from a parent component to a child component. They are used to customize the behavior and appearance of a component. For example, when creating a button, you can pass properties like background color, displayed text, and text size as props. Props are crucial for making components reusable and configurable, allowing them to adapt to different usage contexts.", + "tags": [ + "Concept" + ] + }, + { + "title": "React Native", + "description": "React Native is a JavaScript framework based on React for the development of multi-platform mobile applications.", + "tags": [ + "Mobile" + ] + }, + { + "title": "Expo CLI", + "description": "Expo CLI is a tool that facilitates the development of mobile applications for iOS and Android. It is used to quickly create a project with React Native.", + "tags": [ + "Mobile" + ] + }, + { + "title": "Stack Navigation", + "description": "In the context of React Native, it is a navigation technique between screens of the application, where the application has back and forward buttons, for example.", + "tags": [ + "Mobile" + ] + }, + { + "title": "Environment", + "description": "We usually refer to 'environment' as the place or servers where what has been developed is available for testing, validations, end-users, or other needs. This server could be a physical computer or available in the cloud. There are local and dev environments (where development is happening), homolog (or hom, homol, homologation - where tests are usually done), and production (where the final system, developed and tested, is available for end-users).", + "tags": [ + "Concept" + ] + }, + { + "title": "API", + "description": "API is an acronym that stands for Application Programming Interface. It is a code structure that meets some requirements, following norms and development standards, facilitating the organization of large systems. It provides functionalities and information for applications and websites. For example, the Correios API provides simplified ZIP code and address lookup.", + "tags": [ + "Concept", + "Back-end" + ] + }, + { + "title": "Code Review", + "description": "Code review means code revision. It's a highly recommended best practice in the system development process, where developers in a team help each other. Normally, after completing the development stage of each task, before the code is made available for testing, the team evaluates what has been done and suggests improvements when necessary. This brings several benefits, such as improving the technical part of the team, development quality, code quality, team integration, and making everyone aware of what is being developed.", + "tags": [ + "Concept" + ] + }, + { + "title": "Commit", + "description": "When working with code versioning (highly recommended), the word 'commit' is quite common among developers. But this word is also used by those working in databases. When a set of changes has been made to a code, a person does the 'commit' command that saves what was done within the project. There is also semantic commit, meaning that this set of changes should have a meaning for the project. Commit is also used to finalize a transaction within a database management system, making the changes visible. This transaction usually starts with the 'begin' command and ends with the 'commit' command.", + "tags": [ + "Concept" + ] + }, + { + "title": "Deploy", + "description": "Deploy is a complex process. But it means that a package of what has been developed has been installed in the environments. A version is generated to be made available. This process can also be called 'implementation' depending on the context. For this implementation to happen, it can be an automated process with tools, or done manually, depending on the structure. The word 'deploy' has been adapted in Portuguese, turning it into an action. Example: 'I am deploying the new version of our system.'", + "tags": [ + "Concept" + ] + }, + { + "title": "Json", + "description": "In English, it stands for JavaScript Object Notation. Json is a file type and has a structure with the name of the data and the value of the data. Depending on the type of API we build, we use the Json format to transfer data between systems. For example: an API that consults clients in your business. The API's response can come in json format.", + "content": { + "code": "{name: 'Morganna', cpf: '000.000.000-00', email: 'email@email.com'}" + }, + "tags": [ + "Concept" + ] + }, + { + "title": "Pair Programming", + "description": "Pair programming means programming in pairs. It's a technique where two people (or more) work together on a task. This helps in the exchange of knowledge and experience among developers. Two heads think better than one, right? Some ways to apply pair programming: one person is working on the code while receiving guidance from the other and they switch roles; one person develops the tests and the other develops the functionality. Do not see pair programming as a waste of time. Good integration and a sense of support in the team can make all the difference in the quality of what is delivered.", + "tags": [ + "Concept" + ] + }, + { + "title": "Pull Request", + "description": "It's a request for a change within a project. This request can be made to fix a problem, add a new feature, suggest changes, among other reasons. This change request is made so that there is an evaluation of what is being changed within the project, understanding if it makes sense for the context at that moment. And this request can remain pending until responsible people or those who have permission approve it. Other rules can be added to these requests, such as building the application, running tests successfully, and whatever else makes sense for the project in question.", + "tags": [ + "Concept" + ] + }, + { + "title": "Ruby", + "description": "Ruby is an interpreted, multiparadigm programming language with dynamic and strong typing, and automatic memory management. Ruby supports functional, object-oriented, imperative, and reflective programming. It's like a digital toolbox that can create, organize, and interact different parts in a computer program, capable of handling various programming styles.", + "tags": [ + "Concept", + "Back-end" + ] + }, + { + "title": "ORM", + "description": "Object-Relational Mapping (ORM) is like translating database tables into code, transforming them into classes and objects.", + "tags": [ + "Concept", + "Back-end" + ] + } + ] +} \ No newline at end of file diff --git a/assets/data/cards_pt-br.json b/assets/data/cards_pt-br.json index a6966210..0811d350 100644 --- a/assets/data/cards_pt-br.json +++ b/assets/data/cards_pt-br.json @@ -4,35 +4,35 @@ "title": "Abstração", "description": "Abstração é uma simplificação de ponto(s) específicos de algum sistema ou comportamento que estamos tentando entender. Na programação, usamos abstrações o tempo todo. Isso significa que não precisamos entender todos os detalhes técnicos profundos para escrever código - como o funcionamento interno de um computador. Em vez disso, podemos usar ideias mais simples para criar nossos programas.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Variável tipada", "description": "Uma variável tipada é aquele que possui um tipo de dado associado a ela.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Parâmetro", "description": "Uma parâmetro é uma informação passada para uma função ou método como parte de sua chamada.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Parâmetro nomeado", "description": "É uma forma de passar valores para uma função ou método especificando o nome do parâmetro correspondente.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Variável computada", "description": "É uma variável que não armazena um valor diretamente, ela calcula ou deriva seu valor de outras variáveis ou dados.", "tags": [ - "Conceito" + "Concept" ] }, { @@ -42,14 +42,14 @@ "code": "Expressão ? Verdadeiro : Falso;" }, "tags": [ - "Conceito" + "Concept" ] }, { "title": "Stateless Widget", "description": "Um StatelessWidget, no Flutter, é um componente que não possui estado interno mutável, ideal para partes da interface do usuário que não mudam com o tempo e não dependem de estado.", "tags": [ - "Conceito", + "Concept", "Mobile" ] }, @@ -57,7 +57,7 @@ "title": "Stateful Widget", "description": "Um StatefulWidget, no Flutter, é um componente que possui estado interno mutável, permitindo que ele responda a mudanças de estado e atualize dinamicamente a interface do usuário.", "tags": [ - "Conceito", + "Concept", "Mobile" ] }, @@ -65,64 +65,64 @@ "title": "Função", "description": "Uma função é um bloco de código que realiza uma tarefa específica e pode ser chamado a partir de outras partes do programa. Ela ajuda a organizar e reutilizar o código, tornando o software mais modular e legível. As funções recebem entradas (chamadas de argumentos) e podem retornar um resultado (valor de retorno) ou simplesmente executar uma ação.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Argumento", "description": "Um argumento é um valor ou uma informação que você fornece a uma função ou método durante sua chamada. Esses argumentos são usados pela função para realizar uma tarefa específica ou para tomar decisões com base nos valores fornecidos. Em resumo, os argumentos são dados de entrada que permitem que uma função realize seu trabalho e produza um resultado ou execute ações desejadas.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Programação orientada a objetos", "description": "A programação orientada a objetos (POO) é um paradigma de programação que se baseia na ideia de modelar o software em torno de objetos, que são instâncias de classes. Cada objeto contém atributos (dados) e métodos (funções) que operam nesses dados. Isso permite organizar o código de forma mais modular, reutilizável e orientada para objetos do mundo real. POO promove conceitos como encapsulamento, herança e polimorfismo, facilitando a criação de sistemas mais flexíveis, compreensíveis e escaláveis.", "tags": [ - "Conceito", - "Paradigma" + "Concept", + "Paradigm" ] }, { "title": "Recursão", "description": "Recursão é um método/função que chama a si mesmo para resolver um problema.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Classe", "description": "Uma classe, em desenvolvimento de software, é como molde e um \"modelo\" para criar objetos. Ela define os atributos (dados) e os métodos (funções) que os objetos criados a partir dela terão. Elas ajudam a organizar o código, permitindo a reutilização e a abstração de dados e funcionalidades em uma estrutura coerente.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Objeto", "description": "Um objeto, em desenvolvimento de software, é como um personagem em um videogame. Ele tem características (dados) e pode fazer coisas (métodos). Por exemplo, um objeto \"carro\" pode ter cor, velocidade e marca (características) e pode acelerar, frear e virar (ações/métodos). Os objetos são instâncias de classes e permitem organizar o código de forma a representar entidades do mundo real, tornando-o mais compreensível e reutilizável.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Encapsulamento", "description": "O encapsulamento funciona como uma \"caixa mágica\" que esconde os detalhes internos de um objeto. Isso significa que os dados e o funcionamento interno de um objeto são mantidos privados e não podem ser acessados diretamente de fora. Em vez disso, o objeto fornece interfaces controladas (métodos públicos) para interagir com ele. Isso ajuda a proteger os dados do objeto e controlar como ele é usado, promovendo a segurança e a organização do código.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Herança", "description": "A herança funciona como uma \"árvore genealógica\". Permite que uma classe ou objeto herde características e comportamentos de outra classe pai. Isso significa que a classe filha herda os atributos e métodos da classe pai, economizando tempo e promovendo a reutilização de código. A herança é uma forma de organizar e estruturar o código, criando hierarquias de classes que representam relacionamentos entre objetos do mundo real.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Polimorfismo", "description": "O polimorfismo permite que objetos de diferentes tipos se comportem de maneira semelhante através de uma interface compartilhada.", "tags": [ - "Conceito" + "Concept" ] }, { @@ -159,7 +159,7 @@ "description": "Biblioteca de funções em JavaScript que interagem com o HTML de uma maneira muito mais rápida e simples do que apenas pelo JavaScript.", "tags": [ "Front-end", - "Biblioteca" + "Library" ] }, { @@ -180,7 +180,7 @@ "title": "UI Design", "description": "É o desenho e execução de uma interface para a pessoa usuária. Por exemplo, garantir que um botão vai ser visto e apertado.", "tags": [ - "Conceito", + "Concept", "Front-end", "Design" ] @@ -189,7 +189,7 @@ "title": "UX Design", "description": "É o desenho e execução de uma experiência para a pessoa usuária. Por exemplo, desenhar as ações que farão com a pessoa se sinta bem ao entrar numa página, ou engajado, etc.", "tags": [ - "Conceito", + "Concept", "Front-end", "Design" ] @@ -199,39 +199,39 @@ "description": "São como coleções de ferramentas, componentes e soluções que você pode encontrar em um mesmo pacote (o framework) que facilitam a criação de aplicações complexas.", "tags": [ "Framework", - "Conceito" + "Concept" ] }, { "title": "Spread Operator", "description": "O operador spread é um operador que está presente em várias linguagens de programação, que permite copiar e combinar elementos de uma estrutura de dados em outra, facilitando a manipulação eficiente de informações.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Algoritmo", "description": "Um algoritmo é como uma receita de bolo para o computador. É um conjunto de passos organizados que ajudam a resolver um problema, como fazer contas ou analisar informações.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Git", "description": "Git é um sistema de controle de versão distribuído amplamente utilizado para rastrear as alterações em arquivos e coordenar o trabalho em projetos de desenvolvimento de software.", "tags": [ - "Conceito", - "Versionamento", - "Ferramenta" + "Concept", + "Versioning", + "Tool" ] }, { "title": "GitHub", "description": "O GitHub é uma plataforma de hospedagem de código-fonte baseada na web que oferece uma variedade de serviços relacionados ao controle de versão e colaboração no desenvolvimento de software (é usado em conjunto com o Git). Ele é amplamente utilizado por pessoas desenvolvedoras de todo o mundo para armazenar, colaborar, gerenciar e controlar o código-fonte de projetos de software.", "tags": [ - "Conceito", - "Versionamento", - "Ferramenta" + "Concept", + "Versioning", + "Tool" ] }, { @@ -241,21 +241,21 @@ "code": "const pessoa = nome?.cidade?.endereco; " }, "tags": [ - "Conceito" + "Concept" ] }, { "title": "Linguagem Baixo Nível", "description": "Linguagem de programação que possui pouca ou nenhuma abstração do computador. É uma linguagem de programação que está mais próxima da linguagem de máquina.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Endereço de Memória", "description": "É um número que identifica unicamente uma posição de memória no computador. Tudo que é declarado em uma linguagem de programação é armazenado na memória do computador, e para acessar esses dados é necessário saber o endereço de memória onde eles estão armazenados.", "tags": [ - "Conceito" + "Concept" ] }, { @@ -265,42 +265,42 @@ "code": "int *ponteiro; // ponteiro para um inteiro em linguagem C/C++" }, "tags": [ - "Conceito" + "Concept" ] }, { "title": "C", "description": "C é uma linguagem de programação compilada de propósito geral, estruturada, imperativa, procedural, padronizada pela ISO, criada em 1972, por Dennis Ritchie, no AT&T Bell Labs, para desenvolver o sistema operacional Unix (que foi originalmente escrito em Assembly).", "tags": [ - "Conceito" + "Concept" ] }, { "title": "C++", "description": "C++ é uma linguagem de programação compilada multi-paradigma (seu suporte inclui linguagem imperativa, orientada a objetos e genérica) e de uso geral. Desde os anos 1990 é uma das linguagens comerciais mais populares, sendo bastante usada também na academia por seu grande desempenho e base de utilizadores.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Bug", "description": "O termo Bug é comumente usado para informar que há algum problema no programa ou no ambiente. Pode ser um comportamento incorreto ou inesperado, geralmente causados por lógica incorreta no código, causando falhas durante a execução de um software.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Compilador", "description": "Um compilador é como um tradutor de idiomas para computadores. Ele pega o código escrito por pessoas programadoras em uma forma que é fácil para elas entenderem (chamado de código de alto nível) e o transforma em um tipo de linguagem que o computador consegue entender e seguir (isso é chamado de código de baixo nível). Ele faz isso passo a passo, como se estivesse quebrando o processo em partes menores.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "React Native", "description": "É um framework do Javascript baseado no React para desenvolvimento de aplicativos móveis multiplataforma.", "tags": [ - "Conceito", + "Concept", "Front-end" ] }, @@ -308,7 +308,7 @@ "title": "Mobile First", "description": "Esse conceito determina que ao criarmos um site, devemos primeiro atender as necessidades dos dispositivos móveis.", "tags": [ - "Conceito", + "Concept", "Front-end" ] }, @@ -316,7 +316,7 @@ "title": "SQL", "description": "A Linguagem de Consulta Estruturada (SQL) é uma linguagem de programação usada para gerenciar dados em bancos de dados relacionais. É como uma linguagem que nos permite falar com os bancos de dados para fazer coisas como buscar, adicionar, atualizar e deletar informações.", "tags": [ - "Conceito", + "Concept", "Back-end" ] }, @@ -331,14 +331,14 @@ "title": "Cache", "description": "O cache é uma técnica de armazenamento temporário de dados frequentemente usados para melhorar o desempenho e a velocidade de acesso a esses dados em sistemas computacionais.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "React", "description": "React é uma biblioteca JavaScript de código aberto utilizada para criar interfaces de usuário interativas e dinâmicas em aplicações web e em outros ambientes, como mobile, TV, realidade virtual, entre outros. Ele se destaca por seu modelo de programação baseado em componentes e pela eficiência na atualização da interface do usuário, tornando-o uma escolha popular no desenvolvimento front-end.", "tags": [ - "Conceito", + "Concept", "Front-end" ] }, @@ -346,14 +346,14 @@ "title": "Componente", "description": "Um componente é uma unidade fundamental e reutilizável de construção de interfaces de usuário. Ele encapsula a lógica e a apresentação relacionadas a uma parte específica da interface. Componentes podem ser comparados a blocos de construção que, quando combinados, formam interfaces complexas. Eles promovem a organização e a manutenibilidade do código, uma vez que podem ser desenvolvidos e testados de forma independente. Os componentes podem aceitar propriedades (props) como entrada e renderizar informações com base nesses dados, permitindo uma personalização flexível.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Propriedade", "description": "Propriedades, frequentemente abreviadas como 'props', são mecanismos que permitem passar dados de um componente pai para um componente filho. Elas são usadas para personalizar o comportamento e a aparência de um componente. Por exemplo, ao criar um botão, você pode passar propriedades como a cor de fundo, o texto exibido e o tamanho do texto como props. As props são cruciais para tornar os componentes reutilizáveis e configuráveis, permitindo que eles se adaptem a diferentes contextos de uso.", "tags": [ - "Conceito" + "Concept" ] }, { @@ -381,14 +381,14 @@ "title": "Ambiente", "description": "Costumamos chamar de ambiente o lugar ou os servidores onde o que foi desenvolvido fica disponível para testes, validações, pessoas usuárias finais utilizarem ou demais necessidades. Esse servidor seria como um computador. Pode ser um computador físico ou disponível na nuvem. Existem os ambientes local e dev (onde o desenvolvimento está acontecendo), homolog (ou ainda hom, homol, homologação - onde os testes costumam ser feitos)e produção (onde está disponível o sistema final, desenvolvido e testado, para pessoas usuárias).", "tags": [ - "Conceito" + "Concept" ] }, { "title": "API", "description": "API é uma sigla que, em inglês, significa: Application Programming Interface. Traduzindo para português, seria uma interface programada para aplicações. É uma estrutura de código que atende a alguns requisitos, seguindo normas e padrões de desenvolvimento, facilitando a organização de sistemas grandes. Disponibiliza funcionalidades e informações para aplicativos e sites. Por exemplo: API dos Correios que disponibiliza consulta de CEP e endereço de maneira simplificada.", "tags": [ - "Conceito", + "Concept", "Back-end" ] }, @@ -396,21 +396,21 @@ "title": "Code Review", "description": "Code review significa revisão de código. Trata-se de uma boa prática muito indicada para o processo de desenvolvimento de sistemas, pelo qual as pessoas desenvolvedoras do time ajudam umas as outras. Normalmente, após o término da etapa de desenvolvimento de cada tarefa, antes do código ser disponibilizado para testes, o time avalia o que foi feito e dá sugestões do que pode ser melhorado, quando necessário. Isso traz diversos benefícios. Alguns deles são: melhorar a parte técnica do time, melhoria do desenvolvimento, qualidade do código, integração do time, todas as pessoas conhecem o que está sendo desenvolvido, entre outros.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Commit", "description": "Quando trabalhamos com versionamento de código (o que é altamente recomendado), a palavra commit é bastante comum entre as pessoas desenvolvedoras. Mas essa palavra também é utilizada por quem atua em banco de dados. Quando se tem um conjunto de alterações feitas em um código, a pessoa faz o comando commit que salva o que foi feito dentro do projeto. Existe também o commit semântico, que significa que esse conjunto de alterações deve ter um significado para o projeto. O commit também serve para finalizar uma transação dentro de um sistema de gerenciamento de banco de dados, tornando visíveis as alterações. Essa transação normalmente vai começar com o comando begin e finalizar com o comando commit.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Deploy", "description": "O deploy é um processo complexo. Mas significa que foi instalado um pacote do que foi desenvolvido nos ambientes. É gerada uma versão para que seja disponibilizada. Esse processo também pode ser chamado de implantação dependendo do contexto. Para que essa implantação aconteça, pode ser um processo automatizado com ferramentas, ou feito manualmente, dependendo da estrutura. Acabamos aportuguesando a palavra deploy, tornando-a uma ação. Exemplo: estou deployando a nova versão do nosso sistema.", "tags": [ - "Conceito" + "Concept" ] }, { @@ -420,28 +420,28 @@ "code": "{name: 'Morganna', cpf: '000.000.000-00', email: 'email@email.com'}" }, "tags": [ - "Conceito" + "Concept" ] }, { "title": "Pair Programming", "description": "Pair programming significa programação em par. É uma técnica em que duas pessoas (ou mais) trabalham juntas em uma tarefa. Isso ajuda na troca de conhecimento e experiência entre pessoas desenvolvedoras. Duas cabeças pensam melhor que uma, certo? Algumas formas de aplicar pair programming: uma pessoa está mexendo no código enquanto recebe orientações da outra e elas vão trocando de posição; uma pessoa desenvolve os testes e a outra desenvolve a funcionalidade. Não encare pair programming como desperdício de tempo. Uma boa integração e senso de apoio no time pode fazer toda a diferença na qualidade do que for entregue.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Pull Request", "description": "Trata-se de uma requisição de alteração dentro de um projeto. Essa requisição pode ser feita para corrigir um problema, adicionar uma nova funcionalidade, sugerir alterações, entre outros motivos. Essa requisição de alteração é feita para que haja uma avaliação do que está sendo alterado dentro do projeto, entendendo de faz sentido para o contexto daquele momento. E essa requisição pode ficar pendente até que pessoas responsáveis ou que tenham a permissão, aprovem. Outras regras podem ser adicionadas nessas requisições, como build da aplicação, rodar testes com sucesso e o que mais fizer sentido para o projeto em questão.", "tags": [ - "Conceito" + "Concept" ] }, { "title": "Ruby", "description": "Ruby é uma linguagem de programação interpretada multiparadigma, de tipagem dinâmica e forte, com gerenciamento de memória automático. Ruby suporta programação funcional, orientada a objetos, imperativa e reflexiva. É como uma caixa de ferramentas digital que pode criar, organizar e fazer interagir diferentes partes em um programa de computador, sendo capaz de lidar com diversos estilos de programação.", "tags": [ - "Conceito", + "Concept", "Back-end" ] }, @@ -449,7 +449,7 @@ "title": "ORM", "description": "O mapeamento objeto-relacional (ORM) é como traduzimos tabelas de um banco de dados para o código, transformando-as em classes e objetos.", "tags": [ - "Conceito", + "Concept", "Back-end" ] } diff --git a/assets/data/tags.json b/assets/data/tags.json new file mode 100644 index 00000000..57ce6c29 --- /dev/null +++ b/assets/data/tags.json @@ -0,0 +1,52 @@ +{ + "tags": { + "All": { + "en": "All", + "pt-BR": "Todos" + }, + "Favorites": { + "en": "Favorites", + "pt-BR": "Favoritos" + }, + "Back-end": { + "en": "Back-end", + "pt-BR": "Back-end" + }, + "Library": { + "en": "Library", + "pt-BR": "Biblioteca" + }, + "Concept": { + "en": "Concept", + "pt-BR": "Conceito" + }, + "Design": { + "en": "Design", + "pt-BR": "Design" + }, + "Tool": { + "en": "Tool", + "pt-BR": "Ferramenta" + }, + "Framework": { + "en": "Framework", + "pt-BR": "Framework" + }, + "Front-end": { + "en": "Front-end", + "pt-BR": "Front-end" + }, + "Mobile": { + "en": "Mobile", + "pt-BR": "Mobile" + }, + "Paradigm": { + "en": "Paradigm", + "pt-BR": "Paradigma" + }, + "Versioning": { + "en": "Versioning", + "pt-BR": "Versionamento" + } + } +} \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 4386891d..2f4e6fb8 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,8 +1,11 @@ import "./dark_mode.js"; +import { getCards, getTags } from "./translate.js"; const searchInput = document.querySelector("#search-input"); const cardsSection = document.querySelector("#cards"); const filterSelect = document.querySelector("#tags-filter"); +const languageSelect = document.querySelector("#language-select"); + let listOfCardsFiltered = []; let favoriteCards = []; const starIcon = "https://img.icons8.com/ios/50/star--v1.png"; @@ -10,38 +13,26 @@ const starIconFilled = "https://img.icons8.com/ios-glyphs/30/ffe100/star--v1.png"; function insertTagsIntoSelect(tags) { - tags.sort(); + while (filterSelect.firstChild) { + filterSelect.removeChild(filterSelect.firstChild); + } + + tags.sort(tag => tag.text); for (const tag of tags) { const newOption = document.createElement("option"); - newOption.value = tag; - newOption.text = tag; + newOption.value = tag.value; + newOption.text = tag.text; filterSelect.appendChild(newOption); } } -function getTagsFromCards(data) { - const tags = ["Favoritos"]; - data.map((objeto) => { - if (objeto.tags) { - objeto.tags.map((tag) => { - if (!tags.includes(tag)) { - tags.push(tag); - } - }); - } else { - objeto.tags = []; - } - }); - insertTagsIntoSelect(tags); -} - function filterCards() { listOfCardsFiltered = []; const listOfCards = document.querySelectorAll(".card"); listOfCards.forEach((element) => { if ( element.getAttribute("tags").includes(filterSelect.value) || - filterSelect.value == "Todos" + filterSelect.value == "All" ) { element.style.display = ""; listOfCardsFiltered.push(element); @@ -97,7 +88,7 @@ function insertCardsIntoHtml(data) { const formatedTitle = formatCardTitle(card.title); cards += `

${card.title}

@@ -106,7 +97,7 @@ function insertCardsIntoHtml(data) { unique-title="${formatedTitle}" id="fav_${formatedTitle}" src="${ - card.tags.includes("Favoritos") + card.tags.includes("Favorites") ? starIconFilled : starIcon }" @@ -140,10 +131,10 @@ function addFavoriteTagToCard(cardId) { const card = document.querySelector(`#${cardId}`); const tags = card.getAttribute("tags").split(","); - if (tags.includes("Favoritos")) { - tags.splice(tags.indexOf("Favoritos"), 1); + if (tags.includes("Favorites")) { + tags.splice(tags.indexOf("Favorites"), 1); } else { - tags.push("Favoritos"); + tags.push("Favorites"); } card.setAttribute("tags", tags); @@ -179,7 +170,7 @@ async function addFavoriteTag(cards) { if (!card.tags) { card.tags = []; } - card.tags.push("Favoritos"); + card.tags.push("Favorites"); } }); return cards; @@ -191,12 +182,13 @@ async function sortCardsByTitle(data) { async function getCardsFromJson() { try { - const res = await fetch("./assets/data/cards_pt-br.json"); - const data = await res.json(); + const language = languageSelect.value || "pt-BR"; + const data = await getCards(language); const sortedCards = await sortCardsByTitle(data); + const tags = await getTags(language); await loadFavoriteCardsId(); await addFavoriteTag(sortedCards); - getTagsFromCards(sortedCards); + insertTagsIntoSelect(tags); insertCardsIntoHtml(sortedCards); } catch (error) { console.error("An error occurred while fetching card data.", error); @@ -205,4 +197,5 @@ async function getCardsFromJson() { searchInput.addEventListener("input", searchCards); filterSelect.addEventListener("change", filterCards); +languageSelect.addEventListener("change", getCardsFromJson); getCardsFromJson(); diff --git a/assets/js/translate.js b/assets/js/translate.js new file mode 100644 index 00000000..0513086f --- /dev/null +++ b/assets/js/translate.js @@ -0,0 +1,25 @@ + +const CARD_PATHS = { + "pt-BR": "./assets/data/cards_pt-br.json", + "en": "./assets/data/cards_en.json", +} + +const TAG_PATH = "./assets/data/tags.json"; + +export const getCards = async(language) => { + const res = await fetch(CARD_PATHS[language] || CARD_PATHS["pt-BR"]); + return await res.json(); +}; + +export const getTags = async (language) => { + const res = await fetch(TAG_PATH); + const data = await res.json(); + const languageSelect = language || "pt-BR"; + const tags = Object.keys(data.tags).map((tag) => ( + { + text: data.tags[tag][languageSelect], + value: tag, + } + )) + return [...tags] +} \ No newline at end of file diff --git a/index.html b/index.html index a5a2c132..ea4f60e5 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,10 @@

técnicos dentro da tecnologia 📖

+
- +