teleren/devto huggingface dataset:
The HTML specification
Tags: beginners, html
Published: 2019-10-19 13:08:58

---
title: The HTML specification
published: true
description: A brief introduction to the HTML spec
tags: beginner, html
series: FrontEnd Development Zero to Hero 
---
The HTML Specification or Standard is sort of a rule book that's agreed upon (not all the time) about how browser vendors should implement HTML Tags and Elements.

The Standard is quite monstrous, so I will not encourage you to go read the whole thing (for now), find anything that you are curious about? That's an example of when you should check the standard, study the section that's of interest to you and then leave. That's it.

The Spec (or Standard) usually contains the algorithmic description of tags and also where they can be used, when they can be omitted and sometimes which part of the tag can be omitted in a particular situation when a certain condition is met.

The Specification also states where to place a tag in a document, the context in which the tag can be used, what particular element can follow it, its attributes and some advice to web developers (you) on some attributes you can give an element to aid accessibility. An example of this is:

> "Authors are encouraged to specify a `lang` attribute on the root `html`  element, giving the document's language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth" - [HTML spec](https://html.spec.whatwg.org/#the-html-element).

This is just making it clear that the `html` element should specify the language that the document is written in to make it easy for screen readers to read your document and even which pronunciation to use.

Some other information contained in the specification are micro data, how web pages are loaded, the html syntax and even how elements are rendered.

The specification can be [accessed online](https://html.spec.whatwg.org/).

_Edited September 19, 2020: Grammar fix._
Vuetify TreeView Async Error (Cannot set property 'vnode' of undefined) Workaround
Tags: vue, vuetify, javascript, bug
Published: 2019-10-19 14:08:04

# Context
This is my first blog post here, so I wanted to keep it short and talk about a bug that I came across quite recently in Vuetify TreeView when using Async child loading.

This is, however, a workaround - for the people, like me, who need to push this now without opening a PR - and not a fix for the bug, so keep that in mind.

# Recreating The Bug
Let's start with the code found on the vuetify component page found here: https://v15.vuetifyjs.com/en/components/treeview#async-items.

However, when I do push the children of the item, something like this happens:

```
TypeError: Cannot set property 'vnode' of undefined
    at a.register (VTreeview.js:257)
    at a.created (VTreeviewNode.js:132)
....
```

After a long session of debugging (not really I just open Chrome DevTools and set a breakpoint "at a.register (VTreeview.js:257)" and read the problem description on this StackOverflow here: 

https://stackoverflow.com/questions/57293198/vuetify-treeview-error-loading-children-asynchronously/58396813#58396813

Vuetify basically tries to find a node in the nodes objects with key equal to the id of the child node, the child node, however, has no entry on this object hence the error.

Given the timeline I had and the need to push this ASAP:

My Just-Hack-it-For-Now Part of Brain: Then just create one.
Me: Aha.
My Just-Hack-it-For-Now Part of Brain: Yeah.

So that's exactly what I did.

in the ``fetchUsers`` function we can add a few lines for this **before** pushing the items the parent's children array.

``` js

const key = item.id
const parentNode = this.$refs.treeReference.nodes[key]

let childNode;
children.forEach((child) => {
  childNode = {...parentNode, item: child, vnode: null}
  this.$refs.treeReference.nodes[child.id] = childNode
})

```

First, let's get the ParentNode - which we are going to clone for the child - using the key `` item.id `` from nodes object in the tree.

Then for each child just clone the parentNode setting item to the child however and vnode to null.

This fixes it for me; code pushed and everyone is happy.

Please let me know if you have a less hacky solution for this, I'd really appreciate it.
Mistake #2 - Too many assumptions
Tags: mistakes, developer, learning, beginners
Published: 2019-10-19 14:01:24



![there was an image here](https://upload.wikimedia.org/wikipedia/commons/7/7d/Prog.png)

Translating the problem statement into working software is not a magic. It is a journey and the very first step is to understand the requirements. Often the details of the problem statement aren't clear and as a developer you start making assumptions and build a working solution. This is a good quality of a software developer; however, things go wrong when you start making too many assumptions.

{% youtube AwcKpN5Fqbs %}

This is a common mistake I noticed in entry level programmers and one of the reasons I found is they are afraid of asking questions. Maybe they are not comfortable to reach out to their colleagues or they feel their questions are not important. 

If you are just making a start of your career as a software developer, I would like to tell you that your questions are important! While training new members of the team, I deliberately keep some details missing from the assignments. This is to help me understand whether those individuals are coming back with questions. It may be the case that you have too many questions to ask and you are not sure where to start? I suggest ask question with an answer and validate whether your understanding is correct.

I personally believe asking questions is a way better than making "too many" assumptions.

What are your thoughts?

> There is a small exercise at end of embedded video which you may want to try to test your ability of asking questions.
How old is client-side rendering?
Tags: question
Published: 2019-10-19 13:49:00

---
title: How old is client-side rendering?
published: true
tags: help, question
cover_image: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.freelancinggig.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F06%2FServer-Side-Rendering-vs-Client-Side-Rendering.png&f=1&nofb=1
---

I recently finished my react personal website. It's built using react and It's being client-side rendered. 

"SSR vs CSR" is kind of a new topic for me and I am currently (we can say) researching it. 

There are tons of content on the subject out there. I have been reading those. But I didn't manage to find the answer to this question.

* When was CSR first introduced?
* Which framework supported CSR first?

I am also wondering if CSR was out there before ReactJS.

Can someone help answer those questions?
Functions invoked as a constructor
Tags: javascript
Published: 2019-10-19 13:45:43

---
title: Functions invoked as a constructor
published: true
description: The value of "this" in a Javascript constructor function
tags: javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/constructor.jpeg
---

## The value of "this" in a Javascript constructor function

Constructor functions are used to create objects. The way we invoke constructor functions is by preceding their invocation with the keyword `new`.
As a convention, we also *capitalize* their name.

Here's an example of a constructor function. We define a function called `Person` that takes two arguments: `name` and `age`.
Inside the function, these two arguments are assigned to parameters prefixed by the `this` parameter.

We then invoke the function with the `new` keyword, and pass a `name` and an `age`. We assign the output of this invocation to a variable named `bill`.
When we print out the result we see that what is returned is an object with two properties, `name` and `age`, that correspond to the arguments we passed in at the moment of the invocation.

```
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const bill = new Person('William', 59);

console.log(bill); // => Person { name: 'William', age: 59 }
```

When we invoke the function with the `new` keyword, a new empty object is created and passed to the function as the `this` parameter. This is the function context.

Then, inside the function we create properties on the `this` parameter of `name` and `age`.
This is like creating properties on an object, we assign values to properties of the `this` object which is the object that was created when we invoked the `Person` function with the `new` keyword. Finally, the function returns this newly created object and passes it to the variable `bill`.

When we invoke the `Person` function again with different parameters, we go through the same steps of:

- creating an empty object
- creating name and age properties on this object
- assigning the value of the arguments passed into the function to the object properties
- returning the object that was created

Here's an example where we call the `Person` function with different arguments. It returns a different object that has the same properties but different values.

```
const mary = new Person('Mary', 49);
console.log(mary); // => Person { name: 'Mary', age: 49 }
```

We have seen that the `this` parameter takes on different values depending on how the function is invoked.

If the function is invoked as a *regular function*, the `this` parameter has the value of the `global` object or the `window` object.

If the function is invoked as a *method*, the `this` parameter is set to the object that invokes the method.

If the function is invoked as a *constructor*, the `this` parameter is set to the instance of the object being created.

There is another way to invoke functions, with the `apply()` and `call()` methods that also has repercussions on the `this` parameter.

We will explore this way tomorrow
Working with Dynamic Components in Vue.js
Tags: javascript, vue
Published: 2019-10-19 13:33:42

To understand what is a dynamic component, let's consider an example. Suppose we are developing a commenting platform where user can come and post a comment on the article. Posting of comment for the logged-in and logged-out user is different.

![Alt text of image](https://miro.medium.com/max/2112/1*NYu7PMJkXewe27Mm3LU3nw.png)
<figcaption>Logged-in user</figcaption>

![Alt text of image](https://miro.medium.com/max/2096/1*Ir-XToqO7zawHp-MtCea-Q.png)
<figcaption>Logged-out user</figcaption>

In the case of the logged-in user, we want to load CommentBoxLoggedIn component and for the logged-out user, we want to load CommentBoxLoggedOut component. Here we are mounting the component dynamically depending on if the user is logged-in or logged-out, that's where we want to use the dynamic component concept.

```
<Component 
  :is="dynamicComponent" 
  v-bind="dynamicComponentProps" 
/>
```

is attribute is a reference to the dynamic component and the v-bind attribute is used to pass dynamic component props. Let's see the example.

![Alt text of image](https://miro.medium.com/max/3356/1*zHNAPj0Tko1M5PhbyCKl3Q.png)
<figcaption>Using a dynamic component</figcaption>

In the example above we are calculating the dynamic component and dynamic component props as a computed prop. Notice the parentId is always 0 in case of the top-level comment.

This looks like a simple if/else solution. But using this approach we can make our code more scalable and readable moving the logic out of the template. We can also add animation with a dynamic component using Vue.js Transition https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Components

This approach has one more advantage. Suppose we have reply action in each comment of the article. On click of reply action, we want to load the same dynamic component CommentBoxLoggedIn and CommentBoxLoggedOut depending on if the user logged-in or logged-out but with modified/different props.

For this, we can pass the computed props commentBoxComponentName and commentBoxComponentProps to a child component, let say to CommentItem component which renders single comment. Now CommentItem component receiving the commentBoxComponentProperties and commentBoxComponentName as a props. Let's see the example

![Alt text of image](https://miro.medium.com/max/3560/1*ZYZz10hOoiQaXPvriVGEPw.png)
<figcaption>Extending the dynamic component props and using in the template</figcaption>

In the example above we are extending commentBoxComponentProperties with parentId because in case of reply parentId is different for each comment. and at the same time, we are using dynamic components in the template. This way we are making our code more structured and manageable.
DMZ X Fidelity Hackathon 
Tags: startup, hacktoberfest, javascript
Published: 2019-10-19 13:15:25

This is my first hackathon, and I've been a highly capable team which really good chemistry! (Definitely doing more of these).

Soon, at Sunday, 3pm, Christina Chan, Saamer Mansoor, Erfan Ferdani and myself are planning on taking the dub!

Looking forward to see others solutions to the problem statement, but I have a strong feeling we will take first place!

-Marzooq
SirixDB Roadmap 🎃🎉
Tags: hacktoberfest, discuss, contributorswanted, kotlin
Published: 2019-10-19 13:07:27

Hi all,

as some of you work on stuff during *#Hacktoberfest* for [**SirixDB**](https://sirix.io) -- a versioned, temporal NoSQL document store -- I put up a short [**ROADMAP**](https://github.com/sirixdb/sirix/blob/master/ROADMAP.md) with some high level goals I want to achieve in the near and probably not so near future. I'll add stuff in the upcoming days.

**Of course I'd love to get input from you, the community** and everything is up for discussion 👩‍💻👨‍💻

**Every contribution is more than welcome or any kind of discussion, bugs you might encounter, having trouble setting it up...** 💚

Here's a bit more of what it's all about and I mentioned some issues: [Working on a Versioned, Temporal NoSQL Document Store During Hacktoberfest](https://dev.to/johanneslichtenberger/working-on-a-versioned-temporal-nosql-document-store-during-hacktoberfest-pp4)

Best weekend to all of you and kind regards
Johannes
Bootstrap vs Bulma - The Framework War
Tags: css, bulma, bootstrap, webdev
Published: 2019-10-19 12:47:30

In the past, everyone was using [css]
(https://en.m.wikipedia.org/wiki/Cascading_Style_Sheets) framework.Mycode is readable and clean.I usually use a lot of comment in my code and easy to remember classes.
___
I got one one month of internship in front-end .uk design company,the company used [bootstrap]
(https://getbootstrap.com/)as their main driver.Bootstrap is a bad classes.It was really difficult to learn.I was really confused by using bootstrap.I was merging the html and css together.It applys  styling as default.I have completed the internship one month with bootstrap.I can never going to use bootstrap again.
___
Bootstrap is a bad framework for me.Some of this I didn,t like in bootstrap 
 - Bad classes 
 - Difficult to learn - Disorganized structure 
 - CSS + JS JQUERY - Default styling - Large file size

___
I am never going to learning any case framework because of my bad experienced with bootstrap. 
My ui designer friend advices me to discover some other options available
 - BULMA
 - SKELETONCSS 
 - MILLIGRAM 
 - TAILWIND CSS

###milligram
 Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code 
###tailwindCSS
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. 
###skeleton
 You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started..
___
 I was shocked by bulma. I was learning every framework but bulma is a very easy frame work for me and I leaned bulma for twenty minutes.
Bulma file size is 2kb compare to it bootstrap the large file size. Bulma make your webpage your own design. bulma contain very easy classes compare bootstrap your webpage automatic styled. Bootstrap applys styling to HTML elements as default e.g your code is up and li bootstrap automatic styled up and li bulma is pure [css]
(https://en.m.wikipedia.org/wiki/Cascading_Style_Sheets)
frame work and bootstrap is css JavaScript and jquery. If you wanna your webpage is quick load bulma is good. I am using bulma only for grid bulma is a responsive framework . I advice you to try bulma once a life time.
___
 I am kind a active twitter :[www.Twitter. com/the_Ibrahim_] (www.twitter.com/the_Ibrahim_) github: [www.github.com/theibrahim](www.github.com/theibrahim)
What's your thought about pseudoclassical OOP in JS?
Tags: discuss, javascript
Published: 2019-10-19 12:19:59

---
title: What's your thought about pseudoclassical OOP in JS?
published: true
description: 
tags: discuss, javascript
---

Hi, I'm a JavaScript beginner and I found pseudoclassical inheritance a bad tool for Javascript, because why going for something pseudo when you can go directly for PHP (for instance)?.

Have you tried to work with pseudoclassical OOP style? Did you worked with pure prototypal inheritance focus? What's your learning about?
Why teaching Scratch should be scratched
Tags: scratch
Published: 2019-10-19 12:06:53

Why are we teaching our kids Scratch
Scratch is one of the simplest ways for us to introduce programming to the younger generation that is also fun and engaging. The process is, throw a few blocks on the screen and click run and voila, you have visual feedback.

I have also seen a lot of adults who try to jump into coding and immediately want to jump into GUI development because they want to see reward from their code. This is a very bad approach and we will look at this in a future article.

Scratch has many benefits and here they are:
1. Scratch allows for young people to integrate creativity in storytelling, games, and animation.
 Younger kids can collaborate on projects through the use of Scratch, and share their projects online.

2. Scratch allows students to develop 21st century skills through the use of technology.

3. Scratch can be used by people of all ages making it easy and simple for younger people to pick it up.

4. Scratch can be used across curricula and students and teachers can create and share resources via scratch.

Why Scratch should be scratched
My first major gripe with Scratch is that it conditions younger people to think they are cut out to think they are cut out to be programmers. We teach them that computer programming is all about dragging a few blocks around and getting visual feedback. Then they spend 3 hours downloading an IDE and the first and last thing they see is this:

```c++
#include<iostream>  
  
using namespace std; 
   
int main() 
{ 
    // prints hello world 
    cout<<"Hello World"; 
      
    return 0; 
} 
```

This is just Hello World in C++. There are no blocks, and once you run the lines all you get is a black screen with Hello World. Then they try to follow a tutorial for creating a simple Website and they have to design it in HTML, CSS, dive into a little bit of Javascript (https://dev.to/zimspy007/why-we-love-to-hate-javascript-nfd
) too and you will quit coding for life.

The big mistake most of the people who wish to teach computers to their children drop into a programming class that will teach them Scratch combined with robotics. There is a lot more to computers than just teaching programming. There are a whole lot of better ways to teach the young about computers and here is a nice road-map.

1. Teach computer care
2. Teach them using input devices and interacting with items on the screen
3. Teach them how to type
4. Teach them how to open a web browser and find stuff on the Interweb (have a firewall in place to block terrible websites)

This alone will give you months of learning material and by the time you are done with these 4 lessons your child will have a basic understanding of computers.
Fck compotrends!!
Tags: trends, angular, react, javascript
Published: 2019-10-19 11:12:11

I think the fundamental problem of new technologies and trends, moreover tooling or frameworks is a bit more economical rather than technical.

There is a scale of a project that requires good tools therefore investment in tooling and maintenance of tooling will give returns. But under a certain scale, the workload of just only being involved in an update (not even a tooling and not even more a new framework implementation) is a significant if not more effort thant the whole project.

But the global issue is introduced when people are forced to rely on companies involved in large projects so small projects must pay the price of the involvement in the form of "open-source contribution" which is all fake.

And people who evangelize these technologies of course are people from these companies and the evangelization of these technologies then is no more than just a fucking recruitment ad.

So at the end of the day people are working on issues that are and will be irrelevant to their projects, does not add a dime value to it but without fixing something their component/module/plugin whatever will not work.
History of HTML
Tags: html
Published: 2019-10-19 07:25:35

---
title: History of HTML
published: true
description: A brief history of HTML
tags: html
series: FrontEnd Development Zero to Hero
---
Starting at CERN, HTML is quite popular in the Web and almost every resource on the web is presented in HTML with some enhancement with CSS and JavaScript. 

HTML has gone through many changes over the years and the standards have evolved allowing for cleaner and more efficient code.

The origin of HTML dates back to the year 1980 when Tim Berners-Lee while at CERN  wanted a way to navigate from one information to another set of information on another computer this idea was proposed as a hypertext system for sharing documents and would go on to be the fundamental language of the web - HTML.

He authored the first version of HTML in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000s was HTML 4.01, which became an official standard in December 1999.

Another version, XHTML, was a rewrite of HTML as an XML language. XML is a standard markup language that is used to create other markup languages. Hundreds of XML languages are in use today, including GML (Geography Markup Language), MathML, MusicML, and RSS (Really Simple Syndication).

##__HTML VERSIONS__

* HTML 5
* XHTML
* HTML 4.01
* HTML 4.0
* HTML 3.2
* HTML 3.0
* HTML 2.0
* HTML 1

You can find detailed explanation of these HTML versions at [landofcode]( http://www.landofcode.com/html-tutorials/html-history.php ) website.

After the publication of HTML 4.01, the standardization activity of HTML stopped and the W3C focused on the development of the XHTML standard which led to the creation of XHTML.

Tech giants Apple, Mozilla and Opera showed their concern about the lack of interest of the W3C in HTML and thus formed a group called  WHATWG which is short for (Web Hypertext Application Technology Working Group).

The current activity of the WHATWG is focused on the future HTML5 standard, whose first official draft was published on January 22, 2008, and presently the standard can be [accessed online](https://dom.spec.whatwg.org/).

Which brings us to the next topic, The HTML Specification.
Professional seo services
Published: 2019-10-19 09:18:10

Quantum IT Innovation is one of the highest rated professional company and digital marketing agency in the usa. The company offers web design, Pay per click, social media marketing, search engine optimization and application development services. We also expertise in enterprise, global, local, e-commerce Google penalty recovery, SEO reseller, web analytics, ORM, Brand enhancements, SEO copywriting, content marketing, and guest posting services etc. https://quantumitinnovation.com/professional-seo-services-company/