teleren/devto huggingface dataset:
Agile methodology and stress management
Tags: taskforce, awesomitylab, codeofafrica, agile
Published: 2021-04-10 20:52:34

Greetings,

This week started way different from others we did not have the team building session as usual instead we started the week with a project management session having Joseph leading it, the session was really educational. Joseph worked us through software different project stages and how they may be prioritized in the software development lifecycle. We also get to know different methodologies that can be followed when developing software, we saw that agile methodology is the best over waterfall methodology as agile produces the minimum viable product through the use of scrum iterations. We also get to know more about the roles in agile projects like the PO, Scrum Master, and team members and how they contribute to the project. We also dived into agile stories, sprints, and key behaviors of the scrum team.

This week we were also blessed to have an interesting and fun session with Axel talking about stress and resilience, personally sharing the story of my most stressful moment where I was trying to finish up my university studies, and joining Andela at the same time made me think the way I used resilience to deal with that stressful moment and stood again towards my goals, Axel also gave us some hints on how we can train and practice resilience like creating stressful moments for ourselves in tough time settings to get to know how much things we can achieve in a given time. We also talked about resilience elements which was a good experience mainly with the connection part where we identified 25 people who are connected to us and identified who can be of help and whom I can help.

In technical skills, we upskilled WordPress this week where I enjoyed learning its beautiful features.

This week was relaxing, fun, educational, and interesting. It was a career-boosting week I really enjoyed it. I am looking forward to the next weeks
Why hasn't the 'script' tag gotten a void version, yet? (E.g. 'extscript')
Tags: html, webdev, javascript, watercooler
Published: 2021-04-10 20:21:30

I know some browsers will recognize
```html
<script src="file.js"/>
```
as
```html
<script src="file.js"></script>
```
as that's basically what a void element is.
But, not all browsers do (one being the one I use, FireFox).

Why is this? Either you should be able to smush a script into the second in to the second example's body, OR it should always be a viable option to use the first example, because without either the `script` tag(s) look ugly, and it's wasting some space.

It may not be a huge deal, but I see it as mildly annoying, especially if there are lots of tags grabbing a script from somewhere.
<br/>
<br/>
FOR CLARIFICATION OF FUTURE READERS:
This boils down to, why is there no void tag for loading external elements, like what [InHuOfficial](https://dev.to/inhuofficial) said, with `<extscript src="file.js"/>`.
Javascript ES6: Set
Tags: javascript
Published: 2021-04-10 19:48:36

One of the additions brought on by Javascript ES6 is the <b>Set</b> data type. Set allows us to create a collection of unique* values. The values themselves can be of any data type, from primitive types like numbers, to reference types, like arrays.

Let's look at the simplest way to create and add values to a Set data type using the <b>add</b> method.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6atk5jrn3ar8ch5cunxl.png)

Above, we initialized a new Set named letters. And later on, we added values, in this case, strings, with the <b>add</b> method. What's important to note is that Sets only collect unique* values. Therefore, although we continued attempting to add more c's, the Set did not add those extra c's because it already had one.

Besides add, there are some simple, yet useful, methods we can use with Set: <b>size, has, forEach, clear, delete.</b>  

We can also initialize a new Set and pass in an iterable object such as an array.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkoc41txhgt7h5mjecfb.png)

Above, we initialized a new Set with an array of strings: ['b', 'a', 'c']. That array was iterated over and deconstructed. Note how when we later add an array to the Set using the <b>add</b> method, in this case, ['f', 'e', 'h'], the array stays intact.

Here are few things to remember when using Set:
1) Strings are a valid iterable so they can initialize a set. However, remember the Set will only hold the unique* values in that string.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npn71outasu4n7ujthxx.png)
2) Set also has a <b>keys</b> and a <b>values</b> method. But they will produce the same result: the values of the Set.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r84c4e1iuy1b8i2zz0vd.png)

3) Lastly, aside from forEach we can use a <b>for...loop</b> to iterate over a Set.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4o7m4u1rkkql6t7kj5bn.png)
Quick Tip: Take advantage of the official Next.js examples
Tags: beginners, productivity, codenewbie, nextjs
Published: 2021-04-10 19:45:09

---
title: Quick Tip: Take advantage of the official Next.js examples
published: true
description: Have you ever spent too much time trying to set something up with Next.js? Hopefully this quick tip can help you in the future.
tags: beginners, productivity, codenewbie, nextjs
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://pgvr.dev/blog/quick-tip-nextjs
---

Have you ever spent too much time trying to set something up with Next.js? Hopefully this quick tip can help you in the future.

The Next.js repository contains one of the most extensive collections of examples I have seen.

[Next.js Examples](https://github.com/vercel/next.js/tree/canary/examples)

So if you are trying to integrate your favorite UI or data fetching library with Next.js there is a good chance they have an example for that already.

This helped me a ton when I was trying to setup server side data fetching with Apollo GraphQL for the first time.

All the examples seem well-maintained too, e.g. the Tailwind example was updated to use the new JIT compiler which is a rather new change.

You can make use of this by copying the code you need or you can create a new Next.js project with an example as the template.

```
npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app
```

Hope this helps :)

[Youtube](https://www.youtube.com/channel/UCx8bwDAyeR5VfXPFk0j70-w) | [Twitter](https://twitter.com/coding_castle)
Welcome to Next.js
Published: 2021-04-02 10:25:41

Next.js (Next) is a web-application framework that allows us to build server-side rendered react applications. It has built-in modules like easy routing and authentication. It has some advantages over a normal react application as well that help with performance and search engine optimization.

Next is different from what most people think of as a react framework, like create react app, which is a client-side rendered  (CSR) javascript application. When you visit a page in a CSR app, no HTML is sent to the browser except for maybe some boilerplate HTML for the javascript to replace. However, in a server-side rendered (SSR) application like Next, each page's HTML is rendered before it is sent down to the browser, where the react application is still loaded into the runtime. The HTML it renders replaces the existing content, and the page is painted and is responsive faster. Then, when you navigate to the next page the framework will render it client-side.

Server-side rendering (SSR) is different from the Create React App (CRA) framework which is a client-side rendered  (CSR) javascript application. When you visit a page in a CSR app, no HTML is sent to the browser except for maybe some boilerplate HTML for the javascript to replace. This is not always good. with search engine optimization (SEO), bots from sites like Google and Twitter don't use javascript and won't see the content.

 However, in Next.js, each page's HTML is rendered before it is sent down to the browser, where the react application is still loaded into the runtime. The HTML it renders replaces what was already there, meaning the page is rendered and responds faster. Whenever the user navigates to another page in the application, it is loaded client-side, and the props for that component are loaded in automatically via the next framework. 

One of the benefits of using Next.Js is that you don't have to write as many API requests. You can get your data in node on the server-side and pass it to the component as props when it is rendered by the server. This means that you no longer have to write nearly as many requests when building an application with a framework like CRA. Using an ORM like Prisma, you can easily make requests to your database in your component files. This can be especially useful in cases where you want to display content that is already stored somewhere, like a database or CMS, and are not worried about user-submitted data. 

With many benefits provided out of the box and many more with official modules provided by the Next team, it makes sense why this react framework has taken off recently. If you are looking to build a frontend application with react and want good SEO, Next is a good choice.
Generate Temporary Signed URL from s3 in Laravel
Tags: laravel, php, aws, s3
Published: 2021-04-10 19:36:07

What is AWS?

Amazon Web Services (AWS) is the world’s most comprehensive and broadly adopted cloud platform, offering over 200 fully-featured services from data centers globally.

Amazon Web Services is a subsidiary of Amazon providing on-demand cloud computing platforms and APIs to individuals, companies, and governments, on a metered pay-as-you-go basis.

What is AWS S3?

Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface. Amazon S3 uses the same scalable storage infrastructure that Amazon.com uses to run its global e-commerce network.

Sometimes, all you want to do is generate temporary URLs for files that you have stored on your AWS S3 bucket. For instance, you would want to use this to prevent the hotlinking of images.

Laravel provides an easy way to do so. To create temporary URLs of files.

https://techvblogs.com/blog/generate-temporary-signed-url-s3-laravel
How to install and Secure Redis on Ubuntu 20.04
Tags: linux, ubuntu, redis
Published: 2021-04-10 19:32:12

Redis is an open-source (BSD licensed), in-memory data structure store. You can use it as a Memcached alternative to store simple key-value pairs. Moreover, you can use it as a NoSQL database or even a message broker with the Pub-Sub pattern. Redis is written in C programming language. The Redis project is developed and maintained by a project core team and, as of 2015, is sponsored by Redis Labs.

This tutorial will help you install the Redis server and PHP extensions on an Ubuntu 20.04 LTS system.

https://techvblogs.com/blog/install-and-secure-redis-on-ubuntu-20-04
Flutter Horizontal slide Menu
Tags: horizontalmenu, flutterhorizontalmenu
Published: 2021-04-10 19:29:51

Using this code you get simple #HorizontalSlideMenu which has simple colors you can put your own widgets their...
this is my first post hope it helps you...! 

Container(
          height: 50,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 80.0,
                color: Colors.red,
              ),
              Container(
                width: 80.0,
                color: Colors.blue,
              ),
              Container(
                width: 80.0,
                color: Colors.green,
              ),
              Container(
                width: 80.0,
                color: Colors.black54,
              ),
              Container(
                width: 80.0,
                color: Colors.orange,
              ),
            ],
          ),
        ),
How to Install Node.js and NPM On Ubuntu 20.04
Tags: linux, ubuntu, node, javascript
Published: 2021-04-10 19:26:31

Node.js is a powerful JavaScript runtime. It’s a free and open-source cross-platform solution that’s primarily for server-side programming. It allows developers to have scalable backend functionality using JavaScript. Most of the time, it’s used to create back-end apps. However, it’s also popular for full-stack and front-end solutions. npm is the default package manager for Node.js and the world’s largest software registry.

In this blog, we will show you three different ways of getting Node.js installed on an Ubuntu 20.04 server:

1. using apt to install nodejs package from Ubuntu's default software repository.

2. using apt with an alternate PPA (Personal Package Archive) software repository to install specific versions of the nodejs package.

3. installing nvm, the Node Version Manager, and using it to install and manage multiple versions of Node.js.

https://techvblogs.com/blog/install-nodejs-and-npm-ubuntu-20-04
Eloquent Query Scope in Laravel
Tags: laravel, php, mysql, webdev
Published: 2021-04-10 19:20:59

Laravel Eloquent Queries are the Best one. We are used. Eg: Post::all(); this returns all records. But we need to build our custom queries and use that where we want. So here Laravel provides a solution. That call Model Scope.

If you are writing eloquent queries in your Laravel project and write the same logic in your queries repeatedly, then query scopes might be of use to you. Laravel provides a solution for wrapping your conditions into a readable and reusable statement called Scopes.

Laravel has two scopes: Local Scope and Global Scope.

This article only discusses Local Scopes.

https://techvblogs.com/blog/eloquent-query-scope-laravel
Install Nginx on Ubuntu 20.04 LTS
Tags: linux, nginx, ubuntu, webserver
Published: 2021-04-10 19:17:20

What is Nginx?

Nginx is a Fast, Open Source, a high-performance web server that commands a huge market share in production environments. Nginx is one of the most popular web servers in the world and hosts some of the largest and highest-traffic sites on the internet. Nginx provides a content management cache, and a reverse proxy feature for HTTP and non-HTTP servers.

In this article will show you how to install, Services Manage, and Adjust Firewall.

https://techvblogs.com/blog/install-nginx-on-ubuntu-20-04
Install Apache on Ubuntu 20.04 LTS
Tags: apache, ubuntu, linux
Published: 2021-04-10 19:13:10

What is Apache?
Apache HTTP server is the most popular web server in the world. It is a free, open-source, and cross-platform HTTP server providing powerful features which can be extended by a wide variety of modules.

This tutorial explains how to install and manage the Apache Web server on Ubuntu 20.04.

How to install Apache on Ubuntu

Before installing new software, it's a good idea to refresh your local software package database to make sure you are accessing the latest versions. This helps cut down on the time it takes to update after installation, and it also helps prevent zero-day exploits against outdated software.

https://techvblogs.com/blog/install-apache-on-ubuntu-20-04
Implement Passport In Laravel
Tags: laravel, php, passport, mysql
Published: 2021-04-10 19:10:28

We learning how to implement full user authentication and a simple form of access control in an API using Laravel and Passport.

Installation Requirements:

PHP 7+, MySQL, and Apache (All three can be installed simultaneously, using XAMPP.)
Composer
Laravel 5.3 or More
Laravel Passport. Laravel Passport is an easy-to-use OAuth2 server and API authentication package.
Postman, cURL, and Insomnia to check API
Text editor
Laravel Helpers (For Laravel 6.x and up)

https://techvblogs.com/blog/laravel-passport-authentication
An introduction to using react-form-elements 👩🏻‍💻
Tags: react, npm, webdev, beginners
Published: 2021-04-10 19:03:19


 
###Hello World 😁
In my latest project, I wanted to build a form to submit users' input to our database. Instead of coding a long and boring form element and grabbing all the input values one by one, I have found a very useful and user-friendly solution to help me doing all this in one click. Before I am going to write more about react-form-elements to explain the implementation, here is a quick demo  ⬇

##Demo Form  🖥
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xairzh3aao6wl7v8k57e.gif)

<p>&nbsp;</p>

## Let's Get Started 😉


#### 1.Installation ⚒
First of all, if you use this make sure you have already included React, and it is available as a global variable. Than you can install the package into your own app from npm  with code below ⬇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzbvxruchv7w3sdueag9.png)

<p>&nbsp;</p>

Next is in the corresponding component, we have to import the package. They have lots of different input elements that we can choose from, eg, input, checkbox, URL Input, etc. You can always refer to their document for the options. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj72k0okphwprfzyktmw.png)

<p>&nbsp;</p>

#### 2.Creating Input component ✏

Apply the Form to the return of your functional component, change your attribute name accordingly. The Form has an inbuilt structure and all the information will be set in the console once we click on the submit button.

<p>&nbsp;</p>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ij7qxshk5zklhic7nx6.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7u639af6dj6ax6j0vnm.png)

<p>&nbsp;</p>


To implement this information with our project, simply create a state and use setState for the value.

``onSubmit={data => {
        console.log(data)
        setState(data)
``

<p>&nbsp;</p>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ia7uge6ewsb3vgebgoy.png)

<p>&nbsp;</p>

Look 😍 ! We now have our data in the state and can apply it accordingly in different components. [react-form-elements](https://www.npmjs.com/package/react-form-elements) helps us to save time in building forms and get all the users' input in one click, and the implementation is easy to customize. Don't forget to try it out in your next react project!
🎉 🎉 GOOD LUCK 🎉 🎉
Why use Microservice Server Architecture?
Published: 2021-04-10 19:02:49

Traditionally, software server architecture has been described as a monolith, where all of the resources are hosted in one large environment. Within the past few years, DevOps specialists at many different countries around the world have been able to design a far more approved approach to server architecture called microservices.

## What are Microservices?
A microservice is a small piece of the backend of a software application which runs in a virtualized environment. We can use these microservices to handle highly specific operations like authorizing a login or retrieving data from an API. By splitting these tasks up, we can encapsulate the functionality of the backend into thousands of tiny container instances. These containers can be running anywhere around the world, and we have the ability to destroy them and rebuild whenever we want. So, why do we take this approach to server architecture?

## What is a Monolith?
A monolith server architecture basically keeps all of your resources, APIs, nodes, etc. in one large server. All of the infrastructure for your application is kept together, which means if one thing fails, it can crash your entire project. Now not all the software can be kept in one place, but the majority of it is kept together and all directly connected.

## Advantages of Microservices
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynfszp73iqb9yqn05m9n.jpg)
Microservices bring a unique advantage over the monolith server architecture. We can completely separate all the different functions of our backend into separate parts that can all be scatter across our network. This way their problems and errors don't affect each other. Also, this gives us the ability to update, delete, move, or create new microservices very easily. Because containers are so flexible, we can restart them and put them wherever we want. Lastly, we also have the ability to expand by simply adding new containers with microservices. We don't have to worry about the affect of adding and removing nodes on the entire project, as our system can be easily scaled without having to understand the inner workings of every container.

As you can see, there are some major benefits to using a microservice architecture. It gives large projects the ability to separate concerns between the different functions of their software. Along with this, we can easily scale a highly flexible system, all by using configured code running in virtualized containers.

## Video Demo
{% youtube WwmZYTMTYrU %}
From Travel Agent To Frontend Developer.
Tags: javascript, frontend, junior, react
Published: 2021-04-10 19:01:17

After five years working as a travel agent in two of the largest agencies in Sweden, the world went upside down. Covid-19 was the most common word on everybody's lips. The travel industries stopped and so did the agency's bookings. It was time for me to move on, look forward and start a new journey. 

I asked myself what my priorities are. I am a curious, creative person and I would like to include that in my daily work. I want a job with a good future, with the possibility to not only work long days at the office I wanted to have the possibility to work remotely.

I found a 4-day online course to try if coding was something for me. Even though I thought this profession was for the supersmart, nerdy people - I loved it.  I always think if he or she can do it, of course, I can do it! 

I jumped on the super intense 24-weeks boot camp with Technigo on remote to become a frontend developer and here I am halfway through. The last weeks have been a rollercoaster with ups and downs but every Sunday I hand in a new good working project.

Something that was challenging, in the beginning, was how to start thinking like a developer. I learned as a travel agent that there is one way to do things. One way to book a safari tour, one way to book a piece of extra luggage, and one way to rebook a flight. But in a world full of code there is plenty of ways to code and get the same outcome. There is no right or wrong as long as it runs, but of course, there is something called clean code.

Another thing I thought was difficult, and I still do, is that it's ok to use Google when I don't have the answer to solving a problem. I'm still learning that it's OK to copy the code and that there is no such word as stealing. 

Good artists borrow, great artists steal — Pablo Picasso 😎
How to use multiple database connections in Laravel
Tags: laravel, mysql, php, webdev
Published: 2021-04-10 18:34:01

Laravel is a free, open-source PHP framework, created by Taylor Otwell. It follows a Model-View-Controller (MVC) design pattern. Laravel reuses the existing components of different frameworks which helps to create a perfect and outstanding web application. If you are familiar with PHP, Advance PHP it will make your task easier. Laravel is secure and prevents web attacks using their CSRF (Cross-site Request Forgery) protection.

While developing a web application some times we need to use multiple databases because of project requirement or large scale projects, in this time laravel allows to use multiple database connections. You can easily learn how to use multiple databases with laravel in this blog.

https://techvblogs.com/blog/how-to-use-multiple-database-connections-in-laravel