teleren/devto huggingface dataset:
Positioning nav-items in navbar with Flexbox
Tags: bootstrap, flexbox, positioning, frontend
Published: 2019-12-30 09:53:58

Hello all :)

This is my first official blog post here as an aspiring front-end dev. 

Today's topic is on how to position any number of nav-items in a Bootstrap navbar (within the ul) using Flexbox which is already enabled in Boostrap. 


Let's start with the code required for the full navbar first. 

```js
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
}
```

So the basic navbar I have looks like this 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xr67uwqdmaol8317qufq.png)


If you need a navbar with more features (a search bar perhaps?) check the Boostrap docs out [here](https://dev.to/new).

<strong>Centering the nav-items</strong>

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pv5us0mu1wmyasvxieb1.png)

To center the nav-items as you see above all you have to is enter "justify-content-center" into your code with the id="navbarNav". See below for actual code.

```js
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
```

<strong>Right-aligning the nav-items</strong>

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3826qr8a0nwyseepno7h.png)

Again all you have to do is "justify-content-center" to "justify-content-end".

And that's it!

<strong>BONUS</strong>- when the items are in the center you can space them apart by playing with the margin property in bootstrap. See what I did to get the below.

By inserting mr-4 (margin-right-4) into each nav-item class we can make our nav items get more space for each other making our navbar look like

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pv5us0mu1wmyasvxieb1.png)

to this  

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7xc03cgkc60e99kfh6y0.png)

That's it folks! I dream of becoming a great front-end dev soon and hope that this little piece of information can help you as it helped me :)
Calling a function on an array pair
Tags: help
Published: 2019-12-30 09:44:52

```javascript
function lcmCardinality(n) {
  var factors = []
  for (var i = 1; i <= n; i++) {
    if (n % i == 0) {
      factors.push(i)
    }
  }
  var pairs = [].concat(
    ...factors.map((v, i) => factors.slice(i).map(w => v + ',' + w))
  )
  function gcd(x, y) {
    if (typeof x !== 'number' || typeof y !== 'number') return false
    x = Math.abs(x)
    y = Math.abs(y)
    while (y) {
      var t = y
      y = x % y
      x = t
    }
    return x
  }
  function lcm(a, b) {
    return (a / gcd(a, b)) * b
  }
  for (var i = 0; i < pairs.length; i++) {
    var d = pairs[i]
    var a = []
    a.push(d)
    var z = a.toString().split(',')
    var result = z.map(function(x) {
      return parseInt(x, 10)
    })
    for(var i=0;i<n;i++){
if(lcm(...result)==n){
console.log(lcm(...result))}};
  }
}
```
The code times out. I am having trouble getting the lcm(...result) where it equals n.
DIY - Developing a better life
Tags: beginners, bootcamp, career
Published: 2019-12-30 00:14:42

---
title: DIY - Developing a better life
published: true
description: First blog post for the Flatiron School Full Stack Web Developer online bootcamp
tags: beginners, bootcamp, career
---

# DIY - Developing a better life

Left with triple figures of student debt, an itch to settle down, and uncertainty about my next freelance gig — I knew something needed to change. 

I noticed my hobbies revolve around experiencing how things work:

Twisting the hair of a sheep into a sweater.
Coaxing water, flour, salt, yeast and time into steaming loaves.
Observing bees, legs heavy with pollen, turning dust into honey.

My interest in understanding how the web worked, how computers worked, was daunted by the vast resources online (and my dial-up internet connection), to create something on my own. During college, I was introduced to new media — combining technology, interactivity, and information to craft new experiences and ways of learning. As a documentary film student, it got my mind buzzing about apps and sites to create, but I didn’t have the skills to create them. I moved into nonprofit communications and film producing after graduation and my ideas faded away until a few of my friends got into tech.

I started hanging out with app developers, people who helped developers connect with companies, and software programmers. As they spoke about their work, it piqued my interest. Maybe I could learn about this too?

I decided to learn software development first to get under the hood of the apps, websites, and technology I use every day, and second, to try to develop a life that better supports my lifelong love of learning.
Regular Expressions in JavaScript and Php
Tags: 100daysofcode, typescript, javascript
Published: 2019-12-30 09:36:58

## Regex
### Regular Expressions in JavaScript and Php
Today's goal is to have a better understanding with  [my beloved guide javascript.info](https://javascript.info/regexp-introduction)

[regex tester](https://regex101.com/)

In the evening I am planing to dive into codewars and hackerrank regex challenges.
[![View on vgy.me](https://i.vgy.me/I1tOZc.png "View I1tOZc.png on vgy.me")](https://vgy.me/u/I1tOZc)
------------
[![View on vgy.me](https://i.vgy.me/t8ISAk.png "View t8ISAk.png on vgy.me")](https://vgy.me/u/t8ISAk)

*I hope I will publish a post in Dev.to tonight.* 

day 11
massCode - a free and open source code snippets manager for developers.
Tags: vue, productivity
Published: 2019-12-30 09:34:50

---
title: massCode - a free and open source code snippets manager for developers.
published: true
description: A free and open source code snippets manager for developers.
tags: vue, opensource, productivity
---

Hello, everyone!

It'll be a short post. I'd like to start the New Year with another open source project. This time it will be a code snippets manager for developers.

![massCode](https://thepracticaldev.s3.amazonaws.com/i/wgfd4p2vncgnf5h2dify.png)

I was inspired by applications like SnippetsLab, Quiver, Boostnote.

SnippetsLab & Quiver are native MacOS applications. Boostnote is a cross platform application because it is written using Electron. Inside Boostnote, it uses React.

I also took Electron as a basis to provide cross platforming. Since I'm a big fan of Vue, my app seems to be written in Vue. Another feature of the application is that as an editor when using Monaco editor, it allows for autocompletion in the main frontend languages - HTML/CSS/JavaScript. And of course Emmet :)

The work has just started, there is still a lot to do. You can follow the development process in the repository - 

{% github antonreshetov/massCode %}
🔥 JavaServer Faces Cheat Sheet
Tags: java, jsf, cdi, wildfly
Published: 2019-12-30 09:14:43

The JSF framework supports these annotations but are deprecated in JSF 2.3 and will not be used anymore.

| Annotation                        | Annotation Class                   |
| --------------------------------- |:----------------------------------:|
| @RequestScoped                    | javax.faces.bean.RequestScoped     |
| @SessionScoped                    | javax.faces.bean.SessionScoped     |
| @ApplicationScoped                | javax.faces.bean.ApplicationScoped |
| @ViewScoped                       | javax.faces.bean.ViewScoped        |
| @NoneScoped                       | javax.faces.bean.NoneScoped        |
| @CustomScoped(value="#{someMap}") | javax.faces.bean.CustomScoped      |

It is recommended to use JSF CDI annotations as shown in the following table: 

| Annotation (CDI)                  | Annotation Class                           |
| --------------------------------- |:-----------------------------------------:|
| @RequestScoped                    | javax.enterprise.context.RequestScoped     |
| @SessionScoped                    | javax.enterprise.context.SessionScoped     |
| @ApplicationScoped                | javax.enterprise.context.ApplicationScoped |
| @FlowScoped                       | javax.faces.flows.FlowScoped               |
| @Dependent                        | javax.enterprise.context.Dependent
JavaScript Data Structures: Stack: Recap
Tags: beginners, tutorial, javascript, webdev
Published: 2019-12-30 09:07:56

---
title: "JavaScript Data Structures: Stack: Recap"
description: "JavaScript Data Structures: Stack: Recap"
published: true
tags: ["Beginners", "Tutorial", "JavaScript", "Webdev"]
series: JavaScript Data Structures
---

## Intro

[Last time](https://dev.to/miku86/javascript-data-structures-stack-pop-remove-the-last-node-lbc), we added the last method.

I hope you learned something about the concept of a Stack and tried your best to implement it on your own.

---

### Thoughts about the Stack

We implemented the Stack using a [Singly Linked List](https://dev.to/miku86/javascript-data-structures-singly-linked-list-2og).

The Stack data structure is a very important concept, because we use it all the time. 

The fundamental difference to the Singly and Doubly Linked List is the fact, that we only add and remove a node to/from the top of the Stack, so we use the ["Last In, First Out"-Principle](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)).

Examples in real life are a stack of cards, a pile of dishes, a browser history.

- Access: `O(N)`
- Search: `O(N)`
- Insert: `O(1)`
- Remove: `O(1)`

---

## Final Implementation

Our Stack has these methods:

- `push`, to add a node to the top of the stack
- `pop`, to remove the top node from the stack

```js
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class Stack {
  constructor() {
    this.length = 0;
    this.last = null;
  }

  push(value) {
    const newNode = new Node(value);

    if (!this.length) {
      this.last = newNode;
    } else {
      newNode.next = this.last;
      this.last = newNode;
    }

    this.length += 1;
    return newNode;
  }

  pop() {
    if (!this.length) {
      return null;
    } else {
      const nodeToRemove = this.last;
      this.last = nodeToRemove.next;
      nodeToRemove.next = null;

      this.length -= 1;
      return nodeToRemove;
    }
  }
}
```

---

## Further Reading

- [Wikipedia: Stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type))
- [Wikibooks: Stack](https://en.wikibooks.org/wiki/Data_Structures/Stacks_and_Queues#Stacks)
- [Wikipedia: Call Stack](https://en.wikipedia.org/wiki/Call_stack)
- [Wikipedia: Stack Overflow](https://en.wikipedia.org/wiki/Stack_overflow)

---

## Next Part

Now that we have looked at the Stack, we will take a look at the Queue.

Don't miss interesting stuff, [subscribe](https://miku86.com/pages/newsletter)!
Blockstack Dapps 2020
Tags: blockchain, startup, dapps, blockstack
Published: 2019-12-27 16:18:30

The Blockstack ecosystem had launched the app mining program 12 months ago. App mining encourages app developers to work on blockstack ecosystem. It is a kind of reward mechanism where in the developers who contribute to the growth of blockstack ecosystem get rewarded in Stacks (STX) tokens. The apps are ranked every month based on their performance in select parameters decided by Blockstack PBC and these metrics are measured by independent reviewers who are brought on board by Blocstack PBC. Many interesting apps have come out during this period. Some of the interesting apps are 

[Graphite](https://www.graphitedocs.com/) offers document editing and collaboration tools, file storage and sharing tools, form builders and analysis, contact management, and team management.

[Contakts](https://contakts.me/) is a decentralized web app that allows you to store your contact details on the decentralized web. 

[Mumble](https://trymumble.com/) is a privacy focus chat app that empowers communities by bringing like minded people together to share, discuss and empower each other through encrypted communication.

[Visual Bookmarks](https://visualbookmarks.online/) web app  is a decentralized alternative to Pocket that makes it quick and easy to collect and re-discover pages you find useful, interesting or inspiring, in a beautiful, visual and fully searchable personal library.

[DECS](app.decs.xyz) is a all-in-one Workspace to manage code snippets and protect sensitive data

[Envelop](https://envelop.app/) facilitates sharing private files easily, without losing their ownership 

[My Feelings](https://myfeelings.live/) is a decentralized mood tracker that helps you keep pace with your emotions 

[Airtext](https://airtext.xyz/) allows users to create their own decentralized blog


With the end of 2019, app mining program completes a good 12 months of interesting experiment. The ranking has evolved based on the feedback provided by the blockstack ecosystem. As a metric for assessing the relevance of Blockstack in the larger scheme of things, the key factor in the year 2020 will be how many of the dapps built on Blockstack can actually go on to become mainstream and attract a mass adoption.
Looking back at 2019 
Tags: 2019, android, architecture, career
Published: 2019-12-30 08:49:46

2019 has been a year to remember for me. Here I have shared gist of things I have done in 2019 
#### 💭Developed app for
1 Android - Mobile
2 Android - Tab 
3 Android TV
4 FireStick  
#### 📱Worked on different apps
1. Streaming app 
2. Selling / Buying platform app
3. Wallpaper app - NFWalls
4. Tweetstorm - StormIt

#### 👨‍💻Worked with 
1. Kotlin 
2. Coroutines
3. Dagger
4. Jetpack Components
 * RoomDB
 * WorkManager
 * ViewModel
 * LiveData
 * Navigation component
5. Camera2 API
6. Multi module app 
7. Instant app 
8. Firebase
 * RealTime DB
 * Firebase Auth
 * Firebase Dynamic link 
 * Firebase Analytics and distribution 
 * Firebase In-App messaging and Cloud messaging (Notification)
 * Firebase Remote config
9. Maps
10. RxJava
11. Google drive API integration for backup and restore
12. DRM content streaming
13. Security
 * SSL Pinning
 * RSA content  verification 
 * AES Encryption / Decryption 
 * Keystore to store sensitive data

#### 🧗Updated  
1. Moved an App from Java to Kotlin 
2. Moved an App from ORM Lite to Room DB

#### Open source Contribution 
1. https://balakrishnanpt.github.io/EasyCam/ - EasyCam Android Library  
2. https://github.com/BalakrishnanPT/FileDownload 
3. https://github.com/BalakrishnanPT/Contacts
4. https://github.com/BalakrishnanPT/FragmentFactoryExample
PascalCase issue
Tags: react, vscode, help
Published: 2019-12-30 08:20:52

Hi DEvteam,

I am writing XML using react: "const XmlElement= props => React.createElement("XmlElement", props);"

In the console browser i got some error :

error read as follows: XmlElement/> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements

I thought I am using Pascal Casing .
Can anyone assist on how to resolve the issue.

Thanks in advance
Magento 2 Free Shipping Bar
Tags: php, devops
Published: 2019-12-30 07:47:45

[Magento 2 Free Shipping Bar](https://www.mageants.com/free-shipping-bar-for-magento-2.html) is a specialized extension that includes auto display value in the cart.  Also, this extension can countdown the rate until free delivery.

**Key Features:**

1.Show the free shipping bar and amount that is left
2.Excludes tax in a displayed subtotal over message bard
3.Auto-updates the newly cart total and the remaining amount
4.Display the success text after reaching free shipping cost of the buyer
5.Show this bar on various places like category page, product page, home page and more

**Why need:**

It is always helpful to let your customers informed about free shipping. This Free Shipping Bar extension allows you to reveal a lacking amount of clients to grab the free shipping.
🔥 PrimeFaces Showcase & Themes
Tags: java, theme, showcase, primefaces
Published: 2019-12-30 07:46:34

**PrimeFaces** showcase offers new themes such as *PrimeFaces Mirage* that means it is a new theme for this year. This is awesome theme that provides light and dark mode and many other UI awesome theme components based on JSF framework.

[PrimeFaces Theme Mirage](https://www.primefaces.org/mirage/)

https://www.opendevops.dev/primefaces-showcase-themes/
⚓ Design pattern for web applications (MVC) based in JSF framework
Tags: java, design, codequality
Published: 2019-12-30 07:39:07

The most popular design pattern for web applications is **MVC** (model-view-controller) design pattern in JSF that stands for **JavaServer Faces**. It could be described MVC in several applications such as desktop or web applications. 

More specifically in JSF paradigm, the mapping is as follows:

**Model** - The services or **DAOs** (Data Access Objects) in addition with the entities that they produce or consume something into the web application. The entry point to this option is the managed bean (e.g. **UserBacking.java** or **UserMB.java**), but in **Java EE** (Java Enterprise Edition) that JSF is part of it nowadays, these artifacts are typically implemented by EJB (Enterprise Java Beans and JPA (Java Persistence API) respectively.

**View** - The user interface (UI) components such as PrimeFaces UI components and their composition into a full page. This is fully in the domain of JSF and implemented by *JSF* UI-Components and Facelets respectively. There are several libraries for user interface such as **PrimeFaces**, **OmniFaces**, **MyFaces** or **ICEFaces**. In comparison with JSF framwork, there is also **ADF** (Application Development Framework) from Oracle.

**Controller** - The traffic transactions that handles commands and incoming data from the user, routes this to the right parts and selects a view for display. In JSF one doesn't write this controller, but it's already provided by the framework (FacesServlet).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/j3uqb95qrho5l1ux9dv6.png)

https://www.opendevops.dev/design-pattern-for-web-applications-mvc-based-in-jsf-framework/

🔁 To Be Continued 🔁
How you can check you have been hacked or not for free?
Tags: security, database, php, html
Published: 2019-12-30 07:13:22

We are currently living in a Cyber World where every day we have to do new sing up to different websites Which make sign up so compulsory without sign up we can not even use a single service of the website which is a kind of right thing to do so every website can prevent spam and stay away from people who want to harm their resources but have you ever wondered this can become the biggest threat to your cyberspace?

In 2020 there are still millions of websites with 0% security enabled and can be hacked by anyone with a single line of code. this website doesn’t pay attention to their security and in the end, hackers take advantage of these websites to make money or to gain some reputation in the hacking community.
How this is affecting all of your accounts on the internet you ever created?

we may sometimes don’t even care about small websites data but these small websites make all of our accounts exposed to the hackers. as we are humans and we keep similar or same password everywhere on different websites and it’s normal because of human tendency and if anyone of your signed up website gets hacked then all of your accounts holding the same credentials will be compromised with it and it doesn’t matter how much strong password you had kept. On the internet, millions of hackers run their account checking scripts 24x7 which checks your hacked emails and password details with 100k different websites globally to get a hit and sell your data. this may include your bank accounts, SSN numbers, business email, Gmail, and many more accounts.
No worries! We founded a website that helps user’s to check if they are hacked or not. If any of their website accounts is been compromised? and if so, they provide the user with their exact hacked password for free.

No worries! We founded a website that helps user’s to check if they are hacked or not. If any of their website accounts is been compromised? and if so, they provide the user with their exact hacked password for free.

WasiHacked.net

wasihacked.net website database holds 500,000,000 Million hackers private dumps database collected from all illegal websites, data selling, leaks and cracking or hacking forums. wasihacked.net assures you solid anti-theft protection service for free. wasihacked.net is a combined team of the top (Cybersecurity experts, Data Scientist, and Developers).

CHECK YOUR HACK STATUS ON WasiHacked.net FOR FREE.

https://wasihacked.net
Sending Emails in PHP with PHPMailer
Tags: php, webdev, tutorial, beginners
Published: 2019-12-30 07:06:16

## Sending Emails in PHP with PHPMailer

### Learn how to develop a system from scratch that sends emails to users the right way. PHPMailer is one of the most popular open source PHP libraries to send emails with.

Do you already know PHP and you're developing a website that needs email sending? By taking this course you'll learn how to develop a system from scratch that sends emails to users the right way.

This course will teach you how to add the following features to your PHP website or web application:
* Custom Ajax Function Plugin
* Addition Features for element scroll
* Sending mails using PHP Mailer
* Clean email structure to avoid the Spam folder by 99% chances

Taught by senior web application developer and online instructor Peter Fredrick, this course takes you in easy steps through the entire process.

What you'll learn
* PHP
* PHP Mailer
* Ajax & Json
* Javascript

{% youtube khMyWHA4Ywc %}
CSS3 Tutorial - Learn CSS3 Loading Animations
Tags: css, webdev, tutorial, beginners
Published: 2019-12-30 06:58:56

## CSS3 Tutorial - Learn CSS3 Simple Loading Animations with Ease. 

### This Course is for all of you who are currently learning Basics of Front End Web Development. If you learned basics of HTML and CSS and want to learn more regarding CSS3 Animations, then this course if for you!!


In today's industry, CSS3 is a must. If you get your knowledge on right track and you also master CSS3 Animations, you will rock trough this industry no matter if you are Freelancer, or plan to get a job at some Company.


This Course uses HTML and CSS

It is not a must for this Course to have knowledge of HTML or even CSS, as this small Course is setup to help those of you who are just starting with Front End Development.

**What will you Create?**
* HTML Markup for Loader Animations
* Circular Animations
* Block Animations
* Bubble Animations
* Line Animations

**What you'll learn**
* CSS 3 Animations
* Web Development
* Website Animations

{% youtube yeKXIiU0KAM %}