teleren/devto huggingface dataset:
Bash History Contd. You can load an old bash history!
Tags: bash
Published: 2019-12-04 04:31:38

---
title: Bash History Contd. You can load an old bash history!
published: true
description: You can load an old bash history! Cool!
tags: #Bash
---

It's True You can load an old bash History!
[See Last Weeks Post For More on Bash History](https://dev.to/andershornor/terminal-history-how-to-make-it-work-for-you-3hk)

So this could be easily adapted into a script that should in essence move through your entire History and add each old history to a new super long history. But anyway here's how to load an old bash history. 

So first off as opposed to last time when we were working with the `.bash_profile` file this time were working with the `.bashrc` file.

###`.bashrc.`

So a little aside about this cool file. The `.bashrc` file is a file your terminal runs before it opens. Due to this fact you can add commands to it that the terminal will run as it opens. So this would be a kind of a hacky way to do this and I know there are more elegant ways to due this. I need to explore bash commands more in general  mean shit theres probably a way to do this with straight up bash commands any way. This cooooool `.bashrc` file can run commands as you open the file. Now that I think of it. I could probably write a command in my `.bash_profile` that does this...

Anyway `.bashrc` runs commands as the terminal opens so there's definitely a little loop in there that would make a super history. Set the HISTFILESIZE and HISTSIZE to super large and then loop throught all the `.bash_session/....historynew` files and `history -a` them all. Followed up by a `history -r` and voila super file throuretically.

###Opening A Specific History file.

1. type- `nano ~/.bash_profile` -into your terminal
2. In your `.bash_profile` file at the very top enter this code 
```bash
HISTFILE=<history file you want to open thats probable bash_session/.../<somenumbers>.historynew`
```

reload your terminal

- Voila -

Old History!

Till Next week Adventureres!!!!
How I prototype a Web Page using Tailwind
Published: 2019-12-04 13:43:08

---
title: How I prototype a Web Page using Tailwind
published: true
date: 2019-12-04 05:00:00 UTC
tags: 
canonical_url: https://flaviocopes.com/how-prototype-webpage/
---

Sometimes I work on single web pages for my projects.

Maybe I want to redesign the blog. Maybe it’s a landing page for a new project.

This is the process I use.

I like to use Tailwind to build prototypes.

I set up all the pipeline for [Tailwind](https://flaviocopes.com/tailwind-setup/) and [PostCSS](https://flaviocopes.com/postcss/) first:

Create `postcss.config.js`:

```js
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({ preset: 'default' }),
    purgecss({
      content: ['./layouts/ **/*.html', './src/** /*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

```

Create `tailwind.config.js`:

```js
module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

```

Craete a `tailwind.css` file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

```

Create a `package.json` file:

```json
{
  "main": "index.js",
  "scripts": {
    "build:css": "postcss tailwind.css -o output.css",
    "watch": "watch 'npm run build:css' ./layouts"
  },
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "autoprefixer": "^9.7.1",
    "cssnano": "^4.1.10",
    "postcss": "^7.0.21",
    "tailwindcss": "^1.1.3",
    "watch": "^1.0.2"
  }
}

```

Create a `layouts/index.html` page, and add your HTML.

Start a terminal shell, go to the project folder and run:

```bash
npm run watch

```

Then I make the browser automatically sync the changes every time I save the page or the CSS is regenerated, using [`browser-sync`](https://www.browsersync.io/), a great utility you can install using `npm install -g browser-sync`:

```bash
browser-sync start --server --files "."

```

This starts a server and also automatically opens the browser and points at the newly created local web server.

Now I open VS Code and the browser side by side, and I start prototyping!
Raja Ampat Boat Trip - Bigkanu
Tags: rajaampatboattrip
Published: 2019-12-04 04:53:21

After a week living aboard a boat touring Raja Ampat, we challenge you to take us to a more spectacular natural 'wow'. It’s certainly the most spectacular when it comes to the bizarre magnificence of the limestone karst islands, and on the marine bio front, well, science deemed Raja Ampat the winner years ago.

Without roads or ferries, the only way to see Asia’s great natural wonder is by boat.

In brief, to get there, it’s a flight to Sorong in east Indonesia. What you will see is the most diverse oceanic life on earth, set amongst a sculptured island landscape that is otherworldly.
Code style is a personal choice
Tags: codequality, ide
Published: 2019-12-04 04:35:11


<img src="https://cdn.pixabay.com/photo/2017/06/23/10/48/code-2434271_960_720.jpg" alt="code"/>

tabs or spaces?</br>
indentation or brackets?
`def foo()` or `function foo()` ?
to semicolon or not to semicolon?

so many hours wasted on pointless flame-wars, so much talent dedicated to never-ending arguments.
currently, every language comes with its own syntax, every company/project has their own coding standard, every developer has their personal taste, so many counter-productive code-refactor commits, so many emotions.

I have a dream where a computer language doesn’t enforce grammar.
I have a dream where a smart IDE shows the same code-representation differently to each developer taste.
I have a dream where code has a single markup and the rendering depends on themes, just like html and css.

<b>Rationale</b>
while humans wish to view their code in paragraphs, like prose, free text blob is a very poor representation for programming instructions. code-instructions are structured components, hierarchically nested into blocks, brackets and parenthesis (depending on your language). for a machine, something like <a href="https://docs.python.org/3/library/ast.html">trees</a>, json, yaml or xml would make much more sense.

why wouldn't machines mess with the internal representation of the source-controlled tree, and humans deal with its textual view (based on personal style). a smart IDE would trans-format back and forth.

<b>Suggestion</b>
imagine your favorite computer language stripped to internals only: byte-code, libraries, packages, etc., such “bare language” could support many syntaxes just as a natural language can have different accents.

It’s been long since the web community embraced the concept of rendering: a software responsible for visually displaying a structured representation for a data such as html. it’s time for the development process to make the same step and break the ties between the language internal representation and its visual appearance. let's make it happen in computer languages too
concent online demo updated,  challenge vue3 composition api & setup!
Tags: react, javascript, concent
Published: 2019-12-04 03:11:02

![](https://raw.githubusercontent.com/fantasticsoul/assets/master/img/cc/dd8.png)

[concent online demo updated] https://codesandbox.io/s/concent-guide-xvcej, click it to viewing effect!

Concent, born for build large scale and high performance react app, use it to write awesome react app.
Day 16 - Project -NYT Article Part 2
Tags: html, css, beginners
Published: 2019-12-04 03:06:16

More of a busy day today.

Did about 2 hours of my Udacity program and then it was on to my NYT article project.

It is not complete yet but I think I might finish it within a day or two.

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

I had already completed the nav bar and the main picture was there. One of the first issue I encountered was centering it. It was so simple but yet I forgot. 

<code>margin:auto</code>

That was it !

Once that was done, I moved to the image description. I usually work in a waterfall fashion and I have started thinking about my project before I start coding.

I find that in the beginning, it takes a while to accomplish anything and as I get to the middle, it's a matter of pasting and breezing through the code.

The next part was where the article actually starts. The section with the author's name and the social media icons.

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


The main content of this page is centered and the article content is centered within that. 

One of the best tricks I have learned from Brad Traversy is the use of "utility classes". These are the lines of code that you are writing over and over. Therefore, instead of rewriting, you simply create a class and you add it to the HTML.

In order to get the narrow view of the article, I created a wrapper class that aligns the content to the left, sets the width to 50% of the main container for everything. I also set the margin to <code>auto</code> to center it.

As I am adding more paragraph, I simply add the class that I need.

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

This way, there is less CSS.

The streak continues...




<code></code>
Day18:File Operation - 100DayOfRust
Tags: rust
Published: 2019-12-04 03:05:07

File operation: read, write and append.

### Code

```rust
use std::fs;
use std::io::prelude::*;

fn main() {
    // write file
    let age = 12;
    let mut f = fs::File::create("newfile").unwrap();
    // 1st way: write_all
    f.write_all(b"some content here\n").unwrap();
    // 2nd way: write!
    write!(f, "age: {}\n", age).unwrap();
    // 3rd way: fs::write
    fs::write("sample.txt", "sample code").unwrap();

    // read file
    let mut fread = fs::File::open("newfile").unwrap();
    let mut content = String::new();
    // 1st way: File.read_to_string
    fread.read_to_string(&mut content).unwrap();
    println!("File content(1):\n{}", content);
    // 2nd way: fs::read_to_string
    let fcontent = fs::read_to_string("newfile").unwrap();
    println!("File content(2):\n{}", fcontent);

    // append mode
    // Use OpenOptions to open file in append mode
    let mut fappend = fs::OpenOptions::new()
                                     .append(true)
                                     .open("newfile")
                                     .unwrap();
    write!(fappend, "append one line\n").unwrap();

    let fcontent = fs::read_to_string("newfile").unwrap();
    println!("File content(3):\n{}", fcontent);
}
```

Result:
```
File content(1):
some content here
age: 12

File content(2):
some content here
age: 12

File content(3):
some content here
age: 12
append one line

```

### Reference

* https://doc.rust-lang.org/std/io/trait.Read.html#method.read_to_string
* https://doc.rust-lang.org/std/fs/fn.write.html
* https://doc.rust-lang.org/std/fs/struct.OpenOptions.html
A React.js Nice Resume Template
Tags: css, javascript, html
Published: 2019-12-04 02:51:29

# React Nice Resume     

### DEMO is [here](https://nordicgiant2.github.io/react-nice-resume-page/index.html)

![img](https://github.com/nordicgiant2/react-nice-resume/blob/master/public/images/img.jpg?raw=true)

## About [`particles-bg`](https://github.com/lindelof/particles-bg) library
#### This project uses the react particle background component library [https://github.com/lindelof/particles-bg](https://github.com/lindelof/particles-bg). It is really simple and easy to use. It is recommended.

![img](https://github.com/lindelof/particles-bg/raw/master/image/03.jpg?raw=true)

## Description
This project forks from [https://github.com/tbakerx/react-resume-template](https://github.com/tbakerx/react-resume-template), I made some modifications and adjustments, thanks to the [author](https://github.com/tbakerx).

![img](https://github.com/nordicgiant2/react-nice-resume/blob/master/public/images/img2.jpg?raw=true)

## Run Project
### 1. Clone the project

### 2. Run the project
```shell
npm i
npm start
```

### 3. BUild
```shell
npm run build
```
How To Improve The CS Curriculum And Have More Fun
Tags: career, elixir, elm
Published: 2019-12-04 02:39:49

I've thought a lot about modern CS curricula, and I have a few suggestions that would make them more fun for undergrad students.  They are:

1. Teach functional programming first.
Most universities start out with either Python (a pretty good choice for a first language) or Java (a terrible choice).  Wouldn't it be great if first-year students were introduced to Haskell or Elixir?  Imagine the multitudes of newly-minted programmers writing first-year blogs about how cool monads and applicative functors are.
2. Avoid over-optimizing algorithms (like Quicksort).
This one might be a bit controversial, but I think it makes sense.  As a first year student, we should be presenting a general overview of the field, not esoteric optimization techniques like Quicksort.  What do we replace this part of the curriculum with?  Monoids, applicative functors, monads, etc.
3. Add a Rust-based OS course.
You will still need to learn C (since the Linux kernel is written in C), but wouldn't it be cool to have a Rust-based OS course paving the way for a memory safe future?  This one is my personal favorite.
4. Add required webdev and mobile courses.
Most CS grads will be funneled into one of these two fields, so I think it makes sense for students to have a grasp on both before entering the field.  Plus, it would be cool to have an Elixir- and Phoenix-based course in the curriculum.  :P

That's it!  I hope you enjoyed this post, and I hope you have a great day!

P.S. If you'd like to support me or this blog, feel free to [buy me a coffee](https://buymeacoff.ee/q2YdXu5).
What do you need to know to get into Data Science as a Beginner?
Tags: machinelearning, sql, beginners, python
Published: 2019-12-04 02:35:30

Data Science is a combination of Programming & Statistics, so to be a data scientist you need to have knowledge of at least one programming language, preferably Python/R as there is a good amount of people/communities who use these languages to build their models. 

For a complete beginner, Python is easy to learn. Some of the basic tools used in data science from Python stack.

**Jupyter Notebooks** - IDE
**Pandas** - library for data manipulation and analysis
**Numpy** - library for scientific computing
**Matplotlib & Seaborn** - library for data visualization
**Scikit-Learn** - library for machine learning




Good mathematical knowledge helps to make a better judgment while choosing a procedure (algorithm) based on the data available to you and also to diagnose the problems.

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


If you don't have time to go through the theory, start with a tutorial. Follow the tutorial step-by-step. After you complete a tutorial, apply what you learned to new datasets. You can find some sample datasets online (https://www.kaggle.com/datasets). If you try the same modeling on a new dataset, you might run into a new issue. Upon doing some research, you might discover data issues in the dataset like different formats, or missing values.

If you are looking for more resources https://www.coursera.org/, https://www.datacamp.com/ offers some good and free courses.

This blog is first posted on [hackerheap.com](https://www.hackerheap.com/)
The State of Developer Ecosystem 2019
Tags: news, beginners
Published: 2019-12-04 00:58:48

## In the beginning of 2019 jet-brains polled almost 7,000 developers to identify the state of developer ecosystem 


### Key takeaways

*Java* 
The most popular programming language 

*JavaScript*
The most used overall programming language 

*GO*
The most promising programming language 

*Python* 
Most studied language


####What Programming language programmers have used in the last year 

|language|used|migrate|
|---|---|---|
|JavaScript|69%|5%|
|HTML|61%|2%|
|SQL|56%|2%|
|Java|50%|4%|
|python|49%|9%|

####Operating System

Operating system is very important for development and here is some stats for the operating systems used among the 7,000 developers that took the survey.

|Windows|Mac|Unix/Linux|others|
|---|---|---|---|
|57%|49%|48%|1%|

*This proves that Chrome Os still has long way to go even after Linux support*

#### Applications created

This was categorized according to two parts, applications developers are writing to earn money and those only out of hobby 


|Application|for living|as a hobby|
|---|---|---|
|Web back-end|60%|39%|
|web front-end|46%|37%|
|Mobile application|23%|27%|
|Data Analysis|13%|11%|
|Machine Learning|7%|16%|
|Games|4%|17%|

*By looking at this stats we can argue that developers really love, game development and machine learning*

####Mobile

For which mobile operating system developers are developing 

|Operating System|ratio|
|---|---|
|Android|83%|
|ios|59%|
|other|3%|

Two thirds of mobile developers use native tools to develop for mobile OS. Every other developer uses cross-platform technologies or frameworks.

***

Please visit <a href="https://www.jetbrains.com/lp/devecosystem-2019/">here</a> for more stats.
Git Workflow: Should the history of commits show the real time of your work?
Tags: git, discuss, opensource
Published: 2019-12-04 00:49:32

---
title: Git Workflow: Should the history of commits show the real time of your work?
published: true
description: Working on a branch you may have several pieces to build. Do you push commits of those in real time so that the git log is a real time representation of your work? Does it matter?
tags: git,discuss,opensource
---

As I work more and more with git and GitHub I have become really interested in the version control processes of individuals and teams for developing software.

My next thought is about if the [git log](https://git-scm.com/book/en/v2/Git-Basics-Viewing-the-Commit-History) of commits should be a real time representation of how long the work actually took you to complete? Does it matter? There is probably a multitude of better ways to check this work, but does anyone do this?

Let me give you an example. Let's say I am building a static site. I will have an HTML file and a CSS file. I start working on the HTML file to build out the scaffold of the markup and start to putting in placeholder content. I am making commits as I go.

Should a git log be real time? Should it show how long I actually took to do this work?

Now, let's say I have made changes to multiple files like CSS and Javascript files. The CSS is setting up styles and the Javascript is functionality. I committed each in their own commits. This way styling changes and functionality could be rolled back, if needed, on their own without undoing all of it.
But, when I did this work I wrote all of the CSS and then went straight to the Javascript before creating the commits. Once I was done with the Javascript I did a commit or the CSS and then did another commit for the Javascript file.
This makes it look like in the timestamps that the CSS is put in and then seconds later the JS is put in.
Is this an issue for some folks? Does it appear to some that the JS only took seconds to write? Should there be a difference in timestamps to show how long the JS work took? To do that I would need to make sure to do the CSS work and commit it before moving on to the JS work. I might forget to do this and end up with all of the files changed before I realize I should have committed.
Is this a big deal?
Pass parameter to setTimeout inside a loop - JavaScript closure inside a loop
Tags: javascript, es6, es5, webdev
Published: 2019-12-04 00:30:06

What will be the output of this script?

```javascript
const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log(i + '- element: ' + arr[i]);
  }, 100);
}

//desired output
//1- element: 10
//1- element: 12
//1- element: 15
//1- element: 21

//actual output
//4 - element: undified
//4 - element: undified
//4 - element: undified
//4 - element: undified
```

There are two reasons why it doesn't work as expected - 
1. JavaScript is a synchronous programming language
2. Each loop is sharing the same ``i`` variable that is outside the function

All loops are running simultaneously and the ``i`` keeps increasing until it hits ``arr.length - 1``.

To fix the issue, we need to change ``i`` from a global variable to a local variable.

##Solution 1 - use IIFE (Immediately Invoked Function Expression)##
An IIFE is a JavaScript function that runs as soon as it is defined, and the variable within the expression can not be accessed from outside it(1).
```javascript
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }(), 100);
}
```
_**Note:**_ **Solution 1 will invoke function immediately regardless of time delay, which means the code above won't work on ``setTimeout``**.

You can still use IIFE in ``setTimeout``, and here is the code below. Thanks [JasperHorn](https://dev.to/jasperhorn/comment/ifi8)!
```javascript
for (var i = 0; i < arr.length; i++) {
  setTimeout(function (i) { return function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }}(i), 100);
}
```

##Solution 2 - ``for`` can be replaced by ``forEach`` to avoid global ``i``
``i`` in ``forEach``- The index of the **current** element being processed in the array(2).
_**Note:**_ ``forEach`` is included in **ES5**
```javascript
arr.forEach(function(element, i){
  setTimeout(function(){
    console.log('Index: ' + i + ', element: ' + element);
  }, 100)
})
```
##Solution 3 - change ``var`` to ``let``##
``let`` allows to declare variables in a local scope, so each function can use its own ``i`` value.
_**Note:**_ ``let`` is included in **ES6**

```javascript
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log(i + '- element: ' + arr[i]);
  }, 100);
}
```

##References##
1. https://developer.mozilla.org/en-US/docs/Glossary/IIFE
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Faster YouTube embeds with React Lite YouTube Embed component for React: my first open source project
Tags: react, showdev
Published: 2019-12-03 23:58:10

After attending Chrome Dev Summit 2019 in San Francisco I started to think a lot in contribute to open source. I already translate docs before (for Meteor), strings for Ubuntu, and just started to help translate the Web Almanac to Brazilian Portuguese, but I felt incomplete without make a "code contribution".

After see Elizabeth Sweeny and Paul Irish's ["Speed tooling evolutions: 2019 and beyond"](https://www.youtube.com/watch?v=iaWLXf1FgI0) as a big Lighthouse fan (and adept of LDD - Lighthouse Development Driven). They profiled a simple site and identified YouTube iframe was a blocker for the main thread. He shared an elegant solution: [Lite YouTube Embed](https://github.com/paulirish/lite-youtube-embed). A web component to fast render YouTube iframes (224x more faster!). Since I got the same problem  presented in the talk, I was eager to use in my work, where I'm the technology coordinator at a media company in Brazil.

So I reserved some time to create a port as a React component and publishing at npm: [React Lite YouTube Embed](https://www.npmjs.com/package/react-lite-youtube-embed).

My benchmarks for performance don't share the same performance from the original library, but I can see small network usage and other gains such a better control of cover display and just load more in case the user has this intent, in the "Adaptive Loading" philosophy and techniques, from another talk at the Chrome Dev Summit from "Addy Osmani", ["Adaptive Loading — improving web performance on slow devices](https://www.youtube.com/watch?v=puUPpVrIRkc)

Feels great to give something, as small it is, to the community, and also a some fear in case I ship some bug. I think the code can be improved a lot, since I decide for the first version to use as little dependencies as possible, I had to be creative in some strategies dealing with preconnect and preload. Looking forward to get some feedback, evolve this component and be a more active member in the open source community.