teleren/devto huggingface dataset:
Block-level & inline using div and span
Published: 2018-11-01 22:01:31

---
title: Block-level & inline using div and span
published: true
description: 
tags: 
---

When learning a new language you always get stuck on a few things and when I first started learning HTML it was the div and span tags that gave me a hard time. I couldn’t really figure out the difference between the two especially with block-level and inline. But after practicing and using it with my code I’m going to tell you the key difference between the two using html. 

For starters the div is a block-level element. This type of element begins on a new line and takes up the full width. Span is an inline element and this means it stays on the same line and takes up the necessary width.

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/6coleqfcc3zn2695ofge.png)

Notice in this example how the text highlighted is the div element which started in a new line occupying full width and now contains 3 blocks.

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/54moo23vsed6698s2mpj.png)
 
Changing it to span allows the text to be continuous and does not have any change on the width or block.

So remember that span is an inline element used for taking up the space bounded by its opening and closing tag and div is a block-level element that always start on a new line and takes up the full width of the page.
Comparison and Logical Operators in Javascript
Tags: javascript
Published: 2018-11-01 21:49:26

---
title: Comparison and Logical Operators in Javascript
published: true
description: 
tags: #javascript
---

Comparison and Logical Operators are two of the main features of most if not all programming languages. They coupled with conditional statements form one of the basic building blocks of phone apps, programs, or functional interactions of websites. They are based off of the same logical and comparison operators that you find in math with only a little difference. I have listed the logical and comparison operators below and will go through some of examples of how they are used in programming with JavaScript.

```javascript

//Comparison Operators
//Equal to and strict equal to
==
===
//Not equal to and strict not equal to
!=
!==
//Greater than and greater than or equal to
>
>=
//Less than and less than or equal to
<
<=

//Logical Operators
//And
&&
//Or
||
//Not
!
```
 
As you can see above, there are two different operators for equal to and not equal to. The equal to and not equal to operators allow you to compare the values of two variables regardless of the type and will return true or false depending on the matching values. The strict equal to operator requires that the variables and variable values match in order to return true. The strict not equal to returns true if the values or types do not match. You can see both in the below examples along with examples for the greater than and less than operators and a sample conditional statement.  

```javascript
let x = 3
let y = 4

x == 3 //true
x === “3” //false

x!=5 //true
x!== “5” //true
X!== 3 //false 

y > 5 //false
y >= 3 //true


y < 5 //true
y <= 2 //false

if (x === 3){
    /**comparison in if conditional
    is true, so perform some code here**/
}

```

Logical operators in basic form are used to evaluate a compound conditional statement. They will return a Boolean value of true or false depending on the evaluation. JavaScript allows for the returning of different types and short-circuit evaluations, but that is for another post. Below are examples of the two logical operators.

```javascript

let x = 15
let y = 23

x > 12 && y < 25 // True
x < 2 && y >12 // False

x > 12 || y > 25 // True
x < 2 || y < 12 // False 

if (x < 45 && 32 > y){
    /**compound comparison in if conditional
    is true, so perform some code here**/ 
}

```
Bootstrap Vs. CSS Grid
Tags: bootstrap, css, grid
Published: 2018-11-01 21:28:05

---
title: Bootstrap Vs. CSS Grid
published: true    
description: How CSS grid could win the front-end layout war.
tags: Bootstrap, CSS, Grid
---

If you ask any front-end developer which is better, Bootstrap or CSS Grid; the answer you'll receive is "it depends."  I'd like to give some unbiased context to the debate. I learned CSS Grid and Bootstrap 4 at roughly the same time and have project using both frameworks.

##Bootstrap requires more html & less css

Bootstrap is div & class heavy.  Meaning to render a header, aside, main-content and footer to the page; requires about 9 <div> and depending how you want these positioned and styled could require 12-15 pre-built classes plus your own classes & Id's.  Leaving the only benefit here to be writing less css.

CSS Grid will use your semantic html which in this example would be 5 <div> but you would have to write extra CSS for each html elelment to position and style our blocks.

##Responsiveness
Bootstrap includes five predefined classess for building responsive layout which sounds great but gets complex as your breakpoints are determined via html. This means you'll be adding more and more div classes to make your layout for various screen sizes.

With CSS Grid there is no need to change the HTML.  You will only need to add a few different media queries to your stylesheet and define the grid layout for each semantic element of your HTML.

##Custom grid layout
Well with Bootstrap you're pretty much limited to 12 columns which may or may not work for you depending on the design spec you're working from.  There's also a default 10px padding on right and left which have to overridden.  That gets annoying having to do this on every new project.  

Using CSS Grid you have full control of the layout.  Make a many columns as you want!

##Page Load
Although the Bootstrap stylesheet and supporting libraries are only a few kb, they still need to be downloaded which will bloat page load.  About 85% of browsers support CSS Grid so there's no need to download additional stylesheets or scripts.

##Conclusion
There are merits and demerits on both sides and I call this battle a draw. Using Bootstrap means writing more HTML while CSS Grid means writing more CSS.  Your preference there.  Depending on the design spec, Bootstrap may not be an option. For less complex layouts, Bootstrap is a no brainer to up and going fairly quickly. Bare in mind that Bootstrap is more than a grid system; it's a complete front end toolkit which includes modals, tooltips, popovers, progress bars, etc. all predefined in classes. Using CSS grid will require writing JS/jquery files to achieve the same.

In a perfect world we'd have a package that includes the merits of both.  I welcome your comments on your experiences with Bootstrap and CSS grid.  What's your take on this?
JavaScript: Variables (Beginners) 
Published: 2018-11-01 21:02:36

---
title: JavaScript: Variables (Beginners) 
published: true
description: 
tags: 
---
    

As in math variables in programming languages are used to refer to values stored to be used later, in this case it is stored in the memory of the program.

**Declaring and Assigning Variables**

Variables must be declared before they can be used. In JavaScript the keywords ‘const’ and ‘let’ are used to declare variables. The mean to assign a value to our keywords is by follow the keyword by the ‘=’ (equal sign) operator.

**Keyword const and let**

Is important to note that the keyword ‘const’ is used when the variable will not be reassigned to another value, and the keyword ‘let’ can be reassigned later inside your program. 

**For example:**

This example shows how we declare the variable name and assign a string ‘banesa’ to it.
```
const name = 'banesa'; // In this case the value ('banesa') will not be assigned to another string
```


**Another example using the keyword ‘let’:**

This example shows how we declare the variable score and assign a value of ‘0’ (number).
```
let score = 0; // The assigned value can change during the program
```

This was made by using primitive data, but if the variable references a non-primitive data type, such an array, function, or object, then the keyword const will be mutable. Which it means, is that the data inside an object can change.

**Example:**
```
const name = { value: ‘Banesa’}; // the object is indicated by using curly brackets
name.value = 'Barbara'; //change the value through the use of object notation (.)
<< 'Barbara' // the output will be 'Barbara' since we allowed to change the variable by been inside an object
```

Because the variable is using the curly brackets, it allows to convert the variable value into an object, it will require an additional step, it is to call for the new variable that will be reassign later in the program by using the object notation (name.value), the combination of these two rules/methods will allow you to reassign the non-primitive data still using const.

Even when the use of const seems to be a restriction, it helps you to prevent bugs in your program by not assigning twice the same variable.
JavaScript Syntax 101 
Tags: javascript, beginer
Published: 2018-11-01 20:59:07

---
title: JavaScript Syntax 101 
published: true
description: A look into JavaScript Syntax for the beginner.
tags: #javascript #beginer 
---

# JavaScript Syntax 101

At first glance, JavaScript can be overwhelming. There are many things to learn before one can understand what is written. The main way that seasoned developers can let less experienced individuals know what is going on are comments.


#### Comments


**Comments** are how developers let it be known what script does what. Not just to other people, but to themselves as well. Picking up Monday what you left off on Friday can be bewildering even to seasoned pros. Lets take a look some [code](https://github.com/MattGredler/IBM-Comments/blob/master/ibmDesign.js "Sample Comment Code") courtesy of ibm.com/design. A few things to note:


* There are two ways to denote comments; /* for multi-line comments and // for single line comments.

* Comments are ignored when JavaScript is interpreted, they are there for human understanding.


####Variables

Another component that is vital to the functionality of JavaScript are Variables. Variables are like boxes used to store things values in, you need the box but it is what it holds that is important. Variables keys are declared and as a constant but the value that it holds can be fluid.

There are three keywords used to declare a variable in JavaScript; 


*Var, which stands for variable.

*Const, which denotes a constant, meaning the value is not fluid.

*Let, which has a fluid value.

Variables are expressed with and equal sign like so: 

let x = 4;

### Semicolons


**Semicolons** express the end to a statement. It means that that is the end of that expression. To keep files easy to read developers then go on to the next line, but that is not an absolute necessity. Forgetting to enter a semicolon will cause an error in your code.

These are the first three syntax components to know when you are starting out with JavaScript. You will see them every time you interact with JavaScript and will likely be the ones you will become most familiar with as your experience grows.
Introducing FuseBox, an alternative to Webpack
Tags: fusebox, react, javascript, webpack
Published: 2018-11-01 20:58:45

---
title: Introducing FuseBox, an alternative to Webpack
published: true
description: A tutorial about using FuseBox to configure your JavaScript development environment on Node.js
tags: #fusebox #reactjs #javascript #webpack
canonical_url: https://auth0.com/blog/introducing-fusebox-an-alternative-to-webpack/
---

In this article, you will get acquainted with FuseBox, a JavaScript and TypeScript module bundler that is simple to configure but rich with powerful features. In fact, FuseBox is so powerful and mature that it can be a valid alternative to WebPack. 

Throughout the article, you will configure a simple React application, and so you can explore the main options of FuseBox. 

[Read on ✌️](https://auth0.com/blog/introducing-fusebox-an-alternative-to-webpack/?utm_source=dev&utm_medium=sc&utm_campaign=introducing_fusebox)

![Introducing FuseBox, an alternative to Webpack](https://thepracticaldev.s3.amazonaws.com/i/f7h9724gb0gnv99ood12.png)
Where to find tutorials for the library Flexbox grid? 
Tags: css, help, disquss, beginners
Published: 2018-11-01 20:40:09

---
title: Where to find tutorials for the library Flexbox grid? 
published: true
description: 
tags: css,help,disquss, beginner
---

Trying to find tutorials for a project I was given for a library of Flexbox called flexbox grid.
Any help would be really appreciated.
For Loops vs. forEach: A Far Reach!
Tags: webdev, javascript, beginners, arraymethods
Published: 2018-11-01 20:02:10

---
title: For Loops vs. forEach: A Far Reach!
published: true
description: 
tags: webdev, javascript, beginner, arraymethods
---

One of the major concepts that was reiterated over and over when I was first learning about Javascript arrays is that when we need a function to hit every object in an array, we need a loop.

###Brother, may I loop thru an array?###
![brother loops](https://i.kym-cdn.com/entries/icons/mobile/000/026/720/Screen_Shot_2018-07-18_at_2.21.03_PM.jpg)

So in a world where we are designing an app that needs to go through a list of kitties (hopefully my future career), a typical **for loop** would look like this:

![kitty loop](https://thepracticaldev.s3.amazonaws.com/i/w53nbhoc8nvr20ykrf9s.png)

This works great, but we also have the option of using a nifty method that our array will inherit from Array.prototype called **forEach()**. We can invoke forEach() to effectively do the same thing that our for loop accomplished, and it will look a little something like this:

![kitty forEach](https://thepracticaldev.s3.amazonaws.com/i/zs3jfkww12vpavgyru0c.png)

I know what you're thinking, "Why would a developer prefer to use one over the other? Are there advantages and disadvantages of each??". 
Well boy do I have a treat for you, because there absolutely ARE.

###The Case for Loops###

There are some real Joseph Gordon Levitt style Loopers out there that will tell you that for loops are much more efficient than using the forEach method, and they make some good points!

* Some Javascript engines and browsers are more optimized for for loops.
* Break can be used to terminate the loop early.
* Gives more control over the conditions of the loop.

###The forEach() Rebuttal###

On the other hand, proponents of forEach() will be quick to tell you that the "forEach() method is #1!!" (this happens to me on the street all the time). I understand the passion that forEachers™️ have for their favorite Array method.

* forEach is much more readable. When you factor in the temporary variables that are needed in for loops, it makes for a lot of code to look at! forEach looks cleaner and takes less time to read.
* Less chance for small errors in code since you don't have to specify a condition statement.

###The Dev Take!###

While I really don't want to catapult myself into this debate, and I typically avoid talking politics, I have to say that I do have a preference here...

I think that in most circumstances where an array needs to be looped through, the __forEach() method__ is better practice! It looks a lot nicer and makes code more readable and maintainable. One of the only times I would use a for loop is if I knew I needed to break out of the loop early. Otherwise, I go forEach() every time. 

####Bring on the hate mail from "for loopers".####

![loop earth](https://i.imgur.com/PLBYX4M.jpg)
Build the in-app messaging experience your users deserve
Tags: news, startup
Published: 2018-11-01 19:50:38


---
title: Build the in-app messaging experience your users deserve
published: true
description: The most extensible chat API
tags: #news, #startup, 
---

![](https://d2mxuefqeaa7sj.cloudfront.net/s_555AD640454613DEE353638D6F9175725E9D37F0FBC12EAA963DF4DCE9C88EC6_1541101565485_twitter-post_1024x512.png)

## 

For the last year, we've been hard at work scaling our infrastructure and developing new features based on the feedback we received from more than 8,000 beta testers. Today we are excited to announce that Chatkit is generally available.

**What is Chatkit?**

Chatkit is a set of APIs that enables you to build bespoke in-app messaging inside your mobile and web apps. It comes with out-of-the-box features that your end users expect to see in any in-app chat such as:

- typing indicators
- file & images sharing
- online presence
- roles & permissions
- read cursors

… and more, so you don't have to reinvent the wheel.

We've set out to build Chatkit based on the feedback of our Channels users that were fed up with the lack of extensibility and customisability of off-the-shelf solutions like Zendesk Chat and Intercom, or messaging platforms such as WhatsApp and Facebook messenger. They wanted to build a chat experience that fits their business needs and own their own data.

**What's new in Chatkit**

Right after the beta launch, we heard requests from developers for more SDKs in the languages you know best and love working with - so we released both new client and server SDKs. We also added some new features that bring even more out-of-the-box functionality such as:

- Roles & permissions - create custom roles within your Chatkit instances to differentiate how users interact with your chat
- Read cursors - track how far a user has read through the messages in a room
- Instance Inspector - inspect what is happening with users, rooms, messages, and roles in your instance
- Rich media support - add attachments to messages. (note: this feature is remaining in beta for now, but a general availability update is coming soon!)

We've also added some new SDKs, and updated the existing ones:

**Client SDKs**

- iOS
- JavaScript
- Android

**Server SDKs**

- Node.js
- Ruby
- PHP
- Go

**What's Next?**

We have a roadmap packed with features to help you build the in-app experience your users want.

Here is a small teaser of what is coming out in the next few months:

- Custom Data for Rooms
- Multi-part Messages
- New and improved Files API
- Push notification support and fallback
- Webhooks
- End-to-end encryption

As always, we'd love your feedback, so let us know what you think! You can reach out to us at chatkit@pusher.com
Sort method
Published: 2018-11-01 18:27:37

---
title: Sort method
published: true
description: 
tags: 
---

    There are a lot of things that can be done with arrays. Being one of the most basic ways forms of data it is nice to know what all you can do to manipulate them. Today we will be discussing .sort. 

    .sort takes in an array, and puts them in a predetermined order. This order is typically either numerical of alphabetical. There are some odd rules that come with .sort like if a capital letter is thrown into an array then the array will be sorted by capital letters first. And if the array contains numbers and letters then  it will sort numbers first. 

    Lets take a look at what this looks like in practice. 

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21];
array1.sort();
console.log(array1);
// expected output: Array [1, 4, 21, 30]

    Here we can see that the array was sorted alphabetically as expected, and numerically as expected. Now if we change things up a little it could look like this.

var months = ['march', '23', 'feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array [23, "Dec", "feb", "march"]

    Now that we added numbers and changed some capitalization this array has been sorted by numbers first, then capital letters, and finally in alphabetically. Data is a great thing but if you don't know how to manipulate it then you are not going to be able to use it!
Beginner's First Steps With APIs
Tags: api, beginners, javascript
Published: 2018-11-01 17:01:52

---
title: Beginner's First Steps With APIs
published: true
description: First steps in learning about third party APIs
tags: API, beginner, javascript
---

Third party application program interfaces, APIs, are a great tool for building software applications.  An easy way to get familiar with the protocols used in making requests and receiving information is by choosing an API of personal interest and playing around with it.  A simple search engine query yields a great starting point.  

After choosing an API of interest, I set up a personal account and obtained an API key.  I built out a simple html for the information to return to me in the browser. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/voz63mt6mv889qxf2428.png">

Then, I created a variable for the API key and a variable for the query. The query includes the URL in which I wish to retrieve the information plus the API key.  Insert the appropriate API key and URL where the “ “ are indicated.

<img src="https://thepracticaldev.s3.amazonaws.com/i/rqd9hqmct4if9l16q7za.png">

I, next, coded an ajax ‘get’ method to retrieve the information. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/usoa4w7kcd5xowje42kc.png">

The following is then sent to the browser.

<img src="https://thepracticaldev.s3.amazonaws.com/i/ie33ll9oco3ksfyex2kn.png">

After making this first step, I found it easier to understand APIs and I acquired a basic understanding of the power of utilizing third party APIs.
Amazon Kinesis Auto Scaling
Tags: aws, kinesis, npm, node
Published: 2018-11-01 16:30:19

---
title: Amazon Kinesis Auto Scaling
published: true 
tags: aws, kinesis, npm, nodejs
---
This is npm module which scale amazon kinesis as per current traffic needs. This module continuously monitor traffic in kinesis stream and split and merge shards as needed. Amazon provides Kinesis to process streaming data. Each kinesis stream can have multiple shards and each shard can have traffic upto 1000 records per sec. E.g. if your application needs to handle 5000 req/sec then you need to have 5 shards. Since traffic on your application can varies a lot so does number of shards. If your application needs to handle 20000 req/sec at peak time then you need to have 20 shards but when at other time you may required only 5 shards. Each shard cost money. It is important to have enough shards to serve current traffic but we should close additional shards if there is no need to save money. Currently amazon doesn't provide any auto scaling of kinesis stream. This npm module fill that missing link so that your application always have enough shard to process.
You can find this npm module at [https://www.npmjs.com/package/@xaxis-open-source/amazon-kinesis-scaling].
---