teleren/devto huggingface dataset:
Debugging Web Pages on the Nokia 8110 with KaiOS
Tags: pwa
Published: 2019-04-12 11:06:43

---
title: Debugging Web Pages on the Nokia 8110 with KaiOS
tags: pwa
published: true
canonical_url: https://paul.kinlan.me/debugging-web-pages-on-the-nokia-8110-with-kaios/
---

We’ve been doing a lot of development on feature phones recently and it’s been hard, but fun. The hardest bit is that on KaiOS we found it impossible to debug web pages, especially on the hardware that we had (The Nokia 8110). The Nokia is a great device, it’s built with KaiOS which we know is based on something akin to Firefox 48, but it’s locked down, there is no traditional developer mode like you get on other Android devices, which means you can connect Firefox’s WebIDE.

Through a combination of reading a couple of blogs, and knowing a bit about `adb` I worked out how to do it. Note, others might have been able to do it, but it’s not documented in one place cleanly.

![](https://paul.kinlan.me/images/2019-03-21-debugging-web-pages-on-the-nokia-8110-with-kaios.jpeg)

(Image above shows the DevTools and also the output of the screenshot tool)

Here are the steps:

1. Connect a USB cable. Ensure you have `adb` installed on your main machine.
2. Download a copy of [Firefox 48](https://archive.mozilla.org/pub/firefox/releases/42.0b2/) (this is the only one I could get to work)
3. Enable ‘Developer Mode’ by entering `*#*#33284#*#*` from your phone (note, don’t use the dialer). You will see a little ‘bug’ icon on the top of the screen. [[Source](https://groups.google.com/forum/#!topic/bananahackers/MIpcrSXTRBk)]
4. Attach your USB cable
5. On your development machine run the following commands
  1. `adb start-server`
  2. `adb devices` to check your phone is connected.
  3. `adb forward tcp:6000 localfilesystem:/data/local/debugger-socket` this sets up a channel from your machine to a socket on the phone. This is what Web IDE uses.
6. Start `Web IDE` by opening Firefox, go to Tools and then Web IDE
7. Web IDE will be open, click ‘Remote Runtime’ and click the open button that has ‘localhost:6000’ in. (this is the tcp forwarding port).
8. Open a page on the phone, and you should see it on the left.Voila.
Facebook stored hundreds of millions of passwords in plaintext
Tags: news, discuss, security, facebook
Published: 2019-03-21 21:46:46

> Krebs said as many as 600 million users could be affected — about one-fifth of the company’s 2.7 billion users, but Facebook has yet to confirm the figure.

## 👉 [Full story on TechCrunch](https://techcrunch.com/2019/03/21/facebook-plaintext-passwords/)

Mind boggling
Is typescript "static typing" features going to be imported in the js language overtime?
Tags: discuss, javascript, typescript
Published: 2019-03-21 21:14:28

---
title: Is typescript "static typing" features going to be imported in the js language overtime?
published: true
description: 
tags: discuss, javascript, typescript
---
##The story
I was discussing with a friend on the rise and decline of jQuery, Q and other libraries that were specifically build to solve a specific problem or feature missing in the javascript language.

This has made me think about the current libraries that drive today's websites and application and TYPESCRIPT was the one that spark my interest.

##What is Typescript
TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces.

##My thought
Typescript offer a specific feature, static typing, that when was first announced raised quite a few eyebrows. 

If you would have asked me the following question on any other feature, I would have immediately thought that sooner or later a feature (if useful) will eventually be included in the actual Javascript language, but static type is all another story. It is what makes Javascript "different".

##The question
Do you guys think, that sooner or later ALL feature offered by typescript (even the static type) will be imported int he Javascript language? Even if it will mean for the language to be forked into two different mainstream?
Use Cases and Organizational Structure
Tags: agile
Published: 2019-03-21 21:01:02

Here's a simplified use case diagram of an online flight booking system:
![Online Flight Booking System](https://thepracticaldev.s3.amazonaws.com/i/gz3j1ob8tcftqwivu9gc.png)

As you can see, the diagram shows the goals that users have: an _end customer_ wants to _book a flight_. The diagram does not show the steps to get to the goal, like searching for a flight.

Having such a high level use case diagram has benefits:
* It provides a big picture of the system functionality
* It helps developers and stakeholders to agree on the scope
* It can be used for long term, coarse grained planning

But use cases can also help with designing the structure of your product development organization.
An agile team should be able to deliver valuable software, as independent of other teams as possible. A use case is such a unit of value. 

The use case _Book flight_ is valuable on its own. It directly ties to the users' need to get from A to B.  That's why it is a selling point for the software.

A typical application doesn't have more than 10 to 20 use cases. When agile teams are responsible for whole use cases that cut through the whole tech stack, the need for communicating with other teams is limited. That enables the teams to deliver value early and continuously.

But other factors may force a team to limit its responsibilities to parts of a use case. For example, the development capacity of a team may not be enough to develop a whole use case. Or the team doesn't have the necessary knowledge. Quality attributes may play a role as well.

Each organization needs to define its own criteria for distributing the work between the teams. And try it out in practice, to see if it works.
Contentz es Omakase
Tags: contentz, spanish, omakase, rails
Published: 2019-03-21 20:01:56

---
title: Contentz es Omakase
description: Contentz toma decisiones por uno, a cambio nos ofrece un sitio optimizado para un mejor rendimiento y lectura.
published: true
tags: Contentz, Spanish, Omakase, Rails
canonical_url: https://sergiodxa.com/articles/contentz-es-omakase
---

_Publicado originalmente en https://sdx.im/articles/contentz-es-omakase_

**Omakase** es un término que leí por primera vez en la doctrina de Rails, es una palabra japonesa que significa "_Te dejo la decisión a vos_", usada normalmente en restaurantes de sushi donde el comensal deja que el chef eliga que comida preparar a su gusto y lo que crea es mejor.

Rails se considera omakase porque al usarlo el desarrollador deja la toma de (_muchas_) decisiones sobre que usar al framework en vez de tomarlas en cada proyecto que cree.

[Contentz](https://contentz.tech), [mi generador de sitios estáticos](https://sergiodxa.com/articles/presentando-contentz) es Omakase como Rails. Al usar Contentz uno acepta que lo importante es crear el contenido, eso que es único de tu sitio web o blog y deja que este tome las decisiones menos importantes.

¿Cómo se va a mostrar? ¿Con qué diseño? ¿Que optimizaciones se van a realizar al sitio? ¿Cómo creas páginas? ¿Qué tal artículos? ¿Archivos estáticos? Todo estas decisiones las toma Contentz por uno.

Esto permite concentrarte en lo más importante, escribir el contenido, artículos o páginas fijas, que conforman tu sitio.

## ¿Pero qué pasa si quiero personalizar mi sitio?

Todo en la vida se trata de tradeoffs, Contentz te facilita escribir y tener un sitio bueno a cambio de no tomar decisiones sobre como se ve el sitio o como funcionan algunas cosas. Existe opciones muy buenas para tener más personalización como Gatsby, Next.js, Jekyll, Hugo, etc. y aunque Contentz capaz en el futuro tenga la opción de soportar temas para personalizar el diseño lo idea sería siempre dejarlo tal cual.

¿Por qué es mejor dejarlo tal cual? En mi experiencia, y habiendo visto a otras personas crear sus propios sitios o blogs desde cero, uno pasa más tiempo creando el sitio y personalizando el diseño y al final cuando está todo listo para empezar a escribir ya la inspiración o las ganas se fueron. Por esto mismo servicios como Medium son tan populares, te fuerzan a solo escribir sin pensar en otra cosa.

Contentz te ofrece esto mismo, pero pudiéndo alojar el sitio en cualquier servidor usando un dominio propio.

## ¿Cómo empezar con Contentz?

Instala Contentz desde npm usando

```bash
yarn add contentz
```

Luego crea tu primer artículo usando

```bash
contentz write hola-mundo.mdx
```

Cambia `published` a `true` al principio del artículo, ahora genera la imagen para redes sociaes (Open Graph) usando

```bash
contentz social articles/hola-mundo.mdx
```

Por último construye tu sitio usando

```bash
contentz build
```

Tu sitio va a generarse en la carpeta `public`, sube eso a un servidor, por ejemplo Netlify o GitHub Pages, y vas a tener tu sitio listo y funcionando. Para configurar más cosas puedes [leer la documentación](https://contentz.tech/docs/).
Introduction to Data Structures (Queues)
Tags: programming, tutorial, c, beginners
Published: 2019-03-21 19:21:46

---
title: Introduction to Data Structures (Queues)
published: true
description: Data structures are a fundamental piece in computer science and programming
tags: programming, tutorial, c, beginners
---

# Introduction to data structures (Queues)

One of the most overlooked concepts within computer science is data structures. Have a good understanding of its concepts, design and application can transform you from a simple coder to a more capable and resourceful professional.

One can briefly summarize a generic data structure as a mean to store data in memory as an organized fashion. And for that, there are several types of structures, each one with its specific use case and scenario.

## Queues

![Queue of people!](http://www.dailyexcelsior.com/wp-content/uploads/2014/05/page1-19.jpg)

Imagine you are excited to ride in this new attraction at the park. You arrive, there are a hundred people waiting in line for the same ride.

Queues can be very useful when you want to process data in the order. **First in, First out** or (FIFO). Every data element must be inserted at the end and removed from the top.


```c
struct element {
    int data;
    struct element *next;
};

typedef struct {
    struct element *start;
    struct element *end;
}queue;


queue* q;


void newqueue(queue* q){
    q->start = NULL;
    q->end = NULL;
}

/// Add element to the queue. O(1)
void enqueue(struct element* e){
    
    if(q->start == NULL){
        q->start = e;
        q->end = e;
    } else {
        struct element* aux;
        q->end->next = e;
        q->end = e;
        e->next = NULL;
    }
}

/// Remove element from the queue O(1)
void dequeue(struct element* e){
    e = q->start;
    q->start = e->next;
}

/// Get size of the queue. O(n)
int size(){
    int s = 0;
    struct element* curr;
    curr=q->start;
    while(curr->next != NULL){
        curr = curr->next;
        s++;
    }
    return ++s;
}

/// Peek at the nth element of the queue. O(n)
void peek(int n, struct element* e){
    int s = 0;
    struct element* curr;
    curr=q->start;
    e = NULL;
    while(curr->next != NULL){
        if (n==s) e = curr;

        curr = curr->next;
        s++;
    }
}

```

The form presented above is the most standard implementation. You can implement queues only shifting elements on a dynamic array, but this would cause the queue/enqueue operations to drop their efficiency to O(n).

## Examples where queues can be useful

Now that you understand a queue and it's implementation. Let's discuss where to implement them.

The most common case for a queue implementation is inside the producer/consumer scenario. The producer will generate data to be consumed and it can be faster than the consumer. For that reason, a queue at the consumer will organize the data income allowing it to be consumed in order of oldest to newest data.
VirtualBox: How To Access Host Port From Guest
Tags: virtualbox
Published: 2019-03-21 17:03:14

---
title: VirtualBox: How To Access Host Port From Guest
published: true
description: A guide to setting up host to guest port-forwarding in virtualbox
tags: virtualbox
---

> originally posted on [my site](https://ahmedmusallam.com/blog/virtualbox-how-to-access-host-port-from-guest/)

I'm always working on a Mac machine, but sometimes I need to debug an issue that only affects windows machines and more specifically IE. For that, I usually use [VirtualBox](https://www.virtualbox.org/) with a [free VM from Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) for debugging.

I never remember what to do to access a server running on my Mac from my Windows VM. So I'm writing this, for me. And I guess for you too!


## Port Forwarding
- Shutdown your VM
- Open `settings` for the VM and select `network`
- make Sure the `Attached to` dropdown is set to `NAT`
- expand `Advanced`
- Click `Port Forwarding`
- Add a new rule. In my case, I want to forward port `4502` on my guest to port `4502` on my host. leave the IP fields empty


![settings](https://thepracticaldev.s3.amazonaws.com/i/owp4bvxh59y65aawv01k.png)

![settings](https://thepracticaldev.s3.amazonaws.com/i/avi0l5k4agp77lpbkqjx.png)

![settings](https://thepracticaldev.s3.amazonaws.com/i/sjulqsy378kutd3ti52y.png)

## Finding Your Host Local IP
Now you need to find the host (Mac) local IP that is assigned to you by your router, this typically starts with `192`

you can find this in MacOs by following this [SO answer](https://apple.stackexchange.com/a/212207/255822) point **#3**

basically run the one of the following commands to get your local IP:

> - `ipconfig getifaddr en0` if connected via a wireless connection.
> - `ipconfig getifaddr en1` if connected via ethernet.
> - `ipconfig getifaddr en3` if connected via a Thunderbolt-to-ethernet adaptor.

## Accessing Server Running on Your Host From Your Guest

now that you have the IP, you can use it to access the forwarded port from your guest VM.

In my case, the IP of the host turned out to be `192.168.10.20` so, in my windows VM I can access the URL: `http://192.168.10.20:4502`!
How I managed to control my insomnia
Tags: code, sleep, insomnia
Published: 2019-03-21 18:49:44

---
title: How I managed to control my insomnia
published: true
description: I have had trouble sleeping for a while now, but i have found the solution to that and I'm going to share with you now.
tags: code, sleep, insomnia
---

I have battled with insomnia for a while now and I have had trouble getting some sleep. In the morning I would wake up tired and that would mess up my day.

I searched on the internet and surprisingly this is a common problem that affects developers. After doing extensive digging, I found out some of the issues that were contributing to the insomnia.

1. **Blue Light** - It has been researched by many experts (checkout this [Harvad article](https://www.health.harvard.edu/staying-healthy/blue-light-has-a-dark-side)) that blue light is a major culprit in causing lack of sleep. For me the major source of blue light was my laptop since I do most of my coding & twitter stuff in it.
2. **Fear of not getting things done** - I am a student and on the side I do freelance projects. After school I prepare my supper and get ready to dive into the next project or finish one that I would have started earlier. So while doing that I would build a mental graph of all the context that accumulated during that programming session and my fear would be that I would lose all that info once I go to sleep. So I would carry on.
3. **Afraid of the dark** - It's quite embarrassing for me to say this but I had some fear of the dark and would try to sleep with the lights on. I suspect this was a huge contributor to my failure to sleep early.

So It went on like that for a long time until one day I was in the bus and listening to [@mijustin](https://twitter.com/mijustin)'s podcast [saas.transistor.fm](https://saas.transistor.fm/episodes/how-to-grow-your-audience) when I heard him suggest the [sleep with me podcast](https://www.sleepwithmepodcast.com/). I tried it for a night and I fell asleep so easily that I was even surprised myself.

I started doing more research on what causes lack of sleep because prior to my experience with [sleep with me podcast](https://www.sleepwithmepodcast.com/), I thought I had some incurable condition. I found out that writing your thoughts down before you sleep can help reduce the mental load and can free your mind to rest whilst you sleep. So below is a tweet summarizing what has helped me get to sleep earlier and longer.

![A tweet about how I solved my insomnia problem](https://thepracticaldev.s3.amazonaws.com/i/c1me1c7oa4zldv4xm5sb.JPG)

I hope this article will help more people who could be facing the same problem. A good night's sleep is a step towards having a great day.

Peace ✌️
Facebook's plain password storage - how was this possible?
Tags: facebook, password, security
Published: 2019-03-21 18:48:41

---
title: Facebook's plain password storage - how was this possible?
published: true
description: 
tags: facebook, password, security
---

"Facebook admits it stored 'hundreds of millions' of account passwords in plaintext" - [says the article on Techcrunch](https://techcrunch.com/2019/03/21/facebook-plaintext-passwords/). But how could be this possible, when even a junior developer knows that you have to encrypt the passwords in your database?

I have two ideas, but maybe there could be many more possible cases.

1) Facebook stored the passwords encrypted, but used an algorithm that can be decrypted.

2) When a user clicked on login (or possibly during the registration), before checking the password with the database, they sent it to an other service in plain, that stored it.

What do you think? This issue is too huge to be a simple mistake and must have happened for a reason.
Vue coincap api
Tags: vue
Published: 2019-03-21 18:23:03

---
title: Vue coincap api
published: true
description: Vue coincap api 
tags: vuejs
---

Websocket support
![Websocket](https://thepracticaldev.s3.amazonaws.com/i/jdkdt65wnqtpz0c86phh.gif)

[WebSocket Support](https://docs.coincap.io/#9d1f0874-aa46-420c-9091-8bf9859c0743)

[Demo Site](https://alicannklc.github.io/Vuejs-coincap-api/)

[Basic app repo](https://github.com/Alicannklc/Vuejs-coincap-api)
How to use Firebase?
Tags: firebase, help
Published: 2019-03-21 16:28:26

---
title: How to use Firebase?
published: true
description: I don't understand how to use Firebase is it just a database layer?
tags: firebase, help
---

I have been reading about Firebase and watching a few "getting started" videos but I still don't get it.

On the videos I see I frequently find things like "how to connect firebase with [Vue|Angular|React]" but then I get with the doubt does firebase is just the database layer or is also the backend layer? 

For example: 

I have an ecommerce site and the user want's to purchase a product. On Vue I'll do all the frontend stuff.
On Net Core I'll do all the backend stuff like checking that the product is in the inventory.

If I add Firebase then the architecture will become something like this?

1. Vue connects to Firebase to retrieve the products.
2. Vue connects to Net Core which connects to Firebase to know the inventory if the inventory is not available then Net Core responds to Vue that the purchase can not be done.

In that case:

A. What is the point on connecting to Vue -> Firebase?
B. If you are connecting Vue -> Net Core -> Firebase? What exactly are you benefiting from using Firebase? I read that having a real time app is one of the selling points of firebase but I think that this will be lost by connecting to Net Core
C. Or is it suppose to be some hybrid architecture maybe having Vue -> Firebase (notifications database) and then having Vue -> Net Core -> Firebase (products database)?

Thanks for your help.
Laravue core - a Laravel package to build a beautiful dashboard
Tags: laravel, php, vue, showdev
Published: 2019-03-21 15:54:38

---
title: Laravue core - a Laravel package to build a beautiful dashboard
published: true
description: Laravel package to build a beautiful dashboard with VueJS
tags: laravel, php, vue, showdev
---
# Laravue core
## Introduction
Last month, I introduced our [Laravue](https://github.com/tuandm/laravue) project which is to build an administrative interface for Laravel using VueJS in [this post](https://dev.to/tuandm/laravel--vuejs--laravue---a-beautiful-dashboard-for-laravel-3h11), the development progress is quite good and we have some beta releases last weeks. However, Laravue is positioned as an enterprise dashboard solution which is not suitable to use for existing projects. Today I would like to introduce [Laravue core](https://github.com/tuandm/laravue-core) - a Laravel package which provides all core functionalities for Laravue and easy to integrate to any Laravel projects.

Screenshot
<p align="center">
  <img width="800" src="https://thepracticaldev.s3.amazonaws.com/i/u3e01ftewf6x5jcn9aw8.jpg">
</p>

* Demo: https://core.laravue.dev
* Source code: https://github.com/tuandm/laravue-core

## Getting started

Laravue-core provides a useful command that will set up everything, just get the `tuandm/laravue-core` package with composer, type `php artisan laravue:setup` then continue with the prompt - very easy.

![Laravue setup](https://core.laravue.dev/images/laravue.gif)

Please refer to the [installation guide](https://github.com/tuandm/laravue-core#installing) for more detail

## Next steps
* We will try to release new version for [Lumen](https://lumen.laravel.com/) - it is very attractive.
* Tests system is under development - we want to cover this library as much as possible
* Documentation will be released shortly - including components manual and development guidelines. 
* We will add useful Laravel packages such as spatie/laravel-permission or CRUD support.

**I hope this package will help you in building a beautiful admin UI for your Laravel projects. I greatly appreciate any feedback, comments, suggestions and even stars,... they absolutely make me and this library better. Thank you.**