teleren/devto huggingface dataset:
How To Read A Computer Science Book
Tags: productivity, computerscience
Published: 2019-12-19 04:49:49

New Year's is coming up and I kind of wanted to give a couple basic tips that I learned before we head into the next decade.

* **Don't read it like a novel** — One of the mistakes I made trying to read computer science books is that I tended to read it like a storybook. When we're reading in "storybook" mode, we're in a cognitively *passive* mode. That is, we're not engaging with the content, just absorbing it as we go, forgetting the minute details that may be really important for understanding. The key thing to do here is to start reading *actively*, which leads me to my next bullet point.

* **Understand exactly what's going on** — Say you're reading a book about sorting algorithms and they're talking about merge sort. Instead of reading the description of merge sort (and doing any potential practice problems), try to work each example out in your head or, if you must, on paper. That way, you'll fully understand how the algorithm works and already have some exposure to using the algorithm, making practice problems (and real-world problems) easier to solve.

* **Take notes** — Look, notes aren't easy for most of us, but taking notes is great for summarizing large amounts of information. If you're taking an online course, then this is an especially good idea. Don't just think, "Oh, I'm not in a classroom, so I can just watch the video." You're going to forget everything once the unit is over. Writing down the important stuff helps our memory.

* **Don't try to do every practice problem** — This might seem counter-intuitive at first. However, trying to do everything is time-consuming. If you're able to do every problem in a timely manner, great! That's the optimal scenario. But let's face it, not every one of us is going to be brilliant right off the bat. Some topics are hard, and applying the concepts can be difficult. Additionally, sometimes you just don't want to do all or even a majority of the exercises because it feels like so much work. Relax. You don't have to be the next Albert Einstein. Just do as much as you can. Any amount is worth something.

* **ALWAYS challenge yourself** — Doing easy problems is fine. Those types of problems can help reinforce certain concepts or skills. However, don't just glance at a problem and say "that's too easy." If it is, why not solve it? I used to do this sometimes out of laziness and sometimes to make myself feel better. If a problem is *hard*, however, don't just avoid it. Even if you have an instinctual feeling to avoid it, remember: you're not a genius, and you'll never become a better computer scientist/programmer/mathematician/whatever if you don't try. I know it sounds cliché, but it's worth saying again.

All of the stuff above are habits that **I** used to have. In fact, to a certain extent, I still do these things. However, one of my goals for next year (and for the rest of my computer science career) is to make myself less vulnerable to these behaviours and instill more productive habits.

How do you read technical books? Leave a comment below. Happy Holidays! 🎁
How to CRUD an Array in JavaScript
Tags: javascript
Published: 2019-12-19 04:47:58

_Read the original article [here](https://rahmanfadhil.com/javascript-array-crud/)_

There are two ways to create, update, and delete items to an array in JavaScript. The first approach is by using the destructive methods which will change the object itself.

The second approach is by using the [immutable](https://en.wikipedia.org/wiki/Immutable_object) methods, which will return a new array that contains a new updated value. This could be very useful if your using [Redux](https://redux.js.org) or any other state management library.

Let's say we have an array contains a some items like below.

```js
const list = ["Item 1", "Item 2", "Item 3"]
```

## Create item

The **mutable** way:

```js
const newItem = "Item 4"

list.push(newItem)
```

The **immutable** way:

```js
const newItem = "Item 4"

const newList = list.concat([newItem])
```

Result:

```
[
  "Item 1",
  "Item 2",
  "Item 3",
  "Item 4"
]
```

## Update item

The **mutable** way:

```js
const itemIndex = 1
const newItem = "Item 2 (updated)"

list[itemIndex] = newItem
```

The **immutable** way:

```js
const itemIndex = 1
const newItem = "Item 2 (updated)"

const newList = list.map((item, index) => {
  return index === itemIndex ? newItem : item
})
```

Result:

```
[
  "Item 1",
  "Item 2 (updated)",
  "Item 3"
]
```

## Delete item

The **mutable** way:

```js
const itemIndex = 1

list.splice(itemIndex, 1)
```

The **immutable** way:

```js
const itemIndex = 1

const newList = list.filter((item, index) => {
  return index !== itemIndex
})
```

Result:

```
[
  "Item 1",
  "Item 3"
]
```
I need to know what path should I take to create a app that displays music notes of songs on choosing a song from list.
Tags: react, webdev, beginners, help
Published: 2019-12-19 04:31:26

I need a help with a personal project I'm trying to make .

I want to create an app , that will be running on phone and if it runs on desktop it's a bonus .

It will be a simple app that will show a list of songs on the home page

Upon clicking on a song , it shows the musical notes to play that song.

A simple text format notes. Nothing fancy. [As shown in the sample pics]



I have scraped the links to all the song notes and stored it as a json file. And that's it. Idk what next.



What technologies should I be using now? Past few days I have been extensively watching full stack videos . Mainly backend . I have basic knowledge of front end . I completed web design and js course from freecodecamp just recently. Now I'm learning react. I have no experience in backend whatsoever other than watching videos . So what would be the best way to proceed for building such an app? React native ? Mern Stack ? I'm completely confused . Idk whether backend is required at all.

This is a similar app to what I would want to do.

![List of songs](https://thepracticaldev.s3.amazonaws.com/i/e3wliu9826xuxcrq7cnw.png)

![Notes of songs](https://thepracticaldev.s3.amazonaws.com/i/dedhctvqkwa4rypvvysk.png)

So I have the json file with all the links to the "song notes" pages. But I don't know how to proceed. What kind of app should I be building? What all frameworks I would need? Can someone please show me a path

Maybe link to a video that builds such an app/web app?

Thank you all in advance. Been on this for many days , but without a proper path.
Excited to read your replies.
Getting initial notification in React Native
Tags: reactnative, objc
Published: 2019-12-19 04:25:49

---
title: Getting initial notification in React Native
published: true
description: 
tags: react native, objc
---

Getting initial notification in React Native seems not to work RN `0.59.x`.

https://github.com/react-native-community/react-native-push-notification-ios/issues/24

I'll try to find a solution. current possible solutions in my mind are:

# 1. Save userData in `didReceiveRemoteNotification`

```objc
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];

  // save userData to somewhere
}
```

# 2. Build a native module

Accessing userData via Native modules. It seems that we can access to userData after app launch.

https://github.com/react-native-community/react-native-push-notification-ios/blob/master/js/index.js#L346

https://github.com/react-native-community/react-native-push-notification-ios/blob/3cf608c83dac011634429fbebd7d55a7c6ae8c13/ios/RNCPushNotificationIOS.m#L407

UIApplicationLaunchOptionsRemoteNotificationKey not getting userinfo - https://stackoverflow.com/questions/30297594/uiapplicationlaunchoptionsremotenotificationkey-not-getting-userinfo
JSONsty - Creating a Secure Cloud Storage Solution for JSON
Tags: security, python, mongodb, webdev
Published: 2019-12-19 04:14:53

One day I was sitting at work and my friend contacted me on Discord. He wanted an easy solution to host JSON data remotely for a Raspberry Pi project. He had used my service [psty.io](https://psty.io) for a while and brought the idea to implement it into the service myself. I thought it was a great idea and hopped on it that night.

I decided I would write it in Python with Flask and using mongoDB as the main database. I wanted this to be secure, fast, and able to handle a lot of connections at once. I have been able to do so with this stack in the past and I was most comfortable with it so I gave it a shot. 

The first part I wrote was the RESTful API. I knew it would be easiest with Flask since it's just JSON and that means no need to write a web front-end. This was done in a night and I had a very basic API for users. It simply allowed you to create JSON stores, edit them, delete them, and grab them. By the time this was done I showed a couple friends and they were concerned with the fact I was able to see all the data on the database. I wanted to look for a solution.

After that I decided it would be better to offer a panel to users so I decided I would just write an entire web front-end. These are very simple Jinja2 templated, server side rendered pages. I plan on making a React app once I get better with Javascript but since the main idea of this is the API I am not too worried since the frontend gets the job done. You can edit Account Settings, create stores, edit stores, and delete stores. The API is extremely simple and you are given an API key immediately when you signup!

I have been working with another developer the past couple weeks on an encryption/steganography technology called [Pixcryption](https://github.com/Pixcryption). We were working on adding the AES layer of security to it and I brought up JSONsty to him. He has been wanting to learn as much as possible so he took it as an opportunity to study Flask, MongoDB, Unit Testing, and more about AES. 

We spent the past couple days working together on securing the system with AES OCB and Base64. Now it encrypts all the JSON data in the database and decrypts when the user requests their store. Each user has an object on the db and that controls which stores belong to them through ObjectIds which map a relationship between the collections.

Now JSONsty is ready for the public to start using in my eyes and I plan to make it even better over time. Psty.io has been doing well and I want to build it out into a family of software that provides tools for developers to make sharing and developing easier. Below you can find the source to JSONsty and you can also signup now [here!](https://json.psty.io) We also would love any contributors who would like to harden the security or just make it a better service. 

{% github m4cs/jsonsty %}
Need help setting up Java 13 with JavaFX
Tags: help, java, b4x, b4j
Published: 2019-12-19 04:14:25

Over on the B4J site they encourage the use of [Java 11](https://www.b4x.com/android/forum/threads/javafx-13.112287/#post-700125) and have a zip file containing a full Java 11 with JavaFX zip available.

I'd like to use Java 13. I've tried to create a Java 13 folder structure like their Java 11 one, with javafx in the root, viz
```
>dir jdk-11.0.1 /b
bin
conf
include
javafx
jmods
legal
lib
release
```
However in their javafx folder there's a javafx-jmods folder with some *.jmod files in it, viz
```
javafx.base.jmod
javafx.controls.jmod
javafx.fxml.jmod
javafx.graphics.jmod
javafx.media.jmod
javafx.swing.jmod
javafx.web.jmod
```
My downloaded-from-Oracle javafx didn't include a javafx-jmods folder and no *.jmod files. How are these generated?

All clues gratefully received.

*LATER*

jmods are [here](https://gluonhq.com/products/javafx/). Didn't see them there last time.

*LATER AGAIN*

Okay, over that hurdle. Still running. Still getting the following out of B4J:
```
B4J Version: 8.00
Java Version: 8
Parsing code.    (0.00s)
Building folders structure.    (0.01s)
Compiling code.    (0.05s)
Compiling layouts code.    (0.00s)
Organizing libraries.    (0.00s)
Compiling generated Java code.    Error
src\b4j\example\main.java:7: error: package javafx.application does not exist
public class main extends javafx.application.Application{
                                            ^
1 error
only showing the first 1 errors, of 6 total; use -Xmaxerrs if you would like to see more

javac 13.0.1
```
*LATER SAME DAY*

I've written into the forum for B4J the following
>@Erel where do I specify the -Xmaxerrs setting? I want to see more errors. I'm referring to the window that says, "showing the first 1 errors, of 6 total; use -Xmaxerrs if you would like to see more"

>Also, if I wanted to emit some java into the output stream, is there a mechanism to do so? Currently I'm wondering if I need to embed an explicit import statement into Objects\src\b4j\example\main.java

>I've duplicated the directory structure as much as possible between v11 and v13. Still nothing.

I've put a zip of the Java 13 + JavaFX folder into [my Dropbox](https://www.dropbox.com/s/qqzgkls55sxbqzg/jdk-13.0.1.zip?dl=1), just in case anyone wants to compare it with a Java 11 install and tell me what I missed.

__FINALLY__

B4J does not support Java 13. It only supports Java 11. Java 11 is a Long-Term Support version. Java 13 isn't. You can use Java 13 but not with JavaFX. If you want JavaFX, the only route is with Java 11.
How to create custom pipes in Angular
Tags: angular, javascript, node, vue
Published: 2019-12-19 03:48:39

While working with Angular, The situation occurs many times to change the format of the data we are trying to show in HTML template. There are some in-built pipes provided by angular itself like below:

1. DatePipe (for parsing Date objects)
2. UpperCasePipe (for uppercase-ing Strings)
3. LowerCasePipe (for lowercase-ing Strings)
4. CurrencyPipe (for formatting currencies)
5. AsyncPipe (for unwrapping asynchronous values, such as Observables!)

Apart from the in-built pipes, Custom pipes can also be created to achieve any specific requirement.

Here I am going to explain one example to show you how a custom pipe can be created. Here we will use the created pipe to reverse any number.

Let's Get Started.


Step 1: Create pipe(a file named reverse-string.pipe.ts)

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'reverseString'})
export class ReverseString implements PipeTransform {
  transform(value: string): string {
    let newStr: string = "";
    for (var i = value.length - 1; i >= 0; i--) {
      newStr += value.charAt(i);
    }
    return newStr;
  }
}



Step 2: Add this pipe in app.module.ts file.

import { ReverseStr } from './reverse-string.pipe.ts';
.......
......

@NgModule({
  declarations: [
    ........,
    ReverseStr,
    .......
  ],
......
......
})


Step 3: Use the pipe in template 

<span>item.first_name | ReverseString</span>


Pipe with Multi arguments

In any case we want to append/ or add deduct some value from the available data then multiple arguments can also be passed using below way:




 myData | date:'fullDate':'arg1':'arg2' 


export class DatePipe implements PipeTransform {    
  transform(value:any, arg1:any, arg2:any):any {
        ...
}


Interested to find more blogs on Angular, Read at https://jsonworld.com/blog
Should I use plain Bootstrap or React-bootstrap? 
Tags: webdev, react, beginners, help
Published: 2019-12-19 03:36:43

---
title: Should I use plain Bootstrap or React-bootstrap? 
published: true
description: bootstrap in react application 
tags: webdev, react, beginners, help
---
Hi all, 
I usually work with Angular but got a new project that needs to be done on React and Bootstrap. So, what should I use? Plain Bootstrap or React-bootstrap? Plain one doesn't cause a problem in Angular, I was wondering if it is the same case in React?
5 JavaScript OOP concepts you should know
Published: 2019-12-19 02:16:53

A few weeks ago, I started [this series](https://dev.to/jasterix/5-javascript-core-concepts-you-should-understand-210h) on JavaScripts concepts new developers should try to understand. 

This post will focus on  OOP concepts that you might come across while learning about classes and object oriented programming. Instead of summarizing these concepts from  various sources, I'll try to explain them in plain English and provide a source for learning more.

OOP Concepts to understand

1. Hoisting- a process where JavaScript allocates space in memory for your variables. Hoisting doesn't mean that your variables get moved to the top of your code. Instead they declared as undefined
2. Prototype- a property that JavaScript function has access to. It points to an object
3. This- a keyword that denotes the execution context or scope of a function or object

Of course, there's more to understand about these 3 concepts, especially when it comes to this `this`.
Adding VueJS Loading State Indicators (Promises)
Tags: vue, javascript
Published: 2019-12-19 01:57:45

## Add Loading State Indicators to VueJS
### [Read full post here](https://scotch.io/@DominusVilicus/adding-asynchronous-loading-indicator-for-vuejs)

While trying to figure out a good way to manage loading state for [Promatia's](https://promatia.com) [sign up form](https://promatia.com/sign-up) and other asynchronous pages & components. I stumbled upon a neat way of managing asynchronous loading state.

**Web apps often require loading state (things like loading spinners)** to let a user know that an operation is taking place. These operations often take time, so it's best to let the user know something is loading, which helps improve UX and prevents form resubmissions and etc.

I created a neat module that can help with managing asynchronous loading state (promises) in a VueJS app

```js
import { ref, computed } from '@vue/composition-api' // using vue 3 syntax

export default function () {
    let loading = ref(false) //initial value of false

    return computed({
        get () {
            return loading.value // return the loading value
        },
        async set (value) {
            loading.value = true //update loading ref value to be true
            await value //wait for promise completion
            loading.value = false //update loading ref back to false
        }
    })
}
```

The way it's used:

```html
<button @click="promise = asyncFunction()">Click<button/>
<overlayLoader v-if="promise"/>
```
```js
import promiser from '@/utils/promiser' //the helper we've just created 

export default {
    setup(){
        return {
            promise: promiser() //create and expose an instance of the computed variable
        }
    }
}
```
`<overlayLoader/>` is a component which displays a sync loader animation on top of a form, which captures clicks and prevents further actions

When `<button>` is clicked, it triggers the `set()` function inside the computed variable, which updates the loading state.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zopmtjqntc1376h5b0f8.png)
After clicking
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vy5jrpb6p5xqrtg77nmd.png)
A Trick to Make your Telegram Bot Private
Tags: telegram, ruby
Published: 2019-12-19 01:55:03

---
title: A Trick to Make your Telegram Bot Private
published: true
description: Ensure only certain people can use your Telegram bot
tags: telegram, ruby
---

Recently, I learned a trick to make my Telegram bot private to certain users.

I tried not to create the whole CRUD thingy for the membership and after Googling I found out about one of the API provided.

https://core.telegram.org/bots/api#getchatmember

This would allow us to get info of a user with a given `chat_id`. It can be a channel or a group.

Basically your membership for your bot will be based on the group of your bot and the allowed users are in. So, both of them need to be in the same group/channel.

The code would look like the screenshot.

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

There're a few things to note:

**We need to get the channel and id of the group**

For group:

Invite https://t.me/RawDataBot and on the first entry, it'll output some JSON. You can get the group's ID from `message.chat.id`.

It should look like `-10012345678`. Remove the bot after that. But if you don't trust the bot, you probably need to cook up some new code to get the group ID.

For channel:

Channel is a little bit different, you can use one of the methods mentioned here:

https://stackoverflow.com/questions/33858927/how-to-obtain-the-chat-id-of-a-private-telegram-channel/56546442#56546442

**Output**

So, what's the output can we expect? Well for Ruby, we're expecting hash from the output and `var["result"]["status"]` will give you the status of the user.

It can be many things, but if it's `left` then the user is not a member of the group and that's what we want to know.

**Add the bot to a group/channel**

This also means you need to add the bot that's executing the code to be in the same group as those users that you want to give access to.

So, any users who are in the same group/channel will be allowed to chat with the bot based on the previous output.

Again, a channel is a little bit different, you need to add your bot as the admin, compared to a group that can be added as a normal user.

**Exception**

Another note, the code will raise an exception if the given `chat_id` doesn't exist.

As a summary,  with this trick, you don't have to build the whole CRUD and can reuse the group/channel that you already have (assuming you have one).

That's it, folks, thanks for reading
The Writing Phoenix
Tags: coding, devlog, javascript
Published: 2019-12-19 17:38:24

---
title: The Writing Phoenix
published: true
date: 2019-12-19 00:08:16 UTC
tags: coding, devlog , javascript
canonical_url: https://triptych.writeas.com/the-writing-phoenix?pk_campaign=rss-feed
---

# The Writing Phoenix

![](https://i.snap.as/QSvon32.png)([https://commons.wikimedia.org/wiki/File:Fenix\_highresulution.svg](https://commons.wikimedia.org/wiki/File:Fenix_highresulution.svg))

I've often kickstarted my writing and creative endeavors, with this odd idea that I'll somehow fall into a writing pattern and suddenly life will make sense. Instead I seem to constantly be remaking myself creatively, and rediscovering old things I've learned while adding new things all the time.

I've always started out with the best of intentions and seemingly run out of juice after a few posts. I used to think this was basically some sort of failure on my part – that I was not dedicated enough, or that I let other things distract me.

Instead I've learned that creativity comes in [seasons](https://possibilitychange.com/the-different-seasons-of-creativity-finding-and-following-your-patterns/), and that instead of trying to force things, you should allow for periods of resting, re-evaluating, and growing.

So, what does this all mean?

It means I'm starting again. Writing as I work a new interactive fiction engine I'm calling SAGA. Writing on my outstanding fantasy novels. Writing for creating fun things in HTML, CSS, and JS ( and now WebAssembly!)

One thing that is different this time around is I've discovered a great Markdown writing tool called StackEdit (see link below) which let's me create articles and preview them ( Why you not do this Write.as? )

Whether it's for games, web, or fiction, I will try to be more consistent this time around, especially as I learn new strategies to stay motivated.

* * *

I'm also learning to take time to rest, and time to recharge. I'm currently playing one of the most enjoyable games I've ever played:

![](https://i.snap.as/ZGTqYX7.jpg)

[Dragon Quest XI : Echoes of an Elusive Age](https://dragonquest.square-enix-games.com/xi/en-us/home/).I've never had so much fun playing a game before – it just hits all the right notes as an RPG with amazing visuals and compelling storyline.

So, let's see if I can get things done more often this time around.

And I want to shout out to StackEdit – which is just a joy to use.

> Written with [StackEdit](https://stackedit.io/).