teleren/devto huggingface dataset:
Top 5 useful Emmet Abbreviations
Tags: webdev, html, vscode
Published: 2021-06-10 09:49:06

There are many Web Developers out there who are beginning their journey and are wasting a lot of time on the same boring HTML code, but after this blog, the coding process will become respectably fast for you, so here are some Emmet abbreviations.

Before moving any further let me explain what is Emmet.
Emmet is a set of plugins that is very helpful for Web-Developers to accomplish high-speed coding, we just have to write small abbreviations and the Emmet will auto-complete for you. 

__1) .container (.className)__ :
This will make a _**div**_ with the class name of container.
![Class Photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/600qa1jvygnb7amhfg6p.png)
<br>


__2) #container (#idName)__ :
This will make a _**div**_ with the id of container.
![Id photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0olb1c1yt2sx5vcmivi6.png
)
<br>


__3) .header>ul>li*4__ :
This will make a _**div**_ with a class of header and then nest a _**ul**_ tag which will consist of 4 _**li**_ tags.
![nest photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pjtsuhw8qisei24xdzx.png)
<br>

__4.) .main>.top+.bottom__ :
This will make a _**div**_ with the main class and then make two sibling elements a _**div**_ with top class and a _**div**_ with bottom class.
![sibling photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qrtk4lhm1d0cdbnpnxe.png)
<br>


__5.)  .header>(div.links>a{Google})+.footer__ :
This will make a _**div**_ with header class and then inside it, there will be 2 elements created, a _**div**_ with links class name and an _**a**_ tag which will have the content Google and a footer as a sibling of the .links _**div**_
![inside photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf73rzd3h3l013yivnp5.png
)

Do visit the community made by me and my friend @sumeet16 for more amazing and informative stuff, and if you wanna recommend something or give feedback, feel free to comment😇!

CodeBox's handles: 
https://linktr.ee/CodeBox
Tools I Use
Tags: tools, devrel, streamer, community
Published: 2021-06-10 09:31:51

**Microphone and Headphones**
Focusrite Scarlett 2i2 (Professional recording)
AudioTechnica BPSH1 (Professional recording)
Trust GXT 232 (Everyday)
Bose 7000 (Everyday)

**Lights**
2 Neewman

**Webcam**
Logitech BRIO 4k
OBS Virtual camera.

**Background**
Greenscale attached to the chair
[This OBS tutorial by Hanselman](https://www.youtube.com/watch?v=Z0HIo0P0-qM) really helped me out.

**Video Recording/Streaming Software**
I show u instant
OBS

**Screen controller**
Switch Res X

**Online Platforms**
Streamyard
Youtube
Twitch

**Post Production/ Editing**
iMovie
Adobe suite

Desktop setup ideas: 
{% twitter 1393617682780598275 %}

What about you, which tools do you use?
Interactive Algorithm Problem Solving
Tags: algorithms
Published: 2021-06-10 09:30:14

Top 13 links to interactively learn algorithm problem solving:

-> Hacker Rank      https://www.hackerrank.com
-> Leet Code        https://leetcode.com
-> Hacker Earth     https://www.hackerearth.com
-> Exercism         https://exercism.io
-> Code Wars        https://www.codewars.com
-> Code In Game     https://www.codingame.com
-> Check IO         https://py.checkio.org
-> Algo Expert      https://www.algoexpert.io
-> Top Coder        https://www.topcoder.com
-> Code Forces      http://codeforces.com 
-> Code Chef        https://www.codechef.com
-> TechGig          https://www.techgig.com
-> SPOJ             https://www.spoj.com
Getting Started With Popular Express framework
Tags: javascript, express, node, backend
Published: 2021-06-10 09:26:26

## Introduction
> A huge portion of the Internet’s data travels over HTTP/HTTPS through request-response cycles between clients and servers.
> Express is a powerful but flexible Javascript framework for creating web servers and APIs. It can be used for everything from simple static file servers to JSON APIs to full production servers.

1. Starting A Server 
Express is a Node module, so in order to use it, we will need to import it into our program file. To create a server, the imported express function must be invoked.
```
const express = require('express');
const app = express();

const PORT = 4001;
app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});
```
> In this example, our app.listen() call will start a server listening on port 4001, and once the server is started it will log 'Server is listening on port 4001'

2. Writing Your First Route
> Once the Express server is listening, it can respond to any and all requests. 
> For example, if your server receives a GET request at ‘/about’, we will use a route to define the appropriate functionality for that HTTP verb (GET) and path (/about). 
```
// Open a call to `app.get()` below:
app.get('/expressions',(req,res, next)=>{
   // Here we would send back the moods array in response
})
```
> Inside app.js, create a route handler to handle a GET request to '/expressions'. For now, give it a req, res, next callback. For now, log the req object inside the callback. Verify that the route works and logs the request by starting your server and clicking the Refresh Expressions button which will send a GET /expressions request.

3. Sending A Response

```
app.get('/expressions', (req, res, next) => {
  res.send(expressions);
});
```
Mozilla Thunderbird MBOX로 PST 파일을 열 수 없습니까?
Published: 2021-06-10 09:19:45

사용자는 Outlook PST 파일을 Mozilla Thunderbird MBOX로 열려면 PST to MBOX 변환기 도구를 사용해야합니다. 이 놀라운 응용 프로그램은 Apple Mail, WLM, Thunderbird와 같은 여러 이메일 클라이언트에서 사용됩니다. 사용자가 사용할 수 있도록 전문적으로 테스트 된 응용 프로그램입니다.

이 놀라운 PST to MBOX Converter 도구를 사용하면 Outlook PST 파일을 MBOX 형식으로 안전하고 안전하게 변환 할 수 있습니다. 이 응용 프로그램은 모든 사용자가 사용할 수 있도록 전문적으로 테스트 된 응용 프로그램입니다. 또한 PST, MSG, EML, EMLX와 같은 형식도 응용 프로그램에서 제공하여 PST 파일을 MBOX 형식이 아닌 다른 형식으로 변환합니다. 파일의 대량 변환은 도구에 의해 수행됩니다. 크기를 고려하지 않고 사용자는 Outlook PST 파일을 변환 할 수 있습니다. 사용자가 변환 프로세스를 처리 할 때마다 정확한 결과가 제공됩니다. 이 응용 프로그램은 호환성이 뛰어나 사용자는 모든 Windows 운영 체제에서 응용 프로그램을 사용할 수 있습니다. 이 PST to MBOX 변환기는 사용자가 사용할 수있는 신뢰할 수있는 소프트웨어입니다. 도구의 메타 속성은 전체 변환 프로세스 동안 그대로 유지됩니다. 사용자가 사용할 수있는 사용자 친화적 인 애플리케이션입니다. <b><a href="https://www.gaintools.com/pst/mbox/">PST에서 MBOX로 온라인 도구</a></b>

응용 프로그램에서 즉각적인 결과 제공

<b>파일 변환 단계</b>

사용자는 PST 파일을 MBOX 형식으로 변환하기 위해 아래 제공된 단계를 따를 수 있습니다.

1 단계 : Windows 운영 체제에 PST to MBOX 변환기 앱 설치

2 단계 : 도구를 시작합니다.

3 단계 : 변환하려는 Outlook PST 파일 추가

4 단계-이제 선택한 모든 Outlook 파일을 미리 봅니다.

5 단계 : Outlook PST 파일을 변환 할 형식 선택

6 단계- "지금 변환"버튼을 클릭하여 단계를 완료합니다.

사용자는 장애물없이 이러한 단계를 수행 할 수 있습니다. 모든 사용자는 위에 제공된 단계를 수행 할 수 있습니다. 파일을 변환하는 동안 어떤 종류의 기술 지원도 필요하지 않습니다.

<b>앱의 특징</b>

이 놀라운 도구의 기능은 다음과 같습니다. 이러한 기능을 철저히 연구하겠습니다.

• 크기 제한 없음

큰 크기의 Outlook 파일에서 작은 크기에 이르기까지 사용자는 Outlook 파일을 MBOX 형식으로 쉽게 변환 할 수 있습니다. 또한 앱은 변환 프로세스 전후의 모든 파일을 스캔하고 미리 봅니다.

• 손쉬운 변환

아무런 노력없이 응용 프로그램은 변환 작업을 수행합니다. 클릭 한 번으로 도구에서 만족스러운 결과를 얻을 수 있습니다. 도구에 어떤 종류의 기술 지원도 필요하지 않습니다.

• 선택적 파일 변환

사용자는 Outlook PST 파일을 자유롭게 선택하여 MBOX 형식으로 변환 할 수 있습니다. 사용자가 쉽게 지원할 수있는 간단한 도구입니다.

• 안전하고 안전한 변환

안전하고 안전하게 모든 Outlook PST 파일은 응용 프로그램에 의해 변환됩니다. 파일의 품질은 전체 변환 작업에서 응용 프로그램에 의해 그대로 유지됩니다.

<b>최종 표현</b>

사용자는 Outlook PST 파일을 MBOX 형식으로 변환하기 위해이 놀라운 PST to MBOX Converter를 사용해보아야합니다. 그 외에도 응용 프로그램은 개인 및 상업용 모두에 적합합니다. 응용 프로그램에 대한 예리한 지식을 얻으려면 사용자가 도구의 데모 버전을 사용해야합니다. 이 데모 버전은 모든 사용자에게 무료입니다. 이 PST에서 MBOX 변환기로 변환 할 수있는 Outlook PST 파일은 거의 없습니다. 또한 사용자에게 평생 업데이트를 제공하고 원하는 양의 파일을 변환 할 수있는 라이선스 버전의 응용 프로그램이 제공됩니다. 사용자는 먼저 데모 버전을 사용해 본 다음 도구의 라이선스 버전을 구입해야합니다.

응용 프로그램의 모든 쿼리가 도구로 해결되도록 24 * 7 시간 도움말 서비스도 앱에서 제공됩니다.
Jenkins : An overview
Tags: jenkins, devops, jenkinstutorial
Published: 2021-06-10 09:14:51

#What is Jenkins ?

It is an automation server which is open source and free for everyone. It automates some parts of software development like build, testing and deployment.

It is made up on Java and hence portable to work on all major operating systems like MacOS, Windows, Linux, etc.

lets now see [Jenkins tutorial for beginners]( https://intellipaat.com/blog/tutorial/devops-tutorial/jenkins-tutorial/) in detail:

#what is the relevence of Jenkins in today's scenario:

In this time of cutting edge technology and new innovations coming up every day, Jenkins plays a major role by giving continuous integration by building robust automation.

Jenkins enhances development and operations process by easy customization, through code testing and wider coverage.

As the big names in the market like e-bay and Facebook are also using Jenkins to increase their performances, it has prompted other businesses to switch over Jenkins. 

In these tumultuous times of pandemic, more and more organizations are coming to digitization. There is huge demand generated for skillful Jenkins developers.

The potential for expansion and great career prospects is appealing to developers. Hence they are coming up in large numbers to learn and apply Jenkins for their organizations.



#Are there any pre-requisites for Jenkins?

##There are just two pre-requisites for Jenkins:

1. A source code repository- that must be accessible. One of the 
   popular repository is Git repository.

2. Working build script- This is the second main requirement that 
   must be checked into source code repository. Example of 
   working build script is Maven script.


##Why Jenkins should be used for continuous integration?

1. Jenkins follows simple installation process.

2. It is open source and free to all users.

3. The integration process is very smooth.

4. 1000+ inbuilt plugins to choose from for various purposes. 
   these plugins makes the process easier and error free.

5. Given that, its a java tool, hence compatible with most major 
   operating systems/platforms.

6. Due to consistent testing, the build errors are detected at 
   integration level.

7. Jenkins is integrated with LDAP server which enables 
   developers notified in real time.

8. Jenkins promotes agile development environment.



#Is Jenkins compatible with cloud computing?

In cloud computing environment, services depend on automation for faster processing and delivery of service to their customers. Jenkins automates the CI/CD model for this purpose. 

Continuous integration and continuous delivery provides automation to the cloud computing services.
Laravel 8 Factories, Seeder
Tags: laravel, programming, php, tutorial
Published: 2021-06-10 08:50:43

In this post i am going to explain about creating dummy data in database by using Laravel Factory and Seed The Database by using Database Seeder.

To generate model factory run the command below.
```php
php artisan make:factory UserFactory --model=User
```

This will generate file in database/dactory/UserFactory.php

Now let's add fake data for each column.

```php
<?php

namespace Database\Factories;

use App\Models\User;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Hash;
use Illuminate\Database\Eloquent\Factories\Factory;

class UserFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = User::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name(),
            'email' => $this->faker->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password' => Hash::make('password'),
            'remember_token' => Str::random(10),
        ];
    }
}

```

Now Add a seeder For UserTable by running command below.

```php
php artisan make:seed UserTableSeeder
```

This command generate a file in database/seeders/UserTableSeeder.php

Next Update the run function of seeder file.

```php
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\User;

class UserTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        User::factory()->count(50)->create();
    }
}

```

Now Run the command below to seed the data,

```php
php artisan db:seed --class=UserTableSeeder
```

The Output result for users listing will be like.
![Users List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjcvzzicypsy4c75l97m.png)

You can access this code on [TechTool India Github Repo](https://github.com/TechTool-India/ExampleProject/tree/factory-seeder).

You can watch the explanation video for more clarity.

{% youtube 6dBSPbJmzIs %}

To Read about [Laravel Free Admin Panel](https://dev.to/shanisingh03/laravel-8-admin-panel-with-login-registration-2a5i)

Thank You for Reading

In case of any query related to LARAVEL.
Reach Out To me.
[Twitter](https://twitter.com/shanisingh03)
[Instagram](https://www.instagram.com/shanisingh03/)
[TechToolIndia](https://youtube.com/techtoolindia)
Dotenv-linter v3.1.0: Overview of key changes
Tags: dotenv, dotenvlinter
Published: 2021-06-10 08:49:52

[Dotenv-linter](https://github.com/dotenv-linter/dotenv-linter) is a lightning-fast linter for checking, fixing and comparing `.env` files.

Look at an overview of the key changes included in this release:
1. Suggestion of changes;
2. Variable substitution;
3. Improving checks;
4. Checking backups;
5. Displaying messages.

More information you can find here:
https://dotenv-linter.github.io/#/whats_new/v310
How do you stay up to date with the latest developments in tech?
Tags: discuss, beginners, webdev, productivity
Published: 2021-06-10 08:29:11

Newbie looking for guidance here - I feel like the more I learn, the more I realise what I don’t know and how much there is still to do. That’s not a problem per se, but it does get overwhelming sometimes. 

Especially working from home during the last year, it wasn't always easy to feel connected to the outside world and find sources of inspiration. To get some new perspectives, I signed up to a number of newsletters, including [Smashing Magazine](https://www.smashingmagazine.com/the-smashing-newsletter/), [CSS-Tricks](https://css-tricks.com/newsletter/254-back-to-basics-focus-styles-morphing-text-and-build-vs-buy/), Chris Ashton's [frequent11y](https://ashton.codes/category/frequent11y/) (accessibility newsletter), [JavaScript Weekly](https://javascriptweekly.com/) and Stefan Judis ['Web Weekly'](https://www.stefanjudis.com/newsletter/) (which I would strongly recommend!) - this was a good start, but it left me wondering how other developers handled this - **How do you keep up to date with the latest developments? How do you sort out what’s worth looking into more thoroughly and what to skip over? What platforms or pages do you get your tech related news from?**

Any tip, recommendation or perspective is highly appreciated :)
I've created my FIRST PERSONAL WEBSITE using Ghost 
Tags: watercooler, webdev
Published: 2021-06-10 08:23:24

34% of all websites on the internet are powered by WordPress. 

Yet, I preferred to go with Ghost 👻 for my personal website. 

Here's why. 😁

1. At our company, we use WordPress to publish our articles. We're using it for a long time. And I needed a change. 

2. Ghost is so clean, faster, and easy to use. 

3. Built-in SEO features [Sitemap, AMP, Structured Data, etc.] 

4. Perfect for bloggers 

5. Minimalistic user interface 

6. Easy to create and publish content 

7. Integrating third-party tools like Google analytics are so easy. 

But...🤔

Every platform has its own pros and cons, right? 

In my time of using Ghost, I faced some challenges, 

1. Theme customization is a bit tricky. [As I'm not a developer] 

2. You can't create a full-fledged website other than blogs. 

3. And a bit expensive. [But if you really wanna learn something new, just go for it]

Do you have your personal website? 

P.S: I've posted the first [article on my website about using and customizing the Ghost theme](https://www.natheemscreative.com/install-ghost-on-local-machine/). Appreciate your feedback.
How to setup static directory for React / React Native ( @app )
Tags: reactnative, reacjs, javascript
Published: 2021-06-10 08:20:32

Sometime you find out that the relative directory stress you up with a thoundsand character of path . this post is for you 
```javascript
import SomeThing from "../../../../../../../../components/Something";
```

![static directory example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kmsbidnv1z30r2un32y.png)

#### Frist . You will need some package 
```
yarn add -D babel-plugin-module-resolver
```

#### Then . The .bablerc ( or babel.config.js )
```javascript
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [   // this plugins part 
      [
        'module-resolver',
        {
          alias: {
            '@app': '.' // if app files is inside "app/" folder, replace with "./app"
          }
        }
      ]
    ]
  };
};
```


Tips : maybe , when you copy this file from some template project , it will not replace a current default file and become babel copy.config.js and it will not work . Double check this . 


### OK , you can make a clean run and this will work .

Ok . It's actually can work now . But . If you need VS Code to help you redirect to the directory of file . you will need  those 2 thing .

#### .vscode/setting.json
```javascript
{
  "path-autocomplete.pathMappings": {
    "@app": "${workspace}" // alias similar to defined in .babelrc
  }
}
```

#### jsconfig.json
```javascript
{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "jsx": "react",
        "module": "es6",
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@app/*" : ["./*"] // alias similar to defined in .babelrc
        },
        "sourceMap": true,
        "target": "ES6"
    },
    "exclude": [
        "node_modules"
    ]
}
```

### That should work 

One last things . If somehow your metro didn't found the directory . You make need to perform a clean start :

```
expo start -c // expo 
npx react-native start --reset-cache // react native base
```
What are your biggest problems when learning JavaScript?
Published: 2021-06-10 08:09:16

Hey Everyone 👋,

I am curious what's your biggest challenge when learning JavaScript.

I have talked with many beginners who struggle to learn JavaScript even with all the available resources.

I want to understand what the problem is. I am creating an E-Book which I want to be the best resource on JavaScript out there.

Help me understand the problems beginners face when learning JavaScript. Fill the form below.

https://forms.gle/z3f5XrfPNqzwSbQVA

And I will make sure to reserve a free copy of the E-Book for you when it gets released.

Thank You!
Top 10 Flutter Tools For Cross Platform App Development

Tags: apps, flutter
Published: 2021-06-10 07:47:45

Flutter from Google has emerged as a great option for businesses and developers to build scalable, native-like apps that ensure high-end performance. A robust framework for cross platform app development, Flutter includes features that make it more resourceful for developers. Flutter’s immense capacity makes app development process easy and rapid, saving app development costs and time. It is used by millions of developers for creating great UI experiences for apps. If you are also thinking to build cross platform apps, then you must know some popular flutter development tools. Here we’ve curated some best flutter development tools for Cross-Platform App development. Let’s see which are those.

Also know the reasons to choose flutter for cross platform apps development at- Why choose Flutter for cross platform app development?

#Top 10 Flutter Tools For Cross Platform App Development–
Flutter is a self-sufficient Google UI framework that is capable of building native, web, mobile and desktop apps using a single codebase. Third-party app development tools increases Flutter’s abilities and potential. Here are some of the best Flutter development tools to develop cross-platform apps.

**1. Codemagic-**
Developed by Nevercode, Codemagic is the first Flutter-oriented CI/CD tool in the market. With this tool, you can easily integrate all your favourite flutter tools for automating the build test and release pipeline. It is an ideal flutter app development tool for flutter developers to speed up their development process. With Codemagic, you can configure and launch app on various marketplaces within no time. Automation features make development and testing easier and more efficient. Also it eases the launch process.

**2. Supernova-**
Supernova launched an assistance tool for Flutter and it helps flutter projects get an easy start. This tool is very helpful for developers to include animation styles on all devices in real-time, design layers into native widgets automatically and create responsive flexbox layouts automatically in the background. Most amazing benefit of using Supernova is, it saves a lot of time for developers. Supernova tool allows you to import you sketch or Adobe XD file by selecting Flutter as your export destination. It’s UI is flexible enough to adjust as per your requirements. Most of the flutter developers choose Supernova because of its usability metrics, great user experience and app design. Also, it is possible to make changes in your Flutter app in real-time using Supernova. 

**3. Sylph-**
It is a command line utility used to run Flutter integration and end-to-end tests on iOS and Android devices on the cloud. And it can be run on Windows, Linux, Mac and any CI environment also. It works effortlessly with AWS Device Farm to support ios and android devices.

**4. Panache-**
Know more at- [https://solaceinfotech.com/blog/top-10-flutter-tools-for-cross-platform-app-development/]
Mastering Responsive Layout
Tags: cssgrid, responsive, mobilefirst, flexbox
Published: 2021-06-10 07:32:19

Responsive layout has always been my struggle. But not until I dived into it with the help of **Kevin Powell** and **WesBos**.

I have finished a [21-day challenge] (https://courses.kevinpowell.co/dashboard) on responsive layout with Kevin Powell. He has provided a lot of helpful resources to the dev community and I definitely benefited from it. You can visit his [YouTube channel here](https://www.youtube.com/user/KepowOb). 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xc4g71meqqvbjaxagmq.PNG)
His course focuses on using *Flexbox* and he promotes mobile first since most of the difficulty in responsive layout comes from here. It set a lesson per day so you can get to focus on a particular topic that you need to learn. So it will really be a 21-day challenge. You can view my [final project here](https://final-responsive-challenge.netlify.app/). 


The second course is from **WesBos** and it is about CSS Grid. You can [sign up here](https://courses.wesbos.com/account/access/60aec9e445f686200699ffe4).

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

He talked about CSS Grid fundamentals and how to apply it in a full website project. Before, I really don't know when and how to apply it in a project, but his course gives me courage to implement it as needed. He also gives tips in choosing between flexbox and grid. There's a lot in the course since you'll get your hands dirty in doing some projects. Check out my [final project here](https://taco-cssgrid-site.netlify.app/). 

Take the courses above and for sure, you will have a strong grasp in mastering responsive layout by God's grace.

To God be the glory!