teleren/devto huggingface dataset:
registerationForm
Tags: codepen, html, css, webdev
Published: 2020-06-07 08:22:21

<h1> Well JARF (just another registration form)  :smiley: </h1>
<u>
{% codepen https://codepen.io/CodeCommando/pen/YzwXaxa %}

## I Would love :heavy_heart_exclamation: it if you guys can share similar simple code for **form** generation.
Hide 🙈 all console logs in production with just 3 lines of code
Tags: javascript, webdev, beginners, react
Published: 2020-06-07 08:11:17

We basically use the console.log() in our JS application to check wether our code is working properly or to replicate the bug or issue in the app. without the logs it is very time consuming and difficult to find the problem. 

But these logs are meant for the developer only and you don't want to show these to the end users so we have to remove the console statement or to comment that.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g68r6oom7r3v6sscx3me.jpg)

Before i know this stuff i was commenting all the console.logs in my application and deploying the app on the live server. so the console's are not visible to the users

<b>How I hide all the consoles</b>

<pre>
if (env === 'production') {
    console.log = function () {};
}
</pre>

Here we are overriding the default console.log function with the new one which was returing nothing. Here we have added the environment check to override console function only if the environment is production. if you don't have environment variable then you can jsut simply do. 
<pre>
    console.log = function () {};
</pre>

I am using this on my live app to hides the console. If someone know any other method or any disadvantage of using this one. plz leave your comment. 

If you are on Twitter, can you follow me there as well? I post these kinds of stuff there as well. => <a href="https://twitter.com/kushal_js?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @kushal_js</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

{% twitter 1703431207676227934 %}
What is a CDN? How does CDN work?
Tags: webdev, tutorial, techtalks, cdn
Published: 2020-06-07 08:09:13

{% youtube TpyJMipJH5E %}

This video is about, what is a CDN(Content Delivery Network) and How Does a Content Delivery Network Work? You will learn the basics of CDN and the benefits of CDN. 

Content:
-------------------------------
00:00 <a href="https://youtu.be/TpyJMipJH5E">Welcome</a>
00:17 <a href="https://youtu.be/TpyJMipJH5E?t=17s">What is a Content Delivery Network?</a>
02:20 <a href="https://youtu.be/TpyJMipJH5E?t=2m20s">How does a CDN work?</a>
03:54 <a href="https://youtu.be/TpyJMipJH5E?t=3m54s">What is Round Trip Time?</a>
07:11 <a href="https://youtu.be/TpyJMipJH5E?t=7m11s">Benefits of CDN.</a>

Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Please do like, share, comment, and subscribe.
CSS Offset background-position
Tags: css
Published: 2020-06-07 06:48:27

Today we are going to look in the `CSS` `background-position` rule.
We use the `background-position` to offset position a background in an element. Nowadays, we use a lot of fluid/responsive layouts, which can make this quite uneasy.

## CSS Background Position

The property accepts several syntaxes.
The normal values would be: `top|right|bottom|left`.
We can also use just `center` to center on all axis.

It's easy aligning center or from the left, but aligning from the right can is not always known, so let's look into aligning from the right.

```css
background-position: right 25px bottom 25px;
```

The other day we used the [`calc` function](https://daily-dev-tips.com/posts/css-calc-function/) we can use that inside `background-position` as well:

```css
background-position: calc(100% - 25px) calc(100% - 25px);
```

As you can see, it can be as easy as this.

You can offset an image from any of the four corners of the element.

Please feel free to view and edit on Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="rebelchris" data-slug-hash="YzwXwJP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Offset background-position">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/YzwXwJP">
  CSS Offset background-position</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

The browser support for offset is excellent in a modern browser, unfortunately doesn't go all the way back.

![CSS Background Offset support](https://caniuse.bitsofco.de/image/css-background-offsets.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How Do You Onboard New Team Members
Tags: watercooler, discuss, developers
Published: 2020-06-07 07:38:58

I am new in leading a team and I am curios on onboarding new team members in the team. 

- #### How do you onboard new team members?
- #### What are the best steps that you are using in your organisation?


I am leading an engineering team, so that's the kind of team member I need to onboard.


Looking forward to hear your opinions!
A year in review as a DevOps Engineer
Published: 2020-06-07 07:30:03

Last week marks my 1 year as a DevOps Engineer in Ascenda. It's been a great 1 year here from being someone fresh out of graduation to refining my foundations and picking up new skills.
  
  
![asc-allenby-house](https://dev-to-uploads.s3.amazonaws.com/i/8k388fkrw2vl0qc2dx3h.jpg)
  
This was my desk back at the previous office in Allenby House. It's basically a shophouse on the third floor which has been renovated into an office. The worst part has to be the fact that it was directly beside the road. Every now and then you'll hear vehicles passing by. Thankfully I only have to endure that for the first 2 weeks and we moved to a new office a walking distance down the road.
  
![asc-arc380](https://dev-to-uploads.s3.amazonaws.com/i/5ewrv3m44664uvn9l0yf.jpg)

Just look at that beauty. 😍

Okay back to reflecting the past 1 year as a DevOps Engineer. I came in as a junior in my role (duh) and did not expect to be given the opportunities to take charge and even implement things. 

Here are some of the things that I picked up over the past 1 year:
- Terraform
- Ansible
- CircleCI, Jenkins
- AWS
- Cloudflare
- PostgreSQL
- Jenkins
- Docker
- Kubernetes (Currently)
- Helm (Currently)
- Golang

These might seem a lot but I would not call myself an expert in all things DevOps. There are still more things to learn (god Kubernetes is full of stuff and it's confusing as hell to someone who is new to it).

![asc-engnr](https://dev-to-uploads.s3.amazonaws.com/i/0shbu3cw7p4onzgo9ox5.jpg)

PSA to those who're looking for jobs. We are hiring and if you are situated in Singapore, Manila, Sydney, or Vietnam have a look at our [openings here](https://ascendaloyalty.recruitee.com).
100 Days of SwiftUI — Day 16
Tags: 100daysofswiftui
Published: 2020-06-07 07:25:04

---
title: 100 Days of SwiftUI — Day 16
published: true
date: 2020-06-07 07:24:27 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-16/
---

Technically, ~~today~~ yesterday — as I forgot to write this exact blogpost — was the first day of this whole thing I spent writing some SwiftUI-code. Nevertheless, it was already [day 16](https://www.hackingwithswift.com/100/swiftui/16).

It was a very nice little introduction to this whole topic. I immediately understood, why people like SwiftUI. With very little code, you can build a pretty powerful UI. Lots of things you have to take care of when writing apps with UIKit are just done for you, like Autolayout. Also building rather simple forms is a matter of minutes instead of using a third-party-library.

Oh, and I like this two-way-binding thing using a `$`. Using this character is a neat detail. It might let your code look like PHP or Perl, but it will magically work. Just like Perl.

What confused me a little was the the code shown in the last video differed from the code in the blogpost. The type of `selectedStudent` was a `String` in the video, but an `Int` in the blogpost-code. In the end it doesn't matter, it works both ways.

I'm curious on how to build very custom UI in SwiftUI and how to mix it with some architecture, as storing the `@State` in the View doesn't feel very good to me.

<!--kg-card-end: markdown-->
Faucet With Infrared Sensor Integrated
Published: 2020-06-07 07:22:06

Today, automatic faucets can be found in public facilities all over the globe. You can also choose from 5 years, 3 years, and 1 year indonesia faucet, as well as from online technical support, none, and free spare parts indonesia faucet, and whether indonesia faucet is metered faucets, thermostatic faucets, or electric faucets.
With commitment to sustainable energy goals and climate change mitigation efforts, we have diversified into solar energy operated pumps and keran rooftop products and have a cumulative installed capacity of over 200MW which itself manifest our commitments to green energy initiatives.

The different factors that are likely to impact the overall dynamics of the Touch Sensor Faucets market over the forecast period (2019-2029) including the current trends, growth opportunities, restraining factors, and more are discussed in detail in the market study.
Motion sensor faucets are becoming more and more popular because of their unquestionable advantages over the traditional faucets. Our approach to these design guidelines guarantee functional yet stylish products that never lose their appeal and relevance even decades into the future.

Alibaba hot search products ranking based on search data. The report also suggests considerable data with reference to the marketing channel development trends and market position. We had a hard time to design it, but I am very happy that the results have received global accolades and that it is considered the best product in Toto’s automatic faucet series.
Jakarta – 28 November 2017 – Kohler, a global leader in the manufacturing of kitchen and bath products, and one of the oldest privately-held companies in the United States is building the first manufacturing plant in Indonesia. On the hansgrohe website, you will find trends and creative ideas for your bathroom and kitchen designs.
1. Upgrade double sensor for faucet, two sets of sensing areas, two water modes, 0.25 second fast induction. Indonesian consumers are particular about details and expect new cutting edge technology and innovation integrated into bathroom products. From iconic design series to immersive water experiences, put the bathroom at the center of your personal wellness strategy.

www.bumina.com
What are the best places to learn Linux from ?
Tags: discuss, linux, codenewbie, beginners
Published: 2020-06-07 06:21:01

Hi,
  I am pretty descent in using Linux based system. But I want to become a power user of Linux. What are the resources available to achieve that? 
I don't mind learning from scratch again. So any level of resource would help. 

Thank you 🙂
Stateless and Stateful widgets 👩_💻👨_💻
Tags: flutterinteractivity
Published: 2020-06-07 06:19:22

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


In flutter programming there two kind of widgets.
*STATELESS
*STATEFUL

But before we get into what Stateless and Stateful, we need to understand what is the State of this. 
The simplest way to put it, State is something that can change within a widget.

Stateless widgets- This widgets never changes.
"Icons,Buttons,Icon button,Colors and text" are examples for stateless widget...

Stateful widgets- Dynamic,This widget can be change,Its appearance in response to event trigger by user interactions.
when STF(stateful widget) receives data.
Checkbox,Radio,Slider,Form,Text Field are some examples for STF(stateful widget).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1c1bagnmfmc53wzte2u6.jpg)

Follow this 4 step and create Stateful widgets.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fqco0kr23sf1iuvearan.jpg)

Step 1: Decide which object manages the widget’s state
Step 2: Subclass Stateful Widget
Step 3: Subclass State
Step 4: Plug the stateful widget into the widget tree


More Detail visite.:-https://flutter.dev/docs/development/ui/interactive
#40daysofHybridCloud (Day-3)
Tags: aws, cloud, azure, openstack
Published: 2020-06-07 06:15:50

##*#Day3*


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

Today I got know one more service used in AWS and that is #*CloudTrail* 

Q. What is CloudTrail and why it is used ? 
> Cloudtrail is a service in AWS which will help us record all the events performed by user , now of-course it require memory to store data which is also provided by AWS services like EBS and S3 which we will discuss further , as per now it's a user activity monitoring service.

### it is easily found in Management and governance tab of services :-  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p346gmkdwenjqvucs8cr.PNG) 
 
Now to use cloudtrail through CLI mode .
Like very other services in AWS ,  Cloudtrail also have AWS commands which can be used to interact with cloudtrail.

###some of cmd are shown below :-

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

let me give one example of execution of such command 
*aws cloudtrail looklup-events*
> used to look activities performed by user so far in json format. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/201pv367g3dug7plp873.PNG)

As we have discussed there are different type storages in AWS that are S3 and EBS. 

S3 is service in AWS which stores data in AWS in object format and have global access same as few others in market place like Dropbox and Swift in Openstack.

##Discussing more about Block storage , there are two types of Block storage :- 
* ###Ephemeral storage
> Generally we install our OS on ephemeral storage which we also called as Root storage or drive , In this as soon as OS is removed data in the drive also get removed hence it is not reliable for storing important data like Web server or Databases .

* ###Persistent storage
> on the other hand this storage is permanent and also more flexible it is like external pen-drive which can store the data and do not   delete it as soon as OS get terminate and can be attached or detached according to more then one OS.

Again cloudtrail data can be stored in S3 as shown we have created a bucket in S3 where this data is present :-  

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

##At last we will talk about Firewall in AWS.

Firewall is a part of AWS security group which act like a shield for accessing services and data by the outside world without permission to do so.
    
the property of Firewall is such that by default it does not allow anybody from getting it's services used but in order to allow certain activities like accessing website hosted on AWS or accessing data stored in S3 we can add some rules(outbound) as per our convenience .

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ujlwjr5tppwqxfbh8a1.PNG)

Also get to know how to host basic web-server in AWS .


thanks for reading 
###*Happy Learning :)*
HTML Email Template for beginners
Tags: html, css, beginners, productivity
Published: 2020-06-07 05:54:14

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For any HTML email developer, we all know how difficult it is to create a fully working and compatible HTML email for newsletters or campaigns.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The knowledge I have gained over the past 6-10 months, to create beautiful and compatible HTML email for my company’s campaigns.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>Some useful resources that I used:</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://www.htmlemailcheck.com/check/" target="_blank">HTML Email Check</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://putsmail.com/" target="_blank">PutsMail</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are few CSS properties, which will not work in email template. You can refer the below link for all the CSS properties which you can use while creating any email template:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://www.campaignmonitor.com/css/" target="_blank">Campaign Monitor CSS</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There is one easiest way to create an email template by using <code>table</code> element.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><em>Reference:</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/#using-html-tables-for-layout" target="_blank">smashingmagazine.com for layout</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I hope you enjoyed the article. If you have any question, please feel free to ping me on <strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
IBM community day
Published: 2020-06-07 05:50:27

IBM community day is a #virtualconference, in which we will have access to lessons from 30+ experts from IBM and partners on how #Cloud Paks helps to modernize applications, simplify enterprise-grade deployment, and integrate security tools to gain insights into threats across hybrid, multi-cloud environments.
This IBM Virtual Community Day is happening on June 18th at 8 am ET. Check out the full lineup of speakers and register here: http://ibm.biz/clouddev

#ibm #ibmz #virtual #virtualconferences #cloudarchitect #cloudnative #solutionarchitect #devopsengineer #devops
How to auto format code on vscode
Tags: vscode, eslint, vue, format
Published: 2020-06-07 05:33:54

I work with vue project that add a eslint file to define some rules. And I also use vscode extension to format the code when pressing `alt + shift + f`. 
I want the formatted code followed the rule that defined in the eslint file of the project.
How can I do that?
Leetcode - Valid Parentheses (with JavaScript)
Published: 2020-06-07 05:33:50

Today I am going to show how to solve the Leetcode Valid Parentheses algorithm problem.

Here is the problem:

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

Solution:
```javascript
var isValid = function(s){
    
    const stack = []

    for (i=0; i < s.length; i++){
        
        let curChar = s[i];
        
        switch(curChar) {
            case '(': stack.push(')');
                break;
            case '[': stack.push(']');
                break;
            case '{': stack.push('}')
                break;
            default:
                topElement = stack.pop()
                if (curChar !== topElement) return false;       
        }
    }
    return stack.length === 0;
}
```
As I iterate through the string character by character, I check to see if any of its characters is an open or closing parenthesis. 

If a character is an opening parentheses, I will push it onto the stack. 

*Opening parenthesis: {, [,  (*

If a character is a closing parentheses, I’ll pop the element on top of the stack and check if it matches the character in the current index. If the characters do not match, then the expression is invalid. 

*Closing parenthesis: }, ], )*

Essentially, if there are still elements in the stack, then the expression is invalid.
args and kwargs in python
Tags: python
Published: 2020-06-07 04:31:50

---
title: args and kwargs in python
published: true
description: Day1. I'm learning Pyhton and django. This is my daily learning log of Python.
tags: #python
//cover_image: https://direct_url_to_image.jpg
---
___

### *args in Python

*args are best used when we want to pass list of arguments.
Basic usage 

```pyhton
 def listOfValues(*args):
      print(args)
listOfValues(1,2,3)
```
the output will be  (1,2,3)

print(args) will print a tuple of all the arguments that we are passing in when calling the function.

Example 2 passing list or dictionary 
```python 
 def iterable(*args):
      print(args)
iterable([1,2,4,5])

```
this will print a tuple of list. Something like this ([1,2,3,4,5],)

>Note: If you are familiar with ES6 rest operator. *args works a lot similar rest operator in ES6.

___

### **kwargs in Python
**Kwargs accepts named arguments instead of positional arguments. When we use **Kwargs in parameter and try to print the values we get a dictionary. 

```python
   def getValues(**kwargs):
       print(kwargs)
   getValues(a=1,b=2)
```
The output is going to be {"a":1,"b":2}

another example where we use **kwargs for adding numbers 

```python
   def add(**kwargs):
    res = 0
    for k in kwargs.values():
        res+=k
    print(res)
        
    
add(a=1,b=2, c=3)
```
Output is 6

>Note:- The order of parameters has to be in the  **exact order**
     1. Standard arguments
     2. *args arguments
     3. **kwargs arguments
Ethereum BlockChain and how it is different from Bitcoin.
Published: 2020-06-07 05:25:55

Features of Ethereum Blockchain Technology:
1.Ethereum is a decentralized platform that runs smart contacts.
2.It offers smart contacts applications that run as programmed without the censorship of a third party.
3.Ethereum is a smart contracts development platform whereas Bitcoin is an exchange of decentralized cryptocurrency. 

How is Ethereum different from bitcoin?

Etherum is comparatively faster in block formation that Bitcoin as it takes only 12 seconds to form a block in Ethereum whereas Bitcoin takes 10 minutes for the same. 
Similarly the transactions that are done through Etherum only take an average of 3 minutes on the other hand since blockchain offers limited block size it will take an hour for transactions to get completed. Ethereum provides solidity programming language which can be utilised to make smart contacts, Bitcoin does provide a scripting language but its extremely limited and not much used.
Looking for Noble Causes
Published: 2020-06-07 04:41:58

My app idea for the Grant For The Web Hackathon would collect payments from people and allow them to pick what charity or cause they want to donate to. Technically they aren't donating the money, I will, but I'll donate it to whatever they pick.

There's more to it than that, but I'm curious what groups should I list as options for donations? Preferably the place will allow for donations to be mailed via check, as I'll use [Lob](https://lob.com/products/print-mail/checks#product) to do this.