Orange

Green

Crimson

Blue

Purple

Contact PT

Formulário

Me envie uma mensagem para que possamos ter um resumo do projeto. Lembrando que o prazo de entrega é de até 20 dias.

Vamos tomar um café?

Top 10 Visual Studio Code extensions that every programmer must have.\nAs coding becomes increasingly complex and demanding, having the right set of tools can make all the difference in productivity, efficiency, and code quality. From streamlining workflow tasks to enhancing code readability and debugging capabilities, these extensions have been handpicked to address the diverse needs of developers across different programming languages and disciplines. Whether you're a seasoned veteran or just starting your coding journey, these top 10 extensions are guaranteed to elevate your \nVisual Studio Code\n experience and empower you to \nwrite better code faster\n. Keep up as we explore the must-have extensions that will revolutionize the way you \nwork\n in Visual Studio Code and \nboost your productivity\n.\n\n1. Peacock\n\n\nPeacock \nextension is perfect for that project you are working on that requires multiple open tabs in Visual Studio Code. With Peacock, you can assign a distinct color to each tab, making it easy to identify and navigate through your various projects.\n\nOn your visual studio code:\nPress \nctrl + shift + p\n to open the command palette\nChoose \nPeacock: Change to a favorite color\nChoose one of the pre-defined colors and see how it changes your editor.\n\n\n2. Prettier\n\nWould't be easy if you could indent your code just by typing a short code or by saving it. You can do that with \nPrettier\n.\nPrettier is a lifesaver for developers seeking to maintain consistent and clean code formatting effortlessly. Gone are the days of manually adjusting indentation, line breaks, and spacing to conform to coding standards. \nWith Prettier seamlessly integrated into Visual Studio Code, formatting becomes a breeze, allowing developers to focus more on writing code rather than worrying about its presentation.\nAfter you install it. Go to your file and press \nctrl + shift + p\n  or \ncommand + shift + p\n for macOS, search for \nformat\n and then choose Format Document.\nVisual Studio Code must throw an pop up requiring you to configure a default formatter. Click on Configure button.\n\nChoose Prettier option.\n\nIt's also possible to automatize this process and format your code on save. On your Visual Studio Code press \nctrl + ,\n or \ncommand + ,\n for macOS, search for Editor: Format on Save and enable the first option you find.\n\n\n3. Turbo Console Log\n\nThroughout the web development process, it's often crucial to check the contents of variables, and JavaScript's \nconsole.log\n function is our go-to tool for this task. \nBut what if there were a way to automate this process? That's precisely the issue this extension addresses. By simply pressing \nCtrl + Alt + L\n (or \nCommand + Alt + L\n for macOS), it generates a \nconsole.log\n statement for us, complete with the file name and the variable's line number.\n\n\n4. Auto Rename Tag\n\nThis \nextension\n greatly simplifies the process of renaming our tags in Visual Studio Code. Instead of manually retyping both the opening and closing tags, this extension streamlines the task by automatically updating both occurrences simultaneously with just a few keystrokes.\n\n\n5. Git Graph\n\nMany people may not be familiar with Git commands in the terminal. That's where \nGit Graph\n comes in handy. It provides a comprehensive UI that allows users to visually navigate through the versions of their code. \nWith Git Graph, users can easily understand the branching and merging of their Git repository, making version control more accessible and intuitive for all levels of expertise.\n\nThe code above has two branches, master and dev. The most common way to navigate between them is by running the \ngit checkout <branch name>\n command.\nInstead, let's use Git Graph.\n\nIt's all possible to check file changes and revent them.\n\n\n6. Indent Rainbow\n\nThe \nIndent Rainbow\n extension for Visual Studio Code introduces a unique and intuitive way to enhance code readability by visualizing the indentation structure. While traditional code editors rely solely on indentation characters (such as spaces or tabs) to denote code structure, Code Indent Color takes it a step further by assigning distinct colors to each indentation level. \nThis innovative approach provides developers with a visual representation of their code's hierarchy, making it easier to comprehend and navigate complex codebases. By instantly highlighting different levels of indentation with vibrant colors, Code Indent Color allows developers to quickly grasp the code's structure and identify nested blocks, loops, and functions.\nExtension on:\nExtension off:\n\n\n\n\n\n7. Better Comments \n\nComments are essential for maintaining the logic of our code and aiding in its scalability. They serve as valuable annotations that provide insights into the functionality, purpose, and reasoning behind specific code segments.\n\n\nextension\n our comments become way more visually efficient where we have different colors for question, alerts and highlights.\n\n\n8. TabNine\n\nThe \nTabNine\n extension for Visual Studio Code is a powerful tool designed to revolutionize the coding experience by leveraging machine learning technology. Unlike traditional code completion plugins, TabNine goes beyond basic suggestions, providing intelligent and context-aware completions that anticipate the developer's needs.\n\nBy analyzing the code context, TabNine offers highly accurate suggestions, saving valuable time and reducing cognitive load during the coding process. Whether it's completing variable names, suggesting entire lines of code, or offering relevant function calls, TabNine adapts to the developer's coding style and preferences, enhancing productivity and efficiency.\n\n9. CodeSnap\n\nHave you ever needed to take a screenshot of your code? With CodeSnap, developers can quickly capture and annotate sections of their code directly within the editor, creating visually appealing snapshots that convey the essence of their implementation. \nWhether it's highlighting a specific algorithm, showcasing a particular design pattern, or illustrating a complex functionality, CodeSnap simplifies the process of documenting and sharing code snippets with colleagues, clients, or the broader developer community.\n\nOutput:\n\n\n10. Live Server\n\nThe Live Server extension for Visual Studio Code is a game-changer for web developers seeking real-time feedback on their projects. With Live Server, developers can instantly spin up a local development server and view their web pages live in the browser. Gone are the days of manually refreshing the browser to see changes or worrying about setting up complex server configurations. \nLive Server handles all the heavy lifting, allowing developers to focus on coding without interruption. Whether it's HTML, CSS, JavaScript, or any other web technology, Live Server provides a seamless development experience, enabling developers to see their changes immediately reflected in the browser as they type.\n\n\nConclusion\nIn summary, these top 10 Visual Studio Code extensions revolutionize coding by simplifying tasks like formatting, version control, and code visualization. From Prettier's effortless code formatting to Git Graph's intuitive version control interface, each extension addresses common developer pain points. Moreover, with enhancements like Peacock's color-coded tabs and Indent Rainbow's visual indentation, coding becomes both efficient and visually appealing. By incorporating these extensions into your workflow, you can boost productivity and streamline your coding experience. Explore them today and witness the transformation in your coding journey.\n

Top 10 Visual Studio Code extensions that every programmer must have

How to Integrate Django with React: Building a Planet Catalog App\nRepository 📖: \nLink\n\nIn this tutorial, we will walk through the process of integrating \nDjango\n, a high-level \nPython \nweb framework, with \nReact\n, a popular \nJavaScript \nlibrary for building user interfaces. Our goal is to create a simple \nDjango REST API\n that serves planet names and then build a React application to display these planets on the screen. By following this guide, you'll learn how to leverage the power of Django for \nbackend development\n and React for \nfrontend development\n to create a seamless \nfull-stack application\n.\nIn our Visual Studio Code, let's create a folder called Solar System App and develop our code inside of it.\n\nIn our project, we'll divide it into two parts. In the first one, we'll handle the Django backend, while in the second one, we'll create our frontend with ReactJS. For this, we should create a folder in our directory for each of the parts.\n\n\nPart 1: Creating a Django REST API\n1.1. Setting up a Django project:\nFirst of all, you need to make sure that you have Python installed on your machine. If you don't, follow this \ntutorial \nand install the language on your computer.\nWe should open our integrated terminal where we'll input our commands. We can do this by typing the shortcut \nctrl + shift + '\n  or by going to the top menu bar of our VS Code and selecting \nterminal\n > \nNew Terminal\n:\nEnter the backend directory by typing \ncd backend\n in the terminal, and then run the following command to install the Django library:\npip install django\nWe will also need the following libraries:\npip install djangorestframework django-cors-headers\nTo create the boilerplate of our Django application, we should run the following command:\ndjango-admin startproject setup .\nThis way, we'll be ready to test our application on our localhost by running the following code:\nWindows:\npython manage.py runserver\nMac or Linux:\npython3 manage.py runserver\nAnd voilà, by accessing the \nlink\n, we'll have our application up and running.\n\n\n\n1.2. Defining a Planet app and model:\nTime to create our application for our planets along with its model. \nIn Django, applications are like modular building blocks, each with a specific function within the project. They promote code reusability, facilitate maintenance, and enable project scalability. By dividing the application into independent and interconnected parts, applications simplify development and promote collaboration among developers.\nRun the following command:\npython manage.py startapp planets\nSo far, this is how the structure of our project should look like:\n\nWe should also create a model for our planets. In Django, \nmodels\n are like forms for our application. They tell us what type of information our application will store and how this information is organized.\nIt's like a table where we jot down all the important things about our data, like name, age, etc. This helps us organize and access our information easily and efficiently.\nGo to \nbackend/planets/models.py \nand paste the following code on the file\n:\nfrom django.db import models

class Planets(models.Model):
    name = models.CharField(max_length=255, default=False)
\nWe should add our newly created app to the list of applications in our \nsetup\n. We can do this by going to \nsetup/settings.py\n and adding the name of our app to the array called \nINSTALLED_APPS\n.\nWe also need to add the libraries we downloaded to our project to our file.\nYour file should look like this.\nINSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'planets',
    'rest_framework',
    'corsheaders',
]\n\nWe must also add three extra rows on settings.py\nMIDDLEWARE = [
    # ...
    # 👇 Add this line here
    'corsheaders.middleware.CorsMiddleware',
    # Add above line just before this line 👇
    'django.middleware.common.CommonMiddleware',
]

# 👇 Add this line here
CORS_ORIGIN_ALLOW_ALL = True\n\n1.3. Populating the database: \nNow that we have our application and model created, we can populate our database with our planets. But before that, we need to migrate our newly created model.\nIn Django, \nmigrations\n are like instructions for the database. When we change the structure of our models (for example, by adding a new field), we need to inform the database about these changes. Migrations are these instructions that make the necessary changes in the database to reflect the changes in our models.\nIt's like a to-do list to ensure that the database is always up-to-date with our application. We can do this by running the following commands:\nWindows:\npython manage.py makemigrations\npython manage.py migrate\n\nMac or Linux:\npython3 manage.py makemigrations\npython3 manage.py migrate\nThough there are more orthodox ways to add items to the database, let's choose the best one: through the \nDjango admin dashboard\n.\nIn Django, the admin dashboard is like a control room for your website. It's an area where you can manage all the data of your application easily and quickly, without needing to directly touch the database or the code.\nIt's like a control panel that allows you to add, edit, or delete data from your site, such as users, blog posts, or any other information your application manages. It's a powerful tool for site administrators, making the management and maintenance of the application easier.\nWe should create a user to access the dashboard. We can do this by running the following command:\npython manage.py createsuperuser\nAfter filling in the required information through the terminal, we can log into our panel through the \nlink\n:\n\nNotice that after logging in with the information we just entered, we can't find our \nPlanet \nmodel. To fix this, we should paste the following snippet of code into\n backend/planets/admin.py:\nfrom django.contrib import admin
from planets.models import Planet

@admin.register(Planet)
class PlanetAdmin(admin.ModelAdmin):
    
    list_display = [
        "name"
    ]  
    
    search_fields = [
        "name"
    ]\n\nAfter this, we should be able to add our planets to the database in a much simpler and faster way!\n\n\n1.4. Creating a REST API:\nBefore we create our frontend, it's necessary to prepare our API routes to be consumed. We should perform the following tasks for this.\nCreate a serializer.\nDefine a view to our planets.\nDefine a api route.\n1.4.1. Planet Serializer Class\nIn Django, a \nserializer class\n is responsible for converting complex objects, such as database models or other types of data, into simpler and more accessible formats, such as JSON. It allows data to be easily transmitted over the network or stored in a structured way.\nIt's like a translator that converts information into a language that computers and other systems can easily understand and manipulate. Serializer classes are useful in RESTful APIs, where we need to send or receive data efficiently and in a standardized manner.\nWithin the planets app directory, create a file named \nserializers.py\n and paste the following code into it:\nfrom django.contrib.auth.models import User
from rest_framework import serializers
from .models import Planet


class PlanetSerializer(serializers.ModelSerializer):
    class Meta:
        model = Planet
        fields = ["id", "name"]\n\n1.4.2. Planet View Class\nIn Django, a \nview class\n is like a set of instructions that determines how a web page will be displayed. It defines the logic behind rendering a page, handling user requests, and returning an appropriate response.\nIt's like the brain behind the interface of your web application, deciding what to show to the user based on the received requests. View classes are often used to control user interaction with the application, processing data, performing operations, and sending dynamic responses.\nInside \nbackend/planets/views.py \npaste the following code:\nfrom django.shortcuts import render
from rest_framework import generics

from planets.models import Planet
from planets.serializers import PlanetSerializer

class PlanetsListCreate(generics.ListCreateAPIView):
    serializer_class = PlanetSerializer
    queryset = Planet.objects.all()
\nNote that we're importing our serializer and using it to convert the rows coming from the database into a JSON object.\n\n1.4.3. Api URL\nFinally, it's time to create the URL for the API that will be consumed by the frontend. Go to \nbackend/setup/urls.py \nand add the following snippet to your \nurlspatterns\n:\npath('api/planets/', views.PlanetsListCreate.as_view(), name='planets'),\nYour final code should look like this:\nfrom django.contrib import admin
from django.urls import path
from planets import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/planets/', views.PlanetsListCreate.as_view(), name='planets'),
]
\n\n1.5. Testing the API:\nDjango REST Framework (DRF) is a powerful library that extends Django's capabilities to facilitate the creation of RESTful APIs. It provides additional tools and resources for developing APIs quickly and consistently, including serializers, authentication, permissions, and class-based views. DRF simplifies the implementation of CRUD operations (Create, Read, Update, Delete) and provides a flexible framework for developing robust and scalable APIs in Django.\nIt's like a complete toolbox for building modern and efficient web APIs with Django.\nBy accessing the following \nlink\n, we can see our added planets.\n\n\nPart 2: Building a React + Vite App\nLet's move to our frontend directory to create our ReactJS app. We first need to run the following commands on the backend terminal.\ncd ../\ncd frontend\n\n2.1. Setting up a React project with Vite:\nLet's move to our frontend directory to create our ReactJS app. We first need to run the following commands on the backend terminal.\nFor creating our app, let's choose a different approach from the most common, let's use vite. Vite.js is a build tool that is designed to be fast and lightweight. It uses native ES modules and a native development server to provide a fast and seamless development experience. Vite.js also supports code splitting and hot reloading.\nLet's run the command:\nnpm create vite@latest .\n\nChoose React as framework\n\nLet's also choose Javascript instead of TypeScript so we can keep things simple.\nFinally we must run these commands:\nnpm install\nnpm run dev\nAnd open our browser on this \nlink\n and then we have our running React app.\n\n\n2.2. Creating our table component\nWithin the \nfrontend/src\n folder let's create our table component. ReactJS apps don't have a component folder by default so don't forget to create it.\nYour frontend structure will look like this:\n\nBefore actually creating our component, let's add the tailwind CDN to our frontend/index.html file, thus we will have an highly customized app without really getting into CSS on this article.\nTailwind CDN:\n<script src="https://cdn.tailwindcss.com"></script>\nYour index.html will look like this:\n<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>

    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
\nBack to our table.jsx file, paste this snippet of code into it:\nimport { useState } from "react"

const Table = () => {
    const [planets, setPlanets] = useState([])

    return (
        <div className="flex flex-col w-[400px] absolute top-1/2 left-1/2 transform translate-x-[-50%] translate-y-[-50%]">
            <div className="overflow-x-auto sm:mx-0.5 lg:mx-0.5">
                <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8">
                    <div className="overflow-hidden">
                        <table className="min-w-full border">
                            <thead className="bg-white border-b">
                                <tr>
                                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                                        #
                                    </th>
                                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-right">
                                        Planet
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    planets.map((item)=> (
                                    <tr key={item.id} className="bg-gray-100 border-b [&:nth-child(even)]:bg-white">
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{item.id}</td>
                                        <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap text-right">
                                            {item.name}🪐
                                        </td>
                                    </tr>
                                    ))
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Table\nSo far, your app must look like this:\n\n\nNotice the table is empty since we are not fetching any data yet.\n\n2.3. Fetching planets from Django\nWith our backend Django app running on port 8000. (don't forget to run \npython manage.py runserver\n on backend terminal), we are good to get data from our database through an api function we will build now.\nIn order to request data, we must install a lib called \naxios \nwhich will do the hard work for us. Run the following command on frontend terminal:\nnpm install axios\nOur api function will be placed on the utils folder within \nfrontend/src, \nafter creating this directory, paste the following code on the \napi.js\n file:\nimport axios from 'axios';

export async function api() {
    let url = `http://127.0.0.1:8000/api/planets/`;
    const res = await axios.get(url);
    return res.data;
}\n\nWe will run this function on our table.jsx inside of a useEffect and store its value on our useState. Don't forget to import these hooks.\nimport { useEffect, useState } from "react"
import { api } from "../utils/api"


const Table = () => {
    ...
    useEffect(()=>{
        const getPlanets = async () => {
            let results = await api() 
            setPlanets(results)
        }
        getPlanets()
    }, [])
    ...\n\nBy saving our file, the planets will be rendered as a magic trick on the screen.\n\n\nConclusion:\nBy following this step-by-step guide, you've learned how to integrate Django with React to build a full-stack web application. You've created a Django REST API to serve planet data and built a React frontend to display this data to users. This tutorial demonstrates the power of combining Django's robust backend capabilities with React's flexible frontend framework. Experiment with additional features and functionalities to further enhance your application!

How to integrate Django with ReactJS

Artificial intelligence (AI) is evolving rapidly and we are increasingly witnessing the emergence of new and powerful artificial intelligences in various areas. These emerging AIs are driving significant advances across industries, from healthcare to industrial automation. In this post, we will explore some of the most promising artificial intelligence emerging today, highlighting their capabilities and potential applications.\n\n1. GPT-4: A Linguistic Mind\nGPT-4 (Generative Pre-trained Transformer 4) stands as the latest advancement in artificial intelligence brought forth by OpenAI. Much like its predecessor, GPT-3, it boasts the remarkable capability to generate high-quality text, ranging from answers to inquiries to composing entire narratives. With an extensive array of parameters trained on diverse datasets, GPT-4 showcases immense potential in enhancing chatbots, streamlining research processes, and even aiding in content creation. As AI continues to evolve, GPT-4 emerges as a formidable tool poised to revolutionize various facets of human interaction and creativity.\n\n\n\n2. AlphaFold: Unraveling the Structure of Proteins\nDeveloped by DeepMind, AlphaFold AI is revolutionizing bioinformatics by accurately predicting the three-dimensional structure of proteins. This is essential for understanding diseases, developing medicines and designing enzymes for industrial applications. AlphaFold could significantly accelerate research in structural biology and open up new possibilities in the field of personalized medicine.\n\n\n\n3. Waymo: Autonomous Driving\nWaymo, an Alphabet company, has excelled in developing autonomous driving technologies. Its advanced AI allows vehicles to identify, understand and react to the environment around them, making driving safer and more efficient. Waymo has been testing autonomous vehicles on public roads and is shaping the future of mobility.\n\n\n\n4. OpenAI Codex: Natural Language Programming\nOpenAI Codex is an AI that can interpret and generate code in multiple programming languages. Based on GPT-3, Codex has the potential to help programmers and developers by offering code suggestions, creating simple programs, and even helping with debugging errors. This AI has the power to make programming more accessible and efficient.\n\n\n\n5. IBM Watson: Cognitive Intelligence\nIBM Watson is one of the best-known artificial intelligences and has been applied in a variety of areas, from healthcare to financial services. With its ability to process large volumes of data, understand natural language, and provide actionable insights, Watson is powering data-driven decision-making and the automation of complex tasks.\n\n\nAs artificial intelligence continues to develop, powerful new AI is emerging, bringing with it a range of applications and benefits for diverse industries. GPT-3, AlphaFold, Waymo, OpenAI Codex, and IBM Watson are just a few of the impressive AIs that are shaping the future and paving the way for a technologically advanced world.\n\n\n\n