teleren/devto huggingface dataset:
How To Use Typescript To Develop Front-End Visualization Platform
Tags: typescriptmeta
Published: 2019-07-02 06:11:58

---
title: How To Use Typescript To Develop Front-End Visualization Platform
published: true
description: 
tags: Typescript Meta
---

Metadata is data that provides information about other data. Metadata has multiple storage form in different languages, such as .NET Framework portable executable (PE), as well as TypeScript compiled into JavaScript via tsc. We make use of platform modeling tools to generate metadata and store it in the database.


Usually, metadata consists of runtime metadata and design-time metadata. Runtime metadata is similar to TypeScript and .net PE. When the assembly runs, the program framework will provide the description function.


Metadata-driven development is a management concept. As most of front-end developer know, we generally use npm to management our components. However, the information provided by npm is still limited in building a visula modeling platform.

Obviously, we need more information inside the component, such as properties and methods. Whatever, doing is better than saying.

Here are some ideas on implementing it. Our front-end stack is Vue, and I think it also works for React.

 We make some decorators to interfere the building and publishing of Vue component. Our team defined some decorators for visualization web editor, when a component was released, the component-level metadata will be extracted, hence saved design-time metadata on remote server. See below.

1、 we design a decorator to describe the necessary properties for component to provide at design time.

<img src="https://cdn-images-1.medium.com/max/1600/1*GTl8gG88FZy7KXq9ZyJcpg.png" /> 

2、 Our team member develop component with that decorator.

<img src="https://cdn-images-1.medium.com/max/1600/1*B2R45mAB_kTuyJJCCyYEjw.png" />

Not only the properties but also complex types should be ensured as safe description at its runtime. 

<img src="https://cdn-images-1.medium.com/max/1600/1*g7MazPEEOBmB7r9R8pZIhg.png" />

3、 We developed meta-serialize component which made it it easy to extract complex types of metadata. 

<img src="https://cdn-images-1.medium.com/max/1600/1*b8RagbJVEH6XGZiWdM-zkw.png" />

4、 A visual modeling platform was developed for webpage. We made inverse conversion to the metadata and transfer it to a form that can be entered by product manager and operator. Since we regular the metadata for type, the modeling platform ensured the security at runtime. 

<img src="https://cdn-images-1.medium.com/max/1600/1*GUQGKqvNA-DYF0EQT4u0MA.png" />

5、 My partner develop a webpack-plugin to filter the design-time metadata from run-time source code. The design-time metadata is not that useful, but harmful form runtime.

I am very proud and enjoy the process of exploring how to get the design-time metadata for the page modeling platform with the real code examples. The examples here is just a demo. Thank you for reading.
A story of success and guilt
Tags: react, nextjs, typescript, node
Published: 2019-07-02 06:01:52

---
title: A story of success and guilt
published: true
description: 
tags: #react #nextjs #typescript #node
---

Developers, I'd like to share a success story of using open-source technology to build a product.

I started https://archbee.io as a pet project, wanting to learn this obscure thing named SVG. I was mostly a Java backend developer at the time and thought I should step out of my comfort zone and learn to build something cool with it.

Built this thing which was a software architecture diagramming solution. Well... solution was too much to say, it was almost laughable when I launched. But somehow, a small number of people loved it and kept using it. Very small amount of traffic came everyday from me answering some Quora questions, but just enough traffic to keep me going mentally.

The pet project was a really quick vanilla Javascript and Jointjs (a diagramming framework) on the frontend and bare Node.js and MongoDB. All running on a very cheap $10/m Scaleway machine somewhere in Germany :)

After I determined I could make a product people would pay for (knowledge base for dev teams), I started changing my tech options so I could peacefully work on this 10 years and even have other people contributing to this code base.

So I did it. Went with strict mode TypeScript for everything and rewrote the front-end in React and Next.js. Then I was kinda meh about MongoDB and spent another day changing it to Sequelize + PostgreSQL. I couldn’t find a good enough UI for PostgreSQL and I said let’s use MySQL & Workbench in dev and when I deploy I’ll just change the Sequelize driver back to PostgreSQL. As you can probably tell, this didn’t work so I got stuck with MySQL - that’s how I picked it :), but I’m happy it turned out this way, I like it very much. Then I realized I needed to make this whole thing realtime to offer superior user experience and I needed a Redis for PubSub and socket.io. 

I realize I’m riding on open-source and sometimes I feel guilty for contributing almost nothing back. I’ve always said I love open-source but my words didn’t match my actions, and they still don’t.

Does anybody else feel this way?

Check out the latest incarnation of the product I am talking about on ProductHunt! I'd love to hear your thoughts, questions and feedback!

https://www.producthunt.com/posts/archbee-2
https://archbee.io
Making a Relationship with Your Developer 
Tags: testing
Published: 2019-07-02 05:53:14

I find that I generally have a good working relationship with the the developers I do testing for. I also find this isn't always the case for others. It has been bugging me as to why this is happening especially since I've not had issues with either party.

I may have identified the cause, but do not have any anicdotes to back it up. My approach to testing is more a curiosity of implementation. "You implemented a date picker using SVG, how does SVG facilitate that? Are dates even supported in IE? How does SVG scale and keep the event markers in the right place. How did you handle swapping the SVG when users select dark mode?"

This approach opens the door for alternatives being discussed and for modifications that might lend to better testing. Since an SVG will need an associate action handler for each date, I can look at verifying each date has a handler. The developer and I can work together on a solution we will both feel comfortable verifies the functionality. They'd also be welcome to question if my tests fail due to his work or mine and we work out an answer though hypothesis and further testing. 

All of this takes up precious developer time. It also requires a level of understanding for the system beyond just what the user sees. The developer does not have all the answers nor the time to find them, this is where I dig further myself and can even report back my findings.

I transform my relationship from an inherently adversarial grading system to one where we collaborate to reach an end state of quality features making it to production.
Revisiting old topics
Tags: functional
Published: 2019-07-02 05:13:35

---
title: Revisiting old topics
published: true
description: 
tags: #FP
---

When I wrote many of my posts, I'd often only just gotten an understanding of the subject matter. Because of this, I fear some information and terminology might not have been *quite* right. There are probably no major issues, but small mistakes can cause great confusion, e.g. if someone else is using slightly different definitions. People occasionally stumble upon those posts, so it's not just something in the past, damage-is-done kind of deal.

This is why I plan to delete and refactor some old posts, taking the opportunity to make some improvements in their general structure. Apologies for the post necromancy of the coming days.
Flutter Project Structure
Tags: dart, computerscience, flutter
Published: 2019-07-02 04:43:44

As always, I’ll be very straight forward and try to keep the article short, simple and very precise. So that in no time you can learn the things. 😉

To Fully understand flutter, we need to understand its project structure, So we can know which file and folder do what, and why they exist.

##The Files and Folders that we mainly use
---
![](https://cdn-images-1.medium.com/max/800/1*qcmqz3YzSye_SDT_ITcCEA.png)
* This section contains files and folders that we mainly used while developing apps.

####Android and iOS directories

* ***Android*** and ***iOS*** directories hold a complete Android and iOS app respectively, with all their respective files. Whenever you want to implement any platform specific feature you can implement it by going in these directories.

####lib directory

* The ***lib*** directory holds all your dart code used to run your app.

####pubspec.yaml

* pubspec.yaml is a special file. It contains your *app name*, *description*, *SDK version*, *dependencies*, and other important stuff.

####test directory

* The ***test*** directory is for writing tests in dart similar to instrumented tests in Android using Espresso.

###The Files and Folder that we mainly don’t touch

* In 99.99% of cases, we don’t touch these files. As manually edit them can destroy the entire project (expect .gitignore, and README.md 😉).

* .idea directory holds all project specific settings. Settings are stored mainly in the form of XML files. We normally don’t touch these folders.

* The .gitignore file is a text file that tells Git, which files or folders to ignore in a project.

* .metadata, .packages, pubspec.lock are generated by flutter itself. These files are used by the framework itself for internal usages. We normally don’t touch them. As they perform internal tasks.

* README.md is a markdown file mainly used in version control like Git for representing information of other files.

That’s it for project structure guys. Feel free to let me know if I miss something. I’ll love to learn it from you. Also, Check out the dart and flutter section to learn more about them on our publication.

Till Then keep loving your work and keep working lovely. And I’ll surely catch you up in next article. 😊

Jai Hind, Vande Mataram 🇮🇳

Wanna get in touch with me? Here are links. I’ll love to become your friend. 😊

- [My Site] (https://www.jaytillu.in)
- [My Blogs] (https://blogs.jaytillu.in)
- [Twitter](https://twitter.com/jay_tillu)
- [Facebook](https://www.facebook.com/jaytillu.1314/)
- [Instagram](https://www.facebook.com/jaytillu.1314/)
- [Medium](https://medium.com/jay-tillu)
- [LinkedIn](https://www.linkedin.com/in/jaytillu/)
- [Github](https://www.github.com/jay-tillu)
- [Stack overflow](https://stackoverflow.com/users/8509590/jay-tillu)
or just mail me at jd.tillu@gmail.com
Flutter Compilation Process
Tags: dart, computerscience, flutter
Published: 2019-07-02 04:24:38

While learning any framework or Programming language its very necessary to understand how platform complies your code. How the whole compilation process is done. It gives you more understanding of platform and core programming concepts. Next Step in our journey towards learning Flutter is to understand flutter’s compilation process and how flutter creates its single code base magic. So let’s get started.

Any app in the Flutter is created with the help of three languages Dart, C and C++. Here you can also tell that every flutter application is a combination of these three language’s code.

####For which purpose these three languages are used ?
Here Entire Flutter framework is created in Dart and it is also used by us to develop an app. Here also notice that we do not directly use C and C++ code to write apps, instead, C and C++ code is used in Graphic rendering engine and Dart Virtual machine to perform their tasks.

So now let’s understand how iOS and Android compile these three codes.

##How flutter code compiles for Android
---
* Graphics Engine’s C and C++ code are compiled with the help of Android’s NDK (Native Development Kit).

* The dart code both SDK’s and ours are compiled through AOT (Ahead-of-Time) compilation process to native ARM and x86 libraries.

* After successful compilation, the APK file is generated.

* Any widget rendering, input-output, event handling and so on is done by compiled app code.
* Here notice that Debug mode builds use a Dart virtual machine to run Dart code in order to enable stateful hot reload.

##How flutter code compiles for iOS
---
* Graphics Engine’s C and C++ code are compiled with the help of LLVM (Low-Level Virtual Machine).

* The dart code both SDK’s and ours are compiled through AOT (Ahead-of-Time) compilation process to native ARM libraries.

* After successful compilation, the IPA (iOS extension same as APK) file is generated.

* Any widget rendering, input-output, event handling and so on is done by compiled app code.

* Here notice that Debug mode builds use a Dart virtual machine to run Dart code in order to enable stateful hot reload.

*So that is the flutter’s compilation process for both platforms. I think it's pretty easy and straight forward to understand it. If you have any questions please feel free to ask me. And If I miss something please tell me that, I’ll love to learn from you.*

Jai Hind, Vande Mataram 🇮🇳

Wanna get in touch with me? Here are links. I’ll love to become your friend. 😊

- [My Site] (https://www.jaytillu.in)
- [My Blogs] (https://blogs.jaytillu.in)
- [Twitter](https://twitter.com/jay_tillu)
- [Facebook](https://www.facebook.com/jaytillu.1314/)
- [Instagram](https://www.facebook.com/jaytillu.1314/)
- [Medium](https://medium.com/jay-tillu)
- [LinkedIn](https://www.linkedin.com/in/jaytillu/)
- [Github](https://www.github.com/jay-tillu)
- [Stack overflow](https://stackoverflow.com/users/8509590/jay-tillu)
or just mail me at jd.tillu@gmail.com
The Best way to Structure Node.js App
Tags: node, javascript, tutorial, beginners
Published: 2019-07-02 03:59:06

---
title: The Best way to Structure Node.js App
published: true
description: 
tags: #node #javascript #tutorial #beginners
---

I found an article about structuring the backend for REST API’s which can be extended to Graphql.


Here is the link - https://overflowjs.com/posts/Structure-Nodejs-App-Fractal-Pattern

and here is the code base to refer - https://bitbucket.org/dg92/task_mangement_final_quadrant/src/master/

Thanks and have a happy read!
Error connecting to agent when in screen
Tags: ssh, agent, screen
Published: 2019-07-02 03:48:03

---
title: Error connecting to agent when in screen
published: true
description: How to fix the error connecting to agent error when attaching to an old screen session
cover_image: https://i.stack.imgur.com/g5ggq.jpg
tags: ssh,agent,screen
---

### Situation

I got an _"Error connecting to agent"_ error when attaching to an old `screen` session the other day, but didn't find a good article on how to fix it, when searching with both phase of "Error connecting to agent" _and_ "screen". So I decided to write about it so the next person knows how to fix such problem in the future. 

### Solution

The solution is quite simple, actually, and here is exactly how to do it. 

- Before attaching to the old `screen` session, do `echo "$SSH_AUTH_SOCK"`.
- After attaching to the old `screen` session, do `echo "$SSH_AUTH_SOCK"` again. You should see that the values are different in the two cases.
- Fix `SSH_AUTH_SOCK` with the correct value, which is the one before attaching to `screen`. 

That should fix the `Error connecting to agent` problem.

Once again, 


```sh
# after logged into remote host, 
$ echo "$SSH_AUTH_SOCK"
/tmp/ssh-2HsGhzu77S/agent.125711

# attaching to the old `screen` session
screen -r old_session

# get into screen
$ echo "$SSH_AUTH_SOCK"
/tmp/ssh-vosa42Ualz/agent.22985

$ ssh-add -l
Error connecting to agent: No such file or directory

# The SSH_AUTH_SOCK is no longer there. Point to the new one
SSH_AUTH_SOCK=/tmp/ssh-2HsGhzu77S/agent.125711
```

Now, verify with another `ssh-add -l`, which shall now output what it was before attaching to the old `screen` session. 

All set!

### Credit

The cover image is obtained from [TechRepublic](https://www.techrepublic.com/article/how-to-use-ssh-agent-to-make-working-with-secure-shell-more-efficient/).
iTerm2 Shortcut Keys
Tags: iterm2, productivity, tips
Published: 2019-07-02 03:39:32

---
title: iTerm2 Shortcut Keys
published: true
description: Shortcut Keys for iTerm2. Skip to Beginning and End of Line. Skip Between Words. Delete Single Word. Delete Entire Line.
tags: iTerm2, productivity, tips
---

iTerm2 is one of the most popular terminals out there for developers and programmers. Great as it is, the default shortcut keys can be somewhat lacking. You can add your own shortcut keys under your Profile to make iTerm2 do some amazing things.

<img src="https://media.giphy.com/media/MXd4zQQvDsg93ZMoms/giphy.gif" alt="">

**First, go to iTerm2 > Preferences > Profiles > Keys**

Here you can see the current Key Mappings. Click on the "+" button to add a shortcut combination. You'll need to enter the correct Hex Code for some of the Actions. Here is a visual:

<img src="https://content.screencast.com/users/hunter1291/folders/Jing/media/712134d0-2383-49ab-be3d-c984fe3f7054/00000003.png">

Here are the keys I've mapped for myself:

**Skipping to Beginning and End of Line:**

<img src="https://media.giphy.com/media/XAyUMosNkO4tOx9suX/giphy.gif">

```
// Skip to Beginning of Line
command + left-arrow
Send Hex Code
0x01
```

```
// Skip to End of Line
command + right-arrow
Send Hex Code
0x05
```

**Skipping to Left and Right of a Word:**

<img src="https://media.giphy.com/media/XE0mreHUkRtBYK2slw/giphy.gif">

```
// Skip Left of Word
option + left-arrow
Send Escape Sequence
b
```

```
// Skip Right of Word
option + right-arrow
Send Escape Sequence
f
```

**Delete Single Word:**

<img src="https://media.giphy.com/media/MXd4zQQvDsg93ZMoms/giphy.gif">

```
// Delete Single Word
option + delete (The shortcut combo will look like ⌥←Delete)
Send Hex Code
0x17
```

**Delete Entire Line:**

<img src="https://media.giphy.com/media/Lr3XZTmAKbuBIdLiAG/giphy.gif">

```
// Delete Entire Line
command + delete (The shortcut combo will look like ⌘←Delete)
Send Hex Code
0x15
```

Hopefully you find these shortcut keys useful! For more tips and tricks on web development, check out my blog at https://codebushi.com
Where are my unfinished posts?
Tags: help, question
Published: 2019-07-02 02:41:24

---
title: Where are my unfinished posts?
published: true
description: Where is my unfinished post?
tags: help,question
---

I started to write a post this morning but set its `published:` to `false`, as I haven't finished it. 

But now, when I try to continue, I can't find it anymore -- the link https://dev.to/suntong only list my ***published*** posts. 

Where can I find my _unpublished_ posts?
Early Bird Tickets On Sale Now
Tags: conference
Published: 2019-07-02 02:31:42

A limited number of [early bird tickets](https://ti.to/devfestwi/2019) to DevFest WI are on sale starting today! Get your early-bird ticket for $50. That's 50% off the standard ticket price of $100.

Your ticket to DevFest WI gets you a day of learning, networking, and community building at Madison's Overture Center. Excellent speakers, local and national, will share their expertise and experience covering the different phases of the development cycle, from building a team to deploying a product. Meet people, be inspired, and have fun. DevFest WI is a positive, inclusive conference for all technologists.

Please consider using this early-bird discount as an opportunity to support our community partner [Maydm](https://maydm.org/). At checkout, you can make a donation to Maydm.
Removing React from Gatsby
Tags: gatsby, javascript, remove, react
Published: 2019-07-02 02:01:25

---
title: Removing React from Gatsby
published: true
description: Learn about 2 new Gatsby plugins that make removing React from a GatsbyJS site easy.
tags: gatsby, javascript, remove, react
---

Recently with help from my coworkers I released 2 new Gatsby plugins that make removing React from Gatsby a lot easier. Your probably screaming through your monitor right now **WHY WOULD YOU REMOVE REACT** and I want to point you to another [post of mine](https://dev.to/itmayziii/better-performance-using-dynamic-code-splitting-in-gatsby-with-loadable-components-6am). This article explains a lot of trouble we went through to make the bundle sizes smaller for our App but at the end of the day these optimizations were not enough for our requirements. The company that I work for demands a very fast website that performs well on older mobile devices and React is simply too much Javascript for our needs.

Anyways here is the 2 plugins.

1. [Remove Javascript Plugin](https://www.npmjs.com/package/gatsby-plugin-no-javascript) - Does what it says and removes the Javascript files that Gatsby generates but not _all_ javascript.

2. [Add Webpack Entry](https://www.npmjs.com/package/gatsby-plugin-webpack-entry) - Adds a webpack entry point so that you can still include some javascript on your page that is not React. This entry point goes through the Gatsby webpack configuration as normal and will be auto hashed and added to your HTML.

I would encourage anyone who wants to try these plugins out to first read the NPM page. With the combination of these 2 plugins we were able to reduce our Javascript footprint on our pages from 190KB to around 20KB which resulted in a huge performance boost. 

### Sidenote

One nice benefit of removing React is that your React code simply becomes your view layer that runs only on the server and all your components become simple functions with no state, lifecycle, or event management. **I do not recommend using these plugins unless your javascript bundle size is super important to you** These plugins go against how Gatsby wants you to use Gatsby (although these plugins are not hacks and simply implement Gatsby's APIs).
Connect to OracleDB from NodeJS?
Tags: help, oracle, node
Published: 2019-07-02 01:30:09

---
title: Connect to OracleDB from NodeJS?
published: true
description: This feels impossible 😩
tags: help,oracle,node
---

I currently use Java ADF REST web services to access the data in a bunch of legacy Oracle databases. It's slow, static, one dimensional, and a huge pain point. I use NodeJS for the application servers, so I was hoping to implement some cleaner, more dynamic APIs to interface with the Oracle databases there.

However, I cannot, for the life of me, figure out how to connect to this database from NodeJS. I can get to the database via SQL Developer. I have a Data Source set up in the integrated WebLogic Server that ships with JDeveloper for the current web services that (seemingly) uses all the same information. I have all the information: the hostname, the username, the password, the port, and the SID. I've gotten the InstantClient installed and added to my PATH on my Mac. No configuration of this information seems to work properly in NodeJS. I'm using [node-oracledb](https://www.npmjs.com/package/oracledb) version 3.1.2 on NodeJS v10.15.3. My connection object looks like this:

```javascript
{
  user: 'my_username',
  password: 'my_password',
  connectString: 'app.company.com:port:database_name'
}
```

The above configuration results in the error:

`Error: ORA-12545: Connect failed because target host or object does not exist`

So something is clearly wrong with my connection string. I have tried multiple permutations on the `connectString` as well, including:

* `app.company.com:port/database_name`
    * `Error: ORA-12514: TNS:listener does not currently know of service requested in connect descriptor`
* `jdbc:oracle:thin:@app.company.com:port:database_name`
    * Works with SQL Developer and WebLogic Server Data Source, but produces error `ORA-12514` when used in NodeJS

I'm grasping at straws. All of the information I've found has been so dense as to be basically useless. I'm not a Java developer. I've never worked heavily with Oracle databases before. I'm sure there is some strange, arcane configuration _thing_ that I'm missing, but I don't even know what questions to ask. Literally _any_ additional information would be incredibly useful.