teleren/devto huggingface dataset:
External Media Formats
Tags: storage
Published: 2023-01-06 02:02:14

---
title: External Media Formats
published: true
date: 2019-05-23 02:03:38 UTC
tags: Storage
canonical_url: https://brandonrozek.com/blog/externalmediaformats/
---

I received an external SSD recently and I decided that it would be a great place to offload some of my backups. Before I got started, I became curious as to what filesystem to put on the SSD. After some research, it seems that if I want to be able to access it using Windows I am actually quite limited. In fact only three make sense:

- FAT32
- exFAT
- NTFS

Now FAT32 is a legacy filesystem, Windows 95 type of legacy. So let’s rule that one out. exFAT is supposed to be based on FAT32 but increases the file size limits significantly. It is also known for being very slim and as such does not having journaling support. NTFS is the filesystem that Windows 10 uses for default for it’s installation. That file system supports journaling.

I ended up going with NTFS due to its journaling support. Why is journaling important to me? Well this helps keep the file system internally consistent. The details are outside the scope of this post, but [Wikipedia has a nice entry](https://en.wikipedia.org/wiki/Journaling_file_system) about it.

Well as it turns out, the drive that I was going to use already was formatted as NTFS. Though for sake of completeness, I will say that you can format drives with tools like `parted`, `gparted`, and `partitionmanager`. Just make sure that the drive you’re formatting is what you think it is!
How to write accessible code?
Tags: accessiblecode, programming, bestpractices, go
Published: 2019-05-23 00:54:24

---
title: How to write accessible code?
published: true
description: A brief article about writing accessible code.
tags: accessible code, programming, best practices, golang
---

![accesible code image](https://thepracticaldev.s3.amazonaws.com/i/uxvonr4v4gfz10jybswq.png)

1. Group code blocks in a logical way:
 - Keep your variables close to where they are used.

2. Use short names:
 - Naming a variable “a” or “b” is fine.
 - But … I lose context, right? … DO NOT! If you respect rule 1, there is no problem, you will reduce the redundancy and the cognitive load of your code.

3. Use names that speak for themselves:
 - Nothing of “mVal”, “tRows”, etc …

4. Use the new lines intentionally:
 - In the same way that you divide a text into paragraphs, make the new lines in your code communicate something.

If you want to expand this information I recommend this video, it is based on Go but it applies to other languages as well ->
⚡️⚡️⚡️

{% youtube cVaDY0ChvOQ %}

Do you wanna know more about this topic and other interesting tech topics?

Follow me on Twitter: https://twitter.com/carloslfu

Thanks! and happy learning.
MY Visual Studio Code is A little Bit Heavy Now
Tags: vscode, tool, editor
Published: 2019-05-23 00:28:57

I really love `Visual Studio Code`. However, recently it is getting heavy orz....

I just modified settings to solve my issue.

### `Default`
```
 "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true
   }
```


### `Add some lines`
```
"files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/Library/**":true,
        "**/GoogleDrive/**":true,
        "**/Dropbox/**":true,
        "**/.cocoapods/**":true,
        "**/Pictures/**":true,
}
```
Using await/async in a Simple Script
Tags: javascript, tip
Published: 2019-05-23 00:21:25

---
title: Using await/async in a Simple Script
published: true
description: Small tip on using async/await
tags: javascript, tip
---

**Problem:**

You want to use `await/async` at the top-level of your simple script like so:

```javascript
async function asyncFunction() {
    return new Promise(resolve => {
        //  simulate wait
        setTimeout(resolve, 1000);
    })
}

try {
    // This won't work!
    await asyncFunction()
} catch(err) {
    console.error('Something bad')
}
```

Not so fast! `await` can only be used within an `async` function!

```
await asyncFunction()
^^^^^

SyntaxError: await is only valid in async function
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3

```

---

**Solution:**

Enclose your code in an [Immediately-Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately_invoked_function_expression).

```javascript
async function asyncFunction() {
    return new Promise(resolve => {
        //  Simulate wait
        setTimeout(resolve, 1000);
    })
}

// This works
(async () => {
    try {
        await asyncFunction()
    } catch(err) {
        console.error('Something bad')
    }
})()
```
DinosaurJS Opportunity Scholarship
Tags: javascript, conferences, scholarship, denver
Published: 2019-05-22 22:52:38

---
title: DinosaurJS Opportunity Scholarship
published: true
description: 
tags: javascript, conferences, scholarship, denver
---

## Opening up 2019 Scholarship Opportunities

It’s year four for DinosaurJS and I can gratefully say we have had the amazing opportunity each year to provide scholarships for underrepresented person’s in technology. At our core, we’ve always believed that everyone should have access to information, regardless of class, state or any other factors. We do our best to have an inclusive conference with everything from blind speaker selection to ensuring dietary restrictions are met and speakers feel completely comfortable and supported. This year is better than ever and we’re very excited to open up our application. We’ll be accepting applications now through *June 10th*. 

We would like to extend an invitation to those underrepresented groups; women, LGBT+ folks, people of color, people with disabilities, and economically disadvantaged individuals interested in learning about JavaScript and partaking in this community; to apply for a scholarship. We have two days of content, networking events and plenty of time to meet mentors and potential new employers and friends. 


![](https://paper-attachments.dropbox.com/s_D146033C3166393C5C86066D71152B6A9D86DB4646F19BC4BF1ADA72FFD9536B_1558496571111_file.jpeg)

_Pictured are two ladies who were able to attend DinosaurJS in years past from scholarships, then made dinosaur skirts!_

You have one thing we need you to do… Fill out this 📝 [quick form](https://forms.gle/kw5zKdGKAcd6s2Y37) 📝 and if you’re eligible you will be included in our lottery selection! Apply now so we can get you approved ASAP! All scholarship selections will receive a free ticket and a few will have travel covered as well; please include if you need assistance with this in your application. 

### Looking to help someone out?
_These scholarships are done by joint effort from sponsors and community, so thank you to everyone who helps make this possible._ 🙏

We have [opportunity enthusiast](https://ti.to/dinosaurjs/2019/) tickets available, so if you’re able to purchase a ticket for you and someone else, we appreciate your help in bringing more people to our conference.

If you’re a company and looking to help sponsor scholarships, please reach out via roar@dinosaurjs.org and we would love to chat!
Go Nuts with Channels: Prioritize a Channel with Middleware
Tags: go, beginners, tutorial
Published: 2019-05-22 22:51:42

---
title: Go Nuts with Channels: Prioritize a Channel with Middleware
published: true
description: Go channels ordering & prioritization using middleware
tags: go, beginner, tutorial
---

**update** Added a deadline

Channels are great because you can easily rewire them from fifos into multiplexers , funnels and fan-outs.  

In this case we want to implement a priority fifo-- the P could be a TTL or value indicator. 


Not much is needed, just a custom `sort.Interface` impl. based on your ordering field `P`--for priority.   Then just read `inChan` into the buf, sort , and write to `outChan`


```
package main

import (
	"fmt"
	"math/rand"
	"sort"
	"time"
	"strconv"
	"context"
)

type PriorityStruct struct {
	P    int
	name string
}

const BUFSIZE = 10

type PriorityChan chan PriorityStruct
type PriorityBuf []PriorityStruct

func (s PriorityBuf) Len() int {
	return len(s)
}
func (s PriorityBuf) Swap(i, j int) {
	s[i], s[j] = s[j], s[i]
}
func (s PriorityBuf) Less(i, j int) bool {
	return s[i].P < s[j].P
}

func Sender(pchan PriorityChan) {
	for {
		randNum := rand.Intn(3)
		pchan <- PriorityStruct{
			P:    randNum,
			name: "Bob-" + strconv.Itoa(randNum),
		}
		time.Sleep(10 * time.Millisecond)
	}
}

func Prioritize(ctx context.Context, inChan PriorityChan, outChan PriorityChan) {
	for {
		buf := make(PriorityBuf, BUFSIZE)
		var i int
		for i = range buf {
			select{
			case buf[i] = <-inChan:
			case <-ctx.Done():
				break
			}
			buf[i] = <-inChan
		}
		sort.Sort(buf)
		for j:= 0; j <= i; j++ {
			outChan <- buf[j]
		}
	}
}

func Receiver(rchan PriorityChan) {
	for {
		fmt.Printf("%v\n", <-rchan)
	}
}

func main() {
	inChan := make(PriorityChan)
	outChan := make(PriorityChan)

	ctx, cancel := context.WithDeadline(context.Background(), time.Now().Add(50 * time.Millisecond))
	defer cancel()
	go Sender(inChan)
	go Receiver(outChan)
	go Prioritize(ctx, inChan, outChan)
	<- time.After(5 * time.Second)
}

```

### Run it 
```
go run priority-channel.go |head -n 15
{0 Bob-0}
{0 Bob-0}
{0 Bob-0}
{1 Bob-1}
{1 Bob-1}
{1 Bob-1}
{2 Bob-2}
{2 Bob-2}
{2 Bob-2}
{2 Bob-2}
{0 Bob-0}
{0 Bob-0}
{1 Bob-1}
{1 Bob-1}
{2 Bob-2}
```

Check it out: https://play.golang.org/p/wWgi5rPcIwb

If you're not on [go-nuts](https://groups.google.com/forum/#!forum/golang-nuts) -- it's a good community of go-users .  


![](https://thepracticaldev.s3.amazonaws.com/i/pdnr8avjdauq93cddb0f.png)
YOLO on Google Colab
Tags: machinelearning, googlecolab, python, yolo
Published: 2019-05-22 21:58:50

I used to use YOLO on my Mac which was very slow (FPS is around 1-2) and took one minute to test it with an image. In addition, it took some hours to figure out my env's issue.
 
I tried to run YOLO on Google Colab since I don't want to waste time for setting up the environment.

### steps
1. git clone darknet
2. make
3. download weight
4. run YOLO

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

Here is my jupyter notebook on Google Colab
https://colab.research.google.com/drive/1XCsO_VZo7bCKv6x_QNYlOFwiuEFtwIP3
30 Days of AWS
Tags: aws, challenge, 30daysofaws
Published: 2019-05-22 20:37:35

---
title: 30 Days of AWS
published: true
description: Starting 30 days of AWS
tags: AWS, challenge, 30DaysOfAWS
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xk3wcpnc2h8nk8oy9xh6.png
series: 30 Days of AWS
---

_Warning: This is my first post in English, It could have grammatical errors, please help me to improve._

## Motivation.

One year ago I started to work using AWS and immediately I fall in love with this platform. In fact, one-year later since this first day I love to understand more and more things about and improve the stuff that we have there.

Back in October 2018, I was talking with my boss and I expressed my interest in getting a certified as AWS developer or Solution architect, I know that a lot of people are against that one certification doesn't prove your knowledge in any topic but in my case is one motivation to keep on studying and improving.  But for different reasons I've delayed the day to start seriously to study because although I work almost every single day with AWS, it has dark corners that I don't know or I couldn't imagine that it exists. 

So I decided that I've 3 months as a deadline to get ready and take the exam, so I decided to start this 30 days of AWS.

## The challenge.

Right now I'm doing many things, as run 3 times per week at least 5km/run, Study English 2 times per week, I have 2 jobs and I'm daddy of 2. Yes I know I'm a pretty busy man but I like living on the edge.

Personal rules for this challenge:

1.) 30 Days will be the initial challenge because I gonna test my time and commitment.
2.) I will try to share my progress every day.
3.) The minimum time to study per day will be 1 hour/day.
4.) I could skip for 3 days because I'm pretty busy.

So If you want to follow me on this adventure please stay tuned. This will be a month with work hard but I'm sure that I will enjoy it.
monastic-browser
Tags: webdev, javascript, vue, markdown
Published: 2019-05-22 20:27:14

Rebuild the innocent web with **Monastic** `Markdown-first` web browser.

See the `#JAMstack` deploy at https://monastic.netlify.com

## Dependencies

For this project I used:

- axios
- highlight.js
- marked
- urijs
- vue
- vuetify

`git clone https://github.com/rognoni/monastic-browser.git`

## Next steps

- Ask to expose the markdown files used to build posts and articles, for example here on **DEV** community, could we add a source link before the date info? [dev.to/issues/2963](https://github.com/thepracticaldev/dev.to/issues/2963)
- Add [front-matter](https://github.com/jxson/front-matter)
- Create the web crawler and search engine project
- Add the [search feature](https://www.algolia.com)
- Add a configurable converter (HTML to Markdown) using [cheerio](https://cheerio.js.org/) and [json2md](https://ionicabizau.net/blog/27-how-to-convert-json-to-markdown-using-json2md)
- Add a plug-in system

## Links

- https://monastic.neocities.org/#/url/https://monastic.neocities.org/posts/monastic-browser.md
- http://web.archive.org/web/20190601081552/https://monastic.netlify.com/
- https://en.wikipedia.org/w/index.php?title=List_of_augmented_browsing_software&oldid=901442161
Floating point, business on a boat.
Tags: idea
Published: 2019-05-22 19:23:20

I have this idea, I want you to be honest because away with the fairies is where I spend most of my life. 

I want to start another business, a not for profit business called floating point, what makes it special?

Floating point will purchase a number of floating canal boats in harbor cities such as Bristol, the boats will be open office spaces for around 5 developers to work. It's special because who wants to work on a boat and rent a space?

Thoughts?
C++ how do I store any value in a map
Tags: help, cpp, webassembly, lua
Published: 2019-05-22 19:05:57

I am writing an emscripten compiled web assembly project to get Lua working alongside node, this is working out very nicely because I can get values from Lua back into CPP. I have bootstraped a node.js clone module system so this means I will always get a module.exports table back. What I'd love to know is how can I iterate over this table and convert it to a cpp map to return to JavaScript. I'm using c++17 I think...

Anyways hope any inspirational ideas can help. Much wow and thanks.
Quick JavaScript Tip: the some() method
Tags: webdev, javascript, tips
Published: 2019-05-22 18:23:02

---
title: Quick JavaScript Tip: the some() method
published: true
description: The some() method is an under-utilized array method.
tags: webdev, javascript, tips
cover_image: http://developmentmatt.com/wp-content/uploads/2019/05/somemethod.png
---

I recently learned of a great JavaScript method I'd never used. It was brought to my attention by [Wes Bos](https://wesbos.com). The `some()` method is a convenient way to test the values of an array and see if at least one value returns `true`. `some()` was implemented before ES6 and its support is [wide-spread](http://kangax.github.io/compat-table/es5/#test-Array.prototype.some) (Internet Explorer 11 supports it).

It's important to note that this method only works on true `Array`s. Other iterable types do not implement this method.

**Problem:** You have an array containing the types of animals your hotel allows. How can you determine if your pet snake, Mr. Slithers, can come along on your trip?

**An Older Way:**

```js
var animals = ['dogs', 'cats', 'snakes', 'birds', 'pandas'];
var snakesAllowed = false;

for (var i = 0; i < animals.length; i++) {
  if(animals[i] === 'snakes') {
    snakesAllowed = true;
    break;
  }
}

console.log(snakesAllowed); // true
```

**Using `.some()`:**

```js
// Using arrow functions
const animals = ['dogs', 'cats', 'snakes', 'birds', 'pandas'];

const snakesAllowed = animals.some((type) => type === 'snakes');

console.log(snakesAllowed); // true

// Using normal functions
const animals = ['dogs', 'cats', 'snakes', 'birds', 'pandas'];

const snakesAllowed = animals.some(function(type) {
  return type === 'snakes';
});

console.log(snakesAllowed); // true
```

**Addendum:**

@attacomsian mentioned in the comments that `.includes()` would be a better fit for the problem above. I completely agree. The example above was just to illustrate how `.some()` works rather than solve the problem in the most efficient way.

For another example to illustrate `.some()`'s functionality, let's say we have an array of comic book prices and we want to know if any cost more than $10.

```js
const prices = [5, 8, 11, 10, 25];
const aboveTen = prices.some((price) => price > 10);

console.log(aboveTen); // true
```

Further reading: [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
100 Days of Code - Day 1
Tags: challenge, 100daysofcode
Published: 2019-05-22 17:25:44

---
title: 100 Days of Code - Day 1
published: true
description: 
tags: challenge, 100 days of code,
---

I am so jetlagged I've been up since 2 am. I read somewhere that the school I applied to uses Java, so I decided to get a book to get used to the syntax and so on before I (hopefully) start next month. 

So far it looks like it's similar to C++, for my purposes.

So anyway in terms of days of code! I've pushed a version of the number guessing game in Java. I will do the same for Rust (which I want to learn for personal interest reasons). Then I will work on something web-devvy front-endy, hopefully from a coffeeshop. That's more related to my current career goals soooo it makes sense.

I also have this crazy urge to draw Louise Belcher using CSS. Maybe over the coming weeks.
Best Frontend courses?
Tags: frontend, javascript, courses, react
Published: 2019-05-22 17:19:28

---
title: Best Frontend courses?
published: true
description: frontend courses for a old-school wannabe
tags: Frontend, Javascript, courses, React
---

Hi everyone,

I'm kind of new (or old-school) to Frontend world as the last time I developed a web-application was almost 8 years ago.

I now work as a software Automation/QA specialist and I'm looking forward to deep-dive back into Frontend development.

My actual skill level is kind of intermediate with JS/HTML/CSS and very basic-ish with frameworks such as React/vue.

So here's my question: could you guys suggest some of the best websites or online courses (for a max of 1k euro) to get a full and comprehensive coverage of JS/CSS/HTML and VUE/React?

Some people I know told me to checkout "egghead.io" but I've read some negative review online.

tyvm
My Mental model of React Props And State
Tags: react, state, props
Published: 2019-05-22 15:47:04

---
title: My Mental model of React Props And State
author: Umar
published: true
description: One way to wrap your head around React Props and State.
tags: React, State, Props
---

In this short article I want to present how I think of React State And Props to you.
It is very simplist model, And there is alot more to Props and State then this. But I find it useful to wrap my head around React two fundametal concepts by using this model.
May be you find is useful like me.

## Props

Props are like parameters of a function. We use these to make our component dynamic like we use parameters to make our function dynamic.

lets look at a component to display Greetings to Harry Poter.

```
const GreetingHarryPoter = () => (
    <span>Hello Harry Poter</span>
)
```

Now I want to say greeting to any person not just Harry Potter, I can refactor my component to take in a prop i.e the name of person. And rename my component to more generic name because now I can use this component to say greeting to anybody.

```
const Greeting = ({name}) => (
    <span>Hello {name}</span>
)
```

And Now I can say greeting to different persons like

```
const App = () => (
    <Greeting name="Harry Potter">
    <Greeting name="Hermione Granger">
    <Greeting name="Ron Weasley">
)
```

## State

Anything that happen in React App we capture this by changing State.
Like

- User Clicks A button we do change state.
- Network returns data we do change state.
- Anything else happen we change state.

Lets consider a simple example of counter that we can increment or decrement.

Lets create a component without state.

```
const Counter = () => {
  return (
    <div>
      <button>-</button>1<button>+</button>
    </div>
  );
};
```

Let's introduce state to it.

We want to set the initial counter value to 1.
But as you click on increment or decrement we want to change the counter value.
To make counter dynamic we initial it with useState hook.
(useState is provided by react to introduce state into our components)

```
const Counter = () => {
  const [count, setCount] = useState(1);
  return (
    <div>
      <button>-</button>
      {count}
      <button>+</button>
    </div>
  );
};
```

we call useState with initial value (i.e 1) and it returns us the value(count) and a function (setCount) to change the value in future.

Now we have a function that we can call whenever you click on increment(-) or decrement(+) buttons to change value.

```
const Counter = () => {
  const [count, setCount] = useState(1);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return (
    <div>
      <button onClick={decrement}>-</button>
      {count}
      <button onClick={increment}>+</button>
    </div>
  );
}
```

Thats it, now we have a dynamic counter that responds to user clicks by changing state and React take care of rendering the updated state.

### Summary

At the simplest level we can consider props as parameters to a function.
And we can consider state as React way to update User Interface.
How to deal with off-grid image placement ?
Tags: css, html
Published: 2019-05-22 15:24:33

---
title: How to deal with off-grid image placement ?
published: true
description:

tags: css, html
---

Is there an easy way to achieve this type of design with ease? 
  ![Layout Design](https://thepracticaldev.s3.amazonaws.com/i/i2eah2su8o5c4h1nw03l.png)

The whole width of the layout is 1440px. The content placement is within 1330px(suppose).
Is there any way so that I can work within the 1330px container?