teleren/devto huggingface dataset:
What tool/framework/cms/etc do you use to build your own personal website?
Tags: discuss, career, webdev
Published: 2017-08-04 07:11:22

---
title: What tool/framework/cms/etc do you use to build your own personal website?
published: true
tags: discuss, career, webdev
---

My whole web development career has been built around building websites and web applications for other people. I first seriously learned how to code to build a website for a good friend. My first job was at an agency, where I punched out one website after another for clients. I now freelance, where I often create sites for clients from the very beginning stages of design to development and launch. I love going through that entire process with my clients. However, when it comes to creating _my own freaking website,_ I am sad to say I have never been able to have a complete one for very long (longest one was a one pager that lasted about two months out of a dire need to find an internship).

Some time of retrospection revealed some reasons why I struggle with creating my own website:

**1. It's never good enough** - I am always changing my mind. Some thoughts that go through my head: _Which projects should I showcase? Oh I don't like that color scheme anymore. That font doesn't really represent my personality. I need to rewrite my bio again!!_ and the insane list goes on and on and on... 

**2. I can never pick a framework** - Because I developed on WordPress for a long time, every time I think I want to start on working on my website again, my natural tendency is to build it on WordPress. However, with so many cooler sounding frameworks that pop up every few months, I can't help but think that I should try building my site on one of those frameworks so that I could pick up a new framework along the way. The theory is good, but I usually end up in a rabbit hole learning the nuances and the shiny parts of the framework that I end up forgetting about my own website. Then I get distracted by something else and then the site is left unfinished. :(

**3. I don't like updating it** - When I was looking for internships while in college, I did create and launch a very simple one-page website using Bootstrap and a jQuery slider plugin. After I got an internship I never updated it and took it down shortly afterward. Because I created it so fast, I didn't have any process to easily update my work. Therefore, it became too tedious to maintain and **#1 from above** started to happen, so I shut the whole thing down.

I look at other developers' websites and am insanely jealous of their ability to buckle down and get theirs done and done so well. So I'm curious... **what do you guys use to build your own personal website?**
Incrementally migrate your webpack project to TypeScript
Tags: webpack, typescript, javascript, jest
Published: 2018-02-10 22:32:40

---
title: "Incrementally migrate your webpack project to TypeScript"
published: true
tags: webpack,typescript,javascript,jest
canonical_url: 
---

### TL;DR

If you want to migrate to [TypeScript](https://www.typescriptlang.org/) but don’t want to migrate all your code at the same time you can configure [webpack](https://webpack.github.io/) to bundle both TypeScript and JavaScript code.

You can find a demo project&nbsp;[here](https://github.com/bartw/incrementally_migrate_to_typescript).

### How to?

To add TypeScript to a webpack project you can follow these&nbsp;steps:

Install the needed dev-dependencies:

```bash
npm install --save-dev @types/jest awesome-typescript-loader typescript @types/lodash
```

Create a tsconfig.json file to specify that you want to transpile to&nbsp;ES6:

```javascript
{
  "compilerOptions": {
    "target": "es6"
  }
}
```

Add awesome-typescript-loader to your webpack config file and load your TypeScript first through the TypeScript transpiler and then through&nbsp;Babel:

```javascript
module: {
  rules: [
    { test: /\.jsx?$/, exclude: /node_modules/, use: "babel-loader" },
    { 
      test: /\.tsx?$/, 
      exclude: /node_modules/, 
      use: ["babel-loader", "awesome-typescript-loader" }
  ]
}
```

To stop Babel from transforming ES6 module syntax to commonjs you need to update the&nbsp;.babelrc&nbsp;file:

```javascript
{
  "presets": [["es2015", { "modules": false }], "react"],
  "plugins": ["transform-class-properties"]
}
```

Now comes the tricky part: keeping the Jest tests running.  
Some extra configuration is necessary to tell Jest to transpile TypeScript and to have the normal JavaScript run through Babel-Jest.

In your package.json add the following Jest&nbsp;config:

```javascript
"jest": {
  "moduleFileExtensions": ["ts", "tsx", "js", "jsx"],
  "transform": {
    "^.+\\.(ts|tsx)$": "<rootDir>/preprocessor.js",
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  "testRegex": "(/ __tests__ /.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$"
}
```

Create a preprocessor.js file to transpile TypeScript tests:

```javascript
const tsc = require("typescript");

module.exports = {
  process(src, path) {
    if (path.endsWith(".ts") || path.endsWith(".tsx")) {
      return tsc.transpile(src, {}, path, []);
    }
    return src;
  }
};
```

In&nbsp;.babelrc you need to add a separate configuration for the test environment to play nice with&nbsp;Jest:

```javascript
{
  "presets": [["es2015", { "modules": false }], "react"],
  "plugins": ["transform-class-properties"],
  "env": {
    "test": {
      "presets": ["es2015", "react"],
      "plugins": ["transform-class-properties"]
    }
  }
}
```

Now you should be able to start migrating files one by one to TypeScript without breaking tests or&nbsp;builds.
How do you fix cable chaos?
Tags: discuss
Published: 2017-08-04 06:08:53

---
title: How do you fix cable chaos?
published: true
tags: discuss
---

My cable situation has gotten out of hand and I don't know how to fix it?!

![Imgur](http://i.imgur.com/y0YjFdM.jpg)
![Imgur](http://i.imgur.com/iIjxJuB.jpg)

I recently cleaned up my home cinema, but it involves a lot fewer components. My computer setup has all these bits connected together:

- Two desktop PCs (one no longer connected)
- Two laptops (one mainly disconnected)
- PS3 + PS4
- Monitor
- Mike + Preamp
- Webcam (must be connected/disconnected often)
- 2 Mice, Keyboard, 5 PS controllers lying around
- 5 phones, 4 tablets (all disconnected usually, but need to be connected/powered)
- Line mixer, amplifier, CD player, speakers (I need my music!)
- Music keyboard, guitar effects processor, pedals
- 2 routers, phone, KVM switch
- Printer
- Likely some bits that I've forgotten and don't even need anymore

There's well over 100m in cabling, of all sorts, behind my desk.  I keep looking at options to organize it but never found anything satisfactory.  Most organizers seem to assume cables go a long distance before connecting devices, but mostly my devices are close together, and scattered everywhere. There is no regularity to my cable needs.

Has anybody managed to cleanup such a situation?
Final App Submission
Tags: snipcode
Published: 2017-08-04 04:24:08

---
title: Final App Submission
published: true
description: Completion of web app
tags: snipcode
---

This is the last post about this journey of building my web app Snipcode. You can see the source code [here](https://www.github.com/sroy8091/snipcode).

Here is a quick demo of my web app
{% youtube hWaWZ3cPk8o%}

In this journey the things I learned are

- Node.js and how beautiful it is
- Postgresql (Elephants are best friend of developers)
- Codemirror (Web based IDE)
- Some neat practices of writing effective code

I hope after this I still be learning stuff by doing something. Coz it's fun when you create something.

*Here is the index of all the post regarding this series of snipcode developemnt*

[Part I: App Idea](https://dev.to/sroy8091/app-idea-for-hasura-internship)
[Part II: App prototype](https://dev.to/sroy8091/app-prototype)
[Part III: Local Development](https://dev.to/sroy8091/hasura-local-development)
[Part IV: G for Git](https://dev.to/sroy8091/g-for-git)
[Part V: Data Modeling](https://dev.to/sroy8091/its-modeling-time)
[Part VI: Data & Auth APIs](https://dev.to/sroy8091/postman-a-major-tool-for-developers)
[Part VII: Basic Functionalities](https://dev.to/sroy8091/i-love-cookies-expressjscookies)
[Part VIII: App Screen 1](https://dev.to/sroy8091/i-built-it-with-codemirror)
[Part IX: App Screen 2](https://dev.to/sroy8091/app-screen-2)
[Part X: App Screen 3](https://dev.to/sroy8091/search-page-using-postgres-full-text-search-feature)
[Part XI: User Reviews](https://dev.to/sroy8091/improvements-in-my-web-app)
[Part X: Final Submission](https://dev.to/sroy8091/final-app-submission)
Search Page using Postgres Full-Text Search feature
Tags: postgres
Published: 2017-08-04 02:58:39

---
title: Search Page using Postgres Full-Text Search feature
published: true
description: My third screen of web-app SnipCode for searching the snippets.
tags: postgres
---

## Full-Text Search

> In text retrieval, full-text search refers to techniques for searching a single computer-stored document or a collection in a full-text database. Full-text search is distinguished from searches based on metadata or on parts of the original texts represented in databases (such as titles, abstracts, selected sections, or bibliographical references).

-- Wikipedia

It is enough for initial level searching page and thus I chose this for my web app.

## Postgres

I write a very simple SQL to implement this.

```sql
SELECT id, heading, lang, user
FROM code_lang
WHERE to_tsvector(heading) @@ 
to_tsquery('" + key + "') and private=false;
```
![search results](https://thepracticaldev.s3.amazonaws.com/i/agupfed859hr97kdkwsk.png)

Here I am selecting id, heading, language and user from table code_lang. But the where clause is the catch. **tsvector** value is a sorted list of distinct lexemes an on the other hand **tsquery** value stores lexemes that are to be searched for. 

Now **to_tsvector** reduces the document to **tsvector** and similarly, **to_tsquery** normalizes word to **tsquery**. Combining these two with **@@** operator we get whether the queried string(key) is matched or not with the current row and making sure that the matched row is not the private code. Since we can't show it to the search results.

This is how the most basic full-text search is implemented in PostgreSQL.

*Here is the index of all the post regarding this series of snipcode developemnt*

[Part I: App Idea](https://dev.to/sroy8091/app-idea-for-hasura-internship)
[Part II: App prototype](https://dev.to/sroy8091/app-prototype)
[Part III: Local Development](https://dev.to/sroy8091/hasura-local-development)
[Part IV: G for Git](https://dev.to/sroy8091/g-for-git)
[Part V: Data Modeling](https://dev.to/sroy8091/its-modeling-time)
[Part VI: Data & Auth APIs](https://dev.to/sroy8091/postman-a-major-tool-for-developers)
[Part VII: Basic Functionalities](https://dev.to/sroy8091/i-love-cookies-expressjscookies)
[Part VIII: App Screen 1](https://dev.to/sroy8091/i-built-it-with-codemirror)
[Part IX: App Screen 2](https://dev.to/sroy8091/app-screen-2)
[Part X: App Screen 3](https://dev.to/sroy8091/search-page-using-postgres-full-text-search-feature)
[Part XI: User Reviews](https://dev.to/sroy8091/improvements-in-my-web-app)
[Part X: Final Submission](https://dev.to/sroy8091/final-app-submission)


|Liked my post?|
|---------------|
|  [![](https://thepracticaldev.s3.amazonaws.com/i/lsfkqfysa58u59627uy6.png)](https://ko-fi.com/A0A5WBC1)|
Node Package Manager (NPM)
Tags: node, npm
Published: 2020-09-22 10:29:05

---
title: Node Package Manager (NPM)
published: true
date: 2017-08-04 00:00:00 UTC
tags: NodeJS,NPM
canonical_url: https://www.loginradius.com/engineering/blog/node-package-manager-npm/
---

What is This, and Why Should I Care? NPM is a package manager for javascript. It is used to share and distribute code amongst the coding community. There are over half a million packages for free developed and shared to help your JavaScript development. To discover packages click…

   
[Read On](https://www.loginradius.com/engineering/blog/node-package-manager-npm/)
How do you feel about opt-out telemetry in dev tools?
Tags: discuss
Published: 2017-08-03 22:40:26

---
title: How do you feel about opt-out telemetry in dev tools?
published: true
tags: discuss
---

The .NET community has been dealing with this question, since Microsoft shipped its latest platform SDK (.NET Core) with telemetry turned on by default (opt-out). Without asking you, it will send your usage data back to MS. The response from its users has been [overwhelmingly negative](https://github.com/dotnet/cli/issues/3093), but MS chooses to do it anyway. The upcoming version, 2.0, has expanded the telemetry it collects.

I wondered how the broader dev community feels about their build/dev tools sending telemetry without asking. Ostensibly for the best of reasons; to fix bugs and identify most- and least-used features to focus development efforts.

For me, I despise opt-out practices regardless of their reasons or potential benefits. I want to be able to choose to opt-in instead of not knowing that data is being leaked out to the internet. In practice I research each tool and find out how to disable telemetry if present. (This has become a massive chore on Microsoft platforms with operating systems and server applications like SQL all having opt-out telemetry now.) Even if the data is being anonymized and used for good reasons currently, that can change at any time or the anonymization can be insufficient[1]. Data can also be stolen by hackers[2] or just accidentally left out in public[3].

Well that's my opinion. What do you think?

[1] https://www.theguardian.com/technology/2017/aug/01/data-browsing-habits-brokers
[2] examples beyond count
[3] https://www.theregister.co.uk/2007/07/16/internet_dork_jihad_shocker/
Adventures in Laravel 5.4 land — view management
Tags: programming, laravelblade, laravel, webdev
Published: 2017-12-28 00:33:30

---
title: "Adventures in Laravel 5.4 land — view management"
published: true
tags: programming,laravel-blade,laravel,web-development
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*olJUeL2ziDvUPnXBBbPCYA.jpeg)

_update: This also works fine in Laravel&nbsp;5.5_

Recently started working with Laravel (5.4) and so far it’s been a joy to work&nbsp;with.

The first roadblock I encountered was on **how to organize views/templates**.

### Page templates

I went down the simplicity path, having the following rules:

1. Grab the controller name, exclude the _Controller_ part of the name, put it to lowercase. With this we have a folder that will house the templates that are used by that controller. For example: _HomeController_ \> Home \>&nbsp;home.
2. Let’s assume that we create a method inside HomeController whose job is to load a generic _about us_ page. So we create the method **aboutUs** and call the relevant view. What’s the name of view? Just call it **about-us** , which means a path **/resources/views/home/about-us.blade.php**.
3. The default controller method has a special name, _\_\_invoke_, and since I did not want to have a view called **invoke.blade.php** I decided to just use the same name of the controller. So for now we have a folder called **home** with a file called **home.blade.php**. Based on these rules we can immediately assume, with a high degree of certainty, that the view **home.blade.php** is called inside _HomeController::\_\_invoke_.

### What about partials?

Partials are blocks of code that are reused in more than one page/view, so I needed a set of rules for creating these, so that the location where they exists makes sense and gives an ideia of how it’s used. **These rules assumed you are following the previously laid out&nbsp;rules.**

1. When the partial is only used among the views of a single controller, create a folder called **partials** inside the controller view folder. Put your partials in these. Ex: **/resources/views/home/partials/example-partial.blade.php**.
2. When the partial is used by different controllers, then put them inside a **partials** folder inside the views folder, on the same level as the controller views folder. Ex: **/resources/views/partials/example-partial.blade.php**.

### Layouts

I did not see a reason to change the location of layout files (**/resources/views/layouts/master.blade.php).**

I’m sure there will be edge cases in which these rules cannot be applied, but I hope that these rules minimize those cases, instead of having the mess of view files that makes it hard to pinpoint what are it’s intended&nbsp;uses.

* * *
The beauty of VerbalExpressions
Tags: regex
Published: 2017-08-03 15:17:32

---
title: The beauty of VerbalExpressions
published: true
description: VerbalExpressions is a tool used to help with regular expressions
tags: regex
---

So at some point in our lives we've all had to encounter the wonders of Regular Expressions (Regex). If you don't know what Regex is in short terms its a special type of String that allows you to input a description to search for a pattern. It tends to be very useful in development, I commonly finding myself using it a lot (sometimes way too much). It generally will look something on the lines of this 

![alt text](https://thepracticaldev.s3.amazonaws.com/i/vpbyj8gewf54g2un9du6.gif "yeah it looks like a mess")

So this looks a little messy and confusing, although that Regex is very powerful in a lot of fields I don't think anybody likes writing it. That was until I discovered a little beauty called VerbalExpressions. VerbalExpressions takes normal Regex and nulls it down a lot to make it more efficient and easier to use. Here for example 

![alt text] (https://thepracticaldev.s3.amazonaws.com/i/q9yy82m2b6s1tens1ncm.png "omg the beauty!")

Now comparing this to above it makes it a lot easier to follow, more efficient to work with and your code a whole lot cleaner. Personally I love using this tool, for a long time I found that working in Regex would always cause me a lot of problems seeing as one missing or misplaced character would mean that the entire thing would be a pain to fix.

And the best thing about it? It's available in 32 different languages. All of which can be found right here on their github https://github.com/VerbalExpressions
Coding Experiments for the Greater Good
Tags: coding
Published: 2017-08-03 13:34:11

---
title: Coding Experiments for the Greater Good
published: true
description: How small experiments help on the way to better code.
tags: coding
---

I once read an essay about a karate pro, who did karate for decades and taught many people. One day he just took on a white belt again and started the whole training from new. Sure most of the stuff was no problem, but he soon discovered that he was missing some stuff from the lessons for the earlier belts. He said, doing the basic/junior things helped him to get a better overall.

When I started programming, I often did small coding experiments. I read about a technique, a concept, language feature, framework or library and did something really simple with it. This helped me the most in understanding programming. 

I mostly did this, because I simply lacked the skills for doing "real" applications. How to setup a server? How to implement a user management? How to create a front-end? I had no idea, so I did simple things, programs that were way below 1000 lines of code and they helped me to get better.

Later, when I got my first dev job and started working on big code bases, I stopped this. I had the feeling, that only juniors need to do this and I did programming for years before I got my first real dev job, now I was a professional! I don't needed no tiny experiments anymore to learn how something works.

__Bad code ensued.__

I coded everything right in the application that I was required to enhance and most of the time it worked kinda okay. Many people in the company weren't developers so if I could change anything in the product, I was basically god for them, nobody cared _how_ I do it, they wouldn't understand anyway.

But I understood and I saw that I somehow didn't live up to the quality I want to deliver.

There were many things in this job that didn't make me happy, so I quit and started a _sabattical_. Haha, yeah sounds a bit like midlife crisis and that with 29.

In this time I started doing the small things again. I read some stuff about game development and wrote a small jump n run. I read something about graphic processing and wrote some photo filters in JavaScript. It wasn't anything big, nothing production ready.

It was stuff that probably thousands of people did before me, but it showed me again, after all these years, that I still could learn new things, that there was a technique, that would really lead to understand things that I thought were _too hard_ for me. Maybe there are people out there who would learn it much faster, but it wasn't impossible for me to learn it.

This is an approach I incorporated into my software development process. Whether I have to deal with some ancient corporate API, that nobody bothered to document or some strange functional programming concept. The first time I use it is in a simple app that doesn't do much, just helps me understand the how and especially the why.

Maybe it is obvious to most developers, but to me it wasn't, so I thought I tell my story. I hope this makes software development less scary for people out there. :)