teleren/devto huggingface dataset:
How much of a memory impact do tabs in my terminal have?
Tags: discuss, windows, macos, linux
Published: 2018-10-02 16:19:35

---
title: How much of a memory impact do tabs in my terminal have?
published: true
description: 
tags: discuss, windows, macos, linux
---

When I am running my dev server, the log lines add up quickly. It's largely stuff I don't care about unless it's what I'm currently dealing with, but it piles up.

Do the thousands upon thousands of lines that build up in the tabs I have open meaningfully impact the performance of my operating system? (In my case, MacOS)

I'd be curious to get a better sense of how this memory is managed and what does and does not hog resources in this regard.
How to parse json in Go
Tags: go, json, parse, marshal
Published: 2019-04-09 08:56:37

---
title: How to parse json in Go
published: true
description: 
tags: go,json,parse,marshal
---


## Unmarshal using encoding/json

- property in struct needs to be first letter capitalized

```go
import (
	"net/http"
	"encoding/json"
	"io/ioutil"
	"fmt"
)

type MyJsonObject struct {
	Id string `json:"id"`
	Name string `json:"name"`
}

type MyJsonArray struct {
	Data []MyJsonObject `json:"data"`
}

func FetchJson() {
	url := "https://myapp.com/json"
	client := http.Client{
		Timeout: time.Second * 10
	}

	request, requestError := http.NewRequest(http.MethodGet, url, nil)
	request.Header.Set("User-Agent", "myapp")
	response, responseError := client.Do(request)
	body, readError := ioutil.ReadAll(response.Body)
 
	fmt.Println(requestError, responseError, readError)
	
	myJsonArray := MyJsonArray{}
	marshalError := json.Unmarshal(body, &myJsonArray)
	fmt.Println(jsonResponse, marshalError)	
}
```

## Map
And how to map to another struct
https://gobyexample.com/collection-functions

```go
func Map(vs []JsonStop, f func(JsonStop) *api.Stop) []*api.Stop {
    vsm := make([]*api.Stop, len(vs))
    for i, v := range vs {
        vsm[i] = f(v)
    }
    return vsm
}

stops := Map(jsonResponse.Data, func(jsonStop JsonStop) *api.Stop {
		stop := api.Stop{
			Id: jsonStop.Id, 
			Name: jsonStop.Name,
			Address: jsonStop.Address,
			Lat: jsonStop.Lat,
			Long: jsonStop.Long}

		return &stop
	})
```

Original post https://github.com/onmyway133/blog/issues/199
NoSQL Written On Top of MySQL.
Tags: php, showdev
Published: 2019-04-16 03:41:04

---
title: NoSQL Written On Top of MySQL.
published: true
description: 
tags: php, showdev
---

At some point, I had a job where they wouldn't allow us to use any thing other than MySQL to store our data. For the best of me, I could not convince management that the right thing to do was to move to a NoSQL solution like Mongo. At that point, my quest started to find a way to create a NoSQL solution on top of a SQL database.

https://github.com/ua1-labs/firesql

FireSQL is what came of it. This project started almost 2 years ago. I'm just starting to get around to documenting it now. Please has a look at let me know what you think.

If you are one of those that are not allowed to us anything other than MySQL, this might be the right solution for you if you are interested in a NoSQL solution built on MySQL.
Recording a test with the Endtest Chrome Extension
Tags: testing, javascript, webdev, productivity
Published: 2019-04-16 14:34:05

---
title: Recording a test with the Endtest Chrome Extension
published: true
description: Using the Endtest Chrome Extension to record a web test
tags: testing, javascript, webdev, productivity
---

The team from [Endtest](https://endtest.io) just released their own [Chrome Extension](
https://chrome.google.com/webstore/detail/endtest/jbdgfkeimppmnfemmgfafiomihlibdfa).
{% youtube 4DIVKcs--TA %}

You can use it to easily record your tests directly in the Chrome browser and then add them to your Endtest account. 

This is currently the only test recorder on the market that can handle multiple tabs and iframes.

I also like the fact that it can write smart XPaths if it doesn't find a stable locator such as an Id or a Name. 

In the video, you can see that creating a test for the Sign Up page on Airbnb and running it takes less than 3 minutes.
Sublime 3: A Quick Tip Using Find and Replace with Regex
Tags: sublime, html, css, javascript
Published: 2019-04-17 01:52:41

---
title: Sublime 3: A Quick Tip Using Find and Replace with Regex
published: true
description: Use Sublime 3's regex option to find all occurrences in a given context and replace with the matched value.
tags: sublime, html, css, javascript
cover_image: https://images.unsplash.com/photo-1515704089429-fd06e6668458?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&h=420&q=80
---

**TL;DR**

_Use `(.*?)` to match anything in the given context._
_Use `\1` to replace with the matched value._

_e.g._

_Find: `<use xlink:href="(.*?)”>`_
_Replace: `<use xlink:href="\1" href="\1">`_


##The Long Version

Recently I discovered a bug related to how Chrome references external SVGs with the `<use>` tag. For whatever reason Chrome has an issue that if the SVG file isn't cached it can sometimes not render the referenced SVG. To add to the frustration, the issue seems to be intermittent.

One user on [Stack Overflow](https://stackoverflow.com/a/47332915/6518644) suggests that because the `xlink:href` attribute is deprecated that using `href` solves the problem. So, I figured I'd give a shot, why not, right? The only problem is I use this tag all over my project so manually finding each tag and replacing the value would be a tedious task...especially without knowing if this suggestion would actually fix the issue.

Enter Sublime's find and replace with regex option.

Say I have this tag

```
<svg><use xlink:href="/icons/symbol-defs.svg#icon-refresh"></use></svg>
```

and I need to add another attribute, but it must use the same value as the `xlink:href` attribute.

All I need to do is fire up Sublime's Find and Replace dialogue (Cmd+Shift+F in Mac, Ctrl+Shift+F in Windows/Linux), make sure the Regex icon is toggled on, and enter these values:

Find: `<use xlink:href="(.*?)”>`
Replace: `<use xlink:href="\1" href="\1">`

Here's what that looks like in Sublime:

![Activate regex option in Sublime Find and Replace](https://thepracticaldev.s3.amazonaws.com/i/1y0k7bmvkxriesrk04a3.png)

What this does is match anything within the `xlink:href` attributes double quotes and copies the value to the replaced tag.

So we end up with

```
<svg><use xlink:href="/icons/symbol-defs.svg#icon-refresh" href="/icons/symbol-defs.svg#icon-refresh"></use></svg>
```

Too easy, right? That's it, just a quick tip to make your life easier.

Happy coding! 🤓

p.s. In case you were wondering, the fix didn't work, but hey at least I learned something new, right? 😉
Can I put small projects on github?
Tags: github, career, beginners
Published: 2019-04-20 11:12:36

I am just practising small apps like binary2dec converter etc from https://github.com/florinpop17/app-ideas , So can I put whatever I accomplish on GitHub, even very small works? How can it impact when an employer sees a bunch of very small works on my repo? Will it have any positive impact? Though I will be showing only my best works through my portfolio.
Angular Prod/AOT Build Analysis
Tags: discuss, angular, production, build
Published: 2019-04-24 06:34:31

---
cover_image: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS401KfhnHn8bK54smv637O8e9IOH_WgPfZKNBZSWkOsd19eIXOjQ
title: Angular Prod/AOT Build Analysis
published: true
tags: discuss, Angular,Production, Build
---

Hi All,

We are working on a solution which involves medium to large sized **Angular7** Projects. 
During this process we discovered a lot of things about Angular AOT/Prod Build. We did spend time going through Webpack configurations & Bundle analyzers. 

We would love to know how the world deals with following points when it comes to Angular 7 Prod Builds for medium to large sized projects.

**1.  Ways to reduce Build time (any specific Webpack configuations or other build strategies in use)**

**2. Ways to analyse Treeshaking output(internal code and third party library code), as we see lot of library code included in the bundle despite not being used in the application(We did use bundle analysers).**

Any info or feedback is most welcome! Thanks
Let's take this offline: determine internet connection
Tags: javascript, offlinefirst, pwa
Published: 2019-04-25 22:48:50

---
title: Let's take this offline: determine internet connection
published: true
description: A simple way to continuously poll for internet connection
tags: Javascript, Offline First, PWA
---

_[This post originally appeared on carmalou.com](https://carmalou.com/lets-take-this-offline/2017/10/13/lets-take-this-offline-pt-2.html)_

[More than 10 percent of Americans are without home internet.](https://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/) As such, it's really important to be considerate of users with inconsistent internet.  [A user is without internet is effectively stuck on an island, unable to communicate with the outside world.](https://carmalou.com/series/2017/09/24/lets-take-this-offline-pt1.html)

One of the simplest things we can do is check for network connection. To do this we can use: `navigator.onLine`. This function -- which is built into the JS spec and also [has great cross-browser compatibility](https://caniuse.com/#search=navigator.on) -- returns a boolean value based on whether or not the user has a network connection. It might look like this:

```javascript
if(navigator.onLine) {
  console.log("User is online!");
} else {
  console.log("User is not online. :(");
}
```

This is really handy because we can test for this before running any ajax calls and offer the user a much nicer experience because they won't lose connection and suddenly hit a bunch of connection errors.

We can set up an event listener and continuously monitor network connection.

```javascript
window.addEventListener('offline', function(event) {
  console.log("We are offline! :(");
});

window.addEventListener('online', function(event) {
  console.log("We are online! :)");
});
```

While no network connection will mean you are not on the internet, a true value can be misleading. Just because you are on a network doesn't mean you have internet connection -- for instance you can be on an internal network but the network doesn't have an external internet connection. This might return true.

So what can we do to test if our true is actually true? If we get true, we can test if we can access an image.

```javascript
fetch('some/img/url/here').then(
    function(response) {
      console.log(response);
    })
    .catch(function(err) {
      console.log(err);
    });
```

And when we look at the response, we can see the status code. If you have no connection, the catch will return your error with something like `TypeError: Failed to fetch`.

And there you have it! You can check for network connection with `navigator.onLine`, and to be sure you are truly online, you can use `fetch` to pull an image and check the status code.

_[This post originally appeared on carmalou.com](https://carmalou.com/lets-take-this-offline/2017/10/13/lets-take-this-offline-pt-2.html)_
Pythonic Imports in Kotlin
Tags: kotlin, android
Published: 2019-04-28 03:15:27

---
title: Pythonic Imports in Kotlin
published: true
tags: Kotlin,Android
canonical_url: 
---

If you have been working with Kotlin for some time now, you might have encountered issues with name conflicts with Kotlin’s reserved keywords. A common example is with the popular mocking library [Mockito](https://site.mockito.org/), where the `when` method which is now used by Kotlin for its switch-like construct. So you end up doing something like this:

```
`when`(messenger.getMessage()).thenReturn("Hello World!")
```

Another scenario is when you want to name the imported class or extension function something more meaningful and readable. Which can be acheived to some extent with the use of a `typealias`. However, there’s a better solution available right into the Kotlin standard library.

## Pythonic Way of Handling Imports

One the most flexible things I find in `Python` is the ability to name the imported classes almost anything you want, just like a variable. So you would simply import a class with a name that suits your style e.g.

```
import matplotlib.pyplot as plt
```

Now, you can use `plt` as a variable throughout your script.

# Kotlin’s Import-As Alias

I wished to have this for Android development after I ran into some ambiguity issues with a recent project. Upon some searching, I was surprized to find that Kotlin had this feature all along. Just like Python, you can simply add imports with an `as` keyword.

Let’s look at how our Mockito problem is resolved now:

```
import org.mockito.Mockito.`when` as whenever
```

You can now use `whenever` in place of the less pleasant `'when'` througout the class.

```
whenever(messenger.getMessage()).thenReturn("Hello World!")
```

So that was it. Another reason to love Kotlin (and Python as well)! ;)

* * *

For suggestions and queries, just [contact me](http://linkedin.com/in/xuhaibahmad).
Animations with the Emotion library
Tags: javascript, emotion, css
Published: 2019-04-28 16:03:36

---
title: Animations with the Emotion library
published: true
description: How to animate with emotion
tags: javascript, emotion, css
cover_image:  https://images.unsplash.com/photo-1439436556258-1f7fab1bfd4f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60
---

Hey guys, this is a very short article just to show you how you can add animations if you are styling your components with emotion.

The final result is here (this is the sandbox I used when creating my first emotion tutorial):

{% codesandbox ovm116xyj5 %}


The first thing you need to do is import `keyframes`:
```javascript
import { keyframes } from "@emotion/core";
```

The next thing we want to do is to create our animation, let's create a bounce effect:
```javascript
const Hop = keyframes`
 from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
`;
```

This is similar to how you style components with emotion but instead of using `styled`, we use `keyframes`.

We now need to create a styled component that will use this animation, let's wrap this animation around some text so we name as follows:
```javascript
const Text = styled("text")`
  animation: ${Hop} 1s linear infinite;
`;
```
God, I love template literals!

Only one more step, and that is to swap in our `Text` constant, which basically means replacing the `div` around the text with `Text` like so:
```javascript
<Text className="country">
  <span>Iceland</span>
</Text>
```

And magically our text is now bouncing, how simple was that?  Now go ahead and animate some shiz :D
How do you show email templates in your portfolio?
Tags: emailtemplates, css, email
Published: 2019-04-29 16:51:24

---
title: How do you show email templates in your portfolio?
published: true
description: showcasing eail templates in a portfolio
tags: emailtemplates, html, css, email
---

Hi all, 

I just landed my first interview for a junior frontend developer role! The only issue is that the position requires developing some email templates as part of its responsibilities. I've never done any work in this area besides some really simple MailChimp and Marketo newsletters. 

How can I get some practice in this area and put something together to add to my portfolio? What are some industry standards or best practices that I should be aware of?

I only have a few days to put something together before my interview so I'd appreciate any help or advice I can get.

Cheers!
I love to sketch and want the world to harness the power of sketching to ideate, iterate, and communicate, Ask Me Anything!
Tags: ama
Published: 2019-04-30 13:32:33

---
title: I love to sketch and want the world to harness the power of sketching to ideate, iterate, and communicate, Ask Me Anything!
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ltiyelo72rz5ocos2vn6.png
tags: ama
---
What do CSS right initial and right auto do?
Tags: css, html, webdev, beginners
Published: 2019-05-01 19:59:16

---
title: What do CSS right initial and right auto do?
published: true
description: When positioning elements fixed what does setting the right attribute to initial and auto do?
tags: css, html, webdev, beginners
---

Was doing code review today and saw some code that intrigued me.

```
.button {
    position: fixed;
    right: initial;
}
```
The `right: initial` was interesting I dug more into what initial does and found out it sets that attribute to what the browsers default settings is. There is a really good article on [css tricks about this](https://css-tricks.com/getting-acquainted-with-initial/). 

So what is the initial value for the right attribute? I did some investigating and found out that the default value is auto (for chrome at least). That confused me because I always used `position: fixed` and then just positioned it wherever I wanted with the left, right, top, bottom. I never thought about what would happen if the right attribute was auto (which is it by default). I set up a code pen to demonstrate. What is interesting is when you scroll.

{% codepen https://codepen.io/FlaminSeraphim/pen/oOrGaO %}

MDN describes what the right attribute does very well here. 

"When position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block."

When `right: auto` is set the browser will calculate what the right attribute needs to be set to so that the left side of the child element is right next to the left side of the parent element, because it is positioned fixed when you scroll you can scroll past the containing div but the positioning of the fixed element stays the same.

I hope that you learned something helpful alongside me today.
Fixing React build failure
Tags: react, beginners, build
Published: 2019-05-05 15:33:02

---
title: Fixing React build failure
published: true
description: 
tags: #react #beginner #build
---
I was so enthusiastic about deplying my first react project, a very beginner version.
All that faded away after having to go over and over on 'npm install' and 'npm build' and failing miserably to build my simple one page project.
Hours of search and nothing useful or helpful.

Turns out, the extra Babel dependencies I added to the project following some tutorials created some sort of a confilct that caused the react-scripts to fail everytime I attempted the build command.
This can be traced in this https://github.com/facebook/create-react-app/issues/5135 issue report.
Now finally, I got to deploy my too naive try after changing the whole app idea and keeping the same weird name (Sneaky-React). (https://nifty-hypatia-73966f.netlify.com/)
How to fix Rails ActiveRecord::ConcurrentMigrationError
Tags: rails, database, postgres
Published: 2019-05-05 18:33:33

---
title: How to fix Rails ActiveRecord::ConcurrentMigrationError
published: true
description: fix Rails ActiveRecord::ConcurrentMigrationError
tags: rails, databases, postgresql
---

To correct an `ActiveRecord::ConcurrentMigrationError` when trying to run Rails databases migrations, you need to:

1. open `psql`
2. Select advisory locks 
`SELECT pid, locktype, mode FROM pg_locks WHERE locktype = 'advisory';`
3. Kill this scoundrels! 
`SELECT pg_terminate_backend(<PID>);`
Developers need to stop fearing the InfoSec Mafia
Tags: security, appsec, infosec, applicationsecurity
Published: 2019-05-09 14:07:02

---
title: Developers need to stop fearing the InfoSec Mafia
published: true
description: Blog post to set the record straight so developers can understand how security teams think and operate.
tags: security, appsec, infosec, applicationsecurity
canonical_url: https://medium.com/jettech/developers-need-to-stop-fearing-the-infosec-mafia-f61f4b8b8ba5
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7pau95a49fpr3yc4d6e5.jpeg
---

Sometimes it feels like your company’s Security team seems to push its way into everything &mdash; Do you want to implement a new feature, change an API? Not without security’s blessing, right? It can feel like your security team just complicates everything — and did you even really want *their protection* in the first place? Who are these guys to come in and force you to do things their way?

When you frame it like this, your InfoSec team sure does sound like the mafia. But here’s the big difference: we’re not adding all of these processes and overhead for our benefit — we’d be just as happy if you could secure everything on your own...

Let me keep it simple:

> We are responsible for protecting your application’s users and your business’ customers, that is why we do what we do.



Still don’t believe me? [Continue reading the full article over at Medium](https://medium.com/jettech/developers-need-to-stop-fearing-the-infosec-mafia-f61f4b8b8ba5) and let me see if I can change your mind.

----------

Preview of security puns you will enjoy:

  - There may come a time when Security asks you for a favor…
  - "sleeping with the phishes"
Mental Health Month in Tech: Three Good Things App
Tags: showdev, wellness, mentalhealth, javascript
Published: 2019-05-09 15:12:37

---
title: Mental Health Month in Tech: Three Good Things App
published: true
description: Every morning, I try to remember to write down or share three good things in my life. I wanted to make an app that others could use to get in the same practice.
tags: #showdev, #wellness, #mentalhealth, #javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/whghpqjqejvjwev1ooxh.jpg
---

May is mental health month (and honestly, if you're me, _every_ month has to be mental health month... but I digress.) 

To practice javascript more, I decided to make an app for something that I do every morning. For the past three years or so, one of the first things I do in the morning is share three good things in my life with a friend. It can be something as big as getting a promotion or something as "small" as coffee.

## [Three Good Things Web App](https://three-good-things.glitch.me)

![screenshot of gratitude app](https://thepracticaldev.s3.amazonaws.com/i/t4ln44cjw51gogexpqy6.png)

It's hosted on Glitch, so if you want to remix it into your own project, I'd love to see it!

There are apparently already apps that do this, but it was a really great exercise in learning about local storage!

I'm already working with a friend on another app for anxiety, and I'd love to see any you've made or something that works for you!
Explain Selenium & Webdrivers Like I'm Five
Tags: explainlikeimfive, selenium, e2e
Published: 2019-05-12 16:42:52

---
title: Explain Selenium & Webdrivers Like I'm Five
published: true
tags: explainlikeimfive, selenium, e2e
---

Hey there!

I've been interested lately in applying end-to-end tests to my web application. I've seen several options available but I don't really understand the differences or how they work.

For instances, how does a remote selenium server work in practice? How does the remote selenium server have access to say a server running on my local machine (if thats how it works?)

This area is very new to me and am eager to learn more :)

Thanks!