teleren/devto huggingface dataset:
How to embed a PDF file in a dev.to post?
Tags: help, discuss
Published: 2019-12-31 14:19:49

---
title: How to embed a PDF file in a dev.to post?
published: true
tags: help,discuss
---
I've been trying the past couple of minutes to embed a PDF file into my post, but for some reason they don't display. Here's what I've tried:
```html
<object data="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf" type="application/pdf" width="700px" height="700px">
    <embed src="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf"></embed>
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf">Download PDF</a>.</p>
    </embed>
</object>
```
This is how the above code renders:
<object data="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf" type="application/pdf" width="700px" height="700px">
    <embed src="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf"></embed>
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf">Download PDF</a>.</p>
    </embed>
</object>

It's supposed to display the PDF document but instead defaults to the Not Supported text. My site equally uses markdown and the above snippet renders properly.

I've equally tried using an iframe but it doesn't render either.
Here's the iframe snippet:
```html
<iframe src="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf" width="100%" height="500px"></iframe>
```

Would appreciate help from anyone who's succeeded with this before 🙏.
How to install global npm packages without sudo on Ubuntu
Tags: npm, ubuntu, aws
Published: 2019-12-31 14:00:59

# Avoiding sudo

It should be self-evident that providing your scripts sudo permissions is a bad idea. From concerns about third-party packages, missing security layers in your code to access issues and inconveniences - it would be too much to talk about the possible dangers. Let's just agree that running via sudo is not an option. 

One of my most-used utilities is [neoan3-cli](https://www.npmjs.com/package/neoan3-cli). Even if I am not using neoan3, the migration and credential handling is always welcome. 

## AWS Ubuntu instance

One of the most versatile hosting solutions is still Amazon's EC2 instances. While Amazon's Linux version seems to be the logical step, I am simply feeling more at ease with Ubuntu and am frankly a little skeptical about a distro that seems so coupled with a hosting solution (As far as I understand, the distro started out as a customization of CentOS and then branched into its own beast). Ubuntu is the perfect solution as everything we are going to talk about will be independent from your hosting solution. We are using version 18.04 but there shouldn't be any differences to prior versions in our scenario. 

_NOTE:_ On AWS your username will likely be "ubuntu" in our scenario.

## The directory of global npm packages

The first thing we want to do is creating a directory within our user's home. On Ubuntu, this should be `/home/USERNAME/` ( or `~/`). We will want to create a directory for our global packages:

```shell
mkdir ~/.npm-packages
```

Next, let's set up npm to use this directory:

```shell
npm config set prefix "${HOME}/.npm-packages"
```

## PATH variable
In order for node & npm to find installed packages, we should add this directory to the PATH variable. On a server you might want to do this via `nano ~/.bashrc`.

Add the following lines:

```shell
NPM_STORE="${HOME}/.npm-packages"

export PATH="$PATH:$NPM_STORE/bin"

# Make sure this line is the last in the config (in case you defined MANPATH already)
# Otherwise, fall back to `manpath` so we can inherit from `/etc/manpath`.
export MANPATH="${MANPATH-$(manpath)}:$NPM_STORE/share/man"
```
## Let's try it out

 Assuming everything went as planned, we should now be able to use global packages without the root user or sudo. Start a new terminal window (or restart your ssh connection) and try: `npm i -g neoan3-cli`. After successful installation, the command `neoan3 -v` should output the installed version. 

## Final thoughts

There is a popular script out there automating this process [here](https://github.com/glenpike/npm-g_nosudo). Please be aware that this solution does not play well with node version manager. Otherwise it is a solid solution with many happy users.
Automating the Date On Your Footer.
Tags: footer, date, newyear, automation
Published: 2019-12-31 13:52:23

---
title: Automating the Date On Your Footer.
published: true
description: Every year, some engineers would have to change the date manually on the Footer of their Website. You can avoid this with a line of JavaScript
tags: Footer, Date, Newyear, Automation
---


In software engineering, it often said that, once the task is repetitive🙄, automate it! So must the **© Copyright Date** on the footer be automated.

Footer holds details such as Sitemap, Social Links and Copyright Notice of a site.
Eg.
![Footer Section](https://thepracticaldev.s3.amazonaws.com/i/9goo1inlr7zacerjt9sy.png)src: https://www.godlife.com/en

### Approach 1

Introduce a JavaScript tag with internal Date API. You can get the current year from the browser JS API, which means you don't have to change every other year.

- Add the JS script to your HTML

```document.write(new Date().getFullYear());```


- Introduce a script tag in your Footer Section. 

```
<p>
   &copy
   <script>
      document.write(new Date().getFullYear());
   </script> 
   <a href='https://twiter.com/saviour123>Saviour Gidi<a/>
 </p>
```
Output

`© 2019 Saviour Gidi` 


### Approach Two

Introduce a script tag with AJAX and get the current Date from World Clock.
```
<p>
  &copy
  <p id='copyright'></p>
  Saviour Gidi
</p>

<script>
    fetch('http://worldclockapi.com/api/json/utc/now')
      .then(data => data.json())
      .then(d => 
      document.getElementById('copyright').innerHTML = (new Date(d.currentDateTime).getFullYear())
)
</script>
```

NB: This second approach is to a response in the comments.


Imagine every year you have to manually change the date on the website. It's not safe for your health and your company's and I pity you🤣. To cut long story short, update your code to include the JS tag!
I missed the opportunity for being good mom.
Published: 2019-12-31 13:45:42

I'm the mom with 2 sons with more passion in programming. So I find only remote jobs. It's very hard because I never go work fulltime or contract in the office. I use github for save my work. Until Google recruiter from japan contacted me via email. And I refused . And later, Shopee recruiter from Sinkapore contacted me too. And I refused. I'm sorry for this opportunity And i hope One day I will have the opportunity to work with a good company that gives the mother a chance to work at home. Could you please bless me for 2020? #newyear #2020 #Python #Django
JavaScript Data Structures: Queue: Intro
Tags: beginners, tutorial, javascript, webdev
Published: 2019-12-31 13:10:54

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

## Intro

After we finished the [small series about the Stack](https://dev.to/miku86/javascript-data-structures-stack-intro-51la), we start with the Queue.

---

## What is a Queue?

- uses the ["First In, First Out"-Principle](https://en.wikipedia.org/wiki/Queue_(abstract_data_type))
- Examples: a queue of people in front of a store, a printer queue
- there are multiple ways to implement a Queue: Array, Singly Linked List, Doubly Linked List

![Queue](https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Data_Queue.svg/320px-Data_Queue.svg.png)

---

## Big O of Queue

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

---

## Example

We will use a Singly Linked List to build our Queue.

`A (start) ==> B (end)`

- we can enqueue (= add) to the end (e.g. a new person will be the last person in the queue)
- we can dequeue (= remove) from the start (e.g. a person at the start gets served next)
- `A` is the next node in line
- `A` has a pointer (`next`) to the next node (`B`)
- `B` is the last node we enqueued (= added) to the Queue
- if we dequeue (= remove) `A`, the next node in line should be `B`

---

## Setup

We need the following parts to build our Queue:

- a Node with a value and a pointer to the next item in the Queue
- a Queue with a length, a pointer to the start of the queue, a pointer to the end of the queue

```js
// a Node has a value (`value`) and a pointer to the next node (`next`)
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

// a Queue has a length (`length`), a start (`start`), an end (`end`)
class Queue {
  constructor() {
    this.length = 0;
    this.start = null;
    this.end = null;
  }
}
```

---

## Thoughts

We set up our Queue. Now we need at least two methods within the Queue:

- a method that adds a new node to the end of the Queue: `enqueue`
- a method that removes a node from the start of the Queue: `dequeue`

---

## Next Part

We will implement our first method for the Queue.

Don't miss interesting stuff, [subscribe](https://miku86.com/pages/newsletter)!

---

## Questions

- We could also use an Array to build a Queue. How could we do this? Any pros or cons?
How do you write an empty array?
Tags: challenge, typescript, javascript
Published: 2019-12-31 12:56:31

---
title: How do you write an empty array?
published: true
description: Twitter Poll: Writing an empty multidimensional array 🤔
tags: challenge, typescript, javascript
---
How do you write empty arrays when they have multiple dimensions? Answer in a comment or in the twitter poll below 👇
{% twitter 1211992351192817665 %}
Flask-Authlib-Client
Tags: python, flask, authlib
Published: 2019-12-31 12:41:16

---
title: Flask-Authlib-Client
published: true
description: A flask extension to make it easy to do token validation with separate authorization/resource server.
tags: python, flask, authlib
---

I present to you `Flask-Authlib-Client`, a flask extension for authlib that answers the question "How do I validate tokens from a different resource server?". I haven't managed to publish it on Pypi because I'm having issues with my pypi account. Hoping to get it sorted soon.

Check it out on [Github](https://github.com/michaelbukachi/flask-authlib-client).

Happy New Year!

### Edit
Finally got my pypi account back (yeepie!). You can now install the extension with:

```
pip install Flask-Authlib-Client
```
10 years in web development!
Tags: webdev
Published: 2019-12-31 12:13:24

---
title: 10 years in web development!
published: true
description: 
tags: #discussion #webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/f25wmqs04n83848gsa6g.png
---


**2010**
**2011**
**2013**
**2014**
**2015**
**2016**
**2017**
**2018**
**2019**
**2020**

Where are all of those frameworks today? **Backbone**, **Knockout**, **AngularJS** at some point people had even stacks based around it right?... **Mean** stack.

Ember.js is still rocking they recently released ember octane.

**CoffeScript** is another that have disappeared from job post the thing that gave us arrow functions. Still being used by the ruby community if you don't believe me checkout for yourself https://guides.rubyonrails.org/working_with_javascript_in_rails.html


I think biggest one was **jQuery**. The thing that have been used by every frontend dev. Fell out of the roadmap of learning web development a while ago.

I actually remember the argument when Boostrap alpha 4 was released. On the Hacker News there was heated argument between the creator of youmightnotneedjquery and creators of bootstrap on why the were still sticking with jQuery when everyone else was not even github codebase has removed jQuery entirely and replaced it with vanilla.JS

Also what happened to **ruby on rails**, wasn't every bootcamp teaching it at some point like dev bootcamp?


REST, JSONAPI and GraphQL

Towards the end of the decade everything seems to be about **react.js** and I repeat before moving on **react.js**,  **vue.js** and **angular(2+)**

From **fat servers** to **fat clients**. I guess you can have both too, but you should choose one the community seems to have agreed on the latter.

Build tools, **oh** what happened to **grunt** and **gulp.js**?


The era of static typings from **flow** to **Typescript**, **mypy** for python and stripe having released **sorbet** and ruby 3 promising types.  


Text editor from textmate to sublime text to atom and finally javascript community settled on  vscode.


My quick predictions for the future

**2020** - React.js still dominating in the frontend land nothing new.

**2021** - Maybe serverless framework is mature enough more and more companies using it.

**2022** - serverless consultant start appearing in the job market hopefully I'm one of them. 

**2023** - ...
**2024** - We finally getting flying cars (I'm big blade runner fan!)
React Hooks with Typescript: Use State and Use Effect in 2020.
Tags: react
Published: 2019-12-31 11:56:10

Released in React v16.8.0, React Hooks address a number of issues with React, and perhaps most notably for TypeScript users, provide a first-class solution for reusing stateful logic, built with typing in mind. Due to this, a lot of the types for Hooks can be inferred, but in some cases explicit types must be set.

We are going to use typescript for this tutorial, so that our code remain 100% typesafe, and I must say if you are doing a big project, Typescript is a must feature one should go with, which helps to keep the code clean.

The above command will create a project with the name codersera-hooks-tutorial. Once it is done, go straight to the directory and either npm start or yarn start, will kickstart the project.

<B>We will be using yarn throughout this tutorial to maintain consistency.</B>

Let us now integrate antd ( a design library by the name of ant design), which we will be using to have some standard UI components. And, this does not have to do anything with hooks or react in general.

Integrating antd in <a href="https://codersera.com/blog/hooks-getting-in-a-new-relationship/">react with hooks.</a>

That’s all, we now have a complete typescript setup off react with antd design library integrated.

<B>Using State with <a href="https://codersera.com/blog/react-hooks-with-typescript-use-state-and-use-effect-in-2020/">hooks in React</a> (React.useState)</B>

Let us see how the state is used with hooks. For this, we are going to create a simple form component, that will show the value in the input field upon submitting the form.
My Databricks article compilation of 2019
Tags: databricks, delta, spark, bigdata
Published: 2019-12-31 11:53:41

As we come to the end of the year I thought I should share some of the articles that I bookmarked this year during my journey in learning and working with Databricks, a Unified Data Analytics Platform.

[Using a remote Databricks cluster from a local Jupyter notebook](https://databricks.com/blog/2019/12/03/jupyterlab-databricks-integration-bridge-local-and-remote-workflows.html). This article shows how Data Scientists can work in their familiar local environments with JupyterLab and access remote data and remote clusters in a consistent way.

[Data pipeline with Structured Streaming](https://databricks.com/blog/2018/07/02/build-a-mobile-gaming-events-data-pipeline-with-databricks-delta.html). This article illustrates how to build data pipelines for high volume streaming use cases like mobile game analytics using Databricks Delta.

[Building a Machine Learning Data Pipeline with Delta Lake](https://databricks.com/blog/2019/08/14/productionizing-machine-learning-with-delta-lake.html). This article demonstrates how Delta Lake is the ideal platform for the machine learning life cycle because it offers tools and features that unify data science, data engineering, and production workflows.

[Schema enforcement is the yin to schema evolution’s yang](https://databricks.com/blog/2019/09/24/diving-into-delta-lake-schema-enforcement-evolution.html). This article shows how Delta Lake uses schema validation on write to keep compatibility with the target table.

[Migrating Transactional Data to a Delta Lake](https://databricks.com/blog/2019/07/15/migrating-transactional-data-to-a-delta-lake-using-aws-dms.html). This article explains how to tackle some of the challenges with moving data from databases to data lakes. In this example they use the AWS Database Migration Service.

[Migrating from Hadoop to modern cloud platforms](https://databricks.com/blog/2019/11/27/migration-from-hadoop-to-modern-cloud-platforms-the-case-for-hadoop-alternatives.html). This article talks about the challenges with Hadoop architectures and how to move towards modern cloud data platforms.

I hope these articles are also useful to you. Keep an eye on the Databricks blog for 2020 and if you need help solving a big data problem please reach out, I might be able to help. Happy New Year!
Do you know ":first-of-type" in css
Tags: css, sass
Published: 2019-12-31 11:42:28

I think you will need this situation for any reason, for example, if you just want to select the first element after your form-group like label, you can do this technic.

With sass, you can do so:

```sass
.form
    &-input, &-textarea
        @apply w-full
    &-group
        @apply mb-4
        label:first-of-type
            @apply block text-gray-700 block mb-2 text-sm
```
Sorry if you a bit comfused with the `@apply`, I'm using tailwind css for any property I need.

With css, you can do:

```css
.form-group label:first-of-type {
    property: 'value';
}
```

That's it, hope this help you :)
Observer in PHP [Design pattern with examples]
Tags: php, designpattern, observer
Published: 2019-12-31 11:19:05

---
title: Observer in PHP [Design pattern with examples]
published: true
description: Do you want to notify users of your application, or launch products of your web store successfully? here is the way to do it!
tags: php, designPattern, Observer
cover_image: https://anastasionico.uk/img/blog/observer-in-php-design-pattern-with-examples.jpg
---

It is that time of the year.

These weeks are made to cool off and enjoy family and friends.

Since I am sure you are still digesting the big Christmas dinner this may be the perfect time for a chill on a sofa and reading about web development practices,

after all, you do not want to forget anything, do you?

In this article we keep on going with design patterns specifically we’ll have a look at the Observer pattern, the first Behavioral pattern of the series.

[Get a sofa and relax for 10 minutes >>>](https://anastasionico.uk/blog/observer-in-php-design-pattern-with-examples)
Top 10 BlockStack Apps from Dec 2019 
Tags: blockchain, blockstack, dapp, web3
Published: 2019-12-31 10:54:20

I came across BlockStack(https://blockstack.io) in June 2019 as part of the first "Can't Be Evil" hackathon. 

I built BlockSurvey - https://blocksurvey.io as part of the hackathon and today it has more than 1000+ users. It allows users to create surveys, polls, & forms with complete confidentiality. Rewards from App Mining helped to build further and I have bootstrapped the product completely from that money.

In this article, I would like to share the Top 10 DApps (BlockSurvey not included) which I like to bring to your attention so that you can try them too. This will also give you an idea of what is possible to be built with Blockstack and how you can bootstrap your product in a quicker time. 

1. Envelop - https://envelop.app/ - Share private files easily, without losing their ownership. An alternative to WeTransfer / Firefox Send. 

2. Compress.Studio - https://compress.studio - Serverless Image Compression Tool. An alternative to TinyPng / other image compression tools. 

3. Mumble - https://app.trymumble.com/ - Text and voice chat for passionate communities. An alternative to Slack. 

4. DCasso - https://dcasso.app - A decentralized drawing app. Ready, Set, Sketch!A fun drawing app. 

5. Dappity - https://dappity.app/ - All your Dapps in one place

6. Paras - https://paras.id/ - Your Decentralized Personal Website. An alternative to about.me. 

7. Note Riot - https://note.riot.ai - Easy to use note taking app. An alternative to Google Keep, Evernote. 

8. Sigle - https://app.sigle.io - Decentralized blogging platform. An alternative to Medium or any blogging platforms out there. 

9. Arcane Products - https://products.arcane.ac/ - Suite of office and dev tools. An alternative to GSuite in the making. 

10. Daily Habits - https://thedailyhabits.com/ - Your private habit tracker.
JavaScript - Seconds to HH:MM:SS
Tags: javascript
Published: 2019-12-31 10:35:19


Yesterday, while making a game where I wanted to show the time elapsed since the game started I put together this short helper:

```typescript
const SECONDS_PER_DAY = 86400;
const HOURS_PER_DAY = 24;

/**
 * Convert seconds to HH:MM:SS
 * If seconds exceeds 24 hours, hours will be greater than 24 (30:05:10)
 *
 * @param {number} seconds
 * @returns {string}
 */
const secondsToHms = (seconds: number): string => {
  const days = Math.floor(seconds / SECONDS_PER_DAY);
  const remainderSeconds = seconds % SECONDS_PER_DAY;
  const hms = new Date(remainderSeconds * 1000).toISOString().substring(11, 19);
  return hms.replace(/^(\d+)/, h => `${Number(h) + days * HOURS_PER_DAY}`.padStart(2, '0'));
};
```

**The above converts seconds `1234` to `00:20:34`.**
```javascript
  secondsToHms(1234); // '00:20:34'
```

The first version I wrote didn't handle the case of seconds being over 24 hours. 
Not really needed in the situation at hand but for the sake of completeness I opted to handle it, especially because [the various existing examples I've found](https://www.google.com/search?q=js+seconds+to+hh+mm+ss) don't deal with the day overflow and that's why I decided to share this.


**Interactive and tested at CodeSandbox**
https://codesandbox.io/embed/js-seconds-to-hhmmss-32zo4?fontsize=14&hidenavigation=1&module=%2Findex.ts&previewwindow=tests&theme=dark

{% codesandbox 32zo4 %}


**Hope it's useful to you. Cheers.**


PS: In case you prefer plain JavaScript...
```javascript
const SECONDS_PER_DAY = 86400;
const HOURS_PER_DAY = 24;

/**
 * Convert seconds to HH:MM:SS
 * If seconds exceeds 24 hours, hours will be greater than 24 (30:05:10)
 *
 * @param {number} seconds
 * @returns {string}
 */
const secondsToHms = seconds => {
  const days = Math.floor(seconds / SECONDS_PER_DAY);
  const remainderSeconds = seconds % SECONDS_PER_DAY;
  const hms = new Date(remainderSeconds * 1000).toISOString().substring(11, 19);
  return hms.replace(/^(\d+)/, h => `${Number(h) + days * HOURS_PER_DAY}`.padStart(2, '0'));
};
```