teleren/devto huggingface dataset:
Practice Makes Perfect
Tags: ruby, beginners
Published: 2019-05-09 04:50:04

---
title: Practice Makes Perfect
published: true
description: My personal (a newbie) experience with pry.
tags: #ruby #beginners
cover_image: https://images.unsplash.com/photo-1528799547354-c537ef886c35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9
---
Six weeks go by quickly, especially when you’re learning a skill that plunges you ever deeper into an endless world of excitement. Looking back, I can hardly believe I’ve learned as much as I have.

I started my CLI project about two weeks ago, thinking I knew what I needed to complete it. But I wanted to solidify that knowledge. Practice makes perfect. But creative practice fills in the gaps you didn’t know were there.

The project needed to scrape a website, provide the user with information, and have a command-line interface to interact with the program. I chose to scrape an event schedule to create an agenda for the user ([GDG DevFest 2018](https://devfest.gdgcapitalregion.com/)). While properly learning to iterate through, filter, and attach my scraped results to an object, my best friend was Pry.
	
I could go on and on about my love for Pry. But I’ll try to share a few of my favorite commands of Pry instead. While the most fundamental benefit of Pry is to essentially ‘pry’ open code, there is so much more to it. 

If you’re familiar with the terminal on a Unix system, you’ve probably used the ‘ls’ command to list files and folders. Pry has something similar. The ‘ls’ command will show you a list of possible methods and variables for the location you pried open. While this may seem like a trivial command by itself, when combined with other commands, it becomes mighty.

Which brings me to my next command, ‘play’. More specifically, ‘play -l’ will play the line specified next. This command also provides a relatively easy way to step into or around blocks and iterations. When it’s combined with ‘ls’, you can follow changes to variables and methods as they happen.

My last command is more of a tip of how to use a command than an actual command. While outside of a ‘do’ block, ‘exit’ will exit from the program. But while inside, it can provide valuable information about each iteration the block goes through, giving much needed debugging support.

Overall, this was a very tiny piece of what I’ve learned about this project. But I’ll save that for another post. The journey continues!


### Attribution
Cover Photo by [Jordan Sanchez](https://unsplash.com/@jordaneil?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Docker series - Docker Compose
Tags: docker, devops, showdev, beginners
Published: 2019-05-09 04:13:46

---
title: Docker series - Docker Compose
published: true
description: You tend to use Docker commands to manage a few Docker images and container but when things grow big and you need to handle a lot of containers you need something like Docker Compose that lets you specify all of your services and bring them up and down in one command.
tags: docker, devops, showdev, beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ea4kwfyyawbp38tnb7hd.jpg 
---

Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris

You tend to use Docker commands to manage a few Docker images and containers but when things grow big and you need to handle a lot of containers you need something like Docker Compose that lets you specify all of your services and bring them up and down in one command.

- [Docker Compose part I](https://dev.to/azure/docker-from-the-beginning-partiv-mi6)
This covers why Docker Compose and some fundamentals on how to use it
- [Docker Compose part II](https://dev.to/azure/dockerfrom-the-beginning-part-v-n2c)
This covers more advanced usage of Docker Compose like how to work with environment variables, Volumes, Networks and Databases
Google IO: Chrome is closing the gap between web and native
Tags: discuss, javascript, webdev, chrome
Published: 2019-05-09 04:02:08

---
title: Google IO: Chrome is closing the gap between web and native
published: true
tags: discuss,javascript,webdev,chrome
---

This years Google IO is full of awesome new tech, but one I am most excited about is the effort to "close the gap" between web and native.

The livestream presentation isn't up yet, but you can access the Codelab here:
https://codelabs.developers.google.com/codelabs/web-capabilities

There's also more information (under the title "Creating a more powerful web") here: https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html

By the sound of it, most of these API's are scheduled for Chrome 78+ so we've still got a way to go, but it all sounds very promising.

*What are your thoughts?*
Trick how to replace path module with URL for path resolution
Tags: javascript, node, url
Published: 2019-05-09 01:17:20

---
title: Trick how to replace path module with URL for path resolution
published: true
description: Example of how to use global URL class to replace path.resolve().
tags: javascript, node.js, URL
---

This is a tiny trick which could be useful when you need to resolve paths and make it in a crossplatform way. This code has no dependencies what makes its' usage extremely simple and cheap. Also such code could migrate from Node.js to a browser without dependencies bundling: no browserify, rollup or whatever is needed.

The trick is in using `file:` protocol in URL constructor.

Well, let's take an example:

```javascript
const path = require('path')

const absPath = path.resolve('/some/root', '../index.js')
```

And replace it with:

```javascript
const absPath = new URL('../index.js', 'file:///some/root/').pathname
```

In both cases we receive the same `absPath` value:

```
/some/index.js
```

**Note** that built-in `fs` module accepts [URLs as paths](https://nodejs.org/dist/latest-v12.x/docs/api/fs.html#fs_url_object_support). Thus in cases when you need to use resolved path within the module, it's possible to just use a URL as argument:

```javascript
const absPath = new URL('../../hello.txt', 'file:///project/root/')

fs.writeFileSync(absPath, 'Hello, World!')
```
Trying Flutter Web
Tags: flutter
Published: 2019-05-09 00:05:09

---
title: Trying Flutter Web
published: true
description: Trying flutter web
tags: #flutter
---

Google just released flutter for the web. This is awesome. With flutter, you will be able to use a single codebase to develop iOS App, Android App, Desktop App, Web and Embedded 🌟

![flutter multi platform](https://techcrunch.com/wp-content/uploads/2019/05/Screen-Shot-2019-05-01-at-9.19.45-AM.png)

We'll give it a shot

# Getting Started

### Install Flutter / Upgrade Flutter

Follow the installation path here on [Flutter Official Docs](https://flutter.dev/docs/get-started/install)

Or just upgrade it if have ever installed it

```bash
flutter upgrade
```

Reference:

- [Install Flutter](https://flutter.dev/docs/get-started/install)

### Create new project

You can either clone `flutter/flutter_web`. like so

```bash
# Clone
git clone https://github.com/flutter/flutter_web

# cd into example dir
cd flutter_web/examples/hello_world

# Activate web build tool
flutter packages pub global activate webdev
```

Or just use Visual Studio Code. Install `Dart Code` & `Flutter` Plugins.

And then `cmd + shift + p` (on mac) or `ctrl + shift + p` (on windows/linux).
And type `>Flutter: New Web Project`

![vscode-opening-flutter](https://muhajir.dev/static/b15997983197d085c3a6bca5bfefee8d/a808b/vscode-opening-flutter.png)
After it's done. Go to `main.dart` and press `F5`(Debug shortcut) on your laptop. Or Press ▶️ on Macbook Pro Touchbar

That's it. Look at this beauty 💙

![flutter-web-demo](https://muhajir.dev/static/a9fcc6fa94760db653b49a711f9ff9c8/a808b/flutter-web-demo.png)

I'll post more updates about flutter web. I'll let you guys know via my twitter [@muhajirdev](https://twitter.com/muhajirdev)

*Originally published on https://muhajir.dev/writing/trying-flutter-web/*
TIL: Array.from has a second argument
Tags: javascript
Published: 2019-05-13 19:54:33

---
title: TIL: Array.from has a second argument
published: true
tags: javascript
canonical_url: https://www.stefanjudis.com/today-i-learned/array-from-has-a-second-argument/
---

This post is a rather quick one. I followed a [Twitter conversation by Surma from Google and Andrea Giammarchi](https://mobile.twitter.com/WebReflection/status/1126183454666838018) in which Andrea mentionied that `Array.from` accepts a second argument. I heard this fact a few times before but always forgot it again. Let's hope I'll remember this fact the next time I want to create and transform an Array out of something.

```javascript
console.log(Array.from([1, 2, 3], x => x + x));
// [2, 4, 6]
```

The snippet they discussed showed functionality to call a `callback` X times.

```javascript
// call a callback `length` times
Array.from({length}, () => callback())

// or generate a random emoji Array
Array.from(
  {length: 7},
  (v, i) => String.fromCodePoint(
    129300 + Math.floor(Math.random() * 20)
  )
);

// [ '🤡', '🤗', '🤥', '🤛', '🤤', '🤦', '🤔' ]
```

You can read more about `Array.from` [on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
We're all internet hoarders
Tags: discuss
Published: 2019-05-12 08:27:35

---
title: We're all internet hoarders
published: true
tags: discuss
canonical_url: https://tyhopp.com/notes/internet-hoarders
---

Over the past few years I’ve moved around a lot, living in Los Angeles, Seoul, Beijing and now Singapore. Over the course of these moves I pared down my belongings, so now everything fits in just two large pieces of luggage.

But on the internet, this is so much more difficult to do. Most of us have more than a few suitcases worth of accounts and user data floating around out there. More so, even if we want to toss out some of these things, we usually can’t do it quickly or easily. For each account,

- Log in (~30 seconds)
- Reset password? (~1-2 minutes)
- Export user data? (~1-2 minutes)
- Delete account (~1-2 minutes)

That’s 5 minutes per account. Now multiply that by all your accounts, of which I have, maybe 20 or 25. Now imagine you get stuck in a loop trying to reset a password or retrieve an old email address in a janky auth flow (Microsoft, looking at you).

🤯 If only we could just `rm -rf accounts`

But the saga continues. Besides closing down old accounts, what about changing all your passwords to unique, secure ones and storing them in a password manager? I’ve been down that road already. Estimate many more days or weeks.

The point is, It’s really hard to have just two suitcases worth of internet stuff because it lives in so many guarded places. I’m a fan of new projects emerging from this line of thinking like [Solid](https://solid.mit.edu), but it may be some time before every user is savvy enough to have something like their own personal “pod” or cloud.

That being said, I’ve been thinking about a few actionable targets we can observe as developers that can help new apps avoid adding to this unwelcome trend:

- Do not require authentication, or if absolutely necessary, require only an email address.
- Store data locally or in a cloud already owned by the users.
- If data is stored remotely, make user data export and deletion as readily accessible as possible.

If all goes well, I plan on implementing these ideas in the side project I’m working on now. As for the rest of the apps out there that we depend on daily, the only way is to painstakingly reduce our dependency until cleaner alternatives are built.

Cheers! 🍻
React as templates for your server side applications
Tags: javascript, react, showdev, webdev
Published: 2019-06-09 06:58:13

---
title: React as templates for your server side applications
published: true
tags: ['javascript', 'react', 'showdev', 'webdev']
canonical_url: https://learnwithparam.com/blog/react-server-side-rendering-as-views-or-templates/
---

You might have used several template engine along with your web frameworks. Common template engines used for websites are,

- `ejs`
- `jade`
- `jinja2`

For last few years, React has caught a lot of attention among developers through various framework.

In this article, we are going to discuss how react can be used as template engine.

## ReactDomServer

`ReactDomServer` has methods to help compile your react components as string or static HTML markup.The methods are,

- renderToString
- renderToStaticMarkup

### renderToString

- `renderToString` creates and return HTML string out of your component passed to it.
- `renderToStaticMarkup` creates static Markup out of your component passed to it.

#### whats the difference 😅

Yes both does the same, there are few differences.

- Use `renderToStaticMarkup` to create static HTML without any react based markup added to it. It can be used as React to HTML conversion, static page generation from react etc.
- Use `renderToString` creates extra DOM attributes related to react and help the client side react to make use of it. It is widely used for Universal rendering. The first load happens from server through renderToString and then client side react make use of the attributes it generate and take over the control.

### What to use for template rendering 🤔

Depends on the need of your website, generally `renderToStaticMarkup` is faster and without any overload if you didn’t want to use react in browser.

#### Example code

```
/*
    - options are props from server to your react templates
    - component is your root component (eg., Layout of the page)
*/
let component = component.default || component;
let markup = ReactDOMServer.renderToStaticMarkup(
  React.createElement(component, options)
);
// whatever way you return HTML in your framework
return markup;
```

Hope this helps. Next time, you can choose react as your template engine for your server side rendered projects. 😎
Fusuma which can create slides with MarkDown easily has been released.🎉
Tags: javascript, slide, react, markdown
Published: 2019-05-08 23:43:26

---
title: Fusuma which can create slides with MarkDown easily has been released.🎉
published: true
description: Introduce Fusuma
tags: #javascript, #slide, #react, #markdown
---

---

[hiroppy/fusuma](https://github.com/hiroppy/fusuma)

## What is Fusuma?

Fusuma is a CLI providing development environment, production build, deploying, exporting as PDF, and etc.
fusuma is a bridge which converts MarkDown to HTML, also it wraps configure(e.g. babel, webpack) like create-react-app.

## Features
- Development environment (webpack-dev-server)
- Production environment (including optimization)
- Deploys to GitHub Pages
- Exports as PDF
- Supports for SNS and OGP
- Presenter mode

You can get cool slides just doing the following.

```shell
$ npm i fusuma -D
$ npx fusuma init
$ mkdir slides && echo '# Hello😄' > slides/title.md
$ npx fusuma build
```

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

**just write in MarkDown and execute with CLI😍**

## Slide Library

Fusuma uses WebSlides which have many components and css-classes and so beautiful.

[WebSlides - Making HTML Presentations Easy](https://webslides.tv/#slide=1)

Please see the sample slides.😍
Also, you can overwrite WebSlides's CSS.

## Writing in MarkDown

If you write below, you'll get slides which have 2 pages.

```markdown
## First Slide
Hi!
- -
## Second Slide
Hi!
```

## Expansion

You can extend JavaScript and CSS to overwrite WebSlides.

## Presenter Mode
Fusuma has the mode for presenters. The image below is for presenters.

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

Fusuma is compatible with [Presentation API](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API), but you can also use this mode if you use browsers which don't have Presentation API because Fusuma can fallback to using localstrage.

### Presenter Note

If you write on the slide as follows, you can see this as the note.

```markdown
<!-- note
Hi!
-->

## Hello😁
```

## Sample Slide and Repository


slide: https://hiroppy.github.io/fusuma/intro
repo: https://github.com/hiroppy/fusuma/tree/master/samples/intro


---

I think that Fusuma is useful when you want to create slides quickly.✨

Enjoy😍
Why use WCF?
Tags: healthydebate, dotnet, wcf
Published: 2019-05-08 23:28:49

---
title: Why use WCF?
published: true
tags: #healthydebate #dotnet #wcf
---

I was reading through the comments on this amazing MS announcement.

[Introducing .NET 5](https://devblogs.microsoft.com/dotnet/introducing-net-5/)

Amongst them I found a sentiment of some posters: frustration that WCF was being "abandoned". For example.

> Please support server-side WCF. If you don't, you're marooning entire classes of apps.
> - Chris Benard

Having used WCF lightly in the past, I was completed flabbergasted that people were upset about it not getting ported to .NET 5. Honestly, I thought the tech was already abandoned by the larger community a while now.

Later someone linked [a github issue](https://github.com/dotnet/wcf/issues/1200) about this, which was eventually locked for being too heated. I read through all the comments on the issue. I get that people are concerned about interop with legacy applications. But I still don't see why I would create a new WCF service in 2019 on .NET Core. In other words, why would you want to carry that tech forward into .NET 5?

A lot of comments said that it does a lot for you. But many of the features listed either weren't clear to me why I would use them, or were just bad ideas -- like cross service transactions (due to scalability/service-coupling problems). And another portion of them have more standard/interoperable alternatives.

I was just curious if someone who used it out there in internetland could give me a few scenarios where it really shined. For example, some people say scalability, but don't elaborate on what they mean. (Service-level scalability? Developer scalability?) Or hosting the same service on HTTP and UDP -- what scenario has you doing that? Etc.

I suspect there could be some scenario that I am missing (aside from legacy interop). And I genuinely want to understand the ways in which people use it that make it irreplaceable to them.

Is it a case of wanting to keep using the WCF abstractions that you took pains to learn? Or is there really some core scenario that nothing else covers? I saw several people mention this, but there seemed to be no clear example/explanation to that effect. I would love to see some.

----

### Update

Apparently, Microsoft has decided to give to the code for WCF (and WF) to the open source community.

[Supporting the community with WF and WCF OSS projects](https://devblogs.microsoft.com/dotnet/supporting-the-community-with-wf-and-wcf-oss-projects/)
No duplicates challenge in Elm
Tags: elm, challenge
Published: 2019-05-08 21:41:12

---
title: No duplicates challenge in Elm
published: true
description: No consecutive duplicates, a challenge from 99 Elm problems.
tags: elm, challenge
---

[There is a 99 Elm problems book](https://johncrane.gitbooks.io/ninety-nine-elm-problems/content/) (originally was for Prolog).

Write a function to remove consecutive duplicates of list elements.

```
noDupes [1, 1, 2, 2, 3, 3, 3, 4, 5, 4, 4, 4, 4]
    == [1, 2, 3, 4, 5, 4]
```

I'm doing something wrong here. Am I on the track or completely off track?

```
noDupes : List a -> List a
noDupes list =
    case list of
        [] -> []
        x::y::xs ->
            if x == y then
                x :: noDupes xs
            else
                x::y::xs
        x::xs ->
            if x == xs then
                x :: xs
            else
                x
```
The compiler already gave me a heads up that I'm comparing an element to a list:

```
17|             if x == xs then
                   ^^^^^^^
The left side of (==) is:

    a

But the right side is:

    List a

Different types can never be equal though! Which side is messed up?

Hint: Did you forget to add [] around it?
```

Interesting I just wrapped the x in [x]. But I now have the second the last case to deal with.
Agorakit is looking for more developers
Tags: contributorswanted
Published: 2019-05-08 21:19:05

---
title: Agorakit is looking for more developers
published: true
description: Agorakit is Github for activists
tags: contributorswanted
cover_image : https://thepracticaldev.s3.amazonaws.com/i/c9kmhbaxptqikx84euff.png
---

Agorakit is web-based, open source groupware for citizens.
By creating collaborative groups, people can discuss topics, organize events, store files and keep everyone updated as needed.
Agorakit is a forum, calendar, file manager, mapping tool and email notifier. 

Fist have a look at our presentation website : https://agorakit.org

Then, you'd like to contribute to agorakit? Thank you !

## You are a communication & support person?
- Talk about the project to people who might need it
- Install it for non technical users/friends/groups
- Help on the translations / add new translations
- Write end users documentation
- Enhance the presentation website with pictures and better texts. It's all there waiting for your pull requests : https://github.com/philippejadin/agorakit-website
- Support existing users (I'm considering the creation of a support forum using... agorakit, let me know what you think)
- Send me an email if you use the tool or are considering it. I love feedback! (info (at) agorakit.org)

> There are tons of way to contribute, everything is highly appreciated.

## You are a developer proficient with laravel/php/html/css/js?
- You are a backend developer with experience of the Laravel framework: add new features, fix bug, write tests, document everything. I happily accept pull requests if they pass unit tests and follow the project philosophy
- You are a frontend developer with experience of the Laravel framework: the current UI is not pretty, make it brilliant. Fix UX as you see fit. I happily accept pull requests if they pass unit tests and follow the project philosophy. We don't want the project to become a one page app powered by the latest "à la mode" js framework.
- If you have some time to give to this project, there are already some issues to fix (see. https://github.com/philippejadin/agorakit/issues). Whether you have one hour per day or one hour per month, help is really appreciated! And remember, "talk is silver, code is gold" :-)
- Let's talk in the issue queue if your idea involves big changes.
Learning R: Rant 2
Tags: r, datascience, rant
Published: 2019-05-08 19:57:05

---
title: Learning R: Rant 2
published: true
description: 
tags: #r #datascience #rant 
---
Continuing my rant series while I am learning R. R is pretty much like Perl in terms of the philosophy that they follow; that is "There Is More Than One Way To Do It (TIMTOWTDI)". Although I appreciate this philosophy as it opens up the possibility of adopting multiple ways of doing the same thing. It becomes problematic when multiple people are working on the same project or worse if you are taking over someone else's project. Understanding the code becomes a pain in the back. Python, in this case, is a good language because it is more readable to a human and there are pretty much-set things on how to solve a particular kind of problem. Packages in R also have too many overlapping functions that mask each other in the order the packages are loaded. Therefore, you always need to be cautious about a function's source before calling it.
💡🤔 Early Thoughts on TypeScript
Tags: typescript
Published: 2019-05-11 14:12:32

---
title: 💡🤔 Early Thoughts on TypeScript
published: true
tags: typescript
canonical_url: https://scottw.com/sa0
---

I have not written enough TypeScript to know if I love it, hate it, or am just indifferent. In building my [first small project](https://github.com/scottwater/urlpic), I found myself fumbling around the types and syntax quite a bit.

<!--more-->

However, in just about every case, where I compiler complained about lack of type or an invalid type it saved me from code that likely would not have worked. Even better, the speed at which you receive the feedback is impressive.