teleren/devto huggingface dataset:
How do Websites work? 👩🏻‍💻 Simply explained with examples
Tags: webdev, beginners, javascript, codenewbie
Published: 2020-03-29 10:29:07

**Ever wondered how web applications like Facebook work?**

What is a website made of, where is it stored, where does it come from and how does it end up on your computer? 🤔

In this video I explain in simple words how the web and websites work. **What is Frontend, Backend and what are servers and how all the technologies like Javascript or Java fit in the whole picture. 💡**

I'll go through the following topics:
- How does the code (files) travel to you?
- Frontend Code: HTML + CSS + JavaScript explained
- Backend Code and Database explained
- Where are Backend Code and Database?
- How does your friend see your uploaded image and how Facebook decides what you should see?
- Web Developer
- What does this mean for you?

{% youtube vcRmKtL4o_4 %}

-----------------

✅ I will upload a **complete JavaScript Tutorial for absolute beginners**. So if you are completely new to programming this will give you a step by step guide to learn JavaScript. So please subscribe on Youtube to get notified 🙂 ✅

I'm happy to connect with you on
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
Web Components! The future of web development
Published: 2020-03-29 09:46:16

So web components are basically web platform API's that allow a web developer to create html tags that can be used and reused in web applications. They help to make frontend framework like angular and react popular and very widely used. 

HTML imports essentially deals with web components. They allow you to duplicate the code and create tags that allow your components to be reused. These are all then open-source components. 

There are several reasons for why any developer should be interested in using web components:

(1) They are compatible.
- Web components have a strong support which means that they can be supported by any big framework as they all support HTML. 

(2) They are simple and easy to use.
- Web components essentially just allow you to reuse components over again. Since reusable code is widely encouraged in web design, using web components allows you to package parts of your webpage and use it again with ease as your framework will deal with it, also saving you time. 

(3) They save you time
-  Since web components are pre-coded, all a user needs to do is install them and operate on a browser that supports using them. 

Overall, web components can help save a business time and money. They allow developers to spend time solely working on web components. Those components created can then be shared across teams, which in-turn allows other teams to create and complete their applications in a more timely and efficient manner. 

https://www.youtube.com/watch?v=T69jIhKeorg
PNG Sprites perform a lot better than SVG (Reports Attached)
Tags: javascript, webdev, ux, css
Published: 2020-03-29 09:45:52

Back then we have seen the designers giving us image sprites and then the background positions being changed accordingly for each icon and on-hover. There needs no mention that SVGs have captured all the attention as soon they pitched in. 

Let's peek into the performance of these. A couple of svg icons were taken and then converted into svg sprite and png sprite. 

![AltText](https://dev-to-uploads.s3.amazonaws.com/i/l2a0od500ttl0xqvcif9.png)

On svg page, change `fill:color` for hover color and in png page, change `background-position-y`. 

Two actions were performed while performance was recorded. 
* Page Reload
* Hover out and in for the second icon(bulb) - 4 times

###Summary of SVG Performance
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w2o17v0rrpwn8vp2oh3a.png)

###Summary of PNG Performance 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7f8jbqrndiiqreocjq1b.png)

###What's happening?
Apart from scripting time, PNG performance beats loading and rendering(layout). 

###Why is this?
PNG sprite helped to not load multiple images per icon. Thus there is a better `loading` time.

An svg is multiple pieces of dom elements where as an image is one dom element. `Rendering` time will be a lot better due to this single element.

`Painting` time remains almost the same as the user would see exact same result on hover.

<!--
###Does that mean SVGs are not recommended?
Not exactly. If it is only a logo that is being used, please do use it. But if there are multiple icons that are needed then it is better to go for PNG sprite.-->

###Can a PNG sprite serve equivalent to SVG?
Yes, with a bit more work(at least in case of icons). But the same on-hover effects, responsiveness can be achieved through PNG sprite as well.

###One Thing To NOT Miss
Many use `content:'\000'` for icons. May not be a good way. The reason being, the entire font with many other characters is being downloaded along to achieve this. Always download a minimal font file. In the most optimized sites, one can observe that font files are the largest bundles. The font files should come under 2-3kb.

Find the github link for the exact files that were used to create the performance reports.

{% github https://github.com/svaani/sprite_performance %}

##Entire Screenshot of SVG Sprite performance

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

##Entire Screenshot of PNG Sprite performance

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

*Thanks for reading*
COVID-19 Dashboard - LK
Tags: bootstrap, react, covid19, restapi
Published: 2020-03-29 09:33:35

The boring weekend turned my time so useful!

Created a Single-Page Application for Real-time Data tracking for Corona Virus Outbreak Locally and Globally.

Made with ❤️ Using ReactJS + Bootstrap

My Github page link:-
https://luqmaansiddeeq.github.io/covid19/

Live site:-
https://covid19.tecrocket.space/

Thanks to TecRocket Space, from where I got the motivation 🥰
Day 15 [D&D Character Sheet]
Tags: 100daysofcode
Published: 2020-03-29 09:20:29

# Report
I worked on the character sheet and modified my character schema today. My first attempt at the character sheet has made me think about what I want from it. Here's a list of goals for the UI of the character sheet.

1. On a large(1080p) user should be able to see most relevant stats without scrolling.
2. On mobile devices certain stats like hit points and armor class should remain in view when scrolling.
3. On mobile, hide things like features, languages, and spells in a submenu. 
2. Have an expandable details pane, would roll out from the right on large screens and the bottom on small ones.
3. Detailed Information should be accessible fast and easily, no more than a few clicks or taps away.
4. Everything on the page should be editable within two cl 

# Project

{% github ApproachingApathy/100days-dnd-character-sheets %}

The First project will be an app to keep D&D character sheets.

## Stack

I'll be using Node.js and building a full-stack Express app with MongoDB.
### Requirements
#### Minimum Viable 

- [ ] Investigate automating or finding a source of info for the data in the SRD.
- [ ] Present a D&D Character Sheet
    - [ ] The sheet should display all the same info as the first page of the 5e Official sheet.
- [ ] Users should be able to log in and create player-characters.
- [ ] Users should be able to edit character sheets.
- [ ] Users should be able to organize character sheets into groups (parties/tables)
- [ ] Sheets should auto calculate basic stats like ability modifiers.
    - [ ] Support Proficiency Bonuses 

### Cake
- [ ] Extend character creation to allow the user to use any of the three common stat gen methods.
    - [ ] Point Buy
    - [ ] Standard Array
    - [ ] Roll
- [ ] Extend the character sheet to all the info in the 5e official sheet.
- [ ] Allow for image uploads for character portraits.
- [ ] Allow for extended descriptions/backstories.
    - [ ] Characters should have nice full page backstories.
    - [ ] Preferably use a markdown editor.
Responsive Footer Using Tailwind CSS
Tags: css, webdev, html, beginners
Published: 2020-03-29 08:28:37

Tailwind is a gives you responsive components with huge CSS class collections. Previously, we made a login form and team section using Tailwind CSS. So here we designed a simple and responsive footer using Tailwind CSS.

In this element, we mostly used tailwind CSS components and classes. Here we used gird and also used utility classes. For making responsive we used responsive grid classes and also we used text colors with background color classes. Also here we use form components to show subscribe form with submit button.
 
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Download Source code] (https://w3hubs.com/responsive-footer-using-tailwind-css/)
Functional Core with Ports and Adapters
Tags: architecture, discuss
Published: 2020-03-29 08:25:05

---
title: Functional Core with Ports and Adapters
published: true
description: Curious observation
tags: #architecture #discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sb2sl61i1kwwqy8o0oqf.jpg
---

While working on my architecture research, I've found that two architecture approaches, namely "Ports and Adapters (Hexagonal architecture)" and "Functional core - Imperative shell", are suspiciously similar.

Ports and Adapters architecture:
![Ports And Adapters](https://dev-to-uploads.s3.amazonaws.com/i/dffq24gufao2k1dphnxu.jpg)

Functional core - imperative shell:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2m9fiusmpw4i7cn6je3j.jpg)

Let's make slight changes into each architecture:
- Make inner core of the Ports and Adapters functional
- Make imperative shell consisting of Adapters

With these changes whole picture will look like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tq0bsdeffef8rba43isb.jpg)

From my point of view such a combination makes great sense - advantages of both approaches are get combined. In the same time each approach adds more clarity to the combined picture: Ports and Adapters do nod clarify how core is implemented, while Functional Core - Imperative Shell does not clarify how shell should look like.

So, what do you think about this "hybrid" of two architecture patterns?
How to create SSH Key on Mac Terminal
Tags: ssh, mac, unix
Published: 2020-03-29 08:05:18

Just for memorandum.


```shell
ssh-keygen -t rsa
```

and you get


```
$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/<username>/.ssh/id_rsa): 
/Users/<username>/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /Users/<username>/.ssh/id_rsa.
Your public key has been saved in /Users/<username>/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:O9gHqGxZOua51PfVNL6GZN/FixT6nOuXptCTOzhkqd0 <hostname>
The key's randomart image is:
+---[RSA 2048]----+
|                 |
|                 |
|                 |
|       .     .   |
|      o S   o +. |
|   . * o o =+=..o|
|    X o = *+B*=.+|
|   = o . = =oE=*.|
|    +.    . o*B  |
+----[SHA256]-----+
```

There are files generated under ` ~/.ssh` folder.

```
 id_rsa
 id_rsa.pub
```

id_rsa : private key
id_rsa.pub : public key
Gratitude journal - dev edition (29.3. - git)
Tags: gratitude, git
Published: 2020-03-29 07:39:25

So, how are you holding up?

In pursuit of happiness in these difficult times, I will continue my gratitude journal.
Last week I [wrote](https://dev.to/janmpeterka/gratitude-journal-dev-edition-23-3-stimulus-3969) about Stimulus.js and why am I grateful for it.

This week I will focus on something fundamental for most of us - **git**.
I am probably not only one who cannot imagine working without `git` these days, but it wasn't always that way.

When I started learning to code, I had no idea there is anything like version control systems. I just made new and new files with names like `code_2_0_new` and so. You may know what I am talking about.

I learned to use `git` after that - or to be more precise, I mostly learned how to operate GitHub (which was the same for me at a time).

So, I was very surprised when I was supposed to use TortoiseSVN in my first job. It was really weird, ugly and complicated. Soon, I happily returned to git.

Since then, I am using git almost daily - at work (learning how to use it for collaboration) or in my hobby projects (adding things like pre-commit, integrating with deploys and so).
I am no expert in git, I have a lot to learn, but even now, it helps me with my programming tremendously.

So for today, I am grateful for git (and in extension, for all git software I used so far - [GitHub desktop](https://desktop.github.com), [GitKraken](https://www.gitkraken.com) and my current [Sublime Merge](https://www.sublimemerge.com)). 

What are you grateful for? :)
Cloudflare & IPFS
Tags: cloudflare, ipfs
Published: 2020-03-29 07:21:56

---
title: Cloudflare & IPFS
published: true
description: 
tags: cloudflare, ipfs
---

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

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

```
$ dig +noall +answer TXT _dnslink.dongri.org
_dnslink.dongri.org.    299     IN      TXT     "dnslink=/ipfs/QmRQV16f9YMExNs3p8562xGHqQkWXe4CFPrVuGp9CGmFq9"
```
Enter 16 new Full Stack Developers!
Tags: teaching, learning, bootcamps, javascript
Published: 2020-04-02 06:13:40

---
title: Enter 16 new Full Stack Developers!
published: true
date: 2020-03-29 07:00:00 UTC
tags: teaching, learning, bootcamps, javascript
canonical_url: https://www.jaysonjphillips.com/blog/2020/03/enter-16-new-full-stack-developers/
---

While in the midst of trying to `flatten the curve` with our _shelter-in-place_ order in California, I was fortunate enough to have 16 bright spots during this time. They are the 16 awesome developers who just completed their final projects in the Full Stack web development cohort I taught at [University of Denver](https://bootcamp.du.edu/coding/curriculum/)!

Over the last 6 months, these students have been through all the ups-and-downs that comes with learning how to write code for the first time, complete with snow storms and a global pandemic unfolding.

I'm extremely proud of not only the work these students put in, but their dedication to getting over the finish line. And their final projects did not disappoint!

Once I've secured the proper consent, perhaps I'll share a bit more about their awesome final projects and the work they've all done, but until then, not only do I wish to welcome them to the awesome field of web development, two of them have already secured their future development roles!

_This is why I teach_. The journeys each of these students have taken weren't the most traditional but it was just as informative, practical and skill-building as required to be a developer in today's market. And they've got 6+ months of remote work and learning experience - something that will be very precious and marketable in the coming months as we all cope with balancing the fact that life must go on with the disruptive, devastating force that the coronavirus pandemic is proving to be.

Cheers to a new class of developers!  
And for now, some time off from teaching and scotch await me.
Midnight Thoughts with Kai - Mathematics and Science
Published: 2020-03-29 06:53:23

so it's 00:38 or 12:38 AM for other humans at time of writing this sentence. I had a random thought that kept me up from getting the sleep I need so I thought I'd quickly explain it on the internet, with the clear warning that I was exhausted at midnight with a dumb thought. Why do we hold math to such a high standard? I always have thought that math wasn't a truth of our universe, but an idea humans created but never could explain why I thought that.

So with that became my thought process of what is "Math" and "Science" and I kept thinking "Are they truths, or are they stories?" and after a while of thinking I figured it out, at least maybe, I don't know this is a random thought I am getting out to the world so my brain can sleep.

So I came up with the idea that since math is something we created to help us do work, science is just using mathematics to explain our universe with arbitrary meaning that in all honesty has no real bearing on our lives.

We are just animals like any other, we are not smarter than the other animals. If anything I think we are dumber than most animals, but with a weird inherit kind of curiosity and greed. Using arbitrary ideas made by a couple of people who kind of started this whole society idea. Society happened because we wanted to survive, and we were willing to give up goods for goods we needed more. Wood for food, food for warmth, and more. We started to trade for services, then we needed people to manage everything and somewhere in there religion was born, then later math and science to put arbitrary meaning as to "why we do this" when we did things for basic needs.

Remember: This is mostly my stoopid self putting what is probably garbage to most people out into the universe as "Thought leftovers for thursday or whatever"
Hosting your Angular Static Site to AWS S3 through Azure DevOps.
Tags: devops, static, s3, aws
Published: 2020-03-29 06:15:46

Believe it or not, Azure DevOps is becoming popular across the DevOps Universe, The reason being its simplicity and a wide marketplace which makes any DevOps newbie to get started with DevOps in tick of a clock.
Organisation and Individual use Azure DevOps to create a Continuous Integration and Continuous Delivery for a wide range of applications from .Net , Java to Angular , redis , etc.

In coming weeks I will be sharing you various Tutorial of achieving DevOps in different type of application and their step by step tutorials.

In this Tutorial , we will see how to host a Angular Website to AWS S3 using Azure DevOps.

Why S3 for Static website Hosting?

S3 is a simple storage Service for Amazon AWS. Most of our new age Website are made in HTML, Angular /VueJS which has most of the static content which is served to the public domain. In this scenario S3 becomes very low cost alternative to hosting a site in comparison to Webservers, which requires a greater investment. Also in S3 you do not require to scale up or scale down your server as being static storage provider, it can handle unlimited traffic.

Read more on https://medium.com/@ashish_agrawal/hosting-your-angular-static-site-to-aws-s3-through-azure-devops-f104e5e21bad
Strongly Typed Enum
Tags: cpp, stl, enum, library
Published: 2020-03-29 05:18:49

Enum is a user-defined datatype. It is a set of integral constants termed as enumerators.

Enum has a limitation. Two enum in a scope cannot have same enumerators. To remove this limitation, C++11 introduced Strongly Typed Enum. Strongly Typed Enum allows you to have enumerators which can be redundant from any other enum. In declaration, a keyword 'class' is added after enum to specify it is a strongly typed enum.

syntax: enum class user-definedDatatype { ....};

Strongly typed enum, provides flexibility at the cost that it has to be used with scope resolution. The surrounding gets corrupted because of redundant enumerators. Hence it is a compilation error to declare or use strongly typed enum without scope resolution. Attached snippet will make it clear

![Snippet describing STE](https://dev-to-uploads.s3.amazonaws.com/i/nb21og0n2swb4chvxetb.JPG)

Snippet of the same code to copy and try:

using namespace std;
int main(){
    enum class colors { red, blue, aquamarine, yellow };
    enum class PrimaryColors { green, blue, red }; 
    enum SecondaryColors { magenta, yellow, cyan };
    enum trafficlights { red, /*yellow, */ green }; //yellow is redundant
    SecondaryColors sc = yellow; 
//  colors r = red; 
    colors r = colors::red;
}
Cryptocurrency Exchange Development Company
Tags: cryptocurrecny, blockchain
Published: 2020-03-29 04:27:32

Crypto developers is one of the best brand in the blockchain industry. We are providing the service of cryptocurrency wallets development, cryptocurrency MLM software development, Bitcoin MLM software development, cryptocurrency exchange technology. The team is very professional to make their customers happy with the latest technology. We are continually working on complex and complicated blockchain projects.

Crypto Developers is a leading company in the field of Cryptocurrency development  services, which provides excellent services to our team of experts is too much professional about that.


<b>Our broad range of development services for cryptocurrency :</b>

Cryptocurrency Wallet Development
Bitcoin MLM Software
Cryptocurrency Exchange Development
Blockchain Development
Cryptocurrency Development Services

We ensure that you get the best out of what technology has to offer at this time and create something that suits your business needs, making it productive in every way.


Website : https://cryptodevelopers.net/cryptocurrency-exchange-development
Extending An Iterator
Tags: computerscience, algorithms, datastructures, csharp
Published: 2020-03-29 04:21:57

## Resources:

1. [How to design a skip iterator](https://leetcode.com/discuss/interview-question/341818/Google-or-Onsite-or-Skip-Iterator)
1. [Java's Iterator reference](https://docs.oracle.com/javase/7/docs/api/java/util/Iterator.html)
1. [C#'s IEnumerator reference](https://docs.microsoft.com/en-us/dotnet/api/system.collections.generic.ienumerator-1)
1. [Wikipedia article on iterators](https://en.wikipedia.org/wiki/Iterator)

Takeaways:
* Iterators allow us to traverse and access elements in collections without the use of indexing.
* Iterators expose a consistent way to traverse all types of data structures, making the code more resilient to change.
* Iterators can allow the underlying collection to be modified during traversal, unlike when using indexing to iterate over a collection (like using a for loop on an array). This can mean insertion/deletion of items during traversal.
* Iterators exist in many languages, in C# they are called **enumerators**. 
* Time & Space complexity in the code comments

Below you will find a class that takes an enumerator in it's constructor and extends the basic functionality of an iterator with the addition of `Skip()`, `Peek()`, & `Remove()` operations:

{% gist https://gist.github.com/jbolton209/85287fe71369356436bc630f0e601f0c %}

As always, if you found any errors in this post please let me know!
Updating JSON Validate to Blazor 3.2.0 Preview 3
Tags: webdev, json, blazor, dotnet
Published: 2020-03-29 03:57:47

> This post has been archived and you can now find it on my personal blog at https://www.marcusturewicz.com/blog/updating-json-validate-to-blazor-3-2-0-preview-3.
gen_tcp で socket モジュールを利用する
Tags: erlang, tcp
Published: 2020-03-29 03:48:14

OTP-23.0-rc2 で socket モジュールを利用した gen_tcp が使えるようになりました。
オプションで `{inet_backend, socket}` を指定するだけで使えるようになります。

```erlang
Erlang/OTP 23 [erts-11.0] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe]

Eshell V11.0  (abort with ^G)
1> gen_tcp:listen(5000, [{inet_backend, socket}]).
{ok,{'$inet',gen_tcp_socket,
             {<0.86.0>,{socket,#Ref<0.3988186683.781320197.173644>}}}}
2> gen_tcp:listen(5001, []).
{ok,#Port<0.5>}
```

## sys.config

```
{kernel, [{inet_backend, socket}]}
```

こちらが正しい指定方法とのこと。