teleren/devto huggingface dataset:
React: A Peek Under The Hood Part 1
Tags: react, html, javascript, webdev
Published: 2020-07-25 11:31:26

For most people who write React application, the starting point is usually with npx or create-react-app CLI. I am not different from this group, I kicked off learning react using CLI tools without prior knowledge of how React works under the hood. Although there is nothing wrong with this, there are a few perks to knowing how React works without the fancy tools and packages that come with the CLI boilerplate.
I will be walking you through the most basic parts of building pure react apps with React CDN. Create a basic HTML file and insert a div with the id root, you can name the id anything but, I chose root because of popular convention and practice 😁. 


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


After this go over to (https://reactjs.org/docs/cdn-links.html) and grab the CDN links for React and React-dom. You have options to choose from development and production. Now create a .js file and link it beneath the CDN files, at this point your HTML file should be looking like this.


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


Now that we have our HTML and JavaScript file set up let's start writing pure React codes :-D.

Open up the Js file and declare a function(App) just like you'd normally do with boilerplate React app. Inside your function return React.createElement('p', {}, 'Hello World'). 


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


I know it is all starting to look weird and new to you but if you look closely, you notice something familiar(createElement), this is the same API used in creating new DOM elements in javascript. Now let me break everything down. 

The React.createElement Method is passed 3 parameters. 
- The first one is the element tag that you are creating.
- The second parameter holds the properties of the element (props, classes, id).
- The third parameter holds the children of the element, in this case, it is the string 'Hello World'.

How exactly do we get this to render/make it display in the browser? that is the power of the react-dom. Just under the App function, insert this : ReactDOM.render(React.createElement(App), document.getElementById('root'));

If you look at the line of code, you will notice that the App component/function is created before gluing it to the HTML page using the react-dom, the ReactDOM.render takes two parameters; The first parameter holds the component while the id of the DOM element that the component is to be appended in goes inside the second parameter.


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


The react-dom serves as a glue, it takes the component and renders it inside the element passed in the second parameter.

If you have followed all these steps, congratulations you just wrote your first code using pure react.

I will dive deeper and review how to pass in properties and multiple child elements using pure React in the next part.

Make sure to leave a Reaction and Follow 😉, Thank you.
Kaggle Courses
Tags: datascience, kaggle
Published: 2020-07-25 11:23:36

Over the last few weeks, I have been on a mission to go through the basics of data science in the best way possible.
My absolute favorite was the Kaggle Courses.

Here are a few of the reasons why I loved them.
1. They are short - I was able to complete each course within 2hr 30 (30mins daily)
2. You don’t need to set up anything - I hate setting up my environment each time I start a new course just because the instructor decided to teach in a different environment than I am currently using. With kaggle courses, all the code executes within their environment.
3. Did I mention it's absolutely free?
4. And you get a cute little certificate once you complete the courses.

So even if you are a novice or a pro I highly recommend them.
Article about Phalcon in a French magazine
Tags: phalcon, php, article, french
Published: 2020-09-04 15:58:11

---
title: Article about Phalcon in a French magazine
published: true
date: 2020-07-25 10:47:00 UTC
tags: phalcon,php,article,french
canonical_url: 
---

I’m happy to announce the release of my article dedicated to Phalcon in a French magazine called Programmez.

![PROGRAMMEZ - Phalcon - Cover](https://blog.phalcon.io/assets/files/2020-07-25-cover-phalcon.jpg)

Even though the article is in French, it us great to see the title : **Phalcon : le nouveau framework PHP à connaître** - **Phalcon : the new PHP framework to know** on the cover of the magazine.

The article is eight pages long, in which I am presenting Phalcon and Zephir, as well as showcasing Phalcon’s main features.

This edition is available for two months (June-July 2020). You can find it on [the magazine’s website.](https://www.programmez.com/magazine/programmez-241-pdf)

Thank you! I hope this article contributes to increasing Phalcon’s community !

_Article submitted by Jérémy PASTOURET_ [@jenovateurs](https://github.com/jenovateurs)

* * *

Chat - Q&A

- [Discord Chat](https://phalcon.io/discord)
- [Forum](https://phalcon.link/forum)

Support

- [OpenCollective - Support Us](https://phalcon.io/fund)
- [Store - Merchandise](https://phalcon.io/store)

Social Media

- [Telegram](https://phalcon.io/telegram)
- [Gab](https://phalcon.io/gab)
- [MeWe](https://phalcon.io/mewe)
- [Parler](https://phalcon.io/parler)
- [Reddit](https://phalcon.io/reddit)
- [Facebook](https://phalcon.io/fb)
- [Twitter](https://phalcon.io/t)

Videos

- [BitChute](https://phalcon.io/bitchute)
- [Brighteon](https://brighteon.com/bitchute)
- [LBRY](https://phalcon.io/lbry)
- [YouTube](https://phalcon.io/youtube)

<3 Phalcon Team
SAP SRM Interview Questions
Published: 2020-07-25 10:36:56

SRM stands for Supplier Relationship Management. It is an extended form of ERP where data gets transferred between SAP R/3 and the SRM screen (vice versa) so that every Vendor's coordination will be better and which will fully avoid the paperwork and unwanted confusions. It is very effective for the companies which have a large number of users who can directly purchase the material using the Shopping Cart in which the materials can be selected from the available Catalogs.
<a href="https://tekslate.com/sap-srm-interview-questions-and-answers">SAP SRM Interview Questions</a>
Using morgan with Express for Backend Logging
Tags: node, backend, logging, express
Published: 2020-07-25 09:53:39

*Logging* is an important element of writing software as it helps us to see the software operations, debug and catch errors.

**morgan** is a logging tool (middleware) that can be used in HTTP servers implemented using Express & Node.js. It can be used to log requests, errors, and more to the console.

>Middleware are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next [1].

## Getting started with morgan
### Installation 
```
$ npm install morgan --save
```

A *basic code* snippet using morgan looks like this:
```
const express = require('express');
const morgan = require('morgan');

const app = express();

app.listen(3000, () => {
     console.log('App listening on port 3000 ...');
});
```

**Output**

```  
console.log('App listening on port 3000 ...');
```

## Formatting Logs
### Making use of predefined format strings

morgan offers us with a set of predefined format strings, which are plug-and-play. For example, let's look at `morgan('tiny')`:

```
const express = require('express');
const morgan = require('morgan');

const app = express();
app.use(morgan('tiny'));

app.get("/", (req, res) => {
  res.send("<h1>Hello world!</h1>");
});

app.listen(3000, () => {
    console.log('App listening on port 3000 ...');
});
```

Open your web browser and go to http://localhost:3000. You will see the following output in your web server:

```
App listening on port 3000 ...
GET / 200 24 - 2.868 ms
```


The output is displayed in the following format:

`morgan(':method :url :status :res[content-length] - :response-time ms')`

You can find more such predefined formats from [here]( https://github.com/expressjs/morgan#predefined-formats).

### Custom Log Formats by Creating Our Own Tokens

We can create our own custom log format strings. Below is an example of how we can create our own custom log format strings.
```
const express = require('express');
const morgan = require('morgan');

const app = express();

//we are defining a new parameter called host
morgan.token('host', function(req, res) {
    return req.hostname;
});

// we are using the host parameter
app.use(morgan(':method :host :status :res[content-length] - :response-time ms'))

app.get("/", (req, res) => {
  res.send("<h1>Hello world!</h1>");
});

app.listen(3000, () => {
    console.log('App listening on port 3000 ...');
});
```

**Output**
```
App listening on port 3000 ...
GET localhost 200 21 - 2.819 ms
```

I hope this post has helped you to get started with logging using morgan. *Please like this post and follow me for more such posts.*


**References**
[1]  http://expressjs.com/en/guide/using-middleware.html#using-middleware
How to learn a skill?
Tags: story, javascript, beginners, codenewbie
Published: 2020-07-25 09:49:56

According to successful people, it takes around 20 hours to learn a new skill and 10000 hours of continuous efforts to be an excellence in a skill. The same goes for coding.

Programming is a skill that helps humans to make working mechanisms out of dumb machines making human lives more efficient and more powerful.

To program a machine we need to talk to the machine and give it instruction in a machine-understandable format, i.e, binary language 0 or 1, true or false, switch on, or switch off. The inefficiency of humans to interact in binary language gave birth to assembly language and high-level language. A programming language is created for solving any number of problems. Similarly, javascript is a language that was created with the intent to make the internet interactive.

Earlier, to learn a skill people used to join classes, go to colleges, or work as an apprentice. This required a lot of effort, time, and money. In the age of the internet, information has lost its value. To master a skill all you need is a device to access the internet, time, and a lot of dedication.

Just by taking a Udemy course worth $10 or $20, you can become a software developer, musician, artist, improve your personality, learn share market which in turn helps you make thousands and millions. If $20 sounds too much just start surfing google with the right keywords and you will land to a site that will give some knowledge, keep on building skills by searching and you can become good at what you are working. 

As I said in the beginning, it just takes 20 hours to learn a new skill and 10000 hours to master it. In 20 hours, you can build the basic foundation that is needed for the skill, then you have to make your hands dirty. Practice small exercises, make full projects. In the beginning, it may seem very difficult, just stick on to it, have patience, and practice every day. You can also get associated with communities, like Dev Community is a platform that connects all the developers, these communities help individuals to grow. Also, when you see excellence expressed over the communities, it inspires you to be better skilled and a better human being.
How do you keep notes?
Tags: webdev, discuss, productivity
Published: 2020-07-25 09:38:40

---
title: How do you keep notes?
published: true
description: 
tags: webdev, discuss, productivity
cover_image: https://images.unsplash.com/photo-1512314889357-e157c22f938d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80
---
Keeping notes at all times is extremely important, so you can track down your thoughts and ideas. Whether inspiration strikes when you're at home or on the go, a note-taking app offers an easy, convenient way to store all this information in one place.

My first note-keeping app was [Sticky Notes](https://chrome.google.com/webstore/detail/sticky-notes/nbjdhgkkhefpifbifjiflpaajchdkhpg). I liked how fast and easy to access it was. Tho it became pretty hard to manage larger blocks of information quickly and I really missed some richer formatting options.

Next, I moved to [Google Keep](https://keep.google.com/). I really liked the UI and the fact that all my ideas were synced across devices, tho I noticed it was the slowest compared to other tools mentioned below.

Sometime later I moved to [Trello](https://trello.com/) for planning and [Evernote](https://evernote.com) as a note-keeping for larger blocks of information (article drafts, etc). I really liked the simplicity of Trello and the clean UI of Evernote.

My current note-keeping solution is [Notion](https://notion.so). I like how incredibly feature-rich it is. It's an awesome all-around organizing tool, tho requires quite a lot of learning to understand which patterns work best for you.

Could you please elaborate a bit on what note-keeping solutions have you tried and what works best for you?
Password-based or Passwordless login, what do you prefer/recommend and why?
Tags: discuss, password, passwordless
Published: 2020-07-25 09:21:04

---
title: Password-based or Passwordless login, what do you prefer/recommend and why?
published: true
description: 
tags: discuss, password, passwordless
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gwgodxrmdlrczer1vm46.jpg
---
I am an advocate of Passwordless login, I recommend everyone to go passwordless, and rely on social logins but I would love to know the views of dev-community on the subject.
Simple add round corners to SVG path using quadratic line type
Tags: codepen
Published: 2020-07-25 09:15:10

---
title: Simple add round corners to SVG path using quadratic line type
published: true
tags: codepen
---

<p>This is a simple way to add round corners to at SVG path element. This version uses the quadratic line type to add the round corners. It handles only PATH elements which uses only the L and M line types. It restricts the corner radius to be less than then half of the shortest lines to avoid broken corners. For now you cannot edit the figure or copy the SVG. To do that you will have to inspect the DOM.</p>

{% codepen https://codepen.io/netsi1964/pen/LYGaOvv %}
Serverless for dummies with nextJS
Tags: javascript, react, webdev, showdev
Published: 2020-07-25 08:44:36

Good morning all.
I am doing this post to present my new youtube channel through which I develop live sites.

For this first opus, I try to discover the power of the NextJS framework. 

You will find a playlist of 15 fairly short and funny videos and of course the source code of the video.

Thank you for your support and do not hesitate to send me your comments in order to improve my content.

https://www.youtube.com/playlist?list=PLGtPusW_j7Yo7Ck27AjsD0YVWlAchrhx-
Create-React-App or Die Tryin'
Tags: react, blog, beginners
Published: 2020-07-25 08:37:11

###<center>VSCode: Humble Beginnings</center>
---
Yesterday, I started tinkering w/ VSCode and managed to learn about some really useful extensions [i.e, Auto Tags, Emmet, and Snippets] Known for configuring every setting on every digital device - this aspect was fun...until we got to the config files for linting 🤯

It's pretty important to have spellcheck/auto-correct/auto-format-on-save stuff, the formulaic editions©, running when working on projects. It really helps you type less to avoid strain and makes the experience much more enjoyable.
> 😲 **OMG** now we can focus on the _99 reasons_ why we `Failed to compile` 🌶

###<center>Dependencies</center>
---
FFW>> TIL about the *complexity* of dependencies and how `import` is akin to linking stuff like Google Fonts and Font Awesome icons in an `index.html`; oversimplification? Mm..hope not lol. At some point I was able to install:
- homebrew 
- npm 
- yarn 
- react 
- node-css 
- ???

Tbh, there were just sooo many idr. Will have to check my `zsh` later for accuracy. It's really tough to get a full list of dependencies/packages w/r/t your project, get comfy w/ your directory (file) structure _and_ configure the respective `.rc` or `.json` file.
> Oh configs, truly where the journey begins 🧗🏻‍♀️

###<center>sdll Decides on a Blog</center>
---
At this point I had scoured all of YT and 3 search engines on 2 browsers (never mind the IP)  to find a 1/2 way decent tutorial. I won't sing my praises just yet; shameless self-promos, vague instructions, the best ones have low video quality, the worst ones post great taglines but are just knock-offs of the good ones >.<"

The difficult part about this: the misinformation about what the best superficial tools are but not exactly how to build anything relevant or structurally sound.
> I'm determined, to share my experience w/ others 🚫🧢

Onward we must clack! So far, so good, minus an issue w/ using `import` to access `.scss` for my navbar. Stay tuned!

######[Image Credit] (https://www.pexels.com/@karolina-grabowska)
#100DaysOfCode | Day 1
Tags: challenge, 100daysofcode, python, codenewbie
Published: 2020-07-25 08:03:31

Heyyyyyyyyy, here I am again...
Yesterday was my _first_ day of **_#100DOC challenge_**.
I solved 1 exercise from exercism but I spend around 2-3 hours to learn the concepts of **OOP** which is the really important topic in high-level languages and to be honest it seems to be very cool...

I know there's a lot to learn and maybe some of them could be overwhelming but I think that's part of the learning curve for every new skill :) 

So I'll take it easy and keep moving forward...
Yesterday I focused deeply on:
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5mc152ehotmft1b2exmt.png)
  + Instances
  + Instance variables
  + What exactly does **self** mean in classes?
  + What attributes are in classes
  + What actually __init__ method does ?
and so on.

I'm gonna write and article about what I learned from _Corey Schafer_ and _Andre Neagoi_ tutorial and share it in my next posts.

Thank you so much for spening your valuable time with me and reading my post.
If you have any Idea for **_#100DaysOfCode_ Challenge **or any Advice for improving my skills just let me know and leave a comment below.
Good Luck 
Happy Coding ;)



PostCover: _Joshua Alexander_
What is the apache web server?
Tags: beginners, webdev, codenewbie, node
Published: 2020-07-25 07:48:52

This article was originally published at https://www.blog.duomly.com/6-most-popular-backend-questions-and-answers-for-beginners/#what-is-apache-web-server-tutorial-for-beginners

---

### What is the apache web server?

{% youtube -qwgwzeHAkM %}

The older brother of NGINX is Apache Web Server. It's one of the most popular ones and a very old web server, as it exists for about 25 years.

Like other web services, Apache performs the behind the scenes actions that return the website from the server to the browser.

When the user opens the browser and enters the website's address, he would like to see the request is sent to the server, and the server returns the proper resources to the browser. Apache is the software that takes part in the process and proves a smooth and secure HTTP communication between those two parties.

Apache has a modular structure and is highly customizable. Server admins can turn on and off the web server's additional features, and custom server configuration can be set through the .htaccess files.

The main disadvantage of the Apache Web Server is performance issues when the website has very heavy traffic.

The other web services that can be used are NGINX or Tomcat Apache.

<a href="https://www.duomly.com/?code=lifetime-80">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/k00bacsgkavhcziauwrg.png)</a>

Thank you for reading, 
Anna from Duomly
YouTube Video | CSS Flexbox Course for Beginners - 2
Tags: html, css, webdev, youtube
Published: 2020-07-25 07:43:50

In this series we will look over the CSS Flexbox model and how easy it is to learn. With the creation of flexbox, we can create a modern day website with ease and ditching CSS frameworks like bootstrap.

Here is the final part of the series.

{% youtube FPLEJLIdHsA %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
How To Type Degree Symbol and degree celsius symbol?
Tags: degreecelsiussymbol, degreessign, degreesymbolinmac
Published: 2020-07-25 07:33:10

Degree Symbol in word

Press and hold the ALT key and type 0176 on the numeric keypad of your keyboard having NUMLOCK on. If you have a Laptop and there is no numeric keypad, press and hold the Fn key before typing the 0176 numbers of degree symbol.

How to type degree symbol

Degree symbol Mac (°)

On the Mac, the degree symbol is already part of your keyboard. Just press the Shift key and close parentheses because the degree symbol is part of it: Example – Press and hold the SHIFTOPTION8 keys on your keyboard.
https://degreessymbolsign.com/

Degree Symbol mac

Degree symbol in Word (°) Easily?
In your Word document, in addition to the two methods presented above, there is a third way to insert the degree symbol in word in the text. To use it, select the Insert tab and click Symbol.

degree symbol in word

If the degree is not one of the options in the small menu that will appear, click More Symbols. Search for the desired symbol and confirm with Insert. It will automatically appear where the cursor is. The next time you want to enter it, just select it from the Recently Used Symbols.

How to make a degree symbol?

In order to represent the number (or word) to the appropriate degree, it is necessary to properly draw it up. We all know that Word is a faithful and versatile assistant. If you represent a number (or word) to power, you can also use its services, and read the instructions in this post.

Degree Sign in Word 2007

•We put the cursor at the end of the entered word or number (x or 2, or something else).

•We find on the toolbar “Home” – “Superscript”.

•We introduce the corresponding degree, which, by the way, can be represented not only by a number but also by the letter: x y.

•A little trick: in order not to constantly refer to the toolbar, you can call the superscript by using the key combination “Shift” + “Ctrl” + “+”.
Beginner in React js? 
Tags: react, beginners, portflio
Published: 2020-07-25 07:27:53

Hi!!
So being a beginner myself it has been hard for me to find resources to learn something new. My first brush with React js started two months ago and I am confident to say that whatever effort I put in has helped me to grow a lot and has brought me one step further to where I was a few months ago.
The only thing I have learned is that hard work really matters a lot. Learning from various youtube tutorials to signing up for courses at Coursera and edx has helped a lot.
It is never too late to start doing something, soooooo grab your laptops and start off with your first website!!!
Free Programming Projects With Source Code
Tags: computerscience, csharp, javascript, java
Published: 2020-07-25 07:20:18

If you are a beginner in programming world and want to learn programming fast. So I suggest you a  website which have projects including source code and you can do practice on those projects. <a href="https://prosourcecode.com/"><b> Premium Projects  With Source Code</b> </a>