teleren/devto huggingface dataset:
Code price-tag
Tags: discuss, career, help, development
Published: 2018-09-02 23:38:00

---
title: Code price-tag 
published: true
description: How to estimate development cost.
tags: #discuss #career #help #development
cover_image: https://thepracticaldev.s3.amazonaws.com/i/75ta1l9mgeyi3tyd3m9u.jpg
---
# How much should a dev charge his client for a project? 

First things that come to mind are questions like:

- How big is the project?
- How long will it take?
- Can one person complete it alone or there is a need for a team?
- What infrastructure is needed?

and many many more.

### So recently I was asked to take on a small project.

This person found out I am a programmer and asked if I would be able to develop an automation process he had in mind. I was happy to hear that he had a clear end-product in mind so there will be much less confusion during the development process.

### The immediate next question was about the cost.

I am not going to go into details about the project because I want your answers to be general and not case specific.

Having never sold my own code / product I have no idea on how cost is estimated. The interwebs, sadly, do not provide a clear formula and everyone gives vague directions.

I know lines of code or time spent working on the project are not valid options but maybe they could be taken into account.

## The big Questions

How do you not get underpaid for your working hours?
How do you not get overpaid at the expence of your customer?
How do you personally calculate cost and agree on a price?
Responsive design
Tags: discuss
Published: 2018-09-02 23:27:33

---
title: Responsive design
published: true
tags: discuss
---
I was building a few landing pages, few days ago(it is still in the works), and if I'm honest writing the CSS rules for responsive design is kind of a pain after writing the desktop version, so I decided to do the responsive part first and then code the desktop version of the page. While I was writing the CSS rules for a 767px breakpoint(i was testing it on Chrome developer edition) everything was going fine-ish(i hate that it has a few selections of devices to use as a viewport) until I thought, "hey! what about firefox?, what does it look like in/on Firefox", I launched Firefox developer edition and I was greeted with the horrible and disgusting horizontal overflow,so my responsive effort was a fail(at least in Firefox) but in chrome it was not there, I tweaked it a little bit while i viewed the page in Firefox, and it was fine, went back to chrome everything was squished together, and changing device viewports did not help matters. So I learned both browsers have issues rendering margins and paddings because I realized it was margins that push them off the x-axis of the screen or squished everything together. So my question is how do you test your website to make sure it is "responsive ready"? Do you use the browser's responsive mode or do you use a different tool?

PS I know this is long, forgive me, I wanted to tell a story to ease my mind because I was frustrated after spending a good amount of time working on the page in Chrome only to be disappointed in Firefox.
How would you create a program to store information about friendship
Published: 2018-09-02 21:32:19

---
title: How would you create a program to store information about friendship
published: true
description: Creating a social network analysis software in python




tags: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zu1ar8bv8c22q33dlisf.jpg
---
#Background

I was developing a software in python (It was the *easiest* language for me) that would display information about the friendships within a elementary school classroom. I used the [Networx Library] (https://networkx.github.io/) to draw the graphs of the friendships within the classroom. ![Graph output example of my program](https://thepracticaldev.s3.amazonaws.com/i/0qjb7fyil35o0j1gmrh2.png)

##Problem
The function that displays the graphs is working, but the graph isn't uniform and don't represents the groups within the classroom (clusters of friends). I also want to know how i could implement this on a web page.

Thanks

-CR
Build a website with just HTML | Couple Code Therapy
Tags: podcast, beginners, webdev
Published: 2018-09-02 20:05:32

---
title: Build a website with just HTML | Couple Code Therapy
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/t3bgbgrihsocegyur7rf.png
description: This is exciting, In Couple Code Therapy Episode three My Lovely partner builds her own website with just HTML.
tags: 
    - podcast
    - beginners
    - webdev
---

Hey Friends!

This is exciting, In Couple Code Therapy [Episode three](https://anchor.fm/couple-code-therapy/episodes/Build-a-website-with-just-HTML-e24prj)

My Lovely partner builds her own website with just HTML.
We'll be using visual studio code as the main editor along with the live server extension to have auto refresh whenever we change something in the website.

#### About the show: 

Couple Code Therapy! A new twist on learning web development…Where our brave coding expert host, tries to teach his beautiful, lovely, intelligent, and immaculate wife how to update her own website.
It’s learning the basics of web development & coding – without being overwhelmed.
Displaying Images in iTerm from .NET Console Apps
Tags: netcore
Published: 2019-03-10 17:17:16

---
title: Displaying Images in iTerm from .NET Console Apps
published: true
tags: .NET Core
canonical_url: https://stu.dev/displaying-images-in-iterm-from-dotnet-apps/
---

Now that dotnet global tools are a thing, we are seeing an explosion of cool new cross-platform command line apps being built with dotnet. A recent example of this is [Giphy CLI](https://github.com/DavidDeSloovere/giphy-cli), this is a tool to quickly get a gif url from giphy.com and markdown snippet ready for pasting.

My favourite terminal when using my Mac is [iTerm2](https://iterm2.com/), it has lots of cool features, [including the ability to display images right in the console](https://iterm2.com/documentation-images.html)! So I thought it would be great to add this feature to Giphy CLI, but first, how does it work?

### Instructions from Docs

iTerm2 extends the xterm protocol with a set of proprietary escape sequences. In general, the pattern is:

`ESC ] 1337 ; key = value ^G`

Whitespace is shown here for ease of reading: in practice, no spaces should be used.

For file transfer and inline images, the code is:

`ESC ] 1337 ; File = [optional arguments] : base-64 encoded file contents ^G`

### .NET Implementation

So to be honest, from mostly trial and error, I found that this is what you need to do from .NET:

```csharp
Console.Write("\u001B]1337");
Console.Write(";File=;inline=1:");
Console.Write(Convert.ToBase64String(imageBytes));
Console.Write("\u0007");
```

where `imageBytes` are the bytes of the image you want to display. You may also want to detect if you are running in iTerm in the first place and only run this code if this is the case. Thankfully iTerm sets an environment variable we can use, named `TERM_PROGRAM`, which will have the value `iTerm.app` in the case where it's running under iTerm. Let's do that:

```csharp
if (Environment.GetEnvironmentVariable("TERM_PROGRAM") == "iTerm.app") 
{
    Console.Write("\u001B]1337");
    Console.Write(";File=;inline=1:");
    Console.Write(Convert.ToBase64String(imageBytes));
    Console.Write("\u0007");
}
```

Here is the result:

![](https://stu.dev/content/images/2018/09/giphy-animated-gif-1.gif)

You can [see this PR for a full working example](https://github.com/DavidDeSloovere/giphy-cli/pull/2/files).

Thanks to David De Sloovere for building this cool little tool.
My New Kickass Portfolio Website
Tags: showdev, portfolio, webdev, career
Published: 2018-09-02 18:05:52

---
title: My New Kickass Portfolio Website
published: true
description: I did a complete rewrite and redesign of my portfolio website
tags: showdev, portfolio, webdev, career
---

Based on this nice dev.to post {% link https://dev.to/aspittel/building-a-kickass-portfolio-28ph %} I decided to make a complete rewrite and redesign of [my portfolio website](https://www.mokkapps.de).

This linked post includes all the relevant reasons why a web developer should create his own unique portfolio website. Some of the main reasons which encouraged me to do the refactoring:

* Show my creativity and make a website that is a true expression of myself
* Design as much as possible myself without using pre-designed templates
* Make the site as fast and accessible as possible
* Provide a foundation to make the website easily extendable and adjustable

Here you can see a screenshot of [my new website](https://www.mokkapps.de): 

![Website Screenshot](https://thepracticaldev.s3.amazonaws.com/i/8q3uldpne31x98f33b76.png)

And these are the latest Lighthouse results:

![Lighthouse Results](https://thepracticaldev.s3.amazonaws.com/i/l5r2vaicv3zm5wvqyv1n.png)

I described my previous website setup in this post:

{% link https://dev.to/mokkapps/how-i-built-my-website-with-hugo-and-netlify-3n49 %}

Let me know what you think about it!
How to be a Good Reviewer?
Tags: review, reviewer, code, documentation
Published: 2018-09-02 17:21:23

---
title: How to be a Good Reviewer?
published: true
description: How to be a Good Reviewer?
tags: review, reviewer, code, documentation
---

Independent of the artifact being reviewed (e.g., design doc, code, test, packaging, presentation, book), a good reviewer should do the following:

1. Identify issues in the artifact **(What)**
2. Provide reasons why an issue is an issue **(Why)**
3. Suggest how to fix the identified issues **(How)**

It is not sufficient to merely do 1 and 3.  It is necessary to do 2 to 

1. assess the validity of your judgement and
2. help authors learn and improve.

Here are two examples:

#### Example 1 (Code)

1. This field access could lead to a null pointer exception.
2. The receiver in the field access expression is the object returned from this method call which can return null.
3. Ensure the receiver object is non-null before accessing the field.

#### Example 2 (Documentation)

1. The instruction is asking the user to set up an emulator.
2. The user may not know how to set up an emulator.
3. Provide instructions to set up an emulator or explicitly mention the user should be familiar with setting up an emulator.
BxJS Weekly Episode 26 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-09-02 17:18:07

---
title: BxJS Weekly Episode 26 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---

Hey dev.to community!

BxJS Weekly Episode 26 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/episodes/Episode-26-2018-09-02.md).

You can also watch or listen to this episode on:
- [YouTube](https://youtu.be/XbICzzTpd7E)
- [Castbox](https://castbox.fm/episode/BxJS-Weekly-Ep.-26-Sept-2%2C-2018-(javascript-news-podcast)-id1378315-id90661621?country=us)

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)

Social media links:
- [Twitter](http://twitter.com/yamalight)
- [Medium](https://medium.com/@yamalight)
- [Github](http://github.com/yamalight)

If you enjoy my content, please consider [supporting me](https://codezen.net/support.html) 😉
Building a Custom Map Using Mapbox Studio to Add to Your Apps
Tags: mapbox, ios, android, howto
Published: 2018-09-02 17:01:26

---
title: Building a Custom Map Using Mapbox Studio to Add to Your Apps
published: true
description: 
tags: Mapbox, iOS, Android, howto
---

I've been competing in the Mapbox Explore Outdoors Challenges the past few weeks. I enjoy their challenges because they often get me to branch out a bit and create some apps I wouldn't normally make. 

The first round was building a map of your favourite hometown spots. Since it the challenge was titled "explore outdoors" I decided to build a custom map of my favourite rock climbing spots in Jasper National Park. 

If you'd prefer to watch a screencast over reading this how-to you can watch it below
{% youtube 6FeZoqxdVSE %}

Step 1 - Create a Dataset: Go to http:://mapbox.com/studio and login. The studio can be a little intimidating but you should be able to go to Datasets in the upper right corner. You can create one from scratch or use a GeoJSON file. To learn the ins and outs and creating a dataset we're going to do both. Click the new dataset button and click upload to upload this GeoJson file (click view raw to grab the actual data).

{% gist https://gist.github.com/rockarts/f491204d022a18f7b5d67bfe52ed3af6 %}


All of the GPS points are now imported into our dataset. To manually add one you can click the draw a point button and click on the map. Make sure the add a property for Name and the name of the rock climb.

![Draw Point](https://thepracticaldev.s3.amazonaws.com/i/kda047oi29t7kbbvditc.png)

Step 2 - Add the Dataset to a Style: Now that we are done with our dataset we can add it to a style. In mapbox studio go to Styles and select the "pick a template or upload a style" button. You should see this screen and we will select the outdoors style template.

![Outdoors Template](https://thepracticaldev.s3.amazonaws.com/i/4y7y1dgkw5xy8wdh3dul.png)

In the style editor, click the Add Layer button and then find the rock climb datasource we just created and select it. Don't forget to click the Go to data button. You should see all the points in your new style. You can play around with colours using the side bar.

![Add Layer](https://thepracticaldev.s3.amazonaws.com/i/jks3k4cuxa1wwjza08yq.png)

Click the publish button in the top right and now our map is ready to use in our apps! Click the Share & Use button and you will get links to Javascript, iOS, Android, Unity and Third Party so you can use your custom map wherever you want!!!

![Share and Use](https://thepracticaldev.s3.amazonaws.com/i/bab7h5k5yddq9aldscdq.png)
How many hours do you spend to improve your coding skills?
Tags: discuss
Published: 2018-09-02 16:35:42

---
title: How many hours do you spend to improve your coding skills?
published: true
tags: discuss
---

I think many of you are working as developers. But in this discussion I want to ask how many hours do you spend to improve your coding skills apart from your job. May be to learn a new language. How do you spend the time ? (like doing a project) Share your thoughts.
Could you explain #likeimfive the meaning of these programming languages as humans?
Tags: discuss, explainlikeimfive
Published: 2018-09-02 15:59:38

---
title: Could you explain #likeimfive the meaning of these programming languages as humans?
published: true
tags: discuss, explainlikeimfive
---
![Programming languages as humans](https://www.monkeyuser.com/assets/images/2017/28-programming-languages-as-humans.png)
Author: [Monkey User](https://www.monkeyuser.com/2017/programming-languages-as-humans/)
Click command in selenium webdriver does not work
Tags: selenium, java, automation, webdriver
Published: 2018-09-02 15:04:05

---
title: Click command in selenium webdriver does not work
published: true
description: Click command in selenium webdriver does not work
tags: #selenium #java #automation #webdriver
---

Post Link : <a href="https://www.skptricks.com/2018/09/click-command-in-selenium-webdriver-does-not-work.html" > Click command in selenium webdriver does not work </a>


Sometime in web based application, we require to click on Button or any web element present in web page, while performing automation testing with the help of selenium framework. Mostly we are preferring click() command to perform click event or operation, but sometime click command is not working for few web elements. In that case you can use sendKeys commands to perform click operation.

<img src="https://1.bp.blogspot.com/-byMEWE2u_PA/W4uHBUvEn-I/AAAAAAAAB3c/kQlnZ_Ie3B8Y5ZiQtN25gUoUMlIm9PbUwCLcBGAs/s400/sel.jpg" />

<a href="https://www.skptricks.com/2018/09/click-command-in-selenium-webdriver-does-not-work.html" > Click to read more </a>
How to create directory in Java
Tags: java, corejava, webdev, programming
Published: 2018-09-02 15:02:03

---
title: How to create directory in Java
published: true
description: How to create directory in Java
tags: #java #corejava #webdev #programming
---

Post Link : <a href="https://www.skptricks.com/2018/09/how-to-create-directory-in-java.html" >How to create directory in Java </a>

To create a directory in Java, just use the mkdir or mkdirs methods of the Java File class. you can see in below example, both methods (mkdir and mkdirs) return a boolean value indicating whether the directories were created successfully. You'll want to include your own logic in the if/then tests that are shown after the mkdir and mkdirs method calls.

<img src="https://1.bp.blogspot.com/-onR7dUy5_VA/W4qwCABUI-I/AAAAAAAAB3M/r_I2y4PYCjwBrUzur-OBo1a6NPQP1kkagCLcBGAs/s320/jj.jpg" /> 

<a href="https://www.skptricks.com/2018/09/how-to-create-directory-in-java.html" > Click to view source code </a>
Searching for a React Project to work on
Tags: react, discuss
Published: 2018-09-02 14:53:33

---
title: Searching for a React Project to work on 
published: true
description: Hello React folks, I'm digging my way in practicing react if anyone has an interesting side project or any team is looking for a volunteer or a team player give me a holler 
tags: #react #discuss
---

 Hello React folks, I'm digging my way in practicing react if anyone has an interesting side project or any team is looking for a volunteer or a team player give me a holler
Jetbrains IDEs Material Plugin
Tags: ides, jetbrains
Published: 2018-09-02 13:03:50

---
title: Jetbrains IDEs Material Plugin
published: true
description: We all love the material theme(s), now this plugin will allow it in Jetbrains IDEs
tags: ides, jetbrains
---
Undoubtedly Jetbrains makes some of the most popular IDEs. IntelliJ, PyCharm, PHPStorm, Webstorm they're some of the most used enviorments in development. With this plugin we can have the Material themes imported from visual studio or sublime.

It's compatible with all (to my knowledge) Jetbrains IDEs.

To install we need to first:

Download it (in this example I'll be using PyCharm)

[https://plugins.jetbrains.com/plugin/8006-material-theme-ui](Download link)

Once you have the plugin downloaded you'll need to head over to the top right corner, click file, settings, go down to plugins, select "Install plugin from disk", navigate to your download and select. Now we restart.

And now we're greated with the install wizzard.

![](https://i.imgur.com/ZniLgYA.png)

Through here you'll be given several options to customize the themes to your liking

![](https://i.imgur.com/ZniLgYA.png)
Above we can see some of the premade ones that come included, or you're able to make your own.

And the final outlook 
(ignore my messy invorment)
![](https://i.imgur.com/AV4d3IC.png)


![Example of how the code can look, with some old code when I was learning TKinter ](https://i.imgur.com/ilfGR3V.png)
GoLang School IS LIVE
Tags: go, showdev, opensource, productivity
Published: 2018-09-02 09:20:15

---
title: GoLang School IS LIVE
published: true
description: A kingdom where Gophers of all kind live in peace, share, educate and develop HQ pragmatic, idiomatic GoLang software.
tags: go,showdev,opensource,productivity
canonical_url: https://medium.com/gophersland/golang-school-is-live-e5fba8254b1e
cover_image: https://rablater.sirv.com/Images/GophersLand/gophersland.jpg
---

> A kingdom where Gophers of all kind live in peace, share, educate and develop HQ pragmatic, idiomatic GoLang software.

**Welcome** to our first blog post ever posted!!!

Today is a special day. I am extremely excited to launch an online GoLang School dedicated to:

- writing pragmatic, **maintainable** GoLang
- providing sufficient theory to understand the fundamentals of various complicated topics such as **encodings, hashing, ciphers, parallelism, concurrency** and countless more in order to implement them in GoLang for solving real business, human pain points
- gathering **frequent**ly used **snippets** from day-to-day coding world
- presenting **deep analyses** produced by reverse engineering the most technically-interesting projects such as IPFS (InterPlanetary File System), Ethereum blockchain and others!!!
- building the most **constructive** and **kind** community of Gophers living aside, sharing, educating and having fun :)

{% twitter 1035969526532374529 %}

Our teachers are still working hard on preparing the content but our first feature is already here and READY: **GophersLand Citizenship Passport**

## GophersLand Citizenship

A passport to a kingdom where Gophers of all kind live in peace, share, educate and develop software. If you, perhaps, feel like one of us, crawing the GoLang knowledge, **choose your character and join our majestic community!**

Get your passport from our landing page: [https://gophersland.com](https://gophersland.com)

[![gophersland passport](https://cdn-images-1.medium.com/max/1600/1*4jYEThMEcfAVPhJ4_oWAaQ.png)](https://gophersland.com)

See you in the libraries of GophersLand's kingdom my friend,
All the best,
https://gophersland.com community
Npm library exports   
Tags: npm, javascript, library, opensource
Published: 2018-09-02 09:05:39

---
title: Npm library exports   
published: true
description: 
tags: npm, javascript, library, open source,
---

I think about writing an npm package that we can easily add by this methods:
`import lib from 'lib'
`or
`<script src="lib.min.js"></script>
`
and use global in html documents.

What is the best way to do that?