teleren/devto huggingface dataset:
Keeping a diary on the Internet
Tags: javascript, webdev, react
Published: 2018-05-27 01:32:48

---
title: Keeping a diary on the Internet
published: true
description: Introduction of my new web application.
tags: #javascript, #webdev, #react
---

This is my first post to DEV.

# Who are you?
I am a fifteen-year-old boy in Japan loves computer programming.
I've made some apps before (you can find it at [here](https://cretgp.com/project.html)).
And I created a new web application to keep a diary on the Internet once again.

# CGP Diary

This application is available [here](https://cretgp.com/diary).
You can find the repository on GitHub, [here](https://github.com/CreativeGP/Diary).

This small web application is very convenient to keep a diary ON THE INTERNET.
And this stores the data on your PC only (browser's localStorage), so you can write anything that you want to write with security...


Keeping a diary is VERY IMPORTANT and meaningful action.
The memory on your brain changes by the second. The hings which your brain judges unnecessary will disappears after few seconds all too soon.
So people have written down.


## Local vs Online


What do you think about keeping a diary on the Internet?
To be honest, I prefer to keep it in the real world personally.
Let's discuss pros and cons of the two ways to keep a diary.
I wrote the pros only because cons of one way is always pros of the other way.


### Pros of writing the date on the Internet
One of the most biggest pros is its convenience.
Nowadays, many people wear a device can connect the Internet next their skin.
So, they can write it at ease whenever they want to do it.
And the imformation on the Internet never dies theoretically. As long as the data is stored on a server, you (anyone if you want) can read the diary forever.
Furthermore, it's easy to look back over the past by reading the diary.
Things in the real world rots anon and you may forget the places stored the stacked diaries.  


### Pros of writing the date in the real world
As I wrote above, the way uses the Internet is convenient because people can write a diary whenever they wanna do.
However, for those don't have portable devices or if you want to write a diary *whenever* in a true sense, this way is more suitable.
And the things in the real world have unlimitted imformation.
Shape of the letter, sort of the paper or the ink, and so on. 
It is very fun to examine those metadatas when you read the diary and look back over the past.


## Summary


Anyway, I recommend keeping a diary in either way.
And, if you decided to store it on the Internet, *you must use this application :)*

Thank you.
I've Completed my personal website now what?
Tags: beginners, webdev, javascript, design
Published: 2018-05-27 01:16:04

---
title: I've Completed my personal website now what?
published: true
description: My experience with web development 
tags: beginners, webdev, javascript, design
---
####BACKGROUND
I started looking at web development off and on for about a year. I am currently pursuing a degree in the field of computer science and have a background working with C++. 

In the beginning of teaching myself web development I was religiously checking out free code camps website, but I was not really focused on doing the front end projects. I remember I was more focused on the general algorithm section of it, somehow that just seemed easier. ‘Probably due to my work with a lower-level language’

Since then I have been in the rabbit whole of self teaching myself ‘web-development’. And with that I have been bouncing around different resources and topics never really focusing on one. There is so much out there!! 💀💀

With that I have found a great deal of resources to take advantage of.

####QUICK NOTE
There are so many resources here a full list if you want to check them out however I would say although it is good to use different resources sticking to the same topic is important!

####List
* [freecodecamp.org](freecodecamp.org)
* [beta.freecodecamp.org](beta.freecodecamp.org)
* [udacity.com](udacity.com) 
* [codeacademy.com](codeacademy.com) 
* [taniarascia.com](taniarascia.com)
* [egghead.io](egghead.io) 
* [hackerrank.com](hackerrank.com)
* [teamtreehouse.com](teamtreehouse.com) 
* [scrimba.com](scrimba.com)
* [frontendmasters.com](frontendmasters.com) 
* [Wesbos's Video Series](wesbos.com) 
* ….


####RANT 
Unfortunately I was jumping from free code camps algorithms, to code academies guided classes, to going on udacity to learn how to set up sites with pyhon. 
‘I’ve never worked with python prior to this?!’
And I didn’t have intent to pursue anything that took advantage of python afterward.

####RESOLUTION
I was stuck and my work was showing it. I decided to focus on front end for a while and I noticed how frustrating css is. However around this time css grid was gaining popularity and I decided to follow it. I ended up setting up my very first portfolio webpage and I am incredibly exited to share.

The has inspiration from various sources I have taken advantage of throughout my journey.(They’ll be listed in the code)

Feel free to check it out!!!

The way I wanted to set it up was that it would update anytime I were to post any public repository to GitHub, as I see GitHub as a major way to show off what you can do. Also it being responsive was incredibly important to me so I was able to take advantage of css grid and flexbox for that aspect of the project. I'm incredibly exited to know that any future work I share as public on my github will be displayed on my website!🎉🎉 Let me know your thoughts!!!

[dfimbres.github.io](https://dfimbres.github.io)
![website image](https://thepracticaldev.s3.amazonaws.com/i/5y24sg617lh46hsygmse.png)
Can you translate it back?
Tags: challenge, cipher
Published: 2018-05-26 00:50:17

---
title: Can you translate it back?
published: true
description: Are you up for it?
tags: challenge, cipher
canonical_url: https://math2001.github.io/post/challenge-1-translate-back/
---

I've got a little challenge for you.

    ib jb eikybfi eite hvim

Can you translate this encrypted text back to its original form?

If you do, send me an email at [math2001.contact@protonmail.com](mailto:math2001.contact@protonmail.com) explaining how you found it, and I'll add you to the glorious list of people who found the solution :smile: (see below).

### Rules

I guarantee you the original message:

- contains only lower case ASCII letters (`abcdefghijklmnopqrstuvwxyz`)
- has the same spaces as in the encrypted message. So you know that the first     word will have 2 letters, the second one as well, the third one 7, etc...
- can only translated to one string (the one I gave you)

### They found it!

> The glorious and amazing people who had a crack and found the secret message!

The list is [over here](https://math2001.github.io/post/challenge-1-translate-back#they-found-it).

### Solution

Hey hey. Smart one, looking at the right place, :smile:

I'll be posting the original message, as well as an explanation about how it worked on [my blog](https://math2001.github.io) next week, that is the **Friday 1 June 2018**.
Copy multiple elements to the clipboard with Windows 10
Tags: windows
Published: 2019-04-25 18:48:14

---
title: Copy multiple elements to the clipboard with Windows 10
published: true
tags: Windows
canonical_url: 
---

## Saving Time in Windows 10

Many people knowing the problem. You're working an one app, and you need some text fragments or pictures from another app. ![](https://saschamanns.de/img/markers/win-insider.png)Before Windows 10 you have to copy and paste them many times. But now you can copy multiple fragments and pictures in one time. But how to do it?

First of all you have have to register yourself as Microsoft Insider as explained[there](https://insider.windows.com/). Then you can follow the next steps.

## How to use the new Windows 10 Clipboard?

1. First click inside your Windows 10 on Start \> Settings \> System \> Clipboard and activate Save more Elements
2. Then start the app, where you want to copy anything.
3. Now mark a element and copy it with STRG+C or with the copy command.
4. Do this with all needed Fragments.
5. Now go to the app, where the stuff should be placed.
6. Use the Windows-Logo-Key+V.Now you see all copied content in a small box.Just click on one element, and it's pasted into your target app.

More on: [https://aka.ms/AA1a313](https://aka.ms/AA1a313)

Enjoy it...

[![Creative Commons License](https://i.creativecommons.org/l/by-sa/3.0/de/88x31.png)](https://creativecommons.org/licenses/by-sa/3.0/de/deed.en)

 This work by [Sascha Manns](https://saschamanns.de) is licensed under a [Attribution-ShareAlike 3.0 Germany License (CC BY-SA 3.0 DE)](https://creativecommons.org/licenses/by-sa/3.0/de/deed.en/).  
 Based on a work at [saschamanns.de](https://saschamanns.de).
React headstart for busy people
Tags: react, boilerplate, javascript, webdev
Published: 2018-05-26 23:04:33

---
title: React headstart for busy people
published: true
description: Making a try to build my own tools
tags: react, boilerplate, javascript, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0vuggobooe8ytf9xt516.jpg
---

Hi reader! If you're building the same React initial config over and over this may help.

## Motivation
It started as a way to simplify my development process but I figured out it's time to publish and document what I do so... Here we are!

## Content
This boilerplate has what I consider the minimun structure for any react application: Wepack, Babel, React, Styled Components and ESlint.
Github repo: [https://github.com/guidovizoso/react-boilerplate](https://github.com/guidovizoso/react-boilerplate)

## Variables

* Default project > **master branch**
* SASS project > **sass branch**
* PostCSS project > **postcss branch**

## How to use it

Installing:

    git clone https://github.com/guidovizoso/react-boilerplate.git
    npm install

Commands:

    npm run dev /* Runs webpack dev server and live reloading */
    npm run start /* Runs webpack in production mode with optimizations */

Done!

![Webpack dev server running](https://thepracticaldev.s3.amazonaws.com/i/mxg8ipierav31an755s9.png)

## Issues

If you're using this boilerplate and encounter any issue, please let me know!
[https://github.com/guidovizoso/react-boilerplate/isues](https://github.com/guidovizoso/react-boilerplate/isues)

## Edit

I've just added SASS and PostCSS support!
Few terminologies on QA industry
Tags: guidingtheory, notes, methodology, qa
Published: 2019-10-01 16:00:52

---
title: Few terminologies on QA industry
published: true
cover_image: https://esabook.files.wordpress.com/2018/05/qa-engineer.png
tags: Guiding theory,Notes,methodology,QA
canonical_url: https://esabook.wordpress.com/2018/05/26/few-terminologies-on-qa-industry/
---

- Waterfall SDL – IEEE
- CMMI (Capability Maturity Model Integration) – SEI
- Six Sigma
- Lean Software Developmen
- Incememtal model
- RUP (Rational Unified Process)
- Test-based development method
- Rapid Action Development model
- Methodologies:
  - agile
  - scrum
  - waterfall
  - spiral
  - extreme programming
  - pair programming
- Framework:
  - Unit
  - Acceptance
  - System
  - Integration
  - Regression
  - Automation & Performance
- Based on:
  - Time
  - Review specification
  - Design Test Plan
  - Testcases
  - Approve process
- For test case or test plan
- Models:
  - Waterfall
  - Traditional method
  - Staged
  - Incremental
  - V model
  - Prototyping
  - Evolutionary development
- ISO 9000
- Testings:
  - Bench Testing
  - Unit Testing
  - White Box Testing
  - Black Box Testing
  - Grey Box Testing
  - Regression Testing
  - Test Driven Development (TDD)
  - Functional Testing
  - Boundary Testing
  - Smoke Test
  - Load Testing
  - Alpha Testing
  - Beta Testing
  - Non-functional Testing
  - Vulnerability/Security Testing
  - Security testing
  - Compatibility Testing
  - Usability Testing
  - Performance Testing
  - Functional Testing
  - Unit Testing
  - Integration Testing
  - System Testing
Introducing SHanC – A Static Hacker News Clone
Tags: showdev
Published: 2018-05-30 00:09:28

---
title: Introducing SHanC – A Static Hacker News Clone
published: true
tags: showdev
canonical_url: https://www.slightedgecoder.com/2018/05/26/introducing-shanc-a-static-hacker-news-clone/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6yri3hgl2uc97h1m66h2.jpg
---
I read [Hacker News](https://news.ycombinator.com/) (HN hereafter) daily.  
The way I read is that, I _**skim through**_ titles and open 5~10 stories and actually read 2~5.

Two problems I have with HN.

1. Each HN page shows 30 stories only and
2. having to click on “more” for a post-back seemed too much of a pain

_And I don’t need real-time updates of the story._

So I created [SHaNc](http://shanc.netlify.com/), a Static page Hacker News clone.

I will only introduce you SHaNc in this article. Details on how it was built and problems faced while building it will be discussed in the next post.

### ❓ Why?

It solves two problems mentioned above.

1. Skimming through 30 pages at a time takes focus away
2. Loading next page with a post-back is slow

SHaNc loads all stories in one page (solves the first problem) and fast as it’s a static page  
_and also learn [GatsbyJS](https://www.gatsbyjs.org/) & [Styled Components](https://www.styled-components.com/) along the way._

### 🤷 What?

SHaNc is a static page, which displays all stories (Best & New story pages planned), which solves both problems – loads all stories & fast (for being a static page).

A static page is by definition doesn’t change. So the page is rebuilt every hour on the hour.  
_So you will probably be at most 1 hour behind._

### 🤔 How about other static HN clones?😕

There are other two awesome static HN clones.

1. [Nuxt Hacker News](https://hn.nuxtjs.org/news)
2. [Hacker Next](https://next-news.now.sh/)

They are fast but I still had the problem of having to load next page manually, which takes your focus away.

### 🏭 Tech Stack & Architecture

Nothing fancy.

1. [GatsbyJS](https://www.gatsbyjs.org/) – a static site generator using [ReactJS](https://reactjs.org/)
2. [Styled Components](https://www.styled-components.com/) – CSS in JS
3. [Netlify](https://www.netlify.com/) – deployment & Build WebHook
4. [Azure Functions](https://azure.microsoft.com/en-us/services/functions/) – triggering site build via Build WebHok every hour

SHaNc architecture (Hand-drawn on a piece of paper 😝)

 ![architecture](https://i2.wp.com/www.slightedgecoder.com/wp-content/uploads/2018/05/architecture.jpg?resize=1024%2C653)



### 🏃‍♂️ Parting Words

If you have a similar HN reading style, I hope [SHaNc](https://shanc.netlify.com/) can help to address your problems.

Please leave a feedback, issues, suggestion on [GitHub page](https://github.com/dance2die/SHANc/issues) (MIT licensed).

---

_The post [Introducing SHanC – A Static Hacker News Clone](https://www.slightedgecoder.com/2018/05/26/introducing-shanc-a-static-hacker-news-clone/) appeared first on [Slight Edge Coder](https://www.slightedgecoder.com)_
Need tips to start Software Engineering <Post 4>
Tags: java, code, software, project
Published: 2018-05-26 18:04:04

---
title: Need tips to start Software Engineering <Post 4>
published: true
description: Writing project specifications 
tags: JAVA, Code, Software, project
---
https://thepracticaldev.s3.amazonaws.com/i/29di280eqzwbpjmv35g5.png

It seems that I found many projects ideas yesterday I will add to the publication number 3 of my trip to become an engineer. So today I write the functional specifications for my first engineer project.

I tried to go step by step.
I don't hide you that my test project is a request from one of my clients (yes I have clients, in the previous publications I told you that I was a web developer already 7 years old) But I'd keep secret the purpose of the project. But nevertheless I am at the stage of writing a specification.

###Writing Project specifications
In French we say "cahier de charges". The Google terms that I found as comparative for terms of reference are:
##Technical Specifications
##Project Specifications
Since I never learned in a school to write specifications for the client. Because I am a Sofwate engineer in becoming from scratch.

I went online in the hope to models of specifications. And since this morning 10 am (in Congolese time) I'm still writing the famous specifications.

I came to the conclusion that  functional specification of a project that will be presented to a client (who's not involved in computer) are just formal.Different from technical specification that I have seen online.
Finally that's my starting summary :

1- Background
2- Presentation of the project
3- Project Organization
4- Technical Requirements

(I stop here and get back to writing my specifications)
But two problems locked me, hence my questions of the day:

1) Do I have to offer interfaces (HMI)?
2) How do I handle with use cases?
3) I do not know how to use other tools: if you need to draw interfaces I can do it with Illustrator? (I'm more comfortable with)

SOS engineers.

Article in completion ...
★ murze.be turns three
Published: 2020-01-02 22:51:58

---
title: ★ murze.be turns three
published: true
date: 2017-11-29 18:21:28 UTC
tags: 
canonical_url: https://freek.dev/917-murzebe-turns-three
---

Three years ago I [started this blog](https://freek.dev/a-board-game-that-teaches-four-year-olds-how-to-code) to share my bookmarks and interesting links with fellow developers. Like on the [previous](https://freek.dev/this-blog-is-one-year-old) [anniversaries](https://freek.dev/murzebe-is-two-years-old) I'd like to share some cool statistics from the past 12 months.

For the period spanning from end november 2016 until end november 2017 my little blog served 591 113 pages. That's a pretty nice increase compared to the 397 030 pages from 2015-2016.

These were the most popular posts from 2017:

1. [Building a realtime dashboard powered by Laravel and Vue (2017 edition)](https://freek.dev/building-a-realtime-dashboard-powered-by-laravel-and-vue-2017-edition)
2. [An easy to use server monitor written in PHP](https://freek.dev/an-easy-to-use-server-monitor-written-in-php)
3. [Packages that make developing Laravel apps easier](https://freek.dev/packages-that-make-developing-laravel-apps-easier)
4. [Using Varnish on a Laravel Forge provisioned server](https://freek.dev/using-varnish-on-a-laravel-forge-provisioned-server)
5. [Introducing Browsershot v3: the best way to convert html to PDFs and images](https://freek.dev/introducing-browsershot-v3-the-best-way-to-convert-html-to-pdfs-and-images)
6. [A beautiful webapp to fetch dns records](https://freek.dev/a-beautiful-webapp-to-fetch-dns-records)
7. [Easily optimize images using PHP (and some binaries)](https://freek.dev/easily-optimize-images-using-php-and-some-binaries)
8. [Setting up Xdebug with Laravel Valet](https://freek.dev/setting-up-xdebug-with-laravel-valet)
9. [An easy way to validate front end forms using back end logic](https://freek.dev/an-easy-way-to-validate-front-end-forms-using-back-end-logic)
10. [A package to easily manipulate images in PHP](https://freek.dev/a-package-to-easily-manipulate-images-in-php)

Regular readers have also noticed that recently I swapped out WordPress in favor of a custom built Laravel application. Read [this post](https://freek.dev/on-migrating-my-blog-from-wordpress-to-a-laravel-application) if you want to know more about that.

In 2016 I started sending out [a bi-weekly newsletter](/newsletter) containing all articles posted on this blog. I'm very happy to share that the list now has 3 787 subscribers. Mid 2017 I added text based ads to the newsletter. Though I was afraid of unhappy subscribers I literally received zero complaints. Interested in placing an ad? Here's [some more info](/advertising).

Dear reader, I hope you still enjoy reading the content on this blog as much as I like writing it. If you have suggestions on making this blog better, be sure to let me know.
Explain Five Like I am Five
Tags: discuss
Published: 2018-05-26 17:19:25

---
title: Explain Five Like I am Five
published: true
description: 
tags: #discussion
---
What's the point of topics like that? I find them clickbaity and absurd to be honest. Why limit the answers to only employing analogies/metaphors that a five year old might understand? Are there any actual benefits of doing this?
How To implement Lazy  Loading in Angular 
Tags: angular, javascript, webdev, beginners
Published: 2018-05-26 16:23:59

---
title: How To implement Lazy  Loading in Angular 
published: true
description: How To implement Lazy  Loading in Angular
tags: angular,javascript,webdev,beginners 
cover_image: https://cdn.pixabay.com/photo/2015/05/31/11/24/tap-791172_960_720.jpg
canonical_url: https://reactgo.com/angular-lazy-loading/
---


The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

If you need to update  Angular CLI  you can update easily by reinstalling it.

```
npm install -g @angular/cli
```

```
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve --open
```

ng new is used to generate angular boilerplate.

To implement the Lazy Loading in Angular we need to create a routing module and a module for that component Like in below image.

![folder structure](https://thepracticaldev.s3.amazonaws.com/i/m62asv5gbg40jriivt4t.png)


In above image have you seen **posts-routing.module.ts and posts.module.ts**

Now let's see what we need to code.


#### posts-routing.module.ts

{% gist https://gist.github.com/saigowthamr/e46ba0a09383aeb875cbe33687e86fbb %}

On 14 line we need to specify as a *RouterModule.forChild* instead of root.


**posts.module.ts**

Now let's look into posts.module.ts

{% gist https://gist.github.com/saigowthamr/d3168c157c0c89b5c2c6f6a38de0883f %}

That's it we are done with child level.


Now we need to create a file  app-routing.module.ts on root level it means inside the app folder.

Like how we create a routing in angular.


{% gist https://gist.github.com/saigowthamr/7df0ac77c6509d0a3e00e1074aedce42 %}


In **app.module.ts** we need to remove the declarations for the components which we would like to lazy load. Like  we  already declared the posts component inside the posts.module.ts

**app.module.ts**
{% gist https://gist.github.com/saigowthamr/d05db72f41ef8a370131ce63650f98e4 %}


This is our final output

![lazyloading in angular](https://thepracticaldev.s3.amazonaws.com/i/tfdk1njxszh5bhiif3bi.gif)



[Code repository](https://github.com/saigowthamr/Angular-Lazy-loading)


originally published at [reactgo.com](https://reactgo.com/angular-lazy-loading/)