teleren/devto huggingface dataset:
Basic Explanation of Javascript to Beginners
Tags: javascript, beginners, webdev, frontend
Published: 2022-05-21 18:11:46


**WHAT IS JAVASCRIPT?**
JavaScript as we may know it, is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user.

**Functionalities of JavaScript**
For a long time JavaScript was only used by programmers to build 
 interactive web-pages. Well, JavaScript can do a lot more than I can cover in this article.
Here are some basic things JavaScript is used for:

1. **_Adding interactive behavior to web-pages:_**   JavaScript allows users to interact with web pages. There are almost no limits to the things you can do with JavaScript on a web-page. These are just a few examples: 
    • To hide or display more information with the click of a button
    • Change the color of a button/any container when it gets hovered
    • Slide through a carousel of images on the homepage
    • Zooming in or out on an image
    • Playing audio and video in a web-page  
    • Displaying animations
    • Using a drop-down hamburger menu.
2. **_Creating web and mobile apps:_**    Various JavaScript frameworks can be used in developing and building web and mobile apps. JavaScript frameworks are collections of JavaScript code libraries that provide developers with pre -written code to use for routine programming features and tasks.
3. **_Building web servers and developing server applications:_**  JavaScript can be used to build simple web servers and develop the back-end infrastructure using one of JavaScript frameworks which is Node.js.
    4. Game development:  Yes of course JavaScript can be used to develop and create browser games.
    5. JavaScript can be used to to change HTML content, it can be used to change HTML styles (CSS) and also to change HTML attributes.
    6. JavaScript can be used to validate data.
       The beauty of JavaScript is that you can build anything with it (not literally everything.)

**Please Note:** This post is an assignment given to me by my teacher where am learning web development at OsMaxin Developers, if you are in Nigeria you can check them out, they have good records of training developers for over a decade.

PLEASE I NEED COMMENTS TO GET GOOD SCORE
collapsed side menu option in bootstrap 5 admin dashboard
Published: 2022-05-21 17:57:20

I wish you would return the collapsed side menu option in bootstrap 5 admin dashboard, I think it is a practical and useful option in many applications. Greetings to you, and thank you very much.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lqv3rn5p76zurrgdsyi.png)
Figma | Made with Gatsby JS
Published: 2022-05-19 16:49:58

![Figma | Made with Javascript | Gatsby JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652798722/large_figma_made_with_gatsby_js_42bf8a8d3f.webp "Figma | Made with Javascript | Gatsby JS")


### The collaborative interface design tool.

> Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
> 
> ### Explore ideas together
> Diagram, sticky-note, and workshop in FigJam—an online whiteboard for you and your team to brainstorm in the open.
> 
> ### Bring those ideas to life
> FigJam and Figma live side-by-side, so all design work, from ideation to execution, can be found in one place.
> 
> ### Create. Iterate. Repeat.
> Build an iterative design flow with live collaboration that keeps you in the loop whether you’re working in the office or remotely.
> 
> ### Test and get buy-in
> Share, present, and gather feedback on interactive prototypes with smart animation and dynamic overlays that feel like the real thing.
> 
> ### Powerful design systems
> Increase design consistency with searchable assets and shareable styles in one home—centralized and accessible to your entire company.
> 
> ### Ship better outcomes
> Deliver better products and make an impact with a platform that connects the dots across design, product, and development.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Figma on Twitter](https://twitter.com/withjavascript/status/1527329500203450368?s=20&t=GTdeDAHSoWgyiQifz64vZg)
 |
| Medium | [Figma on Medium](https://medium.com/@madewithjavascript/figma-made-with-gatsby-js-be43e4c7c961)
 |
| Facebook | [Figma on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02f1MTUZuHFRVxi7txvZfvw3eS6Zf8gFQ536cdWSv1ZkA7UFdEJdkRhq7dEgEanFkgl)
 |
| Tumblr | [Figma on Tumblr](https://madewithjavascript.tumblr.com/post/684697934284111872/figma-made-with-gatsby-js-the-collaborative)
 |
| LinkedIn | [Figma on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6933095505119862784)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
    
 - [Made with Gatsby JS](https://madewithjavascript.club/categories/gatsby-js)
    

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
CS50P Weeks 0 - 2
Tags: coding, career, cs50p
Published: 2022-05-21 17:52:58

---
title: CS50P Weeks 0 - 2
series: CS50P // Craft && Code
published: true
description: Recapping weeks 0 to 2 for Harvard's CS50P course (intro to programming with python)
tags: coding, career, cs50p
cover_image: https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170
---
Github tracking repo -- [here](https://github.com/haleyelder/cs50)
Crossposted on my blog Craft && Code -- [here](https://craft-and-code.netlify.app/)

I might've fallen into shiny object syndrome once more, but I’m feeling a bit more confident in this one! I had attempted CS50 last summer and fall but eventually dropped it; I thought I was understanding enough but didn’t seem quite relevant at the time and my confidence fell flat. Winter had a bit of downtime and worked on a separate project ([watchlist data analysis](https://watchlist-data-analysis.netlify.app)) to freshen up some React skills. 

Fast forward to this year, specifically April 1st, [CS50P] (https://cs50.harvard.edu/python/2022/) (Intro to programming with python) was released and I started it about a month after it was released. I was surprised how much of the basics I could recall from last fall. I finished the first three weeks of course work in a week and a half!

These first weeks covered user input and handling different use cases utilizing functions, variables, and conditions to test your skills with a few problem sets per week to work through. I’ve been keeping track of my code submitted at the Github repo above; it’s also a good tactic to keep track of what was completed when since my imposter syndrome gets pretty high pretty quick. Also, time is still funky and weird nowadays and this is an easier way to internalize it. There were a few days I was feeling out of it and felt I was falling "behind," but that was because I was sick and took the time to recover.

My goal is to complete the course around mid to late June and continue on to CS50web, but now that the Final Project link has been released, we’ll see if the deadline might need to be pushed. I have no idea what to do quite yet and will need to brainstorm some ideas. 

My plan after this is possibly running through the [freeCodeCamp Python certificate](https://www.freecodecamp.org/learn/scientific-computing-with-python ) or jump right into [CS50web](https://cs50.harvard.edu/web/2020/) that expands on more Python, Django, databases and more. 

Have a good weekend, all!

-- H
Any beginner friendly course on Web Penetration testing?
Tags: help, career, beginners, discuss
Published: 2022-05-21 17:48:56

Hello friends,

I'm working as frontend developer from last 2.5years, interested to get into ethical hacking but I have no idea where to get started with little research came to know about Penetration testing, which I thought would be best for me as I also have knowledge of frontend stuffs.

Currently I'm doing ZTM Web security & bug bounty course from Udemy but it's just 10hr & they had touched just basics of tools etc. It's good course but I'm in search of more in-depth knowledge of this field. 

From carrer perspective I want to work as FrontEnd Developer only but I want to lean about Penetration testing to participate in bug bounty programs.

Any beginner courses or a roadmap some one can recommend to become a successful pen tester? Assuming I have no knowledge related of this field.
#45 - Persistent Bugger - Codewars Kata (6 kyu)
Tags: javascript, programming, 100daysofcode, computerscience
Published: 2022-05-21 17:25:01

**How can you help?**
[You can support by buying a coffee ☕️](https://www.buymeacoffee.com/cesardlr)
[Follow me on Github ](https://github.com/Cesardlr)
[Follow me on Twitter ](https://twitter.com/cesar__dlr)

##Instructions
**Task:**
Write a function, persistence, that takes in a positive parameter num and returns its multiplicative persistence, which is the number of times you must multiply the digits in num until you reach a single digit.

**Example**

> 39 --> 3 (because 3*9 = 27, 2*7 = 14, 1*4 = 4 and 4 has only one digit)
> 999 --> 4 (because 9*9*9 = 729, 7*2*9 = 126, 1*2*6 = 12, and finally 1*2 = 2)
> 4 --> 0 (because 4 is already a one-digit number)

---

##My solution:


```javascript
function persistence(num) {
  let count = 0;
  while(num.toString().length > 1){
    num = num.toString().split('').reduce((acc,el)=>acc *= +el,1)
    count++
  }
  return count
}
```


---

##Explanation
First I created the variable count, where I'll save the number of times the number had to be multiplied so it gets to only one digit

```javascript
let count = 0;
```

---

Then I used a while loop that will iterate until the length of the number is 1

```javascript
  while(num.toString().length > 1)
```

---

Inside of that while loop, I revalued the variable "num" to save the result of the multiplication of the digits, I did this by splitting the number into an array, and then I just used the reduce function to save the result of the multiplication of the digits. 

> **Note:** In the next iteration of the loop the variable "num" will be the result of the multiplication from the last digits

After that I just added one to the count variable

```javascript
  num = num.toString().split('').reduce((acc,el)=>acc *= +el,1)
  count++
```

---

At the end I just returned count

```javascript
  return count
```


**What do you think about this solution? 👇🤔**

[Solve this Kata 👨🏽‍💻]
(https://www.codewars.com/kata/58539230879867a8cd00011c)
system-ui and friends
Tags: webdev, beginners, css, html
Published: 2022-05-21 17:23:59

_The CSS one-liner to use system fonts_

We love our custom fonts, but they come with a cost that we don't often realize.

When we load a font over the internet, be it from our own website or (god forbid) Google Fonts, there is a small but perceptible "layout flash" for our visitors. This happens because the browser initially renders the content using the fallback font, then re-renders it after the custom font has been downloaded over the network.

Worse, this is something that happens only once (generally).

"Why is that worse?", you'd ask.

Well, it's worse because after the first load the font gets cached on the developer's machine, and then they become oblivious to the problem. They don't see the website the way a first-time visitor would see it. They feel confident about their code's performance, while the first-time visitor to the website walks away with an amateurish first impression as they see the website loading first, then everything shifting around and getting re-rendered again.

Now, this is not a niche problem, and there are many approaches that developers have used to improve the user experience. But these come with complexity.

The simplest solution is to let go of the custom font, and to just use the system font! (Thank you, Captain Obvious).

The issue with this is that there isn't a browser standard way to use the default, OS sans serif font. Or rather, there wasn't such a way previously.

Now there is, with `font-family: system-ui`, the hero of our post.

Cool. Are we done?

Well, as you'd have guessed, browser support for this is still in the works. So in the meanwhile, we need to use this longer version that provides fallbacks for most OSes.

```

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

```

Using the system font is not always a solution, but for where it is (for example, in the body of transactional HTML emails), it is often a better approach than loading a custom font.

Till next time, happy CSSing! 🧑‍💻

---

If you'd like to hear more about our battles with browsers, follow us on [Twitter](https://twitter.com/enteio).

Or if you'd hang out with a bunch of engineers building an e2ee photo storage service, come say hello on [Discord](https://ente.io/discord).
Let's Learn Eleventy
Tags: ssg, eleventy
Published: 2022-05-21 17:19:38

For the past couple of weeks I have been exploring Static Site Generators (SSG) in an effort to see what exactly I need that is specific to [Next.js](https://nextjs.org) and what can be accomplished with just HTML and some CSS. Also to see how much client side javascript is actually necessary.

To that effect, I started investigating **[Eleventy](https://11ty.dev)**. On my quest, I have been going through several tutorials and the documentation.

The problem is:
1. The documentation, like the Next.js one, assumes knowledge of things.
2. A  number of the tutorials I came across just stop midway.

So, I'm making my own. We are going to be starting from scratch, exploring what **Eleventy** can do, deploying it and adding styling. 

Let's begin shall we?

## What is Eleventy?
[Eleventy](https://www.11ty.dev/) is static site generator that is able to mix template languages. Content can be written with Markdown or one of the other ten template languages. Or, dynamically create pages from local data or external sources that are compiled at build time. It has zero client-side JavaScript dependencies, so your site is **truly static**. 


### What They Say
> Eleventy, a simpler static site generator.


Well that's all for now. I'll be back with the next one as we begin...

---

###  Thank you for reading, let's connect!
Thank you for visiting this little corner of mine. Let's connect on [**Twitter**](https://twitter.com/Psypher1), [**Polywork**](https://www.polywork.com/psypher1) and [**LinkedIn**](https://www.linkedin.com/in/jamesmidzi/)
🧵 Rate my GitHub Profile
Tags: discuss, watercooler
Published: 2022-05-21 17:10:04

{% embed https://github.com/Envoy-VC %}

So today I just saw my GitHub Profile after a Long time and it didn't look that good. It had been a long time since I Updated My Profile so,I decided to Improvise my GitHub Profile.

I am a Huge fan of Computer Games and `RGB` is the first love of a Gamer so I Kept the theme as RGB. I updated my Goals, made some new workflows, added new gifs and new animated Badges to make it look more lively.

I would love to have some feedback on my Profile, It can be of any type like suggestions or changes or even bad reviews.
It would mean a Lot if you gave your time and commented anything about it.


![Thanks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p269u4lb59vuwpvd4c57.gif)
How to become a Front-End Developer: Part 1
Tags: html, css, javascript, frontend
Published: 2022-06-19 16:15:52

---
title: How to become a Front-End Developer: Part 1
published: true
date: 2022-05-21 17:05:21 UTC
tags: html5,css,javascript,frontend
canonical_url: https://blog.nandan.dev/how-to-become-a-front-end-developer-part-1
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p5pfcsv7tbde3zrneej.jpg)
 
When I started my career as a web developer, a few years back, it was not so much of an easy start. There were very few learning platforms and fewer boot camps; But What was there and is still present, A community that believes in sharing knowledge and that's one reason the web community is growing every day and will keep on growing.

There are many courses free and paid available on the internet, I will share what worked best for me and also does not burn a hole in your pocket; also I am not a big fan of certifications, So it all will be more of hands-on

Let's get started then :

- Start with HTML / CSS / JavaScript basics on [W3Schools](https://w3schools.com) , I still re-visit w3school to learn about something new. Once you know the basics, start making clones of websites like Twitter using HTML+CSS only. Get good at it.

- Head to MDN web docs for leveling up [developer.mozilla.org](https://developer.mozilla.org) and deep dive into concepts of HTML and CSS. Don't look at their JavaScript docs yet. MDN's JavaScript docs are a bit detailed and can be overwhelming.

- Go to [javascript.info](http://javascript.info) for a detailed overview of JavaScript, It helps you understand the basics well and has a good collection of concepts.

- It's time you start building some functional websites. Get familiar with [NodeJs](https://nodejs.org/) and [NPM modules](https://www.npmjs.com). Start adding click events etc. on that Twitter clone you built. maybe start adding a JSON DB in your local. There are some NPM modules like [json-server](https://www.npmjs.com/package/json-server) that can add a JSON dB in your local dev environment.

- Once you are done with http://javscript.info, get back to [MDN JavaScript docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and get a detailed understanding of essential concepts.

- Keep building more and more websites. If you are not familiar with some concepts get to YouTube and learn, there is a lot of free content available. 

- You can pick a framework/library of your choice like [Angular](https://angular.io/)/[React](https://reactjs.org/)/[Vue](https://vuejs.org/) if you want to scale up. It's completely a personal choice, no one framework is best, learn what suits you. Start with the official documentation. I will cover more on this one in my next post in this series.

Feel free to add your thoughts in the comments section below.

Stay tuned, follow me on social media channels, and subscribe to my newsletter [here](https://blog.nandan.dev/) to get updates on my upcoming posts.
Online-Marketing: Übersicht zu den Besonderheiten des Internet-Marketings
Tags: onlinemarketing, affiliatemarketing, marketing
Published: 2022-05-22 15:45:38

---
title: Online-Marketing: Übersicht zu den Besonderheiten des Internet-Marketings
published: true
date: 2022-05-21 17:04:32 UTC
tags: OnlineMarketing,affiliatemarketing,marketing
canonical_url: https://bloggerpilot.com/online-marketing/
---

![Online-Marketing: Übersicht zu den Besonderheiten des Internet-Marketings](https://bloggerpilot.com/wp-content/uploads/2022/05/online-marketing.png)

Mein ultimativer Guide zu Online-Marketing! Heutzutage ist das Internet für...

Der Original-Artikel erschien auf [Online-Marketing: Übersicht zu den Besonderheiten des Internet-Marketings](https://bloggerpilot.com/online-marketing/).

Wenn du eine Online-Marketing-Agentur gründen willst, musst du dir ein paar Fähigkeiten aneignen, bevor du loslegen kannst. Der Bereich des Internetmarketings verändert sich schnell und Marketingagenturen müssen sicherstellen, dass sie der Entwicklung immer einen Schritt voraus sind. Damit du lernst, wie du eine Online-Marketing-Agentur gründen kannst, haben wir diesen Leitfaden mit allem, was du wissen musst, um loszulegen, zusammengestellt.

Marketing ist ein breiter Begriff für den Verkauf von Waren und Dienstleistungen. Er setzt sich aus den Wörtern Markt und Merchandising zusammen und umfasst eine Vielzahl von Aktivitäten. Marketingspezialisten sind also Menschen, die sich durch den Verkaufsprozess auszeichnen. Marketer/innen können Produkte, Dienstleistungen oder beides verkaufen.

Die Lead-Generierung im Online-Marketing kann in zwei Arten unterteilt werden. Die erste ist durch Inhalte oder Informationen. Unternehmen können Blogs oder Videos veröffentlichen, die Informationen, Tipps und Coaching anbieten. Diese Art der Leadgenerierung ist sehr passiv. Die Nutzer können einfach tun, was sie wollen, und die Informationen werden nicht angefordert. Das Unternehmen fragt die Nutzer nicht nach persönlichen Daten, Kontaktinformationen oder Ähnlichem.

Eine Online-Marketing-Strategie ist per Definition eine Marketingaktivität, die über das Internet durchgeführt wird. 2 Es gibt vier verschiedene Elemente des Online-Marketings:

- Beim Online-Marketing geht es darum, die Zielkunden zu erreichen. Dies kann durch Online-Anzeigen, E-Mail-Kampagnen, Blogs, Podcasts oder soziale Medien erreicht werden.

- Online-Marketing zielt darauf ab, die Sichtbarkeit der Marke zu erhöhen. Mit anderen Worten: Marketingfachleute versuchen, den Bekanntheitsgrad ihrer Marke zu steigern und den Umsatz zu erhöhen.

Abschließend habe ich in dem Video anhand einer Fallstudie die Definition von Online-Marketing und seine Funktionsweise erklärt. Dann habe ich gezeigt, wie Online-Marketing auf dein Unternehmen angewendet werden kann.
Golang Escape Double Quoted String Easily
Tags: beginners, string, go
Published: 2022-05-22 10:47:38

---
title: Golang Escape Double Quoted String Easily
published: true
date: 2022-05-21 17:00:01 UTC
tags: Beginner,string,golang
series: "Sunday Snippet"
canonical_url: https://clavinjune.dev/en/blogs/golang-escape-double-quoted-string-easily/
---

 ![Sunday Snippet #18 golang escape double quoted string easily](https://clavinjune.dev/img/sunday-snippet/image.png "Sunday Snippet #18 golang escape double quoted string easily")

## main.go

```go
package main

import . "fmt"

func main() {
	Printf("%q", `"foobar"`)
}
```

## run go

```shell
$ go run main.go
"\"foobar\""

```