First lets understand a session. A session is started when a user logs in to your application and ends when a user logs out of an application. How is this used as an authentication schema? Well every user has a Session ID that is stored into the database by the server. Additionally the Session ID is stored in a cookie on the user browser in order to compare the user's session id from the browser to the database. If they match then the user's session is validated and every action forward that the user does checks to validate the Session ID. 

TBA or usually just called JWT authentication is when the user's state is stored on the client and this has been the most preferred mode of authentication for a REST backend architecture. The way this works is that the user's data is encrypted into a JWT (JSON Web Token) whihc consists of a Header, Payload, and Signature. A JWT is validated by it's Signature so the validation is done on the backend but there's no need to compare or query for any data from the database to validate the JWT. Additionally the way the workflow works is that the client sends the login details to the server, and then the server generates the JWT. The server then sends the JWT to the Client to save on local storage and from there the client's requests are authenticated by the JWT token aslong as it's sent as a header to the request.  

JWT and how to implement it in your application

Understanding JWT: Session VS Token Authentication

Protocol Buffers is a way to serialize structured data and is useful for transmitting data to applications over the wire or storing it on machines.  All Protobuf is, is a human readable message format that is a file with the extension ".proto".

Protocol Buffers

Welcome to my mobile development arch of my career. I am now trying to interview for possible mobile positions and have to start doing my research in everything in the mobile environment. Enjoy my research I try to dumb down as much as possible for myself

React Native is very useful because of the reusability of pre-developed components. Additionally the ecosystem has a large community of developers so any common encountered problems are usually resolved by the community in some forum or blog. The ecosystem also has a vast amount of third party plugins and a lot of handy solutions and libraries for the developer to use.

I had no idea but React Native was actually a hackathon effort in 2013 pushed by the mobile developer community to have the power and agility of React in a mobile environment. React Native is very performant and modular so it is easier to understand by testers or other developers.

Hybrid technologies in mobile development revolves around building an app with one single framework and can be cross platform for Android / iOS / Windows / etc. The philosophy is to code once and build everywhere. The facts of hybrid applications is that they are easier to create and can be utilized to expand a business's reach to an audience on a different platform. Unfortunately since Native Apps are targeted for one single platform they are usually more performant because of the optimization and smaller code base that us tailor made for one platform.

Hybrid apps can work on multiple platforms. Under the hood, a hybrid app is actually a web page displayed in a web view, so it is usually written in JavaScript and HTML. Popular hybrid frameworks are Ionic, Cordova, and PhoneGap.

Some hybrid app frameworks can include  React Native , Flutter , Apache Cordova , Ionic , and Xamarin. 

This stage has to do with a lot of research with the right tech stack and right tools and frameworks

This is where you will be writing the Hybrid App Code and UX/UI preperation, architectural development, and fuctionality development.

The Ionic Framework is an open source UI toolkit for building performant high-quality mobile and desktop apps using web tech like (HTML, CSS, and Javascript). Also has some integration with Angular, Rect, and Vue.

The concept of PWA are basically web applications but look and fee llike other native mobile apps. PWA enabled websites can offer functionalities such as working offline, push notifications, and device hardware access.

As a user navigates through, out of, and back to your app, the activities instances in your app transition through different states in their lifecycle. 

Explain Briefly all Android Application Components

App Components are the essential building blocks of an Andorid App. 

An Activity is the entry point for interacting with the user. It represents a single screen with a user interface

A service is a general-purpose entry point for keeping an app running in the background for all kinds of reasons. It is a component that runs in the backgrounf to perform long-running operations or to perform work for remote proesses. 

a broadcast reciever is a component that enables the system to deliver events to the app outside of a regular user flow, allowing the app to respond to system-wide broadcast announcements. 

A content provider manages a shared set of app data that you can store in the file system, in a SQLite Database.  On the web, or on any other persistent storage location that your app can access. 

First step involves compiling the resources folder using the aapt tool which is androids packaging tool. This is compiled to a class file called R.java.

The second step is the javac compiler compiling the source code in to a .class file and then later converted to bytecode.

The final step is involving the android apkbuilder whihc takes all the input and builds the apk.

These are the ways to persist data in a mobile application. The first way is Internal Storage, External Storage, and have a Database. The internal way is to store data inside the mobile device's file system. The external storage would be inside of the mobile device's file system too (im confused too) but the data can be viewed by the user. An external Database is just having all of the data be stored outside of the mobile device and allowed.

If we are talking only Android the most used is a native data storage solution called SharedPreferences. This is intended to store small amounts of data, like user preferences or settings. The data are stored in an XML file in the device. 

There is a similar solution for iOS called UserDefaults (previously NSUserDefaults). The data are stored in a .plist file.  

What are the advantages of Native Apps over Hybrid Apps?

Native Apps work efficiently since they are built for that specific platform. Native Apps are very fast and the best in the app performance. Additionally they integrate with mobile hardware (GPS, Camera, Contacts) and add specific functionalities to the UI. Some of the native mobile app work even without the Internet connection.  

An intent is a message that is passed between components such as (Activities, Services, Broadcast, Recievers, and Content Providers). You can invoke components via Intents and have communications between components.

Intents are asyonchronous whil API calls are asynchronous. API calls are compile time binding while intent based calls are run time binding.

What are some possible security issues with Ionic Apps?

There are security issues in hybrid applications such as your app being reverse engineered.

An architecture software pattern that overcomes all drawbacks of MVP (Model View Presenter) and MVC (Model View Controller) design patterns. The first philosophy of this architecture is to seperate the data presentatino logic from the business logic.

 This layer is responsible for the abstraction of the data sources. Model and ViewModel work together to get and save the data.

 The purpose of this layer is to inform the ViewModel about the user’s action. This layer observes the ViewModel and does not contain any kind of application logic.

 It exposes those data streams which are relevant to the View. Moreover, it serves as a link between the Model and the View.

These two terms are involved in making the app friendlier for more audiences by creating the app more available in different languages than the default. 

Internationalization (“i18n”) is the process of adapting app code to other languages. For example, an app might need to display data in a different format, prices, or numbers with the correct decimal or thousands separators, or even handling whether text is written right-to-left or left-to-right. It also requires taking into account the user’s timezone.

Localization (“l10n”), on the other hand, is the process of preparing the content of the app to be available in different languages. This includes translating most of the app’s resources, like texts, images, and sounds. Resources for different languages are usually kept in different files or directories, and the OS chooses the right one based on user settings.

There are lot of tools that provide crash and usage reports from mobile apps.

One of the most popular (and free) is Firebase Crashlytics, which supports both iOS and Android. It provides a lot of useful information about app crashes like the full-stack trace, operating system version, device manufacturer, and user language.

Some of the other tools are Sentry (useful when you write an app in JavaScript, e.g., for React Native), Appsee, Raygun, and Instabug. They differ by provided crash and usage details and prices.

The permission system is prevalent in mobile platforms as a way of securing the user's data such as GPS location, Contacts, and other User Data.

Network, so create an offline mode for the application. Because of user's networks being unreliant when they are on the move.

Fragmentation means having your application be supported in many platforms and devices. Test-Device Farms are nice to test this weather its a physcial farm or virtual farm.

This is my crash course of everything I can find about mobile development! Enjoy

Mobile Development Cram Post

Load Balancers is software that efficently distributes incoming network traffic across a group of backend servers. Nowadays large commercial websites are scaling horizontally meaning they increase the quantity of servers rather than increase the power of their servers to handle their web traffic. A load balancer acts as a guy in the road telling you which fork on the road to take but the roads all lead to the same place just less traffic.    

The benefits of a Load Balancer is that it distributes client request to network efficiently across multiple servers. The second benefit is that ensures high availibility. Say one server is down, the Load Balancer will gracefully handle the offline server and only send your request to available servers. Also it is very flexible on how you want your traffic to be distributed. Many algorithms are available to decide which server should get the next request. For example Round Robin is one popular way of deciding which server is getting the next request. for more about load balancers you can read here : 

https://www.nginx.com/resources/glossary/load-balancing/

If you are not using docker and want to run it locally we can first clone the repo from GitHub. **Make sure to have Go and Git installed**

$ git clone git@github.com:FabioSebs/LoadBalancer.git

if you are not using ssh you can simply do 

$ git clone https://github.com/FabioSebs/LoadBalancer 

Once you have the repo installed you can make a .bat file inside the LoadBalancer directory. 

Now this is what you should write inside of install.bat

go mod init github.com/FabioSebs/LoadBalancer

Once the contents are inside your .bat file you can simply run it by typing this into the terminal

Now all the dependencies and packages should be installed correctly so now you can run this project from the main.go file. However since we are not using docker-compose we will need two terminals to run the project and also modify the main.go file a bit.

Lets run the servers on main.go by having our main.go match the code below and then running "go run main.go" in the terminal

           "github.com/FabioSebs/LoadBalancer/server"

           "github.com/FabioSebs/LoadBalancer/loadbalancer"

            loadbalancer.MakeLoadBalancer(5)

There we go we have our project running locally.

Start off by cloning our repo from GitHub and then instead of making a .bat file we will make a makefile inside of the LoadBalancer directory.

Next up to install the dependencies this should be the contents of the makefile.

           go mod init github.com/FabioSebs/LoadBalancer

Next to install the dependencies you can write this in the terminal

Once the dependencies are installed you can follow the same steps in main as windows to run the project locally.

In order to mimic a backend that is running on many servers I created a concurrent golang program that runs a given number of servers in seperate threads so theyre running in parallel. I have put this program on dockerhub, here is the repository.

Now we can run it but since this program is using multiple ports and depends on our load balancer it makes more sense to run it with docker-compose later on.

This is the main function that runs the servers and what it essentially does is make a dymanic number WaitGroups from the sync package and uses them to keep track of the servers running. The amount of WaitGroups that are created is based on the arguement you pass to the function and after that we have a for loop that iterates based on the arguement you pass aswell. These amount of iterations are respective to how many WaitGroups there are and in each iteration we have the function makeServer() running on its seperate thread or proccess called a goroutine! Basically this allows these servers to launch simultaneously without having the proccess being blocked by the ListenAndServe() function from the net/http package that is used to run your server. 

I'll be showing how to make a Load Balancer in Go

Load-Balancer in Go

In every programmers journey there comes a time where building projects and learning new things become repetitive. The programmers focus should shift in mastering a certain position in the computer science field and getting paid for their hard work and dedication. This is why I am making this post to ensure frontend developers can have a place to reference for their tough interviews.

Most JS Frameworks handle DOM manipulation in a non efficient way. Meaning they update and rebuild the DOM objects needlessly. To stop this waste of processing power and needless updating React has a feature called the Virtual DOM.

The Virtual DOM is what happens when JSX gets rendered on the browser. 

Its like a snapshot that gets compared to the real DOM

. If the Virtual DOM has differences compared to the real DOM such as new DOM elements, then that is the only thing that will be updated and rendered. Only the changed objects get updated on the real DOM. Changes on the real DOM cause the screen to change.

Without the Virtual DOM the needless rerendering and DOM refreshing is done unefficiently. The workflow would look like this. 

The lifecycles in React were much more apparent when class based components were the most used method of creating components in React. However now, since functional based components have taken over along with Hooks, the key words interviewers are searching for when discussing lifecyle methods are not that distinguishbale.

When a component is first rendered on the DOM this means it has been 

function in react. However now it has been replaced with the 

componentDidUpdate, ComponentWillUnmount 

When a useEffect hook is used with an empty dependency array then it is very similar to the componentDidUpdate function ! When the useEffectHook has a state within the dependency array then the component updates based on a state so it is very similar to componentDidUpdate! When the useEffect has a cleanup function to make sure the component is torn down then this is the same componentWillUnmount.

Here are some words from the documentation to discuss cleanup effects: This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They’re part of the same effect!

What are effects?? Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you’re used to calling these operations “side effects” (or just “effects”), you’ve likely performed them in your components before.

Props allow you to pass data to components. This is done by each component being able to accept an object as a parameter called 

When you instantiate a Component you can pass the data as a key value pair inside of the opening Component tag. 

Now that we know what props are, prop drilling is the act of passing data from component to component in mutliple layers of props. This can get the job done but leads to messy code and hard to understand. Additionally it slows down performance since passing data down multiple levels of components triggers the re-rendering of components unnecessarily.

The solution will be useContext which provides a way to pass data through the component tree without needing intermediary components which simply relay the props and don’t necessarily consume them. Each component in the context is context-aware via a parent context provider.

Instead of trying to explain one of the most used hooks in the react framework I will just link the new documentation for it which covers most scenarios you will encounter while using the hook. https://beta.reactjs.org/reference/react/useState

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. 

 that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. 

list.map((item, idx)=>{<li key={idx}>test</li>})

Forms in any web application shoudnt be done by scratch any more. The amount of thnigs that go behind forms such as the input type, event handling, data validation, and error handling is almost like a building a whole application itself. A solution I would reccomend is Formik. Here is the link for their website. https://formik.org/

Frontend Interview Questions (React)

Okay let's say you have a nice web application with a nice backend and database and you want to have it available to the world. You'll have to do something called deployment which can be done a variety ways. Depending if your project is very simple or very complex there can be certain deployment methods you should take. 

A frontend can have many shapes and forms. Depending if your project is just a static site with no need of a backend then deployment can be done very easily. If you dont neccessarily need your OWN custom domain and dont mind having a domain with some sort of service tied to it then Netlify or Vercel allow you to deploy react applications for free and that is how this website is actually deployed! Before deployment it is wise to build your project beforehand and having your environment variables configured to Netlify and Vercel so there are no errors when deploying. Building is the process of compiling your project into the most smallest size so it is optimal for running. 

However if you want to deploy with your own custom domain and hosting then it is required to purchase these. Hostinger, SquareSpace, or GoDaddy can be services you can use to buy hosting and domians. Setting up your project with these services can also be different on every platform but they tend to have a 

 where all of the deployment is done on the browser. The process should be straightforward and just a matter of uploading the files to the platform and configuring a directory where your project lives.

Deploying the backend of an application is a little different. Let's say your application is traditionally server side rendered where the frontend is served when the client makes a GET request to the endpoint. The way of deploying this type of application can be done on the cloud or use something like Heroku but true developers should know how to spin up their own servers and configure their project to be setup and running by themselves. This is beneficial because you will save the cost of running your project on a service like Heroku and it should be cheaper when purchasing your own VPS (Virtual Private Server).

.  Here you can pay a couple of bucks per month depending on how much power you need for your vps and you will be able to deploy your project easily through vpscheap. This way of deploying feels very manual and actually puts the developer in control, however deploying on the cloud is very similar as well. The difference is that VPS doesn't give the options of scaling and having very high availability. AWS for example and most cloud providers have the cloud infrastructure to scale your servers along many regions and account for unavailable servers to redirect the load to available servers. However for a beginner developer that is not making a high traffic project then VPS is still a great idea.

Deploying a Full Stack Application

CRUD is short for (Create, Read, Update, Delete) and is done one the database to retrieve/modify data. Traditionally endpoints are made on the backend for the client to communicate with by requesting a type of HTTP Request and the logic on the backend handles the CRUD operations based on the type of request and endpoint. Today we will be explaining how we do that in Go using some tools.

Learn what you need to perform elegant CRUD Operations with Go

CRUD Operations With Go [Unfinished]

gRPC (Google Remote Procedure Call) is an open source framework used to build scalable, secure, and performant APIs. Many tech giants like Netflix, Google, and IBM have been using gRPC so it is quite popular. The framework relies on HTTP/2 protocol buffers behind the scenes.  To touch on the pros lets ask the question - what if there was a better way for client and server to communicate using JSON/XML and provided increased API performance and security?

Well there is! This woud be thanks to Protocol Buffers, or Protobuf for short. This is what gRPC uses to send messages between client and server and the messages can be defined in a proto file. This protobuf file gets compiled down to binary thanks to the Protobuf compiler and auto generates code for your project such as getters and setters for your data attributes. 

The cool thing about gRPC is that many processes can take place in a single request. The multiplexing capability of gRPC is quite powerful. This allows for bidirectional communication between client and server along with Unary, Client-to-Server, and Server-to-Client communication. Streaming services will find the most benefit from gRPC as the benefits from Protobuf and HTTP2 will ensure performance and security. 

The pros of gRPC are many. One of them previously mentioned is the code generation to the native code of the project. Since the gRPC framework uses the protoc compiler to generate code from the .proto file it can save developers significant time in applications with a microservice architecture.

gRPC tools and libraries are designed to work with multiple platforms and programming languages like Java, JavaScript, Ruby, Python, Go, Dart, Objective-C, C#, and more. Additionally gRPC encourages the use of SSL/TLS to authenticate and encrypt data exchanged between the client and server.

Since gRPC and HTTP2 is fairly new technologythere is very limited browser support. No modern browser natively support gRPC and therefor a proxy layer and gRPC-web are required to perform conversions between HTTP1 and HTTP2. Additionally a lot of tools are needed along to develop a gRPC styled API because of the compilation feature. Such as a CLI tool to analyze Protobuf payloads, write manual requests, and perform debugging. Lastly the learning curve is big and that is why most people stick to REST architecture for their API. 

gRPC Explained!

Hey guys I wont be explaining what Docker is just jumping to the concepts to understand the docker environment. The way I view an Image VS Container is that an Image is independent and immutable. A container on the other hand depends on the Image to build a virtual environment that you can alter and execute commands in. Docker Images are like a set of instructions used to set up a specific environment either for your project or a specific runtime instance like postgres or ubuntu.

Most people practice and get started with Docker by containerizing their application and getting it on DockerHub. This requires building your own image and that can be done by simply making a "Dockerfile" file in your root directory with no extension.

Next in your Dockerfile you can write the instructions for your container to run with your application. Dockerfile is just a text file that docker reads when you run a command to build an image. Docker provides a set of standard instructions to be used in the Dockerfile, like FROM, COPY, RUN, ENV, EXPOSE, CMD just to name a few basic ones. Lets say for example we are building a React project, we can write the Dockerfile something like this.

Something you can also do to improve performance of your container is adding a .dockerignore that removes unwanted files or directories for your container. 

node_modules is deffinitely something you don't want to include since the size is so large. Also it's unneccesary to include your Dockerfile in your container and it may be a security hazard. Here is an example of a .dockerignore file which is just a txt file.

Finally you can build your image using a docker command and name and tag it with whatever you want. The name comes before a ":" and the tag comes after.

Once your image is built you have to run it and it will be a live container process where you can either connect to it or have the port exposed to your computer so you can communicate with the container. To view your images you can do this command.

Along with viewing if you ever wanted to remove an image it would be this command.

So now that we can see the image id we can run the image. When running the image theres certain things we have to do. Such as port mapping and if you dont want to have your terminal hanging you have to run the image in detached mode. Lets see the command.

Now if we want to see the container running we can use this command to view the running containers.

If we want to stop the container and remove it we can do the following

Okay so now that we have learned how to put our project in a container but now what if we want to access our container from another machine? DockerHub is a wonderful place you can upload your images to and access them from any device with internet and docker installed. It is a registry for docker images that you can push your image to on a remote machine. First you will want to sign up or log in to 

Once your credentials are set you can now login to docker from your terminal using this command.

$ docker login -u [USERNAME] -p [PASSWORD]

Now that youre logged in you can easily push to DockerHub but there are a few gotchas. The image name that you want to push into DockerHub have to match this format. This is convention used in Dockerhub to identify the owner of an image. 

So since the name of our image for example is "react-app:v1" this will not work when we go to push to DockerHub. Lets rename it like this.

docker tag react-app:v1 [USERNAME]/react-app:v1

Now the image is named correctly for pushing to DockerHub. However we also have to make a repository in DockerHub with the repo name matching the image name. Once a repo is made then you can finally push to DockerHub.

Since you have the ability to push your images into Dockerhub, isn't it a bit of a security hazard that anyone can push images? Especially when you need to create a Dockerfile you need to pull a base image in order to create your own image. What if the base image you are pulling is from a random hacker out there and you have no way of knowing? That is why Docker has itntroduced Official Images and Verified Images. 

Official Images are actually deemed official through a rigorous proccess. There is actually a Docker Official Image team that runs very tests and examinations on the image to verify if it is safe and reputable. Once all these reviews are succesful on the image it then is published and held responsible by Docker Inc. if it has any dire vulnerabilities. Official Images are there to produce an essential OS for your base images. 

Verified Images are published by Independent Vendors that also have to go through a special process of reviewing and testing to see if their image is safe and reputable. These images are more speicific in what they provide inside of the image such as node, python, golang. These images provide you a specific environment to create your project. Use Verified Images, Official Images, or your 

Custom Image inside of your dockerfiles to ensure you are safe.

A cool feature that can be incorporated to your dockerfiles is the addition of stages! Let's say that your project has a stage where you need to build the binaries of your project. Or test your project to see if it will run smoothly. Then you have to run your project of course. What if all these three things can be done inside of a dockerfile rather than just the running the project part. This is where multi stage dockerfiles come into play!

FROM commands , that is a clear indication it is a multi stage dockerfile. Additionally you can name the stages by using the 

command after the base image. In multi stage dockerfiles you have the ability to use multiple base images! It is very useful to use this in your dockerfiles for organization and readability. 

 is the documentation page on multi stage dockerfiles.

There are some things about docker's networking features you should know before continuing on your journey of docker mastery. Docker provides containers with their own IP Address and network interface. The default bridge network is the network that containers run on by default. This means that docker containers can communicate to eachother! So when making calls on localhost (127.0.0.1) inside of your projects, inseatd in your docker container you will have to use another hostname. The new hostname will be your containers IP Address! 

However isn't it a drag you will have to find out the IP of your containers and keep track of them in case you have to rebuild your images. Well Docker Daemon actually offers DNS resolution based on container name! So you can use the 

as the host when you are making frontend calls to the backend or connecting to your database container.  

What is even cooler is that Docker allows you to make your own network. User Defined Networks are recommended because if all containers are defaulted to the default bridge network, then your projects wont be isolated from other project containers! The type of network driver they will be given when created is a bridge network which is perfect for container communication. This is how to create networks in Docker and attach containers to them.

docker network connect [NETWORK] [CONTAINER]

Volumes and Bind Mounts are a way for your containers to persist data even when they are removed and readded. Bind Mounts is a way that your container's filesystem can be connected to your own machine's filesystem. This is powerful because now the changes that happen on your own machine are now linked to the container and will be reflected when you run the container again. For a React Application this will be nice for development because your team can work on your react app and see it change real time.

This is how you would do a bind mount: What youll have to do is first stop the container because youll have to run the image again with a special flag added to the command. This flag will mount a directory on your machine to a directory on the container this time.

docker run -p 3000:3000 -v $(pwd):/app [IMAGEID]

Now if you run your container and open the exposed port to see your React Application running, you can change the code on your machine and see the changed reflect on the container! Now usually you don't do this for the frontend instead you do this for the database services to keep the data persistent and not be volatile. 

Let's talk about Volumes next. Volumes are like a data bucket that is stored and managed by Docker and is not mounted to your file system. Instead of keeping all of your data stored inside your own file system, docker volumes allow for you to just reference the volume name to containers and they store data inside of the volume. Here is how to create volumes and list them:

Images, Containers, DockerHub, Volumes, Docker-Compose, Docker-Machine, and Swarm

Docker Crash Course: Everything I Know

To begin the project we will be using the *create-next-app* cli tool provided to us by NextJS. This will initialize our project with the default configuration and folder structure for a NextJS project. Here is the command and it can slo be found in the 

After the process is done you should be prompted for a project name and then your project should be built. It will take a few minutes depending on your machine and internet, after completion lets get SCSS set up.

Importing CSS in NextJS has some gotchas so let's go over what you should know when using css in your NextJS project. When using 

 file by doing a simple import statement of your css.

Now if you want to do component level styling in NextJS the most ideal way to do it is using CSS Modules. The reason being is to avoid any naming collisions between any selectors in other CSS files. Here is the convention of CSS Modules. Lets go over naming your css file.

Now how to import your css in your component, lets say this is component/Navbar.tsx.

import styles from '../styles/Filename.module.css'

Finally how to give class names to your dom elements and target them in your css.

SCSS is a special type of CSS pre-processor that uses SASS (a program written in Ruby) to assemble your SCSS to web compatible CSS. The reason to use SCSS is because it provides more functionality to CSS like variables, nesting selectors, and decreasing the lines of code needed to style your elements. 

To setup SCSS in Visual Studio Code it is recommended to install the Live SASS Compiler Extenstion to convert your SCSS into CSS. Once installed you should see a button on the bottom of your IDE that prompts you to "watch SCSS" this will assemble your SCSS to valid CSS. Additionally any changes and saves you do will reflect in your CSS as well. It is also important to note when you import your CSS it always ends in the file extension "css" not "scss".

This is a motion library that allows you to easily integrate all types of properties to your dom elements. This includes position, rotation, opacity, and much much more. To install this in your project you want to install it from the npm registry using these following commands.

The setup is complete now what is next is learning the ins and outs of the technologies you setup! Understanding how to data fetch in NextJS or how to pass props to components within your project. Using the right hooks and using a state manager if needed.

For CSS it is more situational but the most essential is understanding the box model, positioning, layouts (flexbox/grid), and responsiveness via media queries in CSS. Once these fundamentals are built the next step in the ladder is using transitions, animations, and replicating other designs that you see.

Framer Motion is another technology that can be used very situationally but pays off when understood. I will link the docs for referencing how to use Framer Motion 

From here on out is a practical video series on how to make a frontend in 2022 using these technologies above! 

Frontend Tutorial on NextJS , SCSS, and FramerMotion

The crypto protocols most seen is POW, POS, and POH. Proof Of Work proposes a challenge to the miner and they must compete against other miners to solve a difficult puzzle using their computer's processing power. This is very secure because to add a malicious block to the network you would have to have a computer 51% more powerful than 51% of the network. Finally the first miner to solve the puzzle is given a reward for their work. Proof Of Stake works slightly differently. There is no competition as the block creator is chosen by an algorithm based on the user's stake. In order to add a malicious block you would have to own 51% of all the cryptocurrency on the network. This is because the stake is done in crypto and the type of crypto is based on the network or blockchain. Proof of History is what Solana uses and reduces a lot of overhead and increases transaction speed by adding timestamps to the hashing algorithm that blockchain networks use. No longer does the network have to wait for every node on the network to come to a concensus in order to proccess transactions. Instead POH allows for the nodes to validate the network by the history of the transactions. 

Solana at the moment is the fastest cryptocurency in terms of block time and tranasction speed compared to Bitcoin and Ethereum. The new Proof of History protocol is very beneficial because the speed makes the gas fees low and more friendly for people to be validators in the blockchain. There is no requirements to be a validator just a vote fee that has to be paid everyday which does add up over a year.  Solanas got a great future ahead of it and has increased its price exponentially in the market as its public release. 

To make life easier for anyone trying to make an NFT Collection on Solana there is Metaplex. Metaplex is a collection of tools and smart contracts designed to make the process of creating and launching NFT's easier. This includes uploading the images and metadata that we will need for our NFTs. If not for metaplex we would have to dive deep in writing our program in RUST and have to write quite a lot of code. Metaplex offers a tool called The Candy Machine which is a small library to allows us to upload our nft to the network and mint our NFT. 

So you want to purchase an NFT, but there may be challenges you face when trying to purchase one. All the NFTs in the project can be sold out before you get a chance to buy for instance. Another challenge you may experience is gas wars, which is where everyone is trying to buy the nft and competing so in order to come on top they will increase the gas fee by a lot to have their transaction be the fastest. 

Thats why NFT projects introduce Whitelisting which guarantees you access to mint and even get an early bird price for the NFT. When youre on the whitelist that means you have participated in the NFT project's discord and are apart of the community. 

Creating Solana NFT

Hey guys so I have to learn typescript and really rail it in to my brain. Once you go typescript you never go back they say! Also it will be very impressive for employers so lets begin by this huge post of all things typescript related.

A programming language that is converted into machine code so that the processor (CPU) can execute it. Compiled languages tend to be more faster and more efficient to be executed compared to Interpreted Languages. They need to be built manually so they have a build step. 

These programming languages run through a program called an Interpreter that go line by line in the program and executes each line. Interpreted languages tend to be slower but have a smaller code base and are loosely typed. However with the invent of JIC (Just In Time Compilation) that gap of efficiency with interpreted and compiles is shrinking.

Static programming languages are usually always fixed and bounded at compile time. This means that types are clearly defined and cannot be changed when being compiled. Static typing allows better error detection, more work at compile time and hence faster execution time

Dynamic programming languages are flexible and not fixed or bounded to their types until run time. This means during execution the types can change and variables can have multiple data types during the course of the course of execution.

Compile time is the period when the programming code (such as 

Runtime is the period of time when a program is running and generally occurs after compile time

A transpiler is a tool that reads sourcecode written in one programming language and produce the equivalent code in another programming language! This is how typescript transforms the typescript code into javascript and allows for the browser to be able to read typescript.

Another popular transpile is Babel that transpiles ES6 javascript into ES5 Javascript for wider browser support.

Type assertion is telling the compiler that we want to treat a varible as a different type. It allows us to treat 

 as a number, or number as a string. Type assertion works like typecasting, by declaring your own type with an interface or class and makes code much more understandable. This also works alongside type aliasing when we create interfaces and allow us to define them as custom types.  

Type generics are a way to have more data type support in code components such as functions and provide more flexible use of them. In typescript this can be done by creating a type generic argument shown in the first diagram. Then once this is done in the second diagram the way to instantiate the generic component is shown. Additionally there is a third way to do so, but the third way shows that the compiler is assuming the type rather than being given instructions to see the argument as a specific type.  

Mapped Types are to my naivity not so important to learn so I will briefly mention them as a way to give secure types to the keys and properties of your maps. Basically you can define the type you only want to allow your keys to be given as well as the properties but I don't see them too important to learn unless you are a tryhard.

TypeScript 3.7 implemented support for assertion functions in the type system. An assertion function is a function that throws an error if something unexpected happened. Using assertion signatures, we can tell TypeScript that a function should be treated as an assertion function.

This is my crash course of typescript that will get you ready for a job!

TypeScript Big Review

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna duis convallis convallis tellus id. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Volutpat ac tincidunt vitae semper quis lectus nulla at. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Bibendum est ultricies integer quis auctor. Id porta nibh venenatis cras sed felis. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Risus feugiat in ante metus dictum. Montes nascetur ridiculus mus mauris. Nunc mattis enim ut tellus elementum. Maecenas ultricies mi eget mauris pharetra et.

Welcome to the Fabrzy Website!

This post will discuss everything done for the Godot project I created over a span of 48 hours. We will discuss the Godot Game Engine in detail and also what techniques were used in order to create the game.

 Godot is a general-purpose 2D and 3D game engine designed to support all sorts of projects. You can use it to create games or applications you can then release on desktop or mobile, as well as on the web. Godot comes with a fully-fledged game editor with integrated tools to answer the most common needs. It includes a code editor, an animation editor, a tilemap editor, a shader editor, a debugger, a profiler, and more.

, a Godot-specific and tightly integrated language with a lightweight syntax. This scripting language in my short time using it was very similar to Python because of the indent requirements and the way the languages deals with conditionals and control structure logic like loops. 

In Godot the elements and objects you create are ultimately refered to as nodes. Knowing I wanted to include a friendly title screen for the user to be greeted with and intiate the game I used something called as the 

The Panel Node is simply a static panel in a 2D environment that can be given a background and other nodes to be stacked on top of the panel.

There is also a Label node that serves the purpose of providing text on a panel. This is what I used to make the title on the title screen and additionally there is a button node that can capture the mouse event of being clicked on. This is important because when the user clicks the play button the transition of going to the main game will occur.

This is my gaming project that I had to try to complete in 48 hours.

Fabio Espinoza

Full Stack Dev

Content Creator

Gamer

FABRZY

Education

Gaming

Fitness

YouTube

Subscribe to my YouTube Channel! Videos on Travel, Computer Science, and Vlogs will be uploaded monthly

Instagram

Get to know me better on Instagram and take a look at my life!

Twitch

Follow my Gaming Channel on Twitch! We're top 5000 NA East in Valorant!