teleren/devto huggingface dataset:
state in react
Tags: javascript, react
Published: 2021-03-11 19:46:05

Suppose, you don't have a girlfriend or boyfriend. So you don't have any opportunity to send a love letter. In this situation, you can create a love letter for yourself and modify it later. When you modify your own love letter that is written for yourself, it will not affect anything. Now we can start with the state object. state is a built-in object in React. It allows the component to create and manage their own data same as your love letter for yourself. The state doesn't allow passing data from one component to another. Why do you need to pass your love letter when you are single? - You can manage and create data internally. Let's build a counter using state.


```
import React from 'react'
class Test extends React.Component {    
  constructor(props){
    super(props)
    this.state = {
      count:0
    }
  }
  increment(){
    this.setState({
      count:this.state.count+1
    })
  }

  render() {    
      return (      
          <div>      
            <p>{this.state.count}</p>  
            <button onClick={()=>{this.increment()}}>increment</button>
          </div>    
      );  
  }
}
export default Test ;
```
when you click the increment button, the state will increase.

output :![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeot7we7ynxx6k4vbyqi.png)

btw change on state happens based on user input. when React gets informed about the change it immediately re-render the DOM. But it's re-render only responsible components with the updated value. It makes react faster. Once upon a time state was only used for class components. But after introducing React Hooks state can be used in class and functional components.
Cloud costs are shifting left
Tags: devops, aws, opensource, cloud
Published: 2021-03-12 16:02:31

## What is "shift left"?

"Shift left" has become a popular buzzword for both Software Engineering and DevOps. It means introducing processes earlier in the software development cycle.

The "shift left" principle started with testing. In a traditional waterfall model testing is performed just before release. Shift left testing started it earlier by introducing practices such as Test-Driven Development (TDD) and Behaviour-Driven Development (BDD).

We are now seeing the "shift left" principle applied to other disciplines. Continuous delivery platforms allow engineering teams to deploy frequently and integrate a suite of tools into their cycle. The term DevSecOps has been coined. The idea behind it is to introduce security as early as possible in the software development cycle. This has given rise to a whole ecosystem of tools to help implement this practice. Companies like Snyk and Anchore integrate automated security scanning into DevOps workflows so teams can proactively find and fix vulnerabilities.

## Can you shift too far left?

There's an argument that "shifting left" gives too much work and responsibility to engineering teams. This can be the case if the right tooling is not available.

"Shift left" isn't about performing one-off tasks earlier in the cycle, and this is where the name causes some confusion. It's about introducing processes and automation earlier and performing them continuously throughout development.

When a company introduces a "shift left" mentality it is important that it doesn't impact developer velocity. Tools that help here should fit into developers' workflows and show them the right level of information at the right time.

## Will cloud cost shift left?

Currently cloud costs aren't discussed until they become a problem. A common story is when cloud costs become a problem, companies will set a top-down directive and form a team to reduce their spend by X%. They manage to fix the immediate pain but after six to twelve months the problem returns.

Cloud costs aren't a one-off problem that can be solved. That's why it's inevitable that cloud costs will "shift left". Building a cost-aware engineering team is crucial to keep cloud bills under control.

That's why we built Infracost. We help engineering teams implement this culture of cost-awareness without impacting their velocity. You can integrate Infracost directly into your existing workflow to see cost information throughout your DevOps process. Check out [our integrations](https://www.infracost.io/docs/integrations) for instructions.
Einfaches Kursdesign
Tags: kursdesign, lms
Published: 2021-03-12 16:00:54

Was ist das Geheimnis von einfachem und navigierbarem [Online-Kursdesign](https://kursprofi.com/einfaches-kursdesign/)? Ist es ein 10-Schritte-Prozess? Oder eine Handvoll von Schlüsselprinzipien? Ist es etwas, das man durch das Lesen eines Buches lernen kann? Oder ist es etwas, das man nur mit Erfahrung lernt?

Es gibt einige großartige Vorträge im Internet zum Thema E-Learning, einschließlich großartiger Sachen darüber, wie man seine Inhalte und Kurse für großartige Erfahrungen gestaltet. Dennoch gibt es viele Leute, die einfach nicht die Zeit haben, an einem Workshop oder einer Konferenz teilzunehmen, und die schnell mit der Gestaltung ihrer Kurse weitermachen müssen. Hier ist also eine schnelle Anleitung, um einen Online-Kurs zu gestalten, der einfach, klar und navigierbar ist.

Die häufigste Frage, die sich stellt, wenn du mit der Gestaltung eines Online-Kurses beginnst, ist, wie du ihn einfach und navigierbar machst? Diese Frage wird von jedem gestellt, vom Design-Anfänger bis zum erfahrenen Experten. Also, was macht einen Kurs einfach und navigierbar? In diesem Beitrag zeige ich dir vier Wege, wie du deine Kurse einfach und navigierbar gestalten kannst: wie du das Thema des Kurses klar machst, wie du die Lernziele übermittelst, wie du eine einfache Navigationsstruktur erstellst und wie du das Instruktionsdesign leicht auffindbar machst.
What would you do if you weren't a developer?
Tags: discuss, watercooler, career, rudderstack
Published: 2021-03-12 15:48:33

---
title: What would you do if you weren't a developer?
published: true
description: What's your fallback plan?
tags: discuss, watercooler, career, rudderstack
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d93jfmpqzyks29gwigg6.jpg
---

We've all thought about what we'd do instead of developing. I think I'd repair electronics. I worked on electronic test equipment when I was younger and I absolutely loved it. Looking through a microscope, analyzing faulty circuits? The best.

What would you do if you weren't working in software?
Understanding First-Class Functions in JavaScript
Tags: javascript, webdev, beginners
Published: 2021-03-12 15:46:00

## Table of Contents
1. [Introduction](#introduction)
2. [Resources](#resources)

## Introduction

JavaScript is a programming language with First-class Functions.

A programming language is said to have First-class Functions when functions in that language are treated like any other variable. For example, in such a language, a function can be assigned as a value to a variable, can be passed as an argument to other functions and can be returned by another function.

## Assign a function to a variable


```js
// Assign an Anonymous Function to a variable
const greeting = () => {
   console.log('Hi Mikaela!');
};

// Invoke the function using the variable
greeting();
```

## Pass a function as an argument

```js
const sayHi = () => {
   return 'Hi ';
};

const greeting = (hiFn, name) => {
  console.log(hiFn() + name);
};

// Pass `sayHi` as an argument to `greeting` function
greeting(sayHi, 'Mikaela!');
```

## Return a function

```js
const greeting = () => {
  return () => {
    console.log("Hi Mikaela!");
  };
};

// invoke the inner function

greeting()();
// or
var hi = greeting();
hi();


```

## Let's try another example

Create a function that is called addTwoNumbers. This function takes one number as parameter and it returns another function that takes again one number as parameter and finally returns the sum of these two numbers.

```js

function addTwoNumbers(num1) {
  return (num2) => {
    return num1 + num2;
  };
};

// Invoke the function
const add = addTwoNumbers(10);

// 15
console.log(add(5));
```

## Conclusion

First-class functions are a very important part of the JavaScript ecosystem, using them you can work on powerful design patterns such as higher-order functions, partial function application, callbacks, and much more.


## Resources

* [MDN: First-class Function](https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function)
Spring security, CORS and Axios!
Tags: java, mysql, api, webdev
Published: 2021-03-12 15:34:47

Right, I was happily enjoying my day, doing awesome stuff ( *not really* ), when I got a message that my API was causing CORS issues!

Now, I thought this was weird, considering I *had* fixed those issues at the beginning. Last time we faced CORS issues, it was because someone was using an incorrect URL ( *which of course didn't exist* ), so the preflight request got a 404 error, resulting in the blasted CORS error.

Today, I thought it was the same issue. And boy, was I super wrong! After spending the whole day debugging why axios was being a ~~bitch~~ pain-in-the-somewhere, I totally realized something funny was going on. The URL was correct, meaning something else was going on. 

So, what I finally realized was that Spring Security, by default validates `OPTIONS` requests, which are sent by Axios in a preflight request. And that's when it hit me, I had forgotten to disable that. :sweat_smile:

All I had to do, was to go inside my `WebSecurityConfig` class, and inside the `configure`, put a `http.cors()`. Simple, right? Ah well, give me a break!
I made my dream template
Tags: html, css, webdev
Published: 2021-03-12 15:21:59

A couple of days ago, I was looking for a perfect theme for my blog. To me, it's harder to find the exact theme I was looking for than starting the blog itself.

My requirements are pretty simple.
1. It should be <u>simple</u>.
2. It should <u>never distract</u> a user while reading.
3. It should look a little bit <u>professional</u>.
4. It should be <u>colourful</u> at the same time.

I started looking for my "dream theme" on every theme platform I heard of.

There, some of them have some really attractive templates but, it literally kicked me at my budget.

And cheap themes are more like junks.

So, the time came.

I had to make my own theme from scratch.

:)

I quickly copied this [blank template](https://www.w3schools.com/howto/howto_css_blog_layout.asp) code from W3School and started my customizations.

I added two of my most favourite fonts.
1. Montserrat
2. Didact Gothic

I like the card-style layout. 

![simpleblog cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3ey0eo7f9a5putd6gdk.png)

It'll look like this on a mobile device.

![simpleblog mobile cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i97c1z74gndqomoo0906.png)

Lastly, added a simple "author profile" at the right sidebar.

![author area](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6odjqb7nna3vjl0ij0q.png)

Then, I created a bunch of CSS classes to create an article plage for my blog.

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

That's it. Now I have the perfect theme for my blog, exactly what I was dreamed for.

Here you can take a look at the demo website.
Demo: https://clean-blog-template.souviktests.repl.co/

Here is the source code. If you want to use this theme in your blog, feel free to use it.
Source Code: https://github.com/souvik-tests/clean-blog-template

Let me know if we can make this better together.
🚀10 Trending projects on GitHub for web developers - 12th March 2021
Tags: javascript, react, css, webdev
Published: 2021-03-12 15:10:53

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Sweet Alert

A beautiful replacement for JavaScript's "alert"

{% github https://github.com/t4t5/sweetalert %}

---

### 2. Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

{% github https://github.com/juliangarnier/anime %}

---

### 3. cote

A Node.js library for building zero-configuration microservices. cote lets you write zero-configuration microservices in Node.js without nginx, haproxy, redis, rabbitmq or anything else. It is batteries — and chargers! — included.

{% github https://github.com/dashersw/cote %}

---

### 4. Chroma.js

Chroma.js is a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales.

{% github https://github.com/gka/chroma.js %}

---

### 5. Plotly.js

Plotly.js is a standalone Javascript data visualization library. Can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more. 

{% github https://github.com/plotly/plotly.js %}

---

### 6. Complete Intro to React

The Complete Intro to React, the fifth version

{% github https://github.com/btholt/complete-intro-to-react-v5 %}

---

### 7. ReactContentLoader

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

{% github https://github.com/danilowoz/react-content-loader %}

---

### 8. goober

goober, a less than 1KB css-in-js alternative with a familiar API 

{% github https://github.com/cristianbote/goober %}

---

### 9. Tagify

Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and small code footprint, exploded with features.

{% github https://github.com/yairEO/tagify %}

---

### 10. Polacode

Polaroid for your code

{% github https://github.com/octref/polacode %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
9 Tips for Life After University
Tags: life, lifeafteruniversity, university
Published: 2021-03-12 15:08:39

Finally, studying, exam rushes and university life are over because you graduated. Life after university is more important to you now. Because you have the profession you target by studying for years, and by serving this profession, you should earn money for a good future. Life after university starts now.

If you have a profession that you have been aiming for since childhood and attended school for years, you will not have any problems in life after university. Because everyone knows that you will be more successful in the profession you aim to become.

You worked a lot in the last years of your education, maybe it was a little fun, but as a result, you graduated and now you have the title of your target profession. If you think everything is over and you have overcome all difficulties, then you are wrong! Because now is the time to study more.

The university is over and you have a diploma. Now it’s time to do extensive research and find your dream job and a job that will also make good money.

But don’t lose hope right away, because if you don’t make the mistakes other people make, it can put you one step ahead.
<a href="https://listwalls.com/9-tips-for-life-after-university/">Life After University - Read More</a>
Nevertheless, Jan Coded
Tags: wecoded
Published: 2021-03-12 15:07:21

I apologize for this being late.  I have kept up with and read through some of the #shecoded stories.  I also apologize that this may not fit the regular definition of the tag.  However, I would like to tell you a story from history about someone very close to me that coded.

I married my high school sweetheart, Jan.  She became a book keeper in banking and by the mid-1980's rose to the manager of the bond operations division of a major Texas bank.  She was in charge of making sure that what the bond traders bought and sold was properly accounted for and that bond owners received their dividends and payments.

No, she was not a software developer or a programmer per se.  She had learned BASIC because we bought an Atari 600.  She and I would stay up late at night and write programs on the Atari to do things we needed.  She wrote as much as I did.  I am still proud of the application we made to make mailing labels for a dot matrix printer we owned.

Her bank purchased a Wang minicomputer for the bond operations department.  The software was in BASIC.  It helped modernize and make efficient their ability to maintain the bond operations.

As manager, one of her duties, because she knew and could code in BASIC was to handle the software updates.  Back then, most minicomputers received updates in the form of tapes that had to be loaded.  However, her Wang did not receive them this way, or they were not complete.  

Jan would spend long hours after work sitting at a terminal typing in software updates and changes received in paper form or through a long distance phone call to Wang in California (at least that's where I remember Wang being located). Then she had to test those updated lines of code to be certain they worked.  

Without her skill at BASIC, that would have been quite difficult and possibly costly if the bank had to hire someone else or have Wang send technicians to do updates.

In 1986 or so, a bubble in the Texas real estate market burst and many banks were sold out to other banks.  Jan's was one of those banks.  The new owners sent in their management team that was very, shall we say, misogynistic?  Jan's new vice president made it very clear, in a manner where he couldn't be caught, that a woman should not hold her position.  After taking a long weekend, she resigned and pretty much never returned to banking.

I did not find out about her experiences coding in BASIC to keep her minicomputer up to date until several years later when PC's became a thing.  I have many reasons to be proud of her after all these years; yet, for that time in the middle of a bad situation, nevertheless, Jan coded.
What is JavaScript
Tags: javascript, beginners, tutorial, webdev
Published: 2021-03-12 15:07:07

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( ***<a href="http://blogs.stackfindover.com/what-is-php/">What is PHP</a>*** ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

###Who invented JavaScript?###
JavaScript language was invented by ***<a href="https://en.wikipedia.org/wiki/Brendan_Eich">Brendan Eich</a>*** in 1995. JavaScript is inspired by Java Programming Language. The **first name of JavaScript was Mocha** which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in **December 1995**, it was renamed JavaScript which is still in trend.

###What is JavaScript?###
JavaScript is a **client-side scripting language** used with HTML (***<a href="https://blog.stackfindover.com/what-is-html/">Hypertext Markup Language</a>***). JavaScript is an **Interpreted / Oriented language** called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

###How to add javascript code in HTML?###
The code of JavaScript is written between `<script>` tags, but it is not necessary that ‘**script tags**‘ be written between ‘**head tags**‘ JavaScript code can be implemented anywhere on the web page to implement the code of JavaScript.

####What is the type attribute used for####
The ‘type’ attribute is commonly used in the script tag. What type of content is given here is written.

```
<script type="text/javascript">
	 // Here we have to code JavaScript
</script>
```
###How to comment JavaScript code?###
1. For single line comment in JavaScript we have to use // (double slashes)
2. For multiple line comments we have to use / * – – * /

```
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>
```

###<a href="https://blog.stackfindover.com/what-is-javascript/">Check Full Article</a>###
New version of postit-js got published
Tags: javascript, diagramjs, brainstorm, productivity
Published: 2021-03-12 14:56:33

---
title: New version of postit-js got published
published: true
description: postit-js-core@1.0.0 got released
tags: #javascript #diagramjs #brainstorm #productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kxsdpwapwbxwt58zh42.png
---

Hi folks 👋🏻

today I just released a new version of `postit-js`, an embeddable Javascript library to create simple Brainstorming boards. 

The APIs are now exposing Promises, a proper test infrastructure was established, and on top, the bundle size got reduced decently.

Simply create your Modeler instance

```js
import 'postit-js-core/assets/postit-js.css';

import PostItModeler from 'postit-js-core/lib/Modeler';

const XML = `
<?xml version="1.0" encoding="UTF-8"?>
<postit:Definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram">
  <postit:PostitBoard id="Board_1">
    <postit:SquarePostit name="A new idea" id="Postit_1" color="#7EC845" />
  </postit:PostitBoard>
  <postitDi:PostitRootBoard id="RootBoard_1">
    <postitDi:PostitPlane id="PositPlane_1" boardElement="Board_1">
      <postitDi:PostitShape id="Postit_1_di" boardElement="Postit_1">
        <dc:Bounds x="300" y="200" width="150" height="150" />
      </postitDi:PostitShape>
    </postitDi:PostitPlane>
  </postitDi:PostitRootBoard>
</postit:Definitions>`;

const modeler = new PostItModeler({
  container: '#canvas',
  keyboard: {
    bindTo: window,
  }
});

await modeler.importXML(XML);
```

and go on brainstorming

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kxsdpwapwbxwt58zh42.png)

Check out [the demo](https://postit-js-demo.netlify.app/) or the project on GitHub.

{% github pinussilvestrus/postit-js no-readme %}

Have fun!