teleren/devto huggingface dataset:
Day 33 of 100 Days of Code & Scrum: Skeleton Layout for My Hero Banner
Tags: 100daysofcode, beginners, javascript, programming
Published: 2021-11-10 11:17:22

Greetings, everyone!

Today, I got to spend a lot of time working on my website as well as learning Next.js. I was also deciding on the layout and using other web development agencies as a reference. Either way, it was just a relatively smooth day for me.

Anyway, let's move on to my daily report!

## Yesterday

I just reviewed some Next.js and Scrum concepts.

## Today

Here are the things I learned and worked on today:

### Next.js

- I coded the hero banner skeleton layout for my homepage.
- added a temporary hero banner message (most likely will replace later).
- still contemplating on what kind of design the hero banner will have (color scheme, image, CTAs).
- I decided I would just go for a single page MVP first, with everything on the homepage and then make other pages afterwards.

### Scrum

- I did some practice flashcards for Scrum.
- reviewed some of the things I've learned before.

### Typescript

- I managed to squeeze in a little bit of Typescript by reading the handbook.

Have a good day, everyone!

![Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

### Resources/Recommended Readings

- [Official Next.js tutorial](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website)
- [The Typescript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Mikhail Lapshin's Scrum Quizzes](https://mlapshin.com/index.php/scrum-quizzes/)

### DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
Configure SSH passwordless
Published: 2021-11-10 11:12:10

Now i can show how to configure SSH passwordless on Ubuntu Server. You can use SHH passwordless when you need to login without authentication. You need to config this on your host or laptop, not in VM or server side. 
```yml
$ ssh-keygen

Generating public/private rsa key pair.
Enter file in which to save the key (/home/ansible/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/ansible/.ssh/id_rsa.
Your public key has been saved in /home/ansible/.ssh/id_rsa.pub.

$ ssh-copy-id demo@172.16.238.20
$ ssh-copy-id demo@172.16.238.10

```
after that, now you can login to Ubuntu Server without any authentication
```yml
$ ssh demo@172.16.1.20
```
Code owners and review in GitHub
Tags: github, git, codereview, productivity
Published: 2021-11-10 11:07:11

Code review is one of the standards for good code quality and knowledge sharing inside teams. During my carrier, I have seen a lot of different setups, and some of them are better than others.

We are using GithHub PRs as a moment for quality control. It allows us to establish rules when a code from a working branch can be merged with the development branch. 

One of the basic rules is code review. All PRs have this type of protection. At least one member of the architect team should give its approval and at least two other developers. 

The other gate is that at least one of the code owners of changed files should also do a code review. The concept of code owners is not a well-known functionality of GitHub, but we found it very powerful and valuable. 

Details about this functionality you can find on [GitHub](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners) and examples you can see at [todo example](https://github.com/alchemycloud/todo/blob/master/CODEOWNERS). 

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnagfauhb3gvrema7r11.png)
No alt text provided for this image
The good thing about code owners is that any file or folder in the code can have different owners or GitHub groups, and by it, you can make sure that the right people have done code reviews.

Also, in the case of the larger PRs, the reviewer can adjust the filter to see only files you are responsible for, speeding up the review process.
![Filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x7n4z1m9x9lve0ybauq.png)
Building Apps With Bubble.io
Tags: beginners, todayilearned
Published: 2021-11-10 10:50:19

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

If you want to build an app but don't have any skills for coding or maybe you just know little, I think bubble.io is one of the answers. Bubble.io is one of the low-code development platforms, this amazing tool allows you to create a website application with just a few steps.

You can go to the website [https://bubble.io/welcome]

Bubble Also provides you step by step how to use this platform, for websites and mobile web.

![Bubble lesson](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf4xois350n18ljeli3a.png)

Bubble Pricing is cheaper compared to other platforms.

![Bubble pricing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8idkdjpkgpyrdwavwthe.png)

Even though bubble.io is a great platform but there is some concerns about scalability, speed performance, and security. I have my list of pros and cons about this platform.

##### Pros
1. Very easy just drag and drop
2. Building apps faster compare than traditional hand-coding
3. There are s many free plugins that you can use
4. You don't have to set up a server or hosting

#### Cons
1. Speed performance is not so good
2. I'm not sure if bubble.io can handle such complex logic
3. There's no versioning! If you did something wrong in production there's no going back.
4. Scalability. The capacity limit for production planning is just 50 GB.


I think that's my impression of bubble.io. Cheers!
DPS909 - Lab 4
Published: 2021-10-09 00:43:26

For this week in open source, we were assigned to work on another students repository. We had to implement a configuration file for the students static site generator. By adding a new argument ```--config or -c```, we needed to make the static site generator be able to identify this argument and look for a JSON file. The purpose of this implementation was to give the user the ability to have a central config file that contained all the arguments that they wish to execute. This would lead to a cleaner argument list when executing the program.

I began working on [a-rokay SSG](https://github.com/a-rokay/static-site-generator), which was coded in Python (same language as my SSG that I coded). This made the process of understanding the new codebase simple. Luckily enough, the codebase was filled with comments and very intuitive flow of code. I was quickly able to make changes in the __main__ function, which added the new argument, as well as implemented the ability to read JSON files. Python made it a very simple process.

Once I made all the required changes, I submitted a [PR] (https://github.com/a-rokay/static-site-generator/issues/10). After a-rokay made comments, I was able to make the required changes, so that my code matches the exact specifications of how the owner prefers the code. 

The same story applied to me, when a-rokay worked on my SSG to implement the configuration file. I used git commands to make a remote of his fork. I was then able to review the code, and test it. Once everything checked out I fetched the latest changes, and used git merge to merge the branch into my main branch.

Overall, this lab helped me introduce myself to git commands such as git fetch and git remote. The difficulty of the lab was about a 40%, which included the actual logic behind the JSON file reading.
Shortcuts for Dialog Box Options in MS Excel!
Tags: excelshortcuts, shortcutsfordialogbo, excel
Published: 2021-11-13 03:09:48

---
title: Shortcuts for Dialog Box Options in MS Excel!
published: true
date: 2021-11-10 10:37:00 UTC
tags: Excelshortcuts,Shortcutsfordialogbo,Excel
canonical_url: https://geekexcel.com/shortcuts-for-dialog-box-options-in-ms-excel-365/
---

## Dialog Box Options:

In this article, we will learn the  **shortcut keys to dialog box options**  in Excel 365.

The dialog box has many categories like general, formula, data, quick access toolbar, etc. Here we have listed some available shortcuts that are related to dialog boxes in Excel. You just click on an  **operation name**  or  **find more information**  to know the complete description of that operation with examples.

| **S.No** | **Operation** | **Windows & Mac Shortcut Keys** | **Read More** |
| 1 | [**Move to Next Control**](https://geekexcel.com/simple-shortcut-to-move-to-the-next-control-in-ms-excel-365/) | Tab  
  
  
Tab  
  
 | [Find more information](https://geekexcel.com/simple-shortcut-to-move-to-the-next-control-in-ms-excel-365/) |
| 2 | [**Move to Previous Control**](https://geekexcel.com/easy-shortcut-to-move-to-the-previous-control-in-excel-365/) | Shift  
Tab  
  
  
⇧  
Tab  
  
 | [Find more information](https://geekexcel.com/easy-shortcut-to-move-to-the-previous-control-in-excel-365/) |
| 3 | [**Move to Next Tab**](https://geekexcel.com/shortcut-to-move-to-the-next-tab-in-microsoft-excel-365/) | Ctrl  
Tab  
  
  
⌃  
Tab  
  
 | [Find more information](https://geekexcel.com/shortcut-to-move-to-the-next-tab-in-microsoft-excel-365/) |
| 4 | [**Move to the Previous Tab**](https://geekexcel.com/quick-shortcut-to-move-to-the-previous-tab-in-ms-excel-365/) | Ctrl  
Shift  
Tab  
  
  
⌃  
⇧  
  
Tab  
 | [Find more information](https://geekexcel.com/quick-shortcut-to-move-to-the-previous-tab-in-ms-excel-365/) |
| 5 | [**Accept and Apply**](https://geekexcel.com/shortcut-to-accept-and-apply-in-the-dialog-box-in-excel-365/) | Enter  
  
  
Return  
  
 | [Find more information](https://geekexcel.com/shortcut-to-accept-and-apply-in-the-dialog-box-in-excel-365/) |
| 6 | [**Check and Uncheck Box**](https://geekexcel.com/shortcut-to-check-and-uncheck-the-box-in-microsoft-excel-365/) | Space  
  
  
Space  
  
 | [Find more information](https://geekexcel.com/shortcut-to-check-and-uncheck-the-box-in-microsoft-excel-365/) |
| 7 | [**Cancel and Close the Dialog Box**](https://geekexcel.com/shortcut-to-cancel-and-close-the-dialog-box-in-excel-365/) | Esc  
  
  
Esc  
  
 | [Find more information](https://geekexcel.com/shortcut-to-cancel-and-close-the-dialog-box-in-excel-365/) |

In this article, you can clearly understand the  **shortcut keys for dialog box options**  in Excel 365 for both Windows and MAC devices. Kindly share your  **feedback**  in the comment section. Thanks for visiting [**Geek Excel.**](https://geekexcel.com/) Keep Learning!!
How To Use Dark Mode in Google Colaboratory
Tags: tooling, webdev, programming
Published: 2021-11-10 10:33:55

Google Colab notebooks allow you to combine executable code and rich text in a single document, along with images, HTML, LaTeX and more. And here is how to turn on dark mode in Google Colab.

Read more: [How To Use Dark Mode in Google Colaboratory
](https://linuxtus.com/use-dark-mode-google-colab/)
MERN CRUD on HEROKU #102 – simply & easy !
Tags: node, heroku, mernstack, deployment
Published: 2021-11-10 10:28:14

> **NOTE : This article assumes you are already into MERN stack**;
beginners may subscribe and come back later then ready to deploy their MERN stack.

---

<u>Consider a project structure</u> :

```diff
├─Project-root (current working directory, cwd)
├───/server/... (React as View)
├───/client/... (Express + MongoDB as Control + Model respectively)
└───.vscode, etc. (optional)
```

<u>Steps to follow</u> :

1) Considering the Project-root or any name of choice as our **cwd** we currently opened our terminal on at running the following :

```diff
cd client && npm run build
```

2) Copy-paste `/build`(built) file from `/client` to `/server` on your GUI

3) **NOTE** : Currently we are in the `/server` : add the following code to your `index.js` :

```javascript
const main = async () => {
// (*)
// other .use() mounts 
app.use(express.static(path.join(__dirname, 'build')));
// ...
app.get('/your-get-route-to-match-axios-call-in-React', async (req, res)=>{

    try{
    /*
       Assuming you are already opened client for db. at (*) position (see above)
       const client = await MongoClient.connect(your_MongoDB_connectionURL);
       const db = client.db(your_database_name);

    */
        let feedback = await db.collection(your_collection_name).find({}).toArray();
        res.status(200).json(feedback);
    }
    catch(e){
        res.send(`<h1>404</h1>`);
    }
})
}
main()
```

I also do consider you have **package.json** in your `/server` (I will exclude most important parts) :

```javascript
// ...
  "main": "index.js",
  "scripts": {
    "start": "node ."
  },
// ...
```

> In case for dot (.) followed in front the node command within package.json , it does correspond to the value of "main" (entry) path ;

---

Last but not least I assume you have optional (not must) of `Procfile` in your  `/server` directory . I suggested (more precisely – prepared) contents of **package.json** so Procfile would appear optional (as default) i.e. default value of `web` for HTTP is :  

```diff
web: npm start
```

4) Lastly , deploy your MERN stack via GitHub integration (or CLI if persisted [[link to the guide 101](https://vanillacamp.hashnode.dev/heroku-crud-101)]) : once deployed through Heroku dashboard , press the link to see the app rendered ...

<u>Possible issue met</u> :

- if you see no error for `heroku log --tail` , but it says `Cannot Get /` , all it means : you must update **environmental variables** on Heroku app settings, the one(s) you added to your .env using dotenv npm package or any relevant | (**HINT** : *those should be of your MongoDB database credentials specifically*)

---

<u>References</u> :

- [Create React App / Deployment](https://create-react-app.dev/docs/deployment/)
- [Heroku / Procfile](https://devcenter.heroku.com/articles/procfile)
Is Android Studio the best IDE to build native app
Tags: android, androidstudio, vscode, mobile
Published: 2021-11-10 10:23:06

In recent years, the ways to make mobile applications have multiplied. The number of development tools to help us has also increased and it is difficult to make a choice.

## Which IDEs are available ? 🤔

Currently, to do development we have the choice between Android Studio for native applications and Vscode for Flutter or React Native.

## Android Studio
❌ Does not support React Native
❌ Consumes a lot of RAM and CPU.(like all google software 🤷🏿‍♀️)
![ramoverheat](https://i.giphy.com/media/10DbmXp6zjPnH2/giphy.gif)

✅ Easy Debugging
✅ Detects many programming errors

## VsCode
❌ Does not support native applications ☠️
❌ No lint for native applications 
✅ Lightweight and fast
✅ Everybody already uses it

## Do we have a winner ? 🏆
The answer is **YES**. But it's not the one you think.

Since recently *vscode* supports native applications with intellisense etc... thanks to [this extension](https://marketplace.visualstudio.com/items?itemName=AntonyDalmiere.android-support&ssr=false#overview). Even if the level of integration is not yet the same as android studio this is a great news because now it is POSSIBLE to use vscode to do native android development.
 
🧑🏿‍💻 Now it's up to you to code and make the future uber. 🚀
AI Services | ThinkPalm Technologies
Tags: ai
Published: 2021-11-10 10:03:13

ThinkPalm is a top AI services provider, assisting businesses in harnessing the power of AI. We have expertise in AI technologies like Natural Language Processing (NLP), Machine Learning, speech recognition, and language translation, which can help your company improve task automation and customer satisfaction. We deploy science & engineering to create smart and intelligent applications that are capable of performing tasks with sublime accuracy. ThinkPalm works with companies of different scales and sizes for different verticals, to help them deploy AI to improve the automation.  
Learn more about our AI capabilities and service offerings: https://thinkpalm.com/technologies/artificial-inteligence/
What do you do to prevent software downtime? Assessing? Tools? Metrics?
Published: 2021-11-10 10:01:28

I hope I'm not the only person who is interested in this question because his IT infrastructure is prone to fail (as any software in the world :)).

For the past few months, I have been in search of information about software downtime prevention, tips and tricks, best practices, recommendations. I came across items like preventative maintenance, personnel training, etc.

I've also heard that vendors have software that predicts downtimes. Consequently, it allows IT experts to receive tech metrics that show the possibility of downtime, track anomalies, reduce unplanned failures, etc. For example, you might be aware of the solutions that diagnose IT infrastructures like InsightCat https://insightcat.com/, Datadog https://www.datadoghq.com/, Dynatrace https://www.dynatrace.com/, etc.

How do you assess your system health and predict downtimes? Do you use a downtime prevention tool for this? What critical metrics indicate that something is wrong with the system?

Thank you in advance.
What's depracted elements
Tags: html
Published: 2021-11-10 10:01:06

depracted elements it's the elements of html (old versions for example html4 ...) and html 5 it's not support this elements.
depracted elements:
fontbase : now you can work by CSS.
Font : work by CSS.
Center : don't use this tage you should to work by CSS.
frame : use iframe tage.
isindex tage : the alternate is form tage
Embed tage : you can work in HTML5 by object tage.
u tage : UL is the alternate.
acronym tage : work by abbr
strike tage : CSS
New in Laravel 8.70 (Make Request With Model)
Tags: laravel, php, programming, github
Published: 2021-11-10 09:51:38

Let's get started quickly Now, when you run 
```php
php artisan make:controller UserController --resource --model=User --requests
```
it will generate two FormRequest classes: `StoreUserRequest` and `UpdateUserRequest`, and will replace them in the Controller.

A short version of `--requests` flag is `-R`, not to mix with `-r` for resources.

It is done by reusing the `make:request` command and calling it with appropriate class name.

This functionality works only together with `--model` flag, otherwise it would be impossible/hard to guess the name for the FormRequest classes.

Also, it works one "layer" above in the Model: 
```php
php artisan make:model Project -mcrR
```
would generate `StoreProjectRequest` and `UpdateProjectRequest`

I hope you enjoy the code.

Source :-
https://github.com/laravel/framework/pull/39120
Flutter - In-app education plugin
Tags: flutter, programming, showdev
Published: 2021-11-10 09:43:57

Close the gap between content and adoption. Provide your users a way to know what they don't know. 

Some months ago we created Pal. 
The vision was to create a complete solution to help developers and market team create better app experience. 
We went a bit too far so today we goes back to a simpler solution. This is the first step of this rework. 

## Introducing Pal widgets 
Pal widgets is an open source plugin that lets you just create helper without any server. This is a complete open source plugin just aiming giving you designed widgets. 
When Pal required you to use a no code solution to create helpers. Pal-widgets let you make helpers with code anywhere you want in your app. 

## Hole Anchored Helper
This is the first widget from Pal that is now available in Pal widgets plugin. This lets you create a designed tuto  (inspired by google tutorials) which creates a fullscreen overlay with just a hole above the widget you wants to explain.
Nearly everything is optional so you can create the experience you want. 
Here is an example of anchored helper that will pop out when user tap on the hole. 

![tuto without buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbvjjrtyznhsq94361u6.gif)

### Here is the widget code 
Pal widget hole anchored helper without buttons. You can freely choose to show or not buttons or customize the onTapAnchor action. 

![code to create anchored pal widget helper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rb1rmqzk0lhv019tqy8.png)

Here is a demo of a tuto with 2 buttons. 

![Tuto with 2 buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxypgdm0wqu6ks4slv4x.gif)

### Wants to change the design ? 
You can create your own anchored helper factory 
But we wants to go further and let you the ability to way more customize your tuto.

## What's next
First we are all open for your suggestions on this project. The goal of pal-plugins is to provide you a complete set of widgets to create your experience. 
Next we are looking to create more design, more customization, more widgets with the same vision. 
Hope you enjoy and creates amazing onboarding experience within your app. 
Share with us what you create. 
We loves to see what you do using Pal. 

## Package links
[Pub dev package link](https://pub.dev/packages/pal_widgets) 
[Github repository](https://github.com/Apparence-io/pal-widgets)
Elon Musk News Api
Tags: api, programming, beginners, opensource
Published: 2021-11-10 09:39:18

Hello 👋 DevCommuinty,Checkout my news api on Elon Musk via @rapid_api 
https://rapidapi.com/rohankadam965@gmail.com/api/elon-musk-news

Please Like💕, Share and Follow for more such amazing products