teleren/devto huggingface dataset:
Meet the Tanukis: Abubakar Siddiq Ango
Tags: gitlab, community, devops
Published: 2021-09-01 18:21:50

Meet the Tanukis is a stream about the amazing Team members at GitLab. Each episode focuses on a team member discussing issues in tech that are important to them. This episode features Abubakar, Developer Evangelism Program Manager at GitLab!

{% youtube vU36J_IgbvM %}

Links: [Abubakar's Website](https://abuango.notion.site/Abubakar-Siddiq-Ango-11027ccda4d542d9a67d931fd20874a6)

[Abubakar at KubeCon EU 2021 "Improving the Impact of Diversity Initiatives in Africa"](https://www.youtube.com/watch?v=UY5h0GAp7Ho)

[Contribute to GitLab!](https://about.gitlab.com/community/contribute/)
Nextless V1 launched: Full-Stack React SaaS Boilerplate with Auth and Payment
Tags: react, webdev, showdev, nextjs
Published: 2021-09-01 18:09:58

---
title: Nextless V1 launched: Full-Stack React SaaS Boilerplate with Auth and Payment
published: true
description: Build your SaaS product better and faster with React SaaS boilerplate template. It includes Authentication, Payment, Landing Pages, User Dashboard
tags: react, webdev, showdev, nextjs
cover_image: https://nextlessjs.com/assets/images/hero-image.png
---

Nextless.js V1 is now available after one month of refactoring to make the code easier to start any SaaS products.

![Landing page and user dashboard](https://nextlessjs.com/assets/images/hero-image.png)

Built with the latest technologies:

- Next.JS
- React
- TypeScript
- Tailwind CSS
- React Hook Form
- ESLint, Prettier and Husky
- Serverless framework
- AWS CDK 
- Authentication
- Stripe Integration

Find more information at [Nextless SaaS Boilerplate Template](https://nextlessjs.com)

Setup a landing page for your SaaS business and get a user dashboard without losing any development and design time. Here is an example:

![Nextless.js Landing page Top](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjqf5oon5op351ud9t35.png)

![Nextless.js Landing page Bottom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldc1zlt2ne9qe41sgmog.png)
  

![Nextless JS User Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj394v7ujx5zkx3r3me8.png)

Find more information at [Nextless SaaS Boilerplate Template](https://nextlessjs.com)
Practical use of array.reduce() in JavaScript
Tags: javascript, react, beginners, tutorial
Published: 2021-09-01 18:03:10

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qgtmos0cf2ry60z5ruv.jpg)
###Definition 
The reduce() method executes a reducer function for each value of an array. reduce() returns a single value which is the function's accumulated result. 

###How reduce works: 



```javascript
var numbers=[10,20,30];

var sumofAllNumbers=numbers.reduce(function(sum,number){
	return sum+number;
},0);

console.log(sumofAllNumbers);
```

*reduce()* has two parameters
1. reducer/iterator function  e.g function(sum,number)
2. Initial value  0 in this case  (optional)
  
reduce() method will iterate over each number and add it to sum variable as shown in example. 
*initial value=0
*iteration 1 : sum=10
*iteration 2 : sum=30
*iteration 3 : sum=60
*return 60 to sumofAllNumbers variable



###Practical Example

####To Balance Parenthesis

#####For example : Following are valid parenthesis
1. ()()()
2. ((()))

#####Invalid parenthesis
1. (()))
2. )()


```javascript
function balanceParenthesis(string) {
    if (string.length > 0) { // Check input is valid string 
        return string.split("")
            .reduce(function(counter, char) {
                if (counter< 0)// special case when we have ) at start
                    return counter;
                if (char === "(")
                    ++counter;
                else
                    --counter;
                return counter
            }, 0);//counter as initial value
    }
    return -1;
}

//if functions return 0 then Parenthesis are balanced
if (balanceParenthesis("()()()") == 0)
    console.log("Parenthesis are balanced")
else
    console.log("Parenthesis are not balanced")
```

First we converted provided input to array using string.split("")
Then we applied reduce function to iterate over each character 

In reduce method we checked if character is '(' then we increased counter value by 1 
other wise decreased the value by -1 for ')'

Special check *if(counter< 0)* added to check cases like  ")(" as we will have counter value 0 in this case 

So in result if the counter value is 0 then parenthesis are balanced otherwise these are not.
JS Objects {Day -19}
Tags: 100daysofcode, javascript, beginners, webdev
Published: 2021-09-01 17:57:47

#100daysofcode {Day - 19}

Today I've learned more about Objects (method, keys, values, entities, seal, freeze). also learned objects using for-in loop and the difference between bind, call, and apply. Also learned this keyword in javascript.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjcmwj872uiwajshhe6j.png)


#javascript #programming #coding #devcommunity
Compiling Upstream Kernel Fedora
Tags: linux, fedora, kernel
Published: 2021-09-01 17:50:40

## Introduction
I have been using Linux as my main OS for a long time now. I have always wanted to contribute to the Linux Kernel, but the task has always seemed daunting. But a few days ago, I found out about the [Linux Kernel Mentorship Program](https://wiki.linuxfoundation.org/lkmp) and decided that this might be the best way I can get started with Linux Kernel Development. 
There is a prerequisite course [A Beginner’s Guide to Linux Kernel Development](https://training.linuxfoundation.org/training/a-beginners-guide-to-linux-kernel-development-lfc103/) that needs to be completed before applying. It is written for Ubuntu, and I had to do some additional things to make it work for Fedora, so I decided to write and document it.

## Install Dependencies
I use [toolbox](https://github.com/containers/toolbox). So I will be building the kernel inside the container. Thus these dependencies need to be installed inside the container.
```
sudo dnf install ncurses-devel pesign bison flex qt5-qtbase-devel libXi-devel gcc gcc-c++ lld elfutils-libelf-devel openssl-devel dwarves
```
## Copy Current Config
I just used the current kernel config instead of starting from scratch.
```
cp /boot/config-uname -r* .config
make oldconfig
```
You might need to select some new features that have been added in the kernel recently, but the default values are fine for the most part.
## Build 
Run the following:
```
make bzImage
make modules
```
## Install
We now switch back to the system terminal. Then run the following commands:
```
su
make modules_install
make install
```
The new kernel should automatically show up in Grub now.

## Additional Resources
[Fedora Wiki](https://fedoraproject.org/wiki/Building_a_custom_kernel)
HTML day 1
Published: 2021-09-01 17:43:46

Hi
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32oo9h58hgaepxunb5zs.png)
where h1 tag represents main headline.
h2 is sub headline.
p tags used for writing paragraph 
NOTE: Headline and Paragraph should have closing tags.
My first 3D game will release soon (free)
Tags: gamedev, unity3d, programming
Published: 2021-09-01 17:35:09

In late December last year I started working on my first 3D game in my free time. It's a parkour platformer game settled in space. Your on a space station that is still in the building process. Because Aliens have invaded it and sabotaged its systems, you need to fight your way through the levels, find a secret colour code and enter it at the end to repair the systems of the space station, to exile the Aliens.

The game will release on Friday for free on Itch. I've made a short Trailer, which you can check out here: https://youtu.be/0BITALAyRHM
Consider subscribing to my YouTube Channel to not miss the release of my game.
Configuration for prettier
Tags: prettier
Published: 2021-09-01 17:29:05

![prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bam2h89e435j5iifv9ne.gif)

##What and Why prettier?

Prettier is a code formatter, which supports many kinds of language from Programming languages (JXS, TS), to Style sheets (CSS, SCSS), and also Serialization languages (YAML).

As we can see in the gif above, it will take a lot of time to arrange those lines, and even more for HTML. `Prettier` is the light from heaven, just saving the file everything will be in order 

##Configuration
###My configuration
My beloved configuration is below
```
{
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "overrides": [
    {
      "files": "*.yaml",
      "options": {
        "tadWidth": 2,
        "printWidth": 40,
        "singleQuote": true
      }
    }
  ]
}
```

###To use
- First of all, we need to install [Prettier](https://www.npmjs.com/package/prettier) with flag `--save-dev`, because it is just useful for development, but not production. Without `--save-dev`, our production package will containts many unused modules ([reference about dependencies vs devdependencies](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies))
```
# npm
npm i --save-dev prettier

# yarn
yarn add --dev prettier
```
- Create 2 files `.prettierrc`, `.prettierignore` in our root level, the former is for configuration and the latter is for ignoring directories. Usually, I ignore `build` and `coverage`, which is generated from build production package and test result corresponding.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2x74kcrk7v3nl2p6pph.png)
- Done!!

_Notes:_ Instead of `.prettierrc`, `prettier` also supports a wide range of types. Please take a look at [Configuration File](https://prettier.io/docs/en/configuration.html).

##Other options
You can find more interesting ways to use it in [prettier documentation](https://prettier.io/docs/en/options.html), such as lint-staged, pre-commit, and so on.

I usually due with CloudFormation, so besides a general configuration, I `overrides` it with my favorite style for `.yaml`. You can find your own one while [playing around](https://prettier.io/playground/) with it.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbaqumw7c2ykkwgxbfxi.png)

[Paypal](https://paypal.me/DantisMai).

_I hope this post helps you find your style in your developer journey. I am really happy to receive your feedback on this article. Thanks for your precious time reading this._
Getting started with jetpack compose
Tags: android, jetpackcompose, kotlin, composecomponents
Published: 2021-09-01 17:28:54

1. Basic components
https://howtodoandroid.com/jetpack-compose-components
2. Modifiers
https://howtodoandroid.com/jetpack-compose-modifiers
3. Layouts
https://howtodoandroid.com/jetpack-compose-layouts
4. Constraint Layout
https://howtodoandroid.com/jetpack-compose-constraintlayout
5. Scaffold Layout
https://howtodoandroid.com/jetpack-compose-scaffold-layout/
Redux: Combining Reducers
Tags: redux, react, javascript, statemanagement
Published: 2021-09-01 17:00:39

Today I will be discussing why and how to combine reducers in a Redux managed application. 

## Questions for Understanding
1. What is Redux?
2. What is a reducer?
3. What is the Redux store?
4. What is a library?
5. What is state?
6. How is state in Redux different than state in React?

:speech_balloon:Let's keep these questions in mind during our discussion today!:speech_balloon:

## Combining Reducers

Here is an example of using "combineReducers" in my latest project:

```js
// reducers/index.js

import { combineReducers } from "redux"
import userReducer from "./userReducer"
import bookmarkReducer from "./bookmarkReducer"
import categoryReducer from "./categoryReducer"

const rootReducer = combineReducers({
  users: userReducer,
  bookmarks: bookmarkReducer,
  categories: categoryReducer
})

export default rootReducer
```

"combineReducers" is an utility function given to us from the Redux library. Thus, I import it at the top of my file. "Utility" meaning it provides our application some behavior and does a job for us. This job, its purpose, (as the name gives away) is to store all of an application's reducers in a single reducer. Combination. In the case of my application, it stores all of my reducers in a constant I declared called "rootReducer". 

Within my rootReducer, I call on combineReducers() to accept some objects and set each object to be a key in my root state object of my application. 

I import all three (3) of my reducers: userReducer, bookmarkReducer, and categoryReducer from their delegated files.  Then within my combineReducers() utility function I assign each of my reducers to a key. The key name can be anything you choose, but by standard it is a good idea to reflect the name of the reducer. 

Hence:
```js
 users: userReducer
```

combineReducers, in effect, splits the root state of an application and delegates different parts of the state to a reducer. 

In our ReduxDevTools console, we can see this effect take place: 

![Screen Shot 2021-09-01 at 12.54.37 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um02v2m6vdzzx9o5kl3i.png)

We can see all three (3) key-value pairs created by combineReducers(). Once one is expanded, we can see the state returned by that individual, specific reducer:

![Screen Shot 2021-09-01 at 12.55.18 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32trz8ing0r1hisatd4r.png)

:speech_balloon::speech_balloon::speech_balloon:

This is a simplified explanation of combineReducers(). Despite its nature, I find it helpful to look at the basics + key concepts of something so complex like Redux. Whether you are a beginner developer or been doing this for years, I hope this has found you well. 

:speech_balloon:Comment below to continue the discussion + feel free to ask any questions!:speech_balloon:
Tasks Assigned to me for a role as a Frontend Developer at HypeMail.
Tags: webdev, javascript, react, css
Published: 2021-09-01 16:48:30

##These are the two tasks that they assigned to me for this role.
1. Task One :
![task1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kw94ggvav5oo5qam3ow.png)

2. Task Two : 

![task2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6unwiw9wij2mr8behvh.png)

I found these tasks simple, only there is a small part that is a bit time taking in the first question 3rd sub question.
Which was to create a div for every user input and every third div should have a background color sky-blue as shown in the image but I did it by modifying the same logic which is used for building TODO list in react.

##And I got selected for the interview 😀😀.
 
GitHub Repo : {% github Aman2221/INTERNSHIP_TASK %}

Thank You❤️️❤️️
Low-Code: Browse and Form
Tags: lowcode, php, wizardstoolkit
Published: 2021-09-01 16:18:51

Using the Wizards Toolkit low-code library I quickly build both a Browse List and Update Form.

{% youtube bSHjPLpMdiY %}

This is done by putting in basic **SQL** information into the Wizards Toolkit Builder.  Just the table name, unique identifying column, and columns you want to see and update.

The WTK Builder creates fully functioning **PHP** pages which are easily editable.  The pages handle listing, viewing, editing and saving of data.  What's not seen is it also handles logging what changes were made to an update-log data table.

For the update page I edit it so it uses JScolor to allow picking colors in a very user-friendly manner.
Blog Highlight Section Built with React and `CSS-in-JS`
Published: 2021-09-01 16:17:38

> ⚠️ This is not a tutorial, or anything even informational. Just a place to share my project, utilizing the #showdev tag! Hoping to inspire some creativity. Hopefully you learn about a new resource or get inspired for a new project! 💯

--- 
## Resources 

- [Demo](https://rfc-blog-inspiration.netlify.app/)
- [Inspiration](https://www.uidesigndaily.com/posts/figma-website-section-articles-card-day-1425)
- [Repo](https://github.com/chansen17/rfc-blog-project-inspiration-page-for-blog)

--- 

## Tools
- [React](https://reactjs.org/)
- [Styled-components](https://styled-components.com/)

---

## Project 
![Desktop viewport](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kic6n68mxgkvya3qsrj.png)

--- 

![Mobile viewport](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8c6qv3eeg81666y66n5.png)

--- 

![Mobile continued](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6j07mfxa7dycragahhn.png)

----

![Attribution to design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v06lviykslh5lgydzmlm.png)

---

## Conclusion
That's a wrap on **Blog Highlight Section Built with React and 'CSS-in-JS.'** I hope you liked it. Let me know what you think in the comments section! 

--- 

## Hit me up ⬇️

Don't forget to follow me on [Twitter](https://www.twitter.com/hyggedev) for more byte-sized web dev content!
Also give my [Instagram](https://www.instagram.com/hyggedev) a follow! ✌️

---

<a href="https://www.buymeacoffee.com/hyggedev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

--- 

## Related posts also written by me 😎

{% link https://dev.to/hyggedev/filter-your-react-data-with-basic-javascript-4i9 %}

{% link https://dev.to/hyggedev/how-to-build-a-responsive-react-navigation-menu-with-styled-components-3682 %}

{% link https://dev.to/hyggedev/no-fuss-dark-mode-toggle-with-react-styled-components-3nd4 %}

{% link https://dev.to/hyggedev/easiest-way-to-add-icons-to-your-react-apps-5cgd %}
How to start internationalization in SolidJS with rosetta
Tags: javascript, solidjs
Published: 2021-09-01 16:07:17

In this article, I'll show how to add [rosetta](https://github.com/lukeed/rosetta) - small, but powerful i18n library to [SolidJs](https://www.solidjs.com/) application.

# Rosetta
It is a minimalistic library that caught my attention when I was checking out what i18n libraries are out there - [5 libraries that looked interesting for me](https://how-to.dev/5-javascript-internationalization-libraries-that-look-interesting). Since then, I mostly experimented with [i18next](https://how-to.dev/series/i18next-tutorial), but it feels a bit too big for many use cases.

# Solid
An interesting, React-like framework that reached 1.0.0 in June this year.

# Starting a new project
To start a new application with Solid, the best way is to follow the [documentation](https://www.solidjs.com/guide) and use [degit](https://www.npmjs.com/package/degit) to copy an official project scaffolding:
```shell
$ npx degit solidjs/templates/js solidjs-rosetta
```

After starting the project, we should install its dependencies:
```sh
$ cd solidjs-rosetta
$ npm install 
```

# Dependecies
The only additional dependency we need is rosetta itself:
```sh
$ npm install --save rosetta
```

# Code
For starting my i18n, I'll replace the original `src/App.jsx` with:
```JS
import styles from "./App.module.css";

import rosetta from "rosetta";

const i18n = new rosetta({
  en: {
    hello: "Hello world!",
  },
});

i18n.locale("en");

function App() {
  return (
    <div class={styles.App}>
      <header class={styles.header}>{i18n.t("hello")}</header>
    </div>
  );
}

export default App;
```

The size difference between the build application with rosetta and the same with the translation hardcoded inside the view is:
```
# i18n with rosetta
dist/assets/index.54039bfe.js      1.14 KiB / brotli: 0.54 KiB
dist/assets/vendor.8b5da6db.js     5.73 KiB / brotli: 2.10 KiB

# harcoded value
dist/assets/index.153e60c6.js      1.07 KiB / brotli: 0.51 KiB
dist/assets/vendor.29e4bc78.js     5.29 KiB / brotli: 1.91 KiB
```
About 0.51 KiB - quite impressive, I would say. 

# Working application
With all that in place, the application should looks as follow:
![solid-translate.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jshpuuwq7sovezqhfeix.png)

# Links
* [example respository](https://github.com/how-to-js/solidjs-rosetta)
* [working application](https://how-to-js.github.io/solidjs-rosetta/dist)
* [free video course for SolidJS](https://www.subscribepage.com/freesolidjscourse)

# Summary
In this article, we have built a simple infrastructure for adding multiple languages to an application based on Solid.
LaTeX & Maths: Sub-equations and Matrices
Tags: codenewbie, latex
Published: 2021-09-01 14:44:22

Hello how are you? :) 

Today I will tell you how to create a sub-equation environment, and how to declare matrices and some variants of these. Let's start!!!


## The `subequation` environment

This environment allows us to *put* multiple equations in a single place. We need to declare the `subequation` environment and then put each equation in an `equation` environment 

```LaTeX
\begin{subequations}
    \begin{equation}
        Equation 1
    \end{equation}
...
    \begin{equation}
        Equation n
    \end{equation}
\end{subequations}
```

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxebm5bqdooau0cclsve.png)

Produces

![Screenshot from 2021-08-30 09-57-29](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jmf7a2zv5f2fn6id1jp.png)

But what if we want a subequation not numbered, well we just use the `equation*` environment 

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz3iy8sxz29g7iwxdosj.png)

Produces

![Screenshot from 2021-08-31 11-37-53](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uzqjykuk4e1esmuua3c.png)
 
Remember that you can label any equation in this environment, you can check how to label [here](https://dev.to/latexteada/latex-maths-equation-environment-and-labeling-equations-2j4b) or you can check how to label [here](https://dev.to/latexteada/latex-maths-tags-5g3f)

## Matrices 

The commands to create a matrix are similar to the `table` environment, but here you do not need to declare the number of columns. 
- We use `&` to declare the columns
- We use `\\` to declare a new row 

> You need to put these matrix environments inside a math environment

The most simple command is `matrix`

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojzm4n866fr5ngg7tb9b.png)

Produces 

![Screenshot from 2021-08-31 11-48-45](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5hgvyhu9sz70rm2h347.png)

Wait, this is not a matrix!!! where are the parentheses? 

Well, there are other matrix environments, let's see 

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6trrilbbi96183iphfl.png)

Produces

![Screenshot from 2021-08-31 11-54-43](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3fs82q7e6vweclxibm8.png)


Thanks, this is all for today

Do not forget to follow me on Twitter `@latexteada`
Find out what's new in my portfolio website
Tags: nextjs, webdev, showdev, react
Published: 2021-09-01 16:04:56

I want to share new updated version of my portfolio website.
Here is the list of new features and changes that I made in my portfolio website.

* Color Mode Switcher for links and tags

* Search feature for articles

* Updated website color mode switcher icons and added animation

* Fixed outline issue of links and buttons

Website link: [ma-ahmad](https://my-portfolio-ma-ahmad.vercel.app)
Github repo: [https://github.com/MA-Ahmad/myPortfolio](https://github.com/MA-Ahmad/myPortfolio)

![open-source-page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg7q5zs44g2u18uwimzo.png)