teleren/devto huggingface dataset:
Flutter Web x Firebase Hosting - GitHub Action
Tags: actionshackathon21, flutter, firebase, webdev
Published: 2021-11-24 09:57:44

### My Workflow
This GitHub Actions workflow assists Flutter developers specifically outputting to Web.
Please see the additional resource below to stay up-to-date with the required tools for this workflow to work.

The YAML files below are partially auto-generated by the Firebase CLI when setting up hosting but require additional DIY steps included for you to use directly after replacing the placeholders with the names of your secrets, project IDs, and preferred hosting channels.


### Submission Category: 
DIY Deployments


### Yaml Files
{% collapsible Deploy to Firebase Hosting on Merge%}
```
# This file was PARTIALLY auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1 #required (unofficial as no official tool exists, yet!)
        with:
          channel: 'stable' # or: 'beta', 'dev' or 'master'
      - run: flutter pub get && flutter build web
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.YOUR-FIREBASE-SERVICE-ACCOUNT-SECRET-NAME }}'
          channelId: live #Your preferred Firebase channel
          projectId: YOUR-PROJECT-ID

```
{% endcollapsible %}

{% collapsible Deploy to Firebase Hosting on PR%}
```
# This file was PARTIALLY auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1 #required (unofficial as no official tool exists, yet!)
        with:
          channel: 'stable' # or: 'beta', 'dev' or 'master'
      - run: flutter pub get && flutter build web
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.YOUR-FIREBASE-SERVICE-ACCOUNT-SECRET-NAME }}'
          projectId: YOUR-PROJECT-ID



```
{% endcollapsible %}



### Additional Resources / Info
This workflow wouldn't be possible without the brilliant:
{% github subosito/flutter-action no-readme %}
I am building something...
Tags: rails, beginners, ruby, devjournal
Published: 2021-11-24 09:51:19

So, for a while I have tried to get serious about coding. I've dabbled with tutorials, books, video series, courses, you name it. Nothing's stuck. But now, I've decided to put myself out there and build my first public web app!

##The problem to solve

As an expat in Denmark, I have struggled (and have seen others struggle, too) with knowing about the names of businesses, for instance, what are the names of supermarkets in Denmark? (this is an easy one, I know) What about hardware stores? Pet shops?

##Enter DK 🇩🇰 for Expats
I have had this idea in my head for a long time, but never really executed. I am mostly looking to help others, and build something that can be of value. My main motivation is not to make any money out of it, but to develop my skills and build something that others can benefit from.

The site will feature a collection of businesses in Denmark, for different categories. Users will be able to go into the different categories and from there find out how businesses in that category are named in Denmark.

For example, going into the Supermarket category will show:
*Bilka
*Netto
*Lidl

By going to the Mobile Network Providers category, users will see:
*3
*Lebara
*TDC

You get the point. 

At the beginning, the site will be populated with the stuff I know and can find online. But the idea is to crowdsource it so other people can contribute to it and make it better.

#BuildingInPublic
I'd like to build in public. This will not only keep me accountable, but will allow me to get feedback on the design and maybe even help for fellow makers. 

I will post my weekly progress here, but I will share more frequent updates on my twitter [@drodol](https://twitter.com/drodol).

I will be building this with Ruby on Rails and I will try to use TailwindCSS .

Stay tuned!

Content originally posted at: [webmuffins.com](www.webmuffins.com)
Easy way to write Unit Test cases of Node.Js
Published: 2021-11-24 09:43:57

---
title: Easy way to write Unit Test cases of Node.Js
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Initially, I used to think why my Architect is asking for writing test cases it's just wasting of time, But later I realised that it's important to write test cases along with the application features . Because it will give you the confidence in each iteration of new build or release.

I have seen the impact of not writing proper test cases in one of my projects, As the developer is always hurrying for completing user stories or features. As I have analyzed we could have stopped at least 40% bugs if we would have written the proper unit test cases.

So let's see the easy way to write Node.Js unit test cases Using **Mocha** and **Chai** library

**Mocha** is a test runner environment

**Chai** is an assertion library

1.Create node.js project using:

```javascript
npm init
```
2. Install dependencies

```javascript
npm i mocha -g (global install)

npm i chai mocha request -D (local install)
```

3. Create app.js file and write the below code.

```javascript
const express = require('express');
const app = express();
app.get('/ping', (req, res)=>{
  res.status(200);
  res.json({message: 'pong'});
});
app.listen(8080, ()=>{
  console.log('Waw Server is running : 8080')
});
```

4. create a test folder and add app.test.js file and write the below code.

```javascript
var expect = require('chai').expect;
var request = require('request');
describe('app rest api testing', () => {
  it('/ping status code', (done) => {
    request('http://localhost:8080/ping', (err, result, body) => {
    expect(result.statusCode).to.equal(200);
    expect(body).to.equal(JSON.stringify({"message":"pong"}));
    done();
  });
 });
});
```

Before running an application make sure you configure everything in package.json file like below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsq2bd2oe8yn2uw9z5me.png)

after that run your application using the below command

```javascript
npm run test
``` 

:) Now you can see the output of test cases. like the below image.

I always welcome the new approach so feel free to add a comment regarding the new approach.

Thanks for reading. :)

Please hit the love button if you liked it.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2pf0fkcaamvst1glvi9.png)
5 cool Perl/Raku/Programming links
Tags: perl, raku, programming
Published: 2021-11-24 09:30:20

Today I won't be too much verbose but very direct and just share some cool links!

#### 1. [Mind Blowing demonstration of Raku grammars](https://www.youtube.com/watch?v=rxaB6m_sQKk)

#### 2. [Sanity of twitch programmers via commits](https://youtu.be/KjYBh7rq0-Y)

#### 3. [Programming pain in one video](https://www.youtube.com/watch?v=ePhAj8ktiEA)

#### 4. [Hilarious talk about fashion and Perl](https://www.youtube.com/watch?v=WquECQnnCq4)

#### 5. [Tail Call Optimization: The Musical!](https://youtu.be/-PX0BV9hGZY)
Chrome Devtools Detection by Website
Tags: devtools, detection, website
Published: 2021-11-24 08:34:32

Hi, 

mY name is Vikram and i am recently jumped into CodingWorld. 
Initially i was learning laravel and now im in vuejs. 

As a new bie to this world. I was working on devtools auto detect by website and if detected hide the all content. Once user closed the inspect window reload the site and voila! content shown. 

after Much googling and overflowing stacking. I ended up in a bottle neck where if inspect window is undocked outside and if closed it should reload the website but not doing so. 

If here in this community any one help me out it will be appreciated. 
Here is my code https://pastebin.com/PBpRC2dB
<code>

const debuggerCheck = null;
      var aCheck = false;
      class devtools {
    constructor() { }
    static toString() {
        // alert('in')
        aCheck = true;
        return "-";
    }
}

       setInterval(() => {
        console.profile(devtools);
        // alert(a)
        if (aCheck) {
          localStorage.setItem("check", 1); 
          document.body.innerHTML =
            '<h2 style="width:100%;text-align:center; margin-top:100px "><strong>Sorry</strong>, but you have opened Developer Tools and you can\'t continue using this app.</h2>';
          aCheck = false;
        } else {
          check();
        }
        console.profileEnd(devtools);
        console.clear()
      }, 1000);

      function check() {
        if (localStorage.getItem("check") == 1) {
          window.location.reload();
          localStorage.setItem("check", 2);
        }
      }

      document.onkeydown = function(e) {         
            if (e.keyCode == 123) { 
                return false; 
            } 
            if (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { 
                return false; 
            } 
            if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { 
                return false; 
            } 
            if (e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { 
                return false; 
            }
            if (e.ctrlKey && e.keyCode == 'C'.charCodeAt(0)) { 
                return false; 
            } 
            if (e.ctrlKey == true && (e.which == '67')) {
                return false;
            }
            if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { 
                return false; 
            }
            if (e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) { 
                return false; 
            } 
       }
    //    document.addEventListener('contextmenu', function(e) {
    //         e.preventDefault();
    //         }, false);
  


 export default {debuggerCheck}
</code>

It should work like if user opened console/inspect element window, All the site content blocked by an msg and if console is closed site content visible again. And if console window is undocked and then closed it must do the same but not doing. 

I was working on this piece of code from couple of days and found no solution yet. Hence posting this article here in search of answers and idea.
How to Increment and Decrement Number Using Vue 3 Composition Api
Tags: vue, tailwindcss, webdev, tutorial
Published: 2021-11-24 08:32:36

In this tutorial we will create simple vuejs counter app using options api and  composition api.

[Quick Way to Start Project with Vite Vue 3 Headless UI Tailwind CSS](https://larainfo.com/blogs/quick-way-to-start-project-with-vite-vue-3-headless-ui-tailwind-css)

###Simple Vue 3 Counter App using (Options Api) Example

#####Counter.vue
```html
<template>
  <div class="flex items-center justify-center gap-x-4">
    <button
      class="px-4 py-2 text-white bg-blue-600 focus:outline-none"
      @click="increment">
      Increment
    </button>
    {{ number }}
    <button
      class="px-4 py-2 text-white bg-red-600 focus:outline-none"
      @click="decrement">
      Decrement
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      number: 0,
    };
  },
  methods: {
    increment() {
      this.number++;
    },
    decrement() {
      this.number--;
    },
  },
};
</script>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukwpbcqsjtxmnnpq5iut.png)

###Vue 3 Counter App using (Composition Api) Example
#####Counter.vue
```html
<template>
  <div class="flex items-center justify-center gap-x-4">
    <button
      class="px-4 py-2 text-white bg-blue-600 focus:outline-none"
      @click="increment">
      Increment
    </button>
    {{ number }}
    <button
      class="px-4 py-2 text-white bg-red-600 focus:outline-none"
      @click="decrement">
      Decrement
    </button>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const number = ref(0);

    function increment() {
      number.value++;
    }
    function decrement() {
      number.value--;
    }
    return { number, increment, decrement };
  },
};
</script>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukwpbcqsjtxmnnpq5iut.png)
What is OpenAPI ? - OpenAPI [1]
Published: 2021-11-23 18:16:58

**OpenAPI** *(known as Swagger before)* is a standard to declare Restful API.

> But why should I use it?

In the current context, when we are working with APIs *(no matters of the language used)* we want to have a clean documentation and be able to share a complete documentation of the API to our consumers.

With OpenAPI, you will be able to describe 
- all the exposed routes
- all the operations for each route
- the headers
- the body
- all the responses which can be returned
and add a lot of details like the kind of each values, some example, some regex which must match, enumeration of value allowed...

And with the swagger editor or some plugins *([Swagger UI](https://swagger.io/tools/swagger-ui/])*, you add show it properly to allow non technical people to read it easily!

![Contract example with a plugin to show it properly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py93v99krlrjcquibe2d.PNG)

> Ok it's great for consumers, but as a dev is there other pros?

**Yes!**

## Code Generator
With an OpenAPI contract you can generate some code for you!
For your consumer, it will be all the objects in your bodies or responses.
For you, it will be the same objects and some code generator can create for you all the controllers.

You can use the [Swagger CodeGen](https://swagger.io/tools/swagger-codegen/download/) or search in the [OpenSource OpenAPI generators](https://openapi-generator.tech/docs/generators).

With this a lot of time is saved, especially if you have a lot of objects and/or if you update them regularly.

## Testing
Otherwise, it will be useful for testing. OpenAPI is a standard supported by tools like **[Postman](https://www.postman.com/)** which will generate for you a collection to be able to call every operations listed in!
Also it will fill every headers and field in the body with the default values.

---

To conclude, OpenAPI is a must have for a Restful API project. We will see later how to use it!

I hope it will help you! 🍺

---

## Links
- OpenAPI : https://swagger.io/
- OpenAPI Specification : https://swagger.io/specification/
- Swagger Editor : https://editor.swagger.io/
- Swagger UI : https://swagger.io/tools/swagger-ui/
- Swagger CodeGen : https://swagger.io/tools/swagger-codegen/
Join professionals from RedHat, Polypane & Researchers in Quantum Computing at Git Commit Show
Tags: webdev, beginners, opensource, devops
Published: 2021-11-24 08:02:23

## Join us for the 3rd Season of Git Commit Show LIVE, ONLINE on 27th & 28th November, 2021.

## Masterclasses and Showcases on DevOps, ReactJS, Web Development, Community Engagement, RPA and much more! 

**[Git Commit Show](https://gitcommit.show/)** is the leading online tech conference where **senior engineers**, researchers, scientists and professors meet while **being at home**. A 2-day long, online, 100% free meetup  where senior developers and researchers share their knowledge and breakthrough projects.
Unlike other online conferences, it is fully **interactive** with opportunities to connect with speakers and fellow attendees **face to face**. The show **started in 2019** to provide a better alternative to physical conferences by being open, free and inclusive of people who come from remote locations and modest backgrounds.

### What's in it for you❓

- **GROW YOUR NETWORK** 👫 : Chance of meeting a lot of developers, enthusiasts, researchers. 
- **LEARN WHILE BEING AT HOME** 👩‍💻: Always wanted to be at a conference, but having troubles while travelling? We've got that covered. 
  - Git Commit Show is purely virtual, and with our platform you can have a face to face meet-up. 
  - You can ask, cross question and get suggestions on your work from the industry professionals. 
- **60+ YEARS of COMBINED WORK EXPERIENCE** 👨‍🏫: The Talks are going to be given by industry professionals who are at the top of their game, working in silence and letting their work do the talking. Some of them include :
  - Maanav Seth : Member of Quantum Computing Group, IIT Roorkee
  - Karan Singh :  Senior Principal Architect at **Red Hat**
  - Kilian Valkhof : **Founder of Polypane** (Browser for building websites)
  - Ken Soh :  Doing amazing work with TagUI & **Robotic Process Animation**
  - Pachi Parra : Developer Relations & Creator of an online community for Non-Binary & Brazilian Women. 
  - Hemant Rangan : Author of **Indian Mind at Work**
  - And a lot more . . .  [check out our website](https://gitcommit.show/).
- **EXPAND YOUR KNOWLEDGE IN 2 DAYS** 👨‍🎓: Come and join us, learn within 2 Days, be a part of this community as an attendee, volunteer or if you want, you can be a speaker as well!  

### Apply here [LINK](http://push.gitcommit.show/) 👈

- [Apply](http://push.gitcommit.show/) as an Attendee or Volunteer with us for the event. There are a lot of opportunities. 
- Join our Growing [Discord](https://discord.gg/JFWP8c2gPG) and be a part of weekly events & many more. We also have plans for first time speakers to break their fear of public speaking. . . .because fear is a mind-killer! 

### Important Dates 📅

- Event Starts 27th November 2021 (Saturday) (GMT+5:30 or IST)
- Event Ends 28th November 2021 (Saturday) (GMT+5:30 or IST)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o2hiyg0tka96ysyyx80.png)
JavaScript - Strict Mode
Tags: javascript, tutorial, strictmode
Published: 2021-11-24 06:33:55

The "use strict"; Defines that JavaScript code should be executed in "strict mode".
Why Strict Mode?
Strict mode makes it easier to write "secure" JavaScript.

Strict mode changes previously accepted "bad syntax" into real errors.

As an example, in normal JavaScript, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable.

In normal JavaScript, a developer will not receive any error feedback assigning values to non-writable properties.

In strict mode, any assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object, will show an error.

The "use strict" directive was new in ECMAScript version 5.It is not a statement, but a proper expression, which was ignored by earlier versions of JavaScript.

The purpose of this is to indicate that the code should be executed in only "strict mode".

With strict mode, you can not, for example, use undeclared variables.

All modern browsers support "use strict" except Internet Explorer 9 and lower: Such as google chrome, firefox, opera.. etc

While Declaring Strict Mode: 

Strict mode is declared by adding "use strict"; to the beginning of a script or a function.

It has global scope meaning, all lines in the code will execute in strict mode-

For example:
```
"use strict";
x = 3.14;       // This will cause an error because x is not declared

```
Another similar example:

```
"use strict";
myFunction();

function myFunction() {
  y = 3.14;   // This will also cause an error because y is not declared
}

```
```
x = 3.14;       // This will not cause an error.
myFunction();

function myFunction() {
  "use strict";
  y = 3.14;   // This will cause an error
}
```
Using an object, without declaring it, is not allowed:
```
"use strict";
x = {p1:10, p2:20}; 
     // This will cause an error
```

Deleting a variable (or object) is not allowed.
```
"use strict";
let x = 3.14;
delete x;                // This will cause an error
```
Similarly,
Duplicating a parameter name is not allowed
Octal numeric literals are not allowed
Octal escape characters are not allowed
Writing to a read-only property is not allowed
The word arguments cannot be used as a variable
The with statement is not allowed
Just 'blah, blah, blah' when it is about finding and developing the right employees?
Tags: leadership, opinion, webdev, career
Published: 2021-11-24 07:37:51

How to overcome the 'blah, blah, blah' when searching for and developing the right employees for your software development company?

It's quite straightforward - although it isn't:

I assume that there is widespread agreement that we need to bring, or develop a lot more skills as software developers than just creating (individually, ourselves) great software pieces.

When we act as part of a group or a company, it's not just about making software. It's also about making our people great, creating great teams, who see themselves as successful and thrive.

So what is this 'blah, blah, blah'?

You just read something of it: "teams [...] see themselves as successful and thrive".

Other examples are "No alpha leaders, no beta teams", "see success as the result of teamwork", "giving constructive feedback", "lead juniors and intermediates", "creating a safe space for all employees", and furthermore.

Don't get me wrong: I totally agree with this 'blah, blah, blah', because it doesn’t come from nowhere - there are good intentions behind it. 

But can we overcome this 'blah, blah, blah' to really practice what we preach - not just talking about it?


From my perspective it is all about focus.


If you want to really change or do something, you have to have it in your focus. This means to have it on your day-to-day agenda. And if you want to do or change something in a group or company, all those people have to bring attention to it.

But how to put it there?

I guess there are two big levers:

1st: Take care of the critical points where the switches are made.

These points can be:
/ What are your true, applied(!) criteria for evaluating your employees' performance?
/ To whom do you delegate responsibility?
/ Who do you promote & who do you hire?
Be honest!

2nd: Bring it regularly to (everyones) attention in everyday life

Beside these critical points, you need to keep the topics in the mind of the people. And for this you have to drive the conversation in the direction of these topics. There are different ways for this.

One might be to create some measurements: you can put up a kind of performance dashboard with a KPI value - like you probably already do with your margin, turnover or other financial parameters, or with a burndown chart or something similar to measure your sprint performance (i.e. story point output or something). You need to find an indicator to represent the fulfilment of your topics.

Another way might be to ask other people regularly about the important topics. In your Dailys, your status updates, or some steering meetings, ask the important questions - e.g. for your team health, not just whether everyone is on time and working.


To condense these few sentences:
It is all about focus - and the focus needs to be set by people who lead (in whatever position)!

It's that easy - isn't it?
[ 🎥 Workshop] Building a Zoom clone in Flutter 
Tags: flutter, android, kotlin, tutorial
Published: 2021-11-24 07:12:40

_Read detailed blog on the workshop_ - [Building Zoom clone in Flutter](https://www.100ms.live/blog/zoom-clone-in-flutter?utm_source=d2&utm_medium=flutter)

We can't keep calm #100ms is back with another exciting workshop.🤩

Build a Zoom clone in Flutter with Vivek Yadav (Google Developer Expert in Flutter, Building Mobile at ZestMoney) on 2nd December at 10:00 AM ET | 8:30 PM IST. 

In this #workshop,
☝️ Understand how Zoom works
🤘 Integrate the 100ms Flutter SDK
🖖 Build features like mute/unmute, leave/join room & messaging.

Excited? Register here: 👇

https://community.100ms.live/zoom-clone-flutter