teleren/devto huggingface dataset:
Automatically trigger Netlify Functions on specific events
Published: 2021-12-20 17:28:01

---
title: Automatically trigger Netlify Functions on specific events
published: true
description: Ever wanted to trigger a Netlify Function when a deploy fails? Or when you activate split testing? Here's how!
tags: 
cover_image: https://www.netlify.com/img/blog/automatically-trigger-functions.png
canonical_url: https://www.netlify.com/blog/2021/12/19/automatically-trigger-netlify-functions-on-specific-events/
series: Netlify - a feature a day 2021
---

> Throughout December we'll be [highlighting a different Netlify feature each day](https://www.netlify.com/blog/2021/12/01/highlighting-a-different-netlify-feature-each-day-in-december/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=event-driven-functions). It might just be the thing you need to unlock those creative juices, and [dust off that domain](https://www.netlify.com/blog/2021/12/01/dusty-domains-your-forgotten-domains-raise-money-for-charity/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=event-driven-functions) you registered but never deployed! Keep an eye [on the blog](https://www.netlify.com/blog/2021/12/01/highlighting-a-different-netlify-feature-each-day-in-december/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=event-driven-functions) and on [Twitter](https://twitter.com/netlify) for each feature!


Netlify Functions can be triggered via your UI with a user event like clicking a button, or visiting directly the endpoint `/.netlify/functions/<your function name>` in your browser, but we've also made available what we call **event-driven functions**.

"What is this?", I hear you ask.

There are some events happening when you use Netlify that can automatically trigger a function.

For example, if you have a [Netlify Form](https://www.netlify.com/products/forms?utm_campaign=devex-cg&utm_source=devto&utm_medium=blog&utm_content=event-driven-functions) on your site, you can trigger a function automatically when receiving a new submission, simply by naming your function file `submission-created.js`. That's all!

The events currently working with this feature are:

- deploy-building
- deploy-failed
- deploy-locked
- deploy-succeeded
- deploy-unlocked
- identity-login
- identity-signup
- identity-validate
- split-test-activated
- split-test-deactivated
- split-test-modified
- submission-created

You could use them to notify co-workers when your app's deploys are locked, or when a deploy fails, when a user signs up, and more!

If you'd like more information about Netlify Functions, [check out our docs](https://docs.netlify.com/functions/trigger-on-events/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=event-driven-functions) or explore the examples and tutorials in the [functions playground](https://functions.netlify.com/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=event-driven-functions)
A Complete Guide to Centering in CSS (Horizontally, Vertically)
Tags: css, beginners, design, tutorial
Published: 2021-12-20 17:22:59

**Horizontal Inline (texts and links etc.)**
```css
.div{
    text-align: center;
}
```
**Horizontal Block(divs and lists etc.)**
```css
.div{
    margin: 0 auto;
}
```
---
**Vertical Inline (texts and links etc.)**
If you want to vertically align inline elements, you have two options
First one is giving equal padding-top and padding-bottom.
```css
.text{
    padding-top: 25px;
    padding-bottom: 25px;
}
```
The second one is changing line-height equal to box height. To do that, make sure you use "white-space" is "nowrap". So, it's not going to wrap. If you want to make multiple lines and vertically align. You can still set padding-top and bottom equally.
```css
.text{
    height: 150px;
    line-height: 150px;
    white-space: nowrap;
}
```
**Vertical Block (divs and tables etc.)**
If you know the height of the element:
```css
.parent{
   position: relative;
}
.child{
   position: absolute;
   top: 50%;
   height: 100px; /*This height is equal to parent's height */
   margin-top: -50px;
}
```
If you don't know the heights of the elements.
```css
.parent{
   position: relative;
}
.child{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}
```
**A better way**
Don't hesitate to use flexbox and grid system. I'm using them almost for everything. Even for the simplest things. It's not going to make your website load slower. Best way to center everything and easy to handle.

**Centering Horizontally**

```css
.parent{
   display: flex;
   justify-content: center; 
}
```
**Centering Vertically**
```css
.parent{
   display: flex;
   align-items: center; 
}
```
**Centering Horizontally and Vertically**
```css
.parent{
   display: flex;
   justify-content: center;
   align-items: center; 
}
```
**Using grid to center both way**
```css
.parent{
   height: 500px;
   display: grid;
}
span{
   margin: auto;
}
```
how to convert this to hook?(this.setstate, call back)
Published: 2021-12-20 17:19:54

https://github.com/mochixuan/react-native-drag-sort

<AnySizeDragSortableView
    ref={this.sortableViewRef}
    dataSource={items}
    keyExtractor={(item) => item.text} // 1、isRequired
    renderItem={this._renderItem}
    onDataChange={(data, callback)=> {
        this.setState({items: data},()=>{
            callback() // isRequired
        })
    }}
/>

In on Data change, you can see it uses setState and call back. I don't think useEffect can work here.

https://github.com/mochixuan/react-native-drag-sort
INTRO TO KUBERNETES!
Published: 2021-12-20 17:13:21

- 
Intro to Kubernetes..!

**$Let us talk a bit about application architecture.**

Before any product has to be delivered.The engineering team needs to decide application architecture (eg:monolith,Microservices)

In monolith architecture, application tiers can de described as:
!part of same unit, managed in single repository,sharing existing resources (eg memory),developed in one programming language, released using single binary.

In Microservices architecture, application tiers can be described as:
!!Managed in separate repositories,own allocated system, implemented using the programming language of choice, released using its own binary.

**Let us talk a bit about Docker!**

Docker is a set of platform as a service (Paas) products to deliver software in packages called containers. There are plenty of tools used to containerize services. however, Docker has set the industry standout for many years. To containerize an application using docker, we use: Dockerfiles, Dockerimages, Docker registries.

**Why docker came into existence..?**

whenever you are designing a project it works fine on developer's machine.but as soon as that project is moved to someone's else computer usually fails to work with same performance so the classic problem is "It works on my machine".To solve this problem docker came into existence.

**Let us talk a bit about Kubernetes..!**

Kubernetes is a container orchestrator framework is capable to create, manage, configur thousands of containers on a set of distributed servers.
(To be simple: It is used to automate the deploy/release process and healing)

Kubernetes currently is a graduated CNCF project. The success for Kubernetes is because it solutionize:

- Portability
- Scalability
- resilience
- service discovery
- extensibility and operational cost of containers.
Update git via cmd
Tags: git, github, gitupdate
Published: 2021-12-20 17:13:12

If you want to update git to last version you don’t need to download it website and install again to update it.

You can easily update it from terminal.

For windows users write from terminal

    git update-git-for-windows

Second on linux , open terminal and write this commands
```
 sudo add-apt-repository ppa:git-core/ppa -y

sudo apt-get update

sudo apt-get install git -y
```
After installing it show version of git
```
git --version
```
Resource link: https://stackoverflow.com/a/66514714/5661396
How we secure our password in express and mongoDB
Tags: javascript, beginners, node, typescript
Published: 2021-12-20 17:12:40

many developers think how we secure our password through malicious user they try to access data and destroy their server.
In express we discuss a library named is "bcrypt" they hashed our data and this hashed data does not decrypt any user this is best feature of this library.
Install in your system 

> npm i express mongoose bcrypt

## userSchema.js

```
const {Schema,model}=mongoose
const userSchema=new Schema({
username:String,
password:String
)}
const User=model('user',userSchema)
module.exports=User

```
send data through this api end point 

## index.js
```
router.post('/api/register',acync (req,res)=>{
	const {username,password}=req.body
                    const oldUser=await User.findOne({username})
	if(oldUser) return res.status(400).send("User already registered")
	const salt=await bcrypt.getSalt(10)
	const hashPassword=await bcrypt.hash(password,salt);
                    const user=new User({username,password:hashPassword})
                    const result=await user.save()
	res.status(200).send(result);
             });
```
above example is register it and saved their data


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

```

router.post('/api/login',acync (req,res)=>{
	const {username,password}=req.body
	const user=await User.findOne({username})
	(!user) return res.status(404).send("User Not Found")
	const hashPassword=await bcrypt.compare(password,user.password);
                    if(user && hashPassword)
	return res.send({username,password:hashPassword});
	else
	return res.status(400).send("password is wrong")
             });


```
above code is login user with athenticated.
Launch git from cmd for Windows users
Tags: git, cmd, gitbash
Published: 2021-12-20 17:07:48

In this post I will show how to launch git-bash from cmd 
**First** add git path to environment variables
- For x86
```code
%SYSTEMDRIVE%\Program Files (x86)\Git\bin\
```
- For x64
```code
%PROGRAMFILES%\Git\bin\
```
After adding path to environment variables Open cmd and write this command to open git bash

```
sh --login
```
OR
```
sh 
```
OR
```
bash --login
```
OR
```
bash
```
You can see this GIF image for more details:
https://media1.giphy.com/media/WSxbZkPFY490wk3abN/giphy.gif
Resource link:https://stackoverflow.com/a/62366648/5661396
JavaScript String CharAt() methods
Published: 2021-12-20 16:34:56

**CharAt():** _The charAt() method returns the character at a specified position in a string._

Syntax:
`string.charAt(index)`

Example: 

```
let text = “Charecter”;
text.charAt(0);
```

The output will be “C”

And again

```
text.charAt(3);
```

The output will be “r”
How to protect your JavaScript Code
Tags: javascript, programming, webdev, tutorial
Published: 2021-12-20 16:02:35

Hello, I am back with another article and it will be fun

Let's get's started,

### What does `Obfuscate` mean?

- In `JavaScript`, obfuscation means **to protect code which is exposed on the web**

### Some Benefits of Obfuscation

- Helps to protect secret credentials for attackers
- Helps to hide some functions 
- Prevent people from copying or modifying your code without authorization.
- The obfuscated JavaScript will be way larger and difficult to understand

### How to obfuscate?

- Code not obfuscated
```
function hello(){
    console.log('Hello world')
}

hello()
```
- Obfuscated Code
```js
(function(_0xfa9ce1, _0x293dc1) {
    var _0x5be444 = _0x3aed,
        _0x338d24 = _0xfa9ce1();
    while (!![]) {
        try {
            var _0x25e185 = parseInt(_0x5be444(0x159)) / 0x1 + -parseInt(_0x5be444(0x152)) / 0x2 * (parseInt(_0x5be444(0x156)) / 0x3) + -parseInt(_0x5be444(0x151)) / 0x4 * (-parseInt(_0x5be444(0x153)) / 0x5) + -parseInt(_0x5be444(0x15a)) / 0x6 * (parseInt(_0x5be444(0x150)) / 0x7) + -parseInt(_0x5be444(0x14e)) / 0x8 + parseInt(_0x5be444(0x154)) / 0x9 * (parseInt(_0x5be444(0x157)) / 0xa) + -parseInt(_0x5be444(0x14f)) / 0xb * (-parseInt(_0x5be444(0x158)) / 0xc);
            if (_0x25e185 === _0x293dc1) break;
            else _0x338d24['push'](_0x338d24['shift']());
        } catch (_0x460298) {
            _0x338d24['push'](_0x338d24['shift']());
        }
    }
}(_0x49c5, 0xf38c8));

function hello() {
    var _0x590815 = _0x3aed;
    console['log'](_0x590815(0x155));
}

function _0x3aed(_0x7ab531, _0x4d788b) {
    var _0x49c58c = _0x49c5();
    return _0x3aed = function(_0x3aed39, _0x5113e2) {
        _0x3aed39 = _0x3aed39 - 0x14e;
        var _0x3d5157 = _0x49c58c[_0x3aed39];
        return _0x3d5157;
    }, _0x3aed(_0x7ab531, _0x4d788b);
}

function _0x49c5() {
    var _0x1ab529 = ['49tFyzVa', '4QHsemb', '325768BSBOlC', '8641220FeGZkj', '9081ERaIXL', 'Hello\x20world', '3yHbwCr', '4400XMVpPJ', '24fWLzKR', '1213114zYLYOQ', '1345902AroHuK', '9509096jkUgBM', '2936989JRGabm'];
    _0x49c5 = function() {
        return _0x1ab529;
    };
    return _0x49c5();
}
hello();
```
- Test them both will have same output

### How to obfuscate?

- Write javascript code
- Copy and paste to [Obfuscator.io](https://obfuscator.io/)
- And replace `obfuscated` code with the original


***
### Make sure to check out my [Youtube Channel](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ/) and subscribe to it

{% youtube https://www.youtube.com/watch?v=Ep2YSyK1iPA %}
Roadmap for Frontend & Backend & Devops & Python
Tags: tutorial, webdev, beginners, programming
Published: 2021-12-20 15:46:03

##Frontend Roadmap 


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


##Backend Roadmap 


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



##Devops Roadmap 


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


##Python Roadmap 


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


All the best for you.
Learn To Build Mobile Apps Using MongoDB Realm And React Native
Tags: mongodb, reactnative, tutorial, react
Published: 2021-12-20 15:42:25

MongoDB Realm and React Native Getting Started

This is just a live recording of me following along the documentation to get started with [MongoDB Realm](https://www.mongodb.com/realm/lp) and React Native

This is the first in a series of videos about using [MongoDB Realm](https://www.mongodb.com/realm/lp) with React Native specifically taking advantage of the offline and sync capabilities. I have used MongoDB Realm once before in an [Ionic Framework video series](https://www.youtube.com/playlist?list=PL2PY2-9rsgl1ZJFraZ02uJ5dQzsz79Gru) listed below, so you can take a look to get an idea of the direction I am heading with this video series

In the first video, we are just following along with the documentation to get a react native application up and running with the realm library installed and do some basic CRUD actions without a React Native UI.

The second video adds a better user interface on the application using [React Native Paper](https://reactnativepaper.com/) and adds a listener to react to changes in the collection when there is a change and reflects that change in the list

As we move through the series we will fill out the app more and show how to integrate MongoDB Realm in a React Native application.

###Part One - MongoDB Realm and React Native Getting Started
{% youtube 1Ys-dKX_OyU %}


###Part Two - MongoDB Realm and React Native Getting Started - Simple User Interface
{% youtube UdtgVJ_75W8 %}

Follow Me 
-------------------------------------------
twitter - https://twitter.com/aaronksaunders
github - https://github.com/aaronksaunders
udemy - https://www.udemy.com/user/aaronsaunders
gumroad - https://app.gumroad.com/fiwic

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)
What is a CSS Preprocessor? What are some benefits of Sass?
Tags: programming, productivity, beginners, css
Published: 2021-12-20 15:40:07

A CSS preprocessor is a program that permits users to generate CSS from the preprocessor's unique syntax. To use a CSS preprocessor, we must install a CSS compiler on our webserver. Or use the CSS preprocessor to compile on the development environment, and then upload compiled CSS files to the webserver.
SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that allows you to use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful.
It is CSS syntax friendly
It uses nested syntax
It includes mixins
We can divide and conquer
It contains fewer code that’s why we can write CSS quicker.
NULL vs UNDEFINED in JS
Tags: javascript, beginners, tutorial, programming
Published: 2021-12-20 15:36:49

The first main **question** that all JS developer should know, it can sound really confused but it's so easy to **understand** when you know whatever needed 😁.

Both of them looks the same, it **indicates** that this var/let/const hasn't have any value yet 😙, the difference is mainly that undefined indicates that you have NEVER give a value to this **property**, let's see a brief example:

```js
let a;
console.log(a); // it'll print undefined
```

It's really clear, if you look at the example, I'm sure you are seeing that a `=` is _missing_, then it means that you don't want to assign value therefore, it's _undefined_, 😅.
Imagine if you want to check if a value is undefined you can make this approach: 

```js
if (typeof a === 'undefined') {
  console.log(`Hey!! it's undefined');
}
```

Moreover, you can declare a var an assign a value, but later during the execution you can change it to undefined:

```js
let a = 10;
a = undefined;
console.log(a); // it'll print undefined
```

Then you can say to JS that you have to change the var to non-assigned yet 👨🏼‍💻. 
Differently, `null` indicated that var hasn't any value but it has been inited: 

```js
let a = null;
```

It commonly used to indicate to JS that var won't be use **more** 🤝. The most curious detail is that both of them are false when you create a computation or when you try to check it using an `if` sentence, but what will happen if you try to compare undefined with null:

```js
undefined == null
```

Do you know what will it print?. 
I recommend you to put this staff inside the bowser console to check the result, it will very useful to _understand_ what these type mean. 

This is mainly what JS has `undefined` and `null` values 🥰, then this is all for today post, I remind you that if you have any question you can ask me using comments here, it will be a **pleasure** to help you 🤑
Privateer - The Download / Stream Manager
Tags: python, node, windows, project
Published: 2021-12-20 15:31:04

Have you ever wanted to find a good file on the internet and watch it without downloading? No? Well, I did. And this was the result. WebTorrent is an awesome lib that allows you to stream torrents directly in your broswer. It's fast, lightweight and written in Javascript. I created **Privateer** because I had a use case scenario where I didn't want to archive the torrent and just wanted to watch it without having to download anything.

Using the search page, you can find file indexes (link to where file is on streaming or download server) or stream files directly or download them. Just specify index to file you want and click 'play' or 'download' accordingly.

[here is repo](https://github.com/shreyashchavan/Privateer)
Discuss : What is A Code Review? (PR)
Tags: codereview, codequality, discuss, github
Published: 2021-12-20 15:29:36

Since so many days a Topic is in my mind. I would like to know, what is a code review for you? 

- Syntax and code quality check

- Business logic check

- Both

How much important is each topic? 

How a usual code review looks like for you?


Please share your views and thoughts!
5 Articles every WebDev should read this week (#50)
Tags: webdev, tutorial, javascript, programming
Published: 2021-12-20 15:28:57

A curated list of the top five web development must-reads from last week. Don't miss out on the latest web development stories and insights. Read all about the cutting edge in web development, working in tech and the new tools and frameworks while learning a few new tricks.

---

## State of CSS 2021

> The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 responses. This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.

https://2021.stateofcss.com/en-US/

---

## How to Choose Between SVG or Webfont

> SVG or Webfont? It’s a classic rivalry. What’s the best choice for you? It depends! See which statements below best suit your needs. Score three or more for either Webfont or SVG and you’ll have your answer.

https://blog.fontawesome.com/svg-or-webfont/

---

## How JavaScript engines achieve great performance

> JavaScript is an impressive technology. Not because it’s particularly well-designed (it isn’t). Not because almost every single consumer device with internet access in the world has executed a JavaScript program. Instead, JavaScript is impressive because almost every single feature of the language makes it a nightmare to optimize and yet, it is fast.

https://blogg.bekk.no/how-javascript-engines-achieve-great-performance-fb0b36601557

---

## A Content Model Is Not a Design System

> Do you remember when having a great website was enough? Now, people are getting answers from Siri, Google search snippets, and mobile apps, not just our websites. Forward-thinking organizations have adopted an omnichannel content strategy, whose mission is to reach audiences across multiple digital channels and platforms.

https://alistapart.com/article/a-content-model-is-not-a-design-system/

---

## How Reliability and Product Teams Collaborate at Booking.com

> With more than 1.5M room nights booked per day, Booking.com requires a solid infrastructure that’s constantly monitored. And indeed, Booking.com now has a footprint of 50,000+ physical servers running across four data centers and six additional points of presence. The sheer size of this server fleet makes it viable for Booking.com to have dedicated teams specializing into looking only at the reliability of those servers.

https://medium.com/booking-com-infrastructure/how-reliability-and-product-teams-collaborate-at-booking-com-f6c317cc0aeb


---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---