As your Go project flourishes, maintaining a well-structured and lucid code base becomes paramount. The “internal package” approach provides a compelling strategy to enhance code clarity and manageability.

Consider a project where all the code resides in a single directory. Navigating and comprehending the code base transforms into a daunting task. This is precisely where internal packages shine. It empowers you to organize related functionalities within private packages, keeping your project well-structured and promoting modularity.

Here’s how the internal package structure works:

• Create an internal directory within your project root.
• Insideinternal, establish sub-directories for specific functionalities (e.g., api, database, utils).
• Each sub-directory represents an internal package. Code within these packages is not accessible outside the project.

This approach offers several benefits:

• Clarity: Internal packages group related code, making it easier to understand the project’s overall structure. Developers can quickly grasp how different functionalities interact.
• Maintainability: As your project grows, modifying or extending specific functionalities becomes isolated within their respective internal packages. This reduces the risk of unintended side effects in other parts of the code base.
• Testability: Internal packages allow for writing focused unit tests for each functionality. This improves code quality and facilitates debugging.
• Encapsulation: The internal directory helps encapsulate your code, ensuring that implementation details are hidden and not inadvertently used by other packages or projects.
• Maintainability: By clearly separating internal logic from publicly accessible code, it becomes easier to maintain and refactor the codebase without worrying about breaking external dependencies.
• Reduced Coupling: Internal packages are less likely to create tight coupling with external packages, promoting better modularity and design.
• Enhanced Security: Restricting access to certain parts of your code can prevent misuse and enhance security by ensuring that only intended parts of the codebase are exposed.

However, keep the following in mind:

• Accessibility: Code within internal packages cannot be directly imported by external projects. This structure is ideal for self-contained applications.
• Naming Conventions: Use descriptive names for internal packages to clearly communicate their purpose.

The Ideal Go project structure.

• cmd/: This directory contains the entry points for your applications. Each sub-directory represents a different application or command. The main.go file in each sub-directory is the starting point for that application.
• internal/: Contains non-exported (private) application and library code. It can have sub-directories like app for the core application code and pkg for internal reusable packages.
• internal/app/: Core application logic goes here.
• internal/pkg/: Internal packages that are shared across the application but should not be accessible outside of the project.
• pkg/: Contains library code that you want to be accessible to other projects. These are reusable packages that are safe to be imported by external projects.
• api/: Stores API definitions and implementations, usually organized by version.
• api/v1/: Version 1 of your API.
• web/: Contains web-related files, such as HTML templates, CSS, JavaScript, and other static assets.
• web/static/: Static files such as images, CSS, and JavaScript.
• web/templates/: HTML templates for rendering web pages.
• scripts/: Contains various utility scripts for development, build, and deployment tasks.
• configs/: Configuration files, such as YAML or JSON files, that can be used for setting up the application.
• build/: Files needed for building the project, including CI (Continuous Integration) configurations and build scripts.
• build/ci/: CI configuration files.
• build/scripts/: Scripts related to building the project.
• docs/: Documentation files for the project.
• test/: Additional external test applications and test data.
• vendor/: Contains the project dependencies. This folder is managed by the go mod vendor command.
• go.mod: The Go module file that defines the module’s properties and dependencies.
• go.sum: The checksum file to ensure the integrity of the dependencies.

How to Use the Internal Directory

To use the internal directory effectively, follow these practices:

• Design for Re-usability Within the Project: Place code in internal that is meant to be reused across different parts of your project but not outside it.
• Group Related Code: Organize related code into sub-directories within internal to keep your project organized and understandable.
• Avoid Overusing: Not all code needs to be in internal. Use it judiciously for code that truly needs to be protected from external access.

By embracing the internal package structure, you’ll foster a well-organized and maintainable Go project. It promotes code clarity, reduces complexity, and lays the foundation for future growth.
What are your thoughts on using internal packages? Let’s chat about it on Twitter

Middleware plays a pivotal role in GoLang web development, offering a way to preprocess and post-process HTTP requests and responses. These middlewares can be chained together to create a sequence of operations that enhance and manage web application functionality. While it is possible to handcraft middleware chains in GoLang, there's a more efficient and convenient way to do so using the Alice package. In this article, we'll explore how to chain middlewares in GoLang with the Alice package, making the process more elegant and maintainable.

Understanding Middleware in GoLang

Middleware is a set of functions that handle HTTP requests and responses in a web application. These functions intercept incoming requests and can perform tasks such as logging, authentication, data validation, and more before passing the request to the main application handler.

Chaining these middlewares means connecting them in a sequence to create a pipeline for request processing, where each middleware can manipulate the request and pass it to the next in the chain. GoLang's `http.Handler` interface facilitates the chaining of middlewares.

Introducing the Alice Package

The Alice package, created by Justinas Stankevičius, simplifies the process of chaining middlewares in GoLang. It provides a clear and expressive way to build middleware chains. Before diving into how to use the Alice package, you'll need to install it using the go get command:

```bash
go get github.com/justinas/alice
```

Chaining Middlewares with Alice

Let's explore how to chain middlewares using the Alice package:

1. Import the Alice package in your GoLang code:

```go
import "github.com/justinas/alice"
```

2. Define your middleware functions. Middleware functions should accept an `http.Handler` and return a new `http.Handler`. For example:

```go
func LoggerMiddleware(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
log.Printf("Request: %s %s", r.Method, r.URL.Path)
next.ServeHTTP(w, r)
})
}

func AuthMiddleware(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
// Authentication logic here
if authenticated {
next.ServeHTTP(w, r)
} else {
http.Error(w, "Unauthorized", http.StatusUnauthorized)
}
})
}

func MainHandler(w http.ResponseWriter, r *http.Request) {
// Your main application logic
}
```

3. Create an Alice middleware chain by chaining the middleware functions together, and then use the chain as a `http.Handler`:

```go
func main() {
chain := alice.New(
LoggerMiddleware,
AuthMiddleware,
).Then(http.HandlerFunc(MainHandler))

http.Handle("/", chain)
http.ListenAndServe(":8080", nil)
}
```

In the example above, we've defined a middleware chain that logs requests using `LoggerMiddleware`, checks for authentication using `AuthMiddleware`, and finally passes the request to the `MainHandler`.

Benefits of Using Alice for Middleware Chaining

1. Readability: Alice makes your middleware chains highly readable and expressive, making it clear which middlewares are applied in which order.

2. Flexibility: Easily add, remove, or reorder middlewares in your chain to adapt to changing requirements.

3. Centralized Configuration: Manage all your middleware configurations in one place, making it easier to control and maintain your application’s request processing pipeline.

4. Error Handling: Centralized error handling becomes more straightforward when you have a well-structured middleware chain.

Conclusion

Chaining middlewares in GoLang using the Alice package is an elegant and efficient way to enhance the functionality of your web applications. By providing a clear and readable way to create middleware chains, Alice simplifies the process of managing cross-cutting concerns like authentication, logging, and more. With the flexibility to adjust middleware chains as needed, you can adapt your web application to changing requirements with ease. Whether you're building a small web service or a large-scale web application, the Alice package makes middleware chaining in GoLang a more maintainable and streamlined process.

This short tutorial will help you learn how to design and create an SQL DB schema using dbdiagram.io. We will also learn how to save and share DB diagrams, then how to generate code to create the schema in a target database engine.

Let’s get to it. The picture below is the interface you will see when you visit dbdiagram.

The left hand side is where you design your DB schema, the right hand side shows you a graphical representation of your design including relationships that you can share with your team. You can use the export menu on the top bar to generate a code for your design in different variants including PDF, PNG, SVG, generate SQL, Postgres and SQL-server codes. The share button allows to generate a shareable link to your design, an embed link and an option to invite someone via their email address.

If you already have an SQL code and wants see a graphical representation or you just want to redesign it, the import button allows to import SQL codes of different databases including — schema.rb — files from Rails. There’s also a history button to check previous saved versions of your designs.

Designing a database Schema

The left hand side is where we design the db schema. Dbdiagram has a default design once you open the app. The design has three tables and their respective fields with a corresponding diagram in the right. We will create a simple savings app database to learn the database markup language used in dbdiagram. The first thing is to give our project a name, I’ll name it Simple savings.

We will have two tables namely the Users, Withdrawals and Savings tables. To design a database in dbdiagram, we use the DBML — Database Markup Language, you can check out the docs here for more details.

The image above show a complete design of our database. We have three tables with fields. We can create timestamps and give default values to the fields. The DBML allows us to build complex database schema and it updates our changes in real time. Below is a diagram generated for our design that i can share with my team.

When ever you finish writing on the left hand side, click on the auto arrange button on the bottom panel to arrange the diagram to fit your screen. Designing databases can always be a dilemma but with this tool, it can be a flex. You can also manually rearrange the diagram what best works for you. The image below shows a rearranged version of our design show the relationships and references better.

Now we can generate and download postgres code of our design using the export button and use it in our project.

Image below show the code generated for MySql database. You can see the use of back-ticks instead of quotes.

The image belows the generated code for Sql Server.

You can also generate PNG and PDF versions of your design.

To get updates on other articles, follow me on medium or twitter.

Go was built from concepts from other languages like Algol, Pascal, C, Modula, Oberon, Smalltalk and Newsqueak. Go inherited mostly from Oberon language and its syntax is from C. Go’s OOP is more like Smalltalk but in Go, you can attach methods to any type. And concurrency is mostly from Newsqueak which is a language also from Rob Pike and heavily inspired by Hoare’s paper of CSP (Communicating Sequential Processes). The langauge is called Golang because of its domain name golang.org but the proper name is GO. It was designed in 2007 to improve programming productivity at Google. The designers wanted to address criticism of other languages in use at Google, but keep their useful characteristics. Go was publicly announced in November 2009, and version 1.0 was released in March 2012. Go is widely used in production at Google and in many other organizations and open-source projects.

Why create a new language?

To answer this, we have to look at the very useful languages used at the time at Google. At the GO was designed, there were three languages that were the bedrock of Google’s productions. PYTHON, JAVA and C/C++. Each of this languages is very powerful on their own, however Google noticed that there was some loop holes which made the Go designers decide the bridge that gap. For example, python is very easy to use and the learning is not to huge but it is very slow because of the compile time because it is an interpreted language. Java is very quick but its type system has become very complex overtime (Its a natural trend for programming languages, they start out very simple but grows complex trying to implement additional use cases and features). Like java C and C++ is very quick but suffers the same complex type system and the learning curve is somewhat tiring. When C/C++ were designed, computers have considerable low memories unlike today, so a decision to maximize memory made C and C++ what they are today. In addition, all these applications were created at a time when multi threaded applications were extremely rare so concurrency in these languages were patched in at best.

Concurrency is when two tasks overlap in execution. In programming, these situations are encountered: When two processes are assigned to different cores on a machine by the kernel, and both cores execute the process instructions at the same time.

How Go solves these problems

The first thing you need to understand is that Go is a:

Strong and statically typed language.

It inherits this feature set from java and c/c++. The type of the variable “name” cannot change overtime. We have explicitly told the compiler that the variable is a string. Static typing means that all your variables have to be designed at compile time. There are other ways around this if you dont want to statically declare variables but most of the time, you have to do this and enjoy the benefits that comes with static typing.

Go has an excellent community

There are at least half a million programmers in the Go community. Just because Go is a nice language doesn’t guarantee its success. The Go community is committed to making new developers ramping on Go get the best experience as possible. Most notable companies are Google, Docker, Dropbox, Heroku, Medium, Lyft, Uber, and others.

Concurrency

Concurrency is extremely important at our time. It allows multiple processes running simultaneously and effectively.

Golang has efficient concurrency, like C, C++, Java, and at the same time concurrency in Go is done much easier thanks to goroutines, channels, and garbage collection.

Let’s get our hands dirty a bit

Installation

To download the Go language, find the file for your machine here. install the Go language follow the instructions here.

We are going to learn some concepts in writing Go. Let’s an ASCII art…

Gopher it from code academy

An effective way to learn something new is by making something! In this project we’re going to incorporate the use of fmt to make ASCII art. One suggestion is to make a gopher:

This is my first article on Golang and i hope doing more as i learn more. yo can follow me on twitter here

What is Jekyll

Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites. With Jekyll, you don’t need any databases, no heavy downloads and it has a comment moderation ability. All you need do is just write a markdown, liquid, HTML and CSS — Then, a static site comes out ready for deployment. Permalinks, categories, pages, posts, custom layouts are all optimized.

Now, Lets begin…

1. Create a GitHub account, but if you already have an account, login to GitHub.

2. Create a new repository

3. Fill in the informations and click on create. You need to use the format YOUR_USERNAME.github.io to fill in the repository name for it to work. Then click on create at the bottom of the page.

Set up jekyll locally

1. First, you will need to install Ruby. If you don’t have it yet, follow this tutorial.

2. You will also need Bundler so if you don’t have it installed yet, run gem install bundler.

3. Now, let’s install Jekyll. We’re going to use a Gem named gitHub-pages which comes with Jekyll and all the required tools. Let’s install this gem with gem install github-pages.

Now that Jekyll is installed, you can create your new blog with the following command:

After installing, it will generates a folder with the following structure:

In this case, the name of my project is bontus. Next we’re going to initialize Git in your directory, so move inside of it with cd bontus.

Run the following commands to start versioning your static website with Git.

Next we’ll create a Gemfile. Why? Well, if you work on your website/blog from other computers, you will need to re-install Jekyll multiple times. The easiest way to do this is simply adding a Gemfile to the project that will contain the dependencies (i.e. github-pages).

Create a file named bontus/Gemfile and put the following inside:

source 'https://rubygems.org' 
gem 'github-pages'

Then run bundle install. Let’s commit the new files (Gemfile and the newly generated Gemfile.lock).

Before we push our new blog to GitHub, let’s try it in local and write an article.

Test run Jekyll locally

It’s pretty easy to run Jekyll in local, just run the following command from your website/blog folder.

bundle exec jekyll serve

Congratulations, you now have Jekyll up and running… in local!

Taking it live

We did before so it shouldn’t be too hard. Just run the two following commands and everything should be pushed to Github correctly. Don’t forget to replace YOUR_USERNAME with your actual Github username.

Our blog is now live at YOUR_USERNAME.github.io

Writing our first post

Alright, our static website is ready! Now we just need to add content. There’s already an article but let’s remove it and create a real one. Posts have to be created in the folder _posts/ and need to be formatted as YEAR-MONTH-DAY-title.md.

Let’s create one now, I will call mine 2020-11-13-my-first-post.md.

Next we need to define the meta-data of our post and add a bit of content:

Well that’s it, you’re all set to write some awesome articles for your website or blog!

9. Pushing our article

We got a new article and I’d like everyone to be able to read it. To do this, we need to use Git and push it to the GitHub repository just like we did previously.

git add .
git commit -m 'My First Post'
git push origin master

And we’re done.

Since our blog doesn’t have a database and we still need people to comment on our posts, The solution is disqus!

Why use Vue

With over 154k stars on GitHub, Vue.js is currently the trendiest JavaScript front-end framework, beating Angular and React in GitHub star count by a fair margin. When it comes to overall popularity, React is still the king and Angular, thanks to its specificity, holds a solid place. But here in Nigeria, I don’t see much community behind Vue for a while now, and the developer community worldwide, too, seems to be following suit. So what is it about Vue that makes it gain more traction every month?

Vue might have started as a small project driven by developer needs of its creator, Evan You, but it has matured considerably over the years — becoming a full-fledged framework with a grownup ecosystem and developer tooling. Along the way, Vue attracted a decent number of contributors, sponsors, and evangelists.

What is Firebase?

In short terms, Firebase is a set of tools that allows you to develop an application without server-side programming. It has real-time database, authentication system, crash reporting, analytics and other services ready to use in your mobile/web app. That way, you can focus on your app and users.

For application with minimal back-end needs such as authentication or database storage, no need to re-invent the wheel, Firebase does it for you, and gives you much more tools. Also, you don’t need to bother about scaling, server performance and database size, Firebase scales everything automatically.

Shall we begin?

First, we are going to initialize a new Vue project by using the great tool Vue Cli 3 (https://github.com/vuejs/vue-cli).

If you don’t already have vue cli installed, let’s install it (This is done on your terminal — windows + R, then type CMD and press enter):

$ npm install -g @vue/cli

Now that you have vue cli installed, let’s create a new project. In vue cli documentation, it say’s:

Usage
$ vue create <project-name>

One of the cool features of Vue CLI 3, is that you can initialize your project with zero configuration required, so that you can start to code as fast as possible.

Let’s create our new Vue project and call it ‘vue-firebase-auth’.
N/B: inside your CMD, go the folder you want to save your project. if you want your project to live on your documents folder. type cd/documents to enter the documents folder. Then type the command below.

$ vue create auth-system

You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select “Manually select features” to pick the features you need.

For our case, we are going to select “Manually select features” and choose vue-router option since we will be using it during this tutorial. For the other features, do as you want, as it won’t really matter for the rest of the tutorial.

At the end, you will be asked if you want to save this preset for future projects and after that, and a couple of other questions, type n to reject, then press Enter. your project will be initialized.

Then, enter the new vue-firebase-tutorial directory, and run npm run serve

$ cd vue-firebase-tutorial
$ npm run serve

Now, if you open the url ‘http://localhost:8080’, you should have the default view of our Vue project!

The App Structure

Let’s have a quick look of the app structure.

The files we are gonna be working with are in the src folder

The other files are mostly configuration files generated by Vue Cli 3. If you want to have a complete overview of the structure, you can check the Vue Cli 3 documentation. Also, before going further in this tutorial, if you don’t already know the structure of a Vue file (like src/components/HelloWorld.vue), i advise you to take a look to this: https://vuejs.org/v2/guide/single-file-components.html

Now, lets get dirty…

Our app will consist of three views, two (Login view and Sign Up view) that we can access only without authentication, and one (Home view) that we can access only with authentication.

After login successfully or after a new account creation, we will be redirected to the part the needs authentication, the Home view.

Step One: Login and SignUp

1–1 The Login View

Let’s create the Login view. To do so, we will create a new Vue component called Login under src/views

For the moment, the component will simply consist of a title, two input fields, a button and a small sentence in the html.

Our component is now created! But how to display this new component in our app? Well, for that, we are going to use vue-router. Remember? We already installed it when we initialized the app with vue-cli.

What is vue-router ?

vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.from vue-router documentation: https://github.com/vuejs/vue-route

So, let’s add our new Login component that we just created to our app router. Open the src/router.js file and add the Login component to the router like that:

Then, if you change your browser url to localhost:8080/#/login you should see the new Login component that we just created displayed in your browser:

You will notice that the default menu is still there despite the fact that we didn’t put it in the html template of the Login component? Well, if you open the App.vue file, the template of the App component is as follow:

The App component is the main component of the app and will be the first to be rendered. It contains a div with two router-link elements and a html component called router-view.

We will soon talk about the router-link element, but first, let’s see what is the router-view element.

Router-view is a component of vue-router:

The <router-view> component is a functional component that renders the matched component for the given path. Components rendered in <router-view> can also contain its own <router-view>, which will render components for nested paths.from vue-router documentation https://router.vuejs.org/en/api/router-view.html

So, when reaching http://localhost:8080/#/login vue-router will render the attached component of the path/login we defined in src/router.js inside the router-view component. And since the App component also contain the nav div with the two router-link elements in his template, we also have them display in our view.

To avoid confusion with the navigation of the app we are creating, let’s remove this nav div from the App component and replace it with the vue logo. We already have the Vue logo inside the src/assets/ directory, so let’s use it!

Also, Since we are not going to use the About view, we can remove the file from our directory (src/views/About.vue) and also remove i t from our routes configuration in src/router.js

Now, let’s get back to our Login view add some style to our Login component.Inside the <style> element of your Login.vue file, add those styles.

After adding this style, you will notice the changes below:

The Sign Up View

The same way we created the Login view, we are going to create the Sign Up view. For that, create a new vue component called SignUp under src/views/.

As for the Login component, the SignUp component will consist, for now, of a simple form and some style attached to it.

Then, add the new component in our routes inside src/router.js

Then, if you open your browser to http://localhost:8080/#/sign-up, you should have the following view:

Navigation between views

If we look back to the schema of the app architecture we defined, we can navigate from the Login view to the Signup view, and from those two views to the Home view. How to do so?

Well, we will use another component of vue-router that we quickly saw before, called router-link.

<router-link> is the component for enabling user navigation in a router-enabled app. The target location is specified with the to prop. It renders as an <a> tag with correct href by default, but can be configured with the tag prop. In addition, the link automatically gets an active CSS class when the target route is active.from vue-router documentation: https://router.vuejs.org/en/api/router-link.html

So, in the Login and SignUp component, let’s implement router-link so we can navigate between those two views.

Now, you should be able to navigate between the two pages by using the links we just created.

The last part of navigation will consist to go from Login/SignUp views to the Home view. For now, since we don’t have any code implemented, we will do a simple redirection to the Home view when clicking on the Connection button, without any authentication checking.

With router-link, the navigation take places in the html part of the component, but now, we want to navigate between routes programmatically. To do so, we need to attach an event when clicking on the Connection button, and with Vue, we can do that with the v-on directive or with the @ alias for v-on directive.

The event we want to listen to is click. So, on the click event of the Connection button, we want to navigate to the Hello view.

To navigate programmatically between views, vue-router has a set of function we can use in our app. To know more about those functions, you take a look in their documentation https://router.vuejs.org/en/essentials/navigation.html.

In our example, we are going to use the replace function, because once the user is logged in, we want the Hello view as our starting route.

Let’s change our Login component to put this in place.

You can see inside the login function that we have this.$router.replace('home')

Why do we access the router with this? If you take a look into the main.js file, you’ll see that the router object is injected to the Vue app. That way, we can easily access it in every components of the app.

Also, we change the navigation to home, but we don’t have any hello path yet.

The default path of the Home component was / on the app initialization, but now that we know that the Home view will be only accessible when user is authenticated, let’s change the route so that the Home view is accessible when reaching /home path.

Now, back to our Login view, if you click on the Connection button, you’ll be redirect to the Home view ! You’ll see two Vue logo display. That’s normal ! Check the content of the Hello-world component in src/components/HelloWorld.vue ;). Remove the image from the template of the Hello-world component to avoid duplication of the Vue logo.

Firebase Integration

Now that we have our front-end app ready, let’s implement Firebase so we can use it’s authentication system !

3.1 Create a new project on Firebase

To use Firebase, you first need to create a new project on the firebase console. If you don’t have any account created, create one, then go to console.firebase.google.com.

Click on Add project . Them you should have a popup to create a new project. Choose the name you want. I choose to call it vue-firebase-tutorial,

Follow the prompts and finish the other steps until you reach your dashboard

Congrats ! Your Firebase project is created. Now, to integrate it in our app, click on the code icon above Add an app to get started.

Setup you app nickname and register the app.

A popup with a code snippet should appear. Copy the code inside the second script balise. It should look like:

// Initialize Firebaselet config = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SEND_ID"
};firebase.initializeApp(config);

Now, let’s back to our vue project. We need to add the Firebase module to our project. To do so:

$ npm install ——save firebase

Once the installation is done, let’s import Firebase module to our app. Open the main.js file, and initialize Firebase with the configuration code we copied earlier.

For the simplicity of the tutorial, we put the Firebase configuration in main.js file, but on real production system, avoid to do that and put it in a specific configuration file. Also, you may see appear in the console some Firebase warnings about only importing the part of the SDK we actually use. In production, you should definitely do that! But again, to keep the simplicity of this tutorial, I skip this part.

We have everything ready now to create new users on Firebase !

3.2 Create User on Firebase with the SignUp component

Let’s go back to our SignUp component and implement what we need to create users on Firebase.

To create a new user, we will need to get back the email and the password typed in our form inside our component controller. To do so, we are going to use the v-model directive of Vue.

You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.from Vue 2 documentation: https://vuejs.org/v2/guide/forms.html

Once we retrieved the email and the password of the new user we want to create, we are going to use the Firebase function called createUserWithEmailAndPassword.

This Firebase function does exactly what the name says, it create a new user with an email and a password. You can know more about this function in the official Firebase documentation here: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createUserWithEmailAndPassword

Let’s add all that in our SignUp component:

The createUserWithEmailAndPassword function return a Firebase promise, with an onResolve and onReject callback. You can know more about the different type of Firebase promises here: (https://firebase.google.com/docs/reference/js/firebase.Promise).

For the moment, we just display an alert to see the result of the function.

Let’s try to create a new user in the interface.

It’s not working ! Why ?

The error message says:

The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth section.

To have the possibility to create new user, we should enable the sign-in provider of Firebase. Let’s go back to the Firebase console, on the project we created earlier

On the Authentication part, we have a tab named SIGN-IN METHOD

You just need to enable the Email/Password provider. Then let’s retry creating a new user again

N/B: Trying to add a user from the signup page returns an error that says Email address is badly formatted

To add a user for now, navigate to the users section on your firebase dashboard and add a new email and password.

Login with the new user

Now that we have a new user created, let’s try to login with this user ! (When you successfully create a new user on Firebase, it automatically sign in the user in to the application, but for this example, we are going to sign in again from the Login view)

Let’s go back to our Login component. We need to get back the email and the password of the user who try to login, and sign in this user into Firebase. This component will look like the SignUp component, but the change will be the function we will call. To sign in a user in Firebase, we are going to use the signInWithEmailAndPassword function provided by Firebase. It takes the email and password as parameters and return a Firebase promise.

Now, let’s try to login with the user we just created

It’s working ! Your user is now authenticated in Firebase.

Am working on updating this project and fixing the error we encountered earlier. Please if you have the solution, I’ll appreciate a comment.

You can follow me on Twitter or Instagram to get update on other articles and tutorials.

The source code of this project is available on Github.

So I want to help you understand what it takes to be a Vue developer. Vue.js is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru.

Understanding Vue requires a knowledge of JavaScript because Vue was built from JavaScript. The need to know about JS syntax and basic operations, DOM manipulations, Hoisting, Event bubbling, prototyping etc. You should also have a knowledge of HTML or PUG, CSS or BOOTSTRAP.

To start with Vue, you have to install it on your computer. The easiest way to do this is via the Command Line via the Vue CLI. Before you start this, you should have the recent version of NPM or YARN installed on your machine.

Now lets install Vue:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

After installation, you will have access to the Vue binary in your command line. You can verify that it is properly installed by simply running Vue, which should present you with a help message listing all available commands.

You can check you have the right version with this command:

vue --version

No you are good to go!!!

Your Journey just began. You can learn all the things listed on the roadmap above via the links below:

1. the basics of how the Web works
2. HTML, CSS
3. the DOM
4. how browsers work
5. the JavaScript basics, event handling, the newest ES6–7–8 features
6. Git
7. how to use the terminal
8. the Vue basics
9. webpack
10. how to install packages using npm or yarn
11. how to run tasks using npm scripts
12. CSS modern tools: SASS, PostCSS
13. a CSS framework like Tailwind or Bootstrap or another
14. how to use CSS in JS using Single File Components
15. how to manage state using component state or vuex, and its libraries
16. how to check types using prop types or TypeScript
17. how to handle routing using vue-router
18. how to consume APIs using GraphQL/Apollo/REST using axios or fetch
19. use an utility library like lodash or moment
20. how to test using Jest and the Vue Test Utils
21. how to perform end to end testing using Cypress or Puppeteer or others
22. how to build a desktop Vue app using Electron
23. how to internationalize an app using vue-i18n
24. how to implement server-side rendering

The list could grow indefinitely, but those are the basics of a well-rounded Vue developer.

I Believe that the mind is made up of the same universal “fluid” energy as that which constitutes the ether which fills the universe. It is a fact as well known to the layman as to the man of scientific investigation, that some minds clash the moment they come in contact with each other, while other minds show a natural affinity for each other. Between the two extremes of natural antagonism and natural affinity for growing out of the meeting of minds, there’s a wide range of possibility for varying reactions of mind upon mind.

It’s quite probable that the mind is made up of a fluid or substance it energy, call it whatever suits you, similar (if not the same substance as) the ether. When two minds meets each other, the mixing it the units of this “mind stuffs (call it electrons of the ether) sets up a chemical reaction and starts vibrations which affects the two individuals pleasantly or unpleasantly.

For the purpose of establishing this topic upon sound foundation, we’ve gone a long way towards success by admitting that the meeting it coming close in contact of two minds sets up in each of those minds a certain noticeable effect, while it is desirable, it is not essential to know what the cause of this reaction of mind upon mind. That the reaction takes place, in every instance, is a known fact which gives us a starting point from which we may show what is meant by the term “Master Mind”

A Master Mind may be created through the bringing together or blending, in a spirit of perfect harmony, of two or more minds. Out of this harmonious blending, the chemistry of the mind creates a third mind which may be appropriated and used by one or all of the individual minds. The Master Mind will remain available as long as the friendly harmonious alliance between the individual minds exist. It’ll disintegrate and all evidence of it’s former existence will disappear the moment the friendly alliance is broken.

This principle of mind chemistry is the basis and cause for practically all the so-called “soul-mates” and eternal triangle cases, so many of which find their way into the divorce courts and meet with popular ridicule from ignorant and uneducated people who manufacture vulgarity and scandal out of one of the greatest of nature’s laws.

The entire civilized world knows that the first two or three years of association after marriage are marked by much agreement, of a more or less Petty nature. These are the years of “adjustment”. If a marriage survive them, it’s more than apt to become a permanent alliance. These facts no experienced married person will deny. Again we see the “effects” without understanding the “cause.”

While there are other contributing causes, yet, in the main, lack of harmony during these early years of marriage is due to the slowness of the chemistry of the minds in blending harmoniously. Stated differently, the electrons or units of the energy called the mind are often neither extremely friendly nor antagonistic upon first contact; but through constant association they gradually adapt themselves in harmony, except in rare cases where association has the opposite effect of leading, eventually, to open hostility between these units.

It’s well known fact that after a woman and a man have lived together for ten to fifteen years, they become practically indispensable to each other, even though there may not be the slightest evidence of the state of mind called love. Moreover, this association and relationship sexually not only develops a natural affinity between the two minds, but it actually causes the two people to take on a facial expression and to resemble each other closely in many other marked ways.

Two minds will not blend unless the element of perfect harmony is present, wherein lies the secret of success or failure of practically all business and social partnerships. Every salesman and every military commander and every leader in any way of life understands the necessity of “esprit de corps” — a spirit of common understanding and cooperation — in the attainment of success. This Mass spirit or harmony or purpose is obtained through
Discipline, voluntary or forced, of such a nature that the individual minds become blended into a “Master Mind,” by which is meant that the chemistry of the individual minds is modified in such a manner that these minds blend and function as one.

The method through which this blending process takes place are as numerous as the individuals engaged in the various forms of leadership. Every leader has his or her own method of coordinating the minds of the followers. One will use force. Another used persuasion. Another plates upon the fear of penalties while another plates upon rewards.

No group of minds can be blended into a Master Mind if one of the individuals of that group possesses one of these extremely negative, repellant minds. The negative and positive minds will not blend in the sense here described as a Master Mind. Lack of knowledge of this fact has brought many able leaders to defeat.

Any able leader who understands this principle of mind chemistry may temporarily blend the minds of practically any group of people, so it’ll represent a mass mind, but the composition will disintegrate almost the very moment the leader’s presence it’s removed from the group.

[I’ll update it daily as far as I get inspired]

Learning about design thinking was a bonus to my Front end journey. I’ve made so many designs in past which didnt look so aesthetic and appealing to me and the worst was i didnt know what to do to make my choice of colors professional but learning about design thinking today has given me that push i so much craved.

I decided i wasn’t gonna learn about this alone, you have to learn it too. So let’s get down to the business of design thinking…

Design Thinking is a design methodology that provides a solution-based approach to solving problems. It’s extremely useful in tackling complex problems that are ill-defined or unknown, by understanding the human needs involved, by re-framing the problem in human-centric ways, by creating many ideas in brainstorming sessions, and by adopting a hands-on approach in prototyping and testing. Understanding these five stages of Design Thinking will empower anyone to apply the Design Thinking methods in order to solve complex problems that occur around us — in our companies, in our countries, and even on the scale of our planet.

We will focus on the five-stage Design Thinking model proposed by the Hasso-Plattner Institute of Design at Stanford (d.school). d.school is the leading university when it comes to teaching Design Thinking. The five stages of Design Thinking, according to my tutor, are as follows: Empathise, Define (the problem), Ideate, Prototype, and Test. Let’s take a closer look at the five different stages of Design Thinking.

1. Empathise

The first stage of the Design Thinking process is to gain an empathic understanding of the problem you are trying to solve. This involves consulting experts to find out more about the area of concern through observing, engaging and empathizing with people to understand their experiences and motivations, as well as immersing yourself in the physical environment so you can gain a deeper personal understanding of the issues involved. Empathy is crucial to a human-centered design process such as Design Thinking, and empathy allows design thinkers to set aside their own assumptions about the world in order to gain insight into users and their needs.

Depending on time constraints, a substantial amount of information is gathered at this stage to use during the next stage and to develop the best possible understanding of the users, their needs, and the problems that underlie the development of that particular product.

2. Define (the Problem)

During the Define stage, you put together the information you have created and gathered during the Empathise stage. This is where you will analyse your observations and synthesise them in order to define the core problems that you and your team have identified up to this point. You should seek to define the problem as a problem statement in a human-centred manner.

To illustrate, instead of defining the problem as your own wish or a need of the company such as, “We need to increase our food-product market share among young teenage girls by 5%,” a much better way to define the problem would be, “Teenage girls need to eat nutritious food in order to thrive, be healthy and grow.”

The Define stage will help the designers in your team gather great ideas to establish features, functions, and any other elements that will allow them to solve the problems or, at the very least, allow users to resolve issues themselves with the minimum of difficulty. In the Define stage you will start to progress to the third stage, Ideate, by asking questions which can help you look for ideas for solutions by asking: “How might we… encourage teenage girls to perform an action that benefits them and also involves your company’s food-product or service?”

3. Ideate

During the third stage of the Design Thinking process, designers are ready to start generating ideas. You’ve grown to understand your users and their needs in the Empathise stage, and you’ve analysed and synthesised your observations in the Define stage, and ended up with a human-centered problem statement. With this solid background, you and your team members can start to “think outside the box” to identify new solutions to the problem statement you’ve created, and you can start to look for alternative ways of viewing the problem. There are hundreds of Ideation techniques such as Brainstorm, Brainwrite, Worst Possible Idea, and SCAMPER. Brainstorm and Worst Possible Idea sessions are typically used to stimulate free thinking and to expand the problem space. It is important to get as many ideas or problem solutions as possible at the beginning of the Ideation phase. You should pick some other Ideation techniques by the end of the Ideation phase to help you investigate and test your ideas so you can find the best way to either solve a problem or provide the elements required to circumvent it.

4. Prototype

The design team will now produce a number of inexpensive, scaled down versions of the product or specific features found within the product, so they can investigate the problem solutions generated in the previous stage. Prototypes may be shared and tested within the team itself, in other departments, or on a small group of people outside the design team. This is an experimental phase, and the aim is to identify the best possible solution for each of the problems identified during the first three stages. The solutions are implemented within the prototypes, and, one by one, they are investigated and either accepted, improved and re-examined, or rejected on the basis of the users’ experiences. By the end of this stage, the design team will have a better idea of the constraints inherent to the product and the problems that are present, and have a clearer view of how real users would behave, think, and feel when interacting with the end product.

5. Test

Designers or evaluators rigorously test the complete product using the best solutions identified during the prototyping phase. This is the final stage of the 5 stage-model, but in an iterative process, the results generated during the testing phase are often used to redefine one or more problems and inform the understanding of the users, the conditions of use, how people think, behave, and feel, and to empathise. Even during this phase, alterations and refinements are made in order to rule out problem solutions and derive as deep an understanding of the product and its users as possible.

The Take Away

In essence, the Design Thinking process is iterative, flexible and focused on collaboration between designers and users, with an emphasis on bringing ideas to life based on how real users think, feel and behave.

Design Thinking tackles complex problems by:

1. Empathising: Understanding the human needs involved.
2. Defining: Re-framing and defining the problem in human-centric ways.
3. Ideating: Creating many ideas in ideation sessions.
4. Prototyping: Adopting a hands-on approach in prototyping.
5. Testing: Developing a prototype/solution to the problem.

Thanks for reading and learning with me.

Am very tired, am in the toilet thinking how today went and I’ve just remembered that someone asked today “what’s CSS”? I immediately told myself why would someone not know what CSS is but on a second thought, there’s was a time I didn’t know what CSS is. Am gonna try to explain what CSS is in a very least possible way. In web development there’s are three core languages used in front-end development.

1. HTML
2. CSS
3. JavaScript

HTML is a markup language fully known as hypertext markup language. HTML describes the structure of Web pages using markup. HTML elements are the building blocks of HTML pages. HTML elements are represented by tags.

JavaScript

JavaScript, often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a language that is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. It’s the default scripting language of the web.

CSS

Ever wondered what makes things look as they do on the web? Or how to change the design of a page? This is where CSS (Cascading Style Sheets) come in! Below, we’ll explain what CSS is, what it does and what it’s used for!

Let’s take a look…

CSS stands for Cascading Style Sheets with an emphasis placed on “Style.” While HTML is used to structure a web document (defining things like headlines and paragraphs, and allowing you to embed images, video, and other media), CSS comes through and specifies your document’s style—page layouts, colors, and fonts are all determined with CSS. Think of HTML as the foundation (every house has one), and CSS as the aesthetic choices (there’s a big difference between a Victorian mansion and a mid-century modern home).

How Does CSS Work?

CSS brings style to your web pages by interacting with HTML elements. Elements are the individual HTML components of a web page—for instance a paragraph—which in HTML might look like this:

<p>This is my paragraph!</p>

If you wanted to make this paragraph appear pink and bold to people viewing your web page through a web browser, you’d use CSS code that looks like this:

p { color:pink; font-weight:bold; }

In this case, “p” (the paragraph) is called the “selector”—it’s the part of CSS code specifying which HTML element the CSS styling will effect. In CSS, the selector is written to the left of the first curly bracket. The information between curly brackets is called a declaration, and it contains properties and values that are applied to the selector. Properties are things like font size, color, and margins, while values are the settings for those properties. In the example above, “color” and “font-weight” are both properties, and “pink” and “bold” are values. The full bracketed set of

{ color:pink; font-weight:bold; }

is the declaration, and again, “p” (meaning the HTML paragraph) is the selector. These same basic principles can be applied to change font sizes, background colors, margin indentations, and more. For instance. . .

body { background-color:lightblue; }

. . .would make your page’s background light blue, or. . .

p { font-size:20px; color:red; }

. . .will create a 20 point font paragraph with red letters.

External, Internal, or Inline CSS?

You might be wondering how this CSS code is actually applied to HTML content, though. Much like HTML, CSS is written in simple, plain text through a text editor or word processor on your computer, and there are three main ways to add that CSS code to your HTML pages. CSS code (or Style Sheets) can be external, internal, or inline. External style sheets are saved as .css files and can be used to determine the appearance of an entire website through one file (rather than adding individual instances of CSS code to every HTML element you want to adjust). In order to use an external style sheet, your .html files need to include a header section that links to the external style sheet and looks something like this:

<head> <link rel=”stylesheet” type=”text/css” href=mysitestyle.css”> </head>

This will link the .html file to your external style sheet (in this case, mysitestyle.css), and all of the CSS instructions in that file will then apply to your linked .html pages.

Internal style sheets are CSS instructions written directly into the header of a specific .html page. (This is especially useful if you have a single page on a site that has a unique look.) An internal style sheet looks something like this. . .

<head> <style> Body { background-color:thistle; } P { font-size:20px; color:mediumblue; } </style> </head>

. . . a thistle background color and paragraphs with 20 point, medium blue font will now be applied to this single .html page.

Finally, inline styles are snippets of CSS written directly into HTML code, and applicable only to a single coding instance. For example:

<h1 style=”font-size:40px;color:violet;”>Check out this headline!</h1>

would cause one specific headline on a single .html page to appear in violet, 40 point font.

Generally speaking, external style sheets are the most efficient method for implementing CSS on a website (it’s easier to keep track of and implement a site’s style from a dedicated CSS file), while internal style sheets and inline style can be used on a case by case basis when individual style changes need to be made.

So if HTML is the foundation, frames, walls, and girders supporting your website, consider CSS the paint color, window styles, and landscaping that comes on afterward. You can’t get anywhere without putting that foundation up first, but—once you do—you’ll want to follow up with some style, and CSS is the ticket to unleashing your inner decorator.