teleren/devto huggingface dataset:
Settings Sync Paid Issues  - Fix & Earn - Oct 2018
Tags: opensource, bounty, vscode, contributorswanted
Published: 2018-10-23 10:09:53


#### Fix issues and earn money.

Previously I wrote an article for guys who are willing to contribute on Open Source that how can anyone contribute in [Visual Studio Code Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) that only required skills are Node JS / TypeScript.

{% link https://dev.to/shanalikhan/settings-sync-needs-your-contribution-165l %}


Some issues that are opened in the repository are paid one. For details of each issue open in GitHub.


##### 1. Compare Local & Gist Settings | Show & upload only changes

Currently standing at **$20**.

a. **[GitHub Issue](https://github.com/shanalikhan/code-settings-sync/issues/508)**
b. **[IssueHunt Bounty Link](https://issuehunt.io/repos/47984369/issues/508)**


##### 2. Long startup activation time on the first start

Currently standing at **$40**.
Webpack integration can help you fixing it.

a. **[GitHub Issue](https://github.com/shanalikhan/code-settings-sync/issues/656)**
b. **[IssueHunt Bounty Link](https://issuehunt.io/repos/47984369/issues/656)**


#### How to Earn

If you want to work, send me Pull Request with time frame.
Payment will be done automatically when your PR is accepted.
What is Java 9 Flow API and what is it's significance?
Tags: explainlikeimfive, java, programming
Published: 2018-10-23 09:59:02

---
title: What is Java 9 Flow API and what is it's significance?
published: True
description: Explain Flow/ Reactive.
tags: #explainlikeimfive #Java #Programming
---

Explain Java 9 Flow API like I am 5(or 10).
Create 360° Image Viewer – A-Frame VR Development Part 3
Tags: virtualreality, 360imageviewer, aframe, panorama
Published: 2019-05-25 17:25:43

---
title: Create 360° Image Viewer – A-Frame VR Development Part 3
published: true
tags: Virtual Reality,360 image viewer,A-Frame,panorama
canonical_url: https://hasanali.me/create-360-image-viewer/
---

![](https://hasanali.me/wp-content/uploads/2018/10/360-image-viewer.png)

This is our first virtual reality project using A-Frame VR Framework. I’ll be making a 360° image or photosphere viewer using A-Frame. It will be super easy and we’ll also add interactive elements to it. So lets started

360° Image Viewer in A-Frame

1. First, create an HTML file with basic Doctype code and add the a-frame.js file to it

> <script src=”https://aframe.io/releases/0.8.0/aframe.min.js”></script>

![360-image-viewer-a-frame-vr](https://hasanali.me/wp-content/uploads/2018/10/01-2-1024x559.png)

2. Now download any 360 images or photosphere from Google or anywhere. I am using this image (https://drive.google.com/drive/folders/0Bx2k1bqMoviiWW9hQ2ktM05zVk0)

3. Now to view this image in A-Frame we’ll create a scene and add ‘<a-sky></a-sky>’ primitive with an attribute src link to that image

4. Now if you open the HTML file you’ll see your 360 image, which you can move around by dragging the mouse.

![](https://hasanali.me/wp-content/uploads/2018/10/02-1-1024x522.png)

That’s how easy in A-Frame to view 360 image. Now let’s add text to the 360 image.

To add text we’ll use <a-text></a-text> primitive. I will add the following code in the scene.

> <a-text value=”VR Pakistan” width=”10″ position=”0.5 1.25 -1.5″  
> rotation=”0 5 0″></a-text>

Now after refresh, you will text with the 360 image.

![360-image-viewer-a-frame-vr](https://hasanali.me/wp-content/uploads/2018/10/04-1-1024x522.png)

In the next tutorial, I’ll show you how you can make a virtual tour experience using A-Frame and make interactive points which can change 360 images by click on them.

Source code on Github : https://github.com/hasanaliqureshi/A-Frame-VR-Development/blob/master/A-Frame-VR-Development-Part-3.html
Vue conditional render based on breakpoint
Tags: vue, npm, javascript, showdev
Published: 2018-10-23 08:35:31

---
title: Vue conditional render based on breakpoint
published: true
description: Vue directive for conditional rendering element on screen smaller than breakpoints
tags: vue, vuejs, npm, javascript, showdev
---

Good day all! I was create directive for conditionals renders based on screen size, support resize event.
https://github.com/PxyUp/vue-not-visible
https://www.npmjs.com/package/vue-not-visible
Demo: https://pxyup.github.io/vue-not-visible/index.html
Diary - 2018.10.23
Tags: productivity, learning, journey, javascript
Published: 2018-10-23 07:43:03

---
title: Diary - 2018.10.23
published: true
tags: productivity, learning, journey, javascript
---

# Object Rest Property

A nice little tool to "split" objects into something new.


```js
// it's me
const user = {
  id: 1,
  email: 'mario@mariobros.com',
  firstName: 'Mario',
  job: 'plumber',
};

// we want to get the user without its email (privacy!)
const { email, ...userWithoutEmail } = user;

console.log(email); // mario@mariobros.com
console.log(userWithoutEmail); // ​​​​​{ id: 1, firstName: 'Mario', job: 'plumber' }​​​​​
```
Hello world
Tags: helloworld
Published: 2018-10-23 07:37:37

---
title: Hello world
published: true
description: 
tags: #helloworld
---

```brainfuck
++++++++++[>+++++++>++++++++++>+++<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.
```
Can’t crack that programming problem? 
Tags: productivity, coding, programing
Published: 2018-10-23 06:04:24

Think back to the last time you had that really tough programming problem you couldn’t crack.

If you’re like me, you may have spent a few hours trying to brute force a solution. Then, in despair and frustration, eventually, you gave up for the night.

And then the next morning, you wake up and the solution is clear as day in your head. You facepalm yourself, rush to your computer, implement it in 15 minutes, and all is well in the world again.

Or this — I work a problem all morning to no avail. Lunchtime hits, so I take my dog for a 30-minute walk. And somewhere along that walk I’ve figured out the solution. I get back home and fly through it the rest of the afternoon.

Look, I realize I’m not saying anything particularly new or profound here. But it absolutely bears repeating because I often forget this too:

**Sleeping and walking are some of the best techniques to improve your work as a programmer.**

(Pro tip: don’t take your phone to bed or on your walks. Your brain needs to be fully disconnected.)

I’m no scientist or expert on how the brain works, but there is plenty of science to back it. The basic premise is that free association and fixation forgetting (letting go of what you’re banging your head on) is crucial to problem-solving. Your brain can put together solutions more effectively when it’s allowed to wander.

This is exactly why “Eat, sleep, code, repeat” is such bullshit. Your brain needs to do something else from time to time (and be rested) to do your best programming.
Math API: LaTeX Math as SVG image
Tags: latex, math, api, showdev
Published: 2018-10-23 01:28:45

---
title: Math API: LaTeX Math as SVG image
published: true
description: Place LaTeX Math equation on anywhere as <img>.
tags: LaTeX, Math, API, showdev
---

I've always wanted to put LaTeX Math equations on a web page where MathJax is not allowed to run inside it.

Spending some time, I made [Math API](https://math.now.sh), that renders LaTeX Math markup into an SVG image.

So you can place your equation on almost everywhere on which you could put `<img>` or Markdown (`![]()`), such as GitHub, Jupyter Notebook or dev.to (here!).


```markdown
![](https://math.now.sh?from=\\LaTeX)
```

![](https://math.now.sh?from=\\LaTeX)


```markdown
![](https://math.now.sh?from=\\log\\prod^N_{i}x_{i}=\\sum^N_i\\log{x_i})
```

![](https://math.now.sh?from=\\log\\prod^N_{i}x_{i}=\\sum^N_i\\log{x_i})


# Inline image

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

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

It is possible to generate an inline equation by changing the query from `from` to `inline`.

```markdown
<img src="https://math.now.sh?inline=\\LaTeX" />
```

# Online Editor

Also, there is the online editor available at https://math.now.sh.

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

# Conclusion

The source code is available on [GitHub](https://github.com/uetchy/math-api).
Give it a try and leave a comment/idea for a new feature.
Angular Virtual Table
Tags: angular, javascript, rxjs, showdev
Published: 2018-10-22 23:54:22

---
title: Angular Virtual Table
published: true
description: Virtual Table based on Material Virtual scroll
tags: angular, JavaScript, rxjs, showdev
---

Good evening, I created virtual scroll table based on material virtual scroll. This table support filtering, sorting and you can easy customize that. Demo included

https://github.com/PxyUp/ng-virtual-table

Demo: https://pxyup.github.io/ng-virtual-table

In future planned so many options like drag and drop, more filter types and more like that. Thanks for any help :)
Module Monday 18: Flex gallery, Quote cards, Nav + sidenav & more
Tags: showdev, opensource, webdev, javascript
Published: 2018-10-22 23:32:54

---
title: Module Monday 18: Flex gallery, Quote cards, Nav + sidenav & more
published: true
description: Module Monday 18
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:f6f6f6,c_pad,h_370,w_880/v1540233989/flex-gallery_g1njct.gif
canonical_url: https://guide.anymod.com/module-monday/18.html
---

## Fast features for any website

Everything below is open source and free to use on any website, web app, or anywhere else. [Anymod](https://anymod.com) lets you quickly add features like these.

Click a mod to see it along with its source code.

## Flex gallery
Showcase your photos in an interactive flexbox gallery.

<a class="btn btn-sm" href="https://anymod.com/mod/bbmba?v=20">View mod</a>

<a href="https://anymod.com/mod/bbmba?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1540233989/flex-gallery_g1njct.gif"/>
</a>

## Quote cards
Your offering is awesome, so show off some great user quotes.

<a class="btn btn-sm" href="https://anymod.com/mod/kolbo?v=20">View mod</a>

<a href="https://anymod.com/mod/kolbo?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1540230550/qc_ciwrcj.png"/>
</a>

## Nav & sidenav
Add a classy nav with no dependencies.

<a class="btn btn-sm" href="https://anymod.com/mod/ooaod?v=20">View mod</a>

<a href="https://anymod.com/mod/ooaod?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1540247823/nav_kqqyqn.gif"/>
</a>

## Twitter timeline
You've been tweeting, now you can embed it anywhere.

<a class="btn btn-sm" href="https://anymod.com/mod/nkdab?v=20">View mod</a>

<a href="https://anymod.com/mod/nkdab?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1539205163/tweets_s7zalr.png"/>
</a>

## Plain table
Because sometimes you just need a basic, nice-looking table without the hassle.

<a class="btn btn-sm" href="https://anymod.com/mod/akakd?v=20">View mod</a>

<a href="https://anymod.com/mod/akakd?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1540249233/table_poozao.png"/>
</a>

<hr>

I post new mods [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
State of Express 2018
Tags: javascript, express
Published: 2018-10-22 23:26:53

---
title: State of Express 2018
published: true
description: What does Express look like in 2018
tags: javascript, express
---

If you are reading this you probably use Express, but it is doubtful you know me.  I started lurking in the Express issue tracker some time around 2014.  The project was already the most popular http framework for Node.js projects, and [TJ Holowaychuk had just announced that he was leaving node](https://medium.com/@tjholowaychuk/farewell-node-js-4ba9e7f3e52b).  

It was a weird time when `3.x` was still getting patches, `4.x` was the current major and the `5.x` branch was new.  I started by contributing small patches and commenting on issues which I had no particular stake in.  There was a short time after the "a potato" incident and when IMB relinquished control and the project was added as the first (and only?) project in the [Node Incubator Program](https://nodejs.org/en/blog/announcements/foundation-express-news/) where [Doug Wilson](https://github.com/dougwilson) setup regular video chats, which I attended all of.

This is the spot where people might think I will say "And we have come such a long way...". But we haven't, and despite what you might think, *this is a good thing*.  The project is still [the most popular http framework](https://www.npmtrends.com/express-vs-restify-vs-koa-vs-hapi-vs-fastify) even though there are a bunch of other options now.  The `3.x` branch is fully dead, but `4.x` is still the major with `5.x` still on the horizon.

So why on earth do I think this is a good thing?  Because it means we are stable.  Most of the software projects I work on are being built to solve business goals, not as an academic exercise or art an project.  And most businesses *don't care what software you use* if it solves the correct problems.  And clearly Express solves the correct problems.

Here are a few of the key points which make Express great at what it does:

- Simplicity: the api is simple and concise, it solves on problem and doesn't go (much) outside its original charter.
- Predictability: when you start a new project, you don't have to worry about re-learning the framework.
- Security: Doug does a killer job with handling security patches. While we do have a group channel for discussion them, it is really all Doug.

So, what is up next?  Express [`5.0` is in process](https://github.com/expressjs/express/pull/2237), and TBQH, could be moving forward more quickly.  But, the changes which make it a major version are really not all that influential for most people, so don't get hung up on it.  The rest I plan on covering in an "Express 2019" post, so stay tuned.
World Wide Web
Tags: webaccessibility, web
Published: 2018-10-22 08:56:11

---
title: World Wide Web
published: True
description: 
tags: Web accessibility, web
---

I’m opara prosper, and i have been building stuffs for the web for some time now…

What i really love about the web is its *ACCESSIBILITY* and *UNIVERSALITY*. The web is for all people’s of the world. The web knows no bounds, doesn't restrict anyone from getting information they desire and It really help’s in promoting my personal mantra “Human knowledge is for everyone”. It is not limited by OS, hardware type or any of the accessibility issues other platforms face. Once you have a web browser you can visit the web and access life changing information's. The mare fact of building something that the world can see is really intriguing, I guess that’s why it’s rightly called the *world wide web(WWW)*

Knowing that the web is accessible to all people, I look forward to improving my skill of building web applications with great user experience so that people can also enjoy their visit to the web. I’m particularly interested in building Interactive web applications, because it accounts a great deal for good user experience on the web.

Moving forward, I’d love to write more and also speak more about:

- Web technologies
- Web accessibility
- User experience focused more around building interactive web applications.

I’d need to go back to work now to be able to achieve this :)
It is OK to keep random things in a single monorepo
Tags: monorepo, javascript, node, npm
Published: 2018-10-22 22:21:34

---
title: It is OK to keep random things in a single monorepo
published: true
description: 
tags: monorepo, javascript, node, npm
cover_image: https://i.imgur.com/9Gh0nDK.jpg
---

For a long time, I was an opponent of monorepos. There are many popular open source contributors that have hundreds of packages on npm and each of those packages have a dedicated GitHub repository. I thought everyone does it this way, so it should be the right way! No?

I started to publish some things to npm as well and after a few years, I have now almost 300 packages in the registry. It took me a long time but I realized, the *majority* of npm packages don't need dedicated repositories.

## Most of the npm packages are almost never updated

Once a package is ready, you will probably never update it again. The only time you will need to update a package is when Renovate or Greenkeeper will open a PR to update dependencies that had major version changes.

So why create a dedicated repository for a package that will have less than 10 useful commits?

## Most of the npm packages never get any contributions

Even popular packages get few contributions. Certainly, you will be *the only* contributor of your non-popular packages.

So why keeping a separate GitHub repository? There will be no other developers that will need admin permissions to a given npm package.

## It is OK, use one repo!

You might think: "but those packages are completely unrelated". And that is true. But that is the only downside: keeping random packages in a single repository. Think about all the advantages:

* fewer notifications from Greenkeeper/Renovate
* less CI setup
* less boilerplate

Additional advantages:

* you can use services that limit the number of repositories you use.
* you can easily migrate all your code to other git servers because there is only one repository to migrate

## How to

My recipe is using the [recursive commands](https://pnpm.js.org/docs/en/pnpm-recursive.html) of [pnpm](https://github.com/pnpm/pnpm) to install all dependencies of your packages and run their tests:

```
pnpm recursive install
pnpm recursive test --workspace-concurrency 1
```

But you may also use [Rush](https://rushjs.io/), [Lerna](https://github.com/lerna/lerna/), or other monorepo managing tools.

To see how I moved some of my packages to a single repo, see [zkochan/packages](https://github.com/zkochan/packages).

## You can always create a dedicated repository later

If one of your packages will receive a lot of attention, you can always move it to a dedicated repository later.

***

Photo by Olav Ahrens Røtne on Unsplash
The Choice of Priorities
Tags: agile, production, management
Published: 2019-08-19 17:20:54

---
title: The Choice of Priorities
description: Discussing the false choice between maintenance vs. shipping.
published: true
tags: agile, production, management 
canonical_url: https://kellen.piffner.com/2018/10/22/choice-of-priorities/
---

<figure>
![A sign post with two one way street signs](https://kellen.piffner.com/img/choice-of-priorities/brendan-church-182747-unsplash.jpg "Which way?")
<figcaption>
<cite>
<a href="https://unsplash.com/@bdchu614?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge">Photo by Brendan Church on Unsplash</a>
</cite>
</figcaption>
</figure>

Recently my daily feed was filled with a discussion about "What's more important? Writing maintainable software, or shipping software?"

There was a lot of back and forth about code quality, technical debt, not being able to sell something that isn't complete, and all the other points you would expect in this type of argument.

In the end, I'm pretty sure "shippability" was "winning", but I want to make a different point: The fact that you're having an argument about it, that many people have strong opinions on both sides, means that _both_ are important.

**Do them both.**

Yes, that's more difficult. But that's how you get better, and it's why people pay more for experienced developers.

(If you're new, though, definitely just get something done and make it better over time. "Don't let perfect get in the way of good enough.")
My two favorite ruby videos on youtube.
Tags: ruby, talks, scraping
Published: 2018-10-22 20:51:44

---
title: My two favorite ruby videos on youtube.
published: true
description: Great Talks
tags: ruby, talks, scraping
---

A premise:

I've become interested working with SQL. One idea that I have discovered is that it's important to learn how to work with real information. What is the best way to get that real information than scraping the web?

What I want is to scrap it, put it into csv and then put it in postgres database.


*****************************************

A talk by Haseeb Qureshi. Very inspiring. He has great presentation skills.

{% youtube ywiwq9IpDEU%}

Haseeb is an interesting individual.

You can actually read this presentation on his [blog] (https://haseebq.com/the-time-i-had-to-crack-my-own-reddit-password/).

His blog is interesting.




*****************************************

The Ultimate Introduction to Web Scraping and Browser Automation

by [Jordan Leigh] (https://twitter.com/AlwaysBCoding).

Absolutely love this video.

{% youtube 1UYBAn69Qrk %}



******************************************
Component hierarchy data model and inspector UI
Tags: go, webassembly, webdev, devlog
Published: 2018-10-22 20:03:44

---
title: Component hierarchy data model and inspector UI
published: true
description: Working on my component hierarchy tool / prototype. Mostly I've been trying to get that data model correct in Go and once that was working and marshaling, I started a new inspector component to dogfood more of the UI framework.
tags: Go, webassembly, webdev, devlog
---
Continuing on my TreeView prototype, I've been experimenting with the actual data model of the Nodes behind the TreeView. Before we had a TreeNode, but this is actually a representation of a more complex Node that has its own tree structure. So I implemented that data model and tied changes in the UI to changes to that data model, since it then creates a TreeNode representation the TreeView component uses.

I also had to make sure this was a serializable data structure. This led to a few iterations but what I have now is very simple. I almost had a separate struct to model how the data would be serialized, but then I'd have three different views of a Node. 

I also brought in Components. First as part of the data model and getting them to serialize correctly. This was tricky because a component can be nearly any struct and we want to unserialize into the right type. So we had to wrap it in a data structure that has the type name, which we can feed into our sort of component factory to get a new instance and unmarshal into that. I also used the `MarshalJSON` and `UnmarshalJSON` interfaces for the first time, letting me partially unmarshal a slightly different representation to get the type name, then unmarhsal the rest after making a component instance. 

Then I was ready to recreate the property inspector the original prototype had. I wanted to recreate this with UI components instead of wrapping that jQuery library from before. This way I could actually dogfood the UI framework more. I ran into a few issues that I was able to fix or workaround, but it is working to the point of listing the field names of the Node and any components it has.

It's been exciting to be able to use my WASM UI framework and things mostly just work. 

{% youtube 0yFRQGgIRec %}
EatTheBlocks Newsletter #12 – Mastering Ethereum from Andreas Antonopoulos, Constantinople fork delayed…
Tags: ethereum, solidity, web3, truffle
Published: 2018-10-22 19:31:45

---
title: EatTheBlocks Newsletter #12 – Mastering Ethereum from Andreas Antonopoulos, Constantinople fork delayed…
published: true
description: 
tags: Ethereum, Solidity, Web3, Truffle
---

I just published the latest issue of the EatTheBlocks Newsletter!

This week: Mastering Ethereum from Andreas Antonopoulos, Constantinople fork delayed...

Post: https://eattheblocks.com/eattheblocks-newsletter-12-mastering-ethereum-from-andreas-antonopoulos-constantinople-fork-delayed/
Video: https://youtu.be/c7yr4At7fI4

If you are a developer interested in learning about Dapp development, Solidity, Truffle, Web3, Ethereum protocol, Token standards ..., you will love this newsletter! Every week I send the 10 MOST INTERESTING tutorials, tips & news for Ethereum developers