teleren/devto huggingface dataset:
Carbon-neutral coding: We've just partnered with Offset Earth
Tags: webdev, discuss, personalnews, environment
Published: 2019-09-20 10:07:15

---
title: Carbon-neutral coding: We've just partnered with Offset Earth
published: true
tags: webdev, discuss, personalnews, environment
cover_image: https://assets.browserlondon.com/app/uploads/2019/09/Offset-Earth-Logo.jpeg
canonical_url: https://www.browserlondon.com/blog/2019/09/03/carbon-neutral-coding-browser-partner-offset-earth/
---

As part of Browser London's commitment to being a responsible employer, we're pleased to have begun working with [Offset Earth](https://offset.earth/) to balance the carbon footprint of our workforce.  
  
Founded by three Bristolians (one of which, we’re proud to say, is a [Browser Group](https://www.browsergroup.com/) alumnus) we’ve been watching the company closely since it’s beta launch in June. Designed to make the act of offsetting carbon emissions easy and [transparent](https://offset.earth/pages/about), the team only works with [Gold Standard](https://www.goldstandard.org/) audited projects and openly publishes all [carbon credit](https://docs.google.com/spreadsheets/d/1dACvzjE5nBE1cKZBAhYzsUa7rIiLJqCWXVgY4bNS8_Q/edit#gid=766227634) and [tree planting](https://docs.google.com/spreadsheets/d/1dACvzjE5nBE1cKZBAhYzsUa7rIiLJqCWXVgY4bNS8_Q/edit#gid=0) purchases made with contributions.

![An illustration of Browser London's carbon offsetting impact via Offset Earth](https://assets.browserlondon.com/app/uploads/2019/09/Browser-London-carbon-offset-1024x464.png)

Our partnership means we’re offsetting 14 tonnes of CO2 per employee, per year, enough – according to the Offset Earth’s calculations – to make our team [net carbon positive](https://www.fastcompany.com/40583176/climate-positive-carbon-neutral-carbon-negative-what-do-they-mean). You can see a live illustration of the impact our company contributions have made to date on our [company profile page](https://offset.earth/browserlondon).

On a more personal note, I think it's worth adding that the idea for this partnership came from a junior member of our team. So if you're reading this thinking 'my company would never go for this', I'd suggest raising it and seeing what the reaction is; it may be more positive than you think.

After all, many companies are looking for ways to burnish their environmental credentials, and in the development industry, it's not always clear what the best way to do this is. I'd argue an offset scheme like this is a good, simple and immediate way to start.

It's worth stating that carbon offsetting is most effective when used as part of a balanced environmental policy. Our work with Offset Earth is designed to complement our already existing projects to reduce our team’s carbon emissions, such as our remote working and recycling schemes.

----

The post [Carbon-neutral coding: Browser partners with Offset Earth](https://www.browserlondon.com/blog/2019/09/03/carbon-neutral-coding-browser-partner-offset-earth/) appeared first on [Browser London](https://www.browserlondon.com).
Must-know Javascript concepts and functionalities
Tags: discuss, javascript, beginners
Published: 2019-09-03 13:36:33

Hi folks!

I'm learning javascript (currently for front-end but really soon I'll start learning Node too) and this is honestly a whole new world to me. The more I learn the more I realize there's still a lot of stuff to be learned and this is both exciting and overwhelming to me.

I was wondering if there is a set of functionalities and concepts that a junior javascript developer must absolutely know to build a solid foundation. My idea is to starting from this foundations rather than trying to learn everything at the same time.

Thanks! :)
Sum of first "n" odd numbers with Python
Tags: python, code, developer, programmer
Published: 2019-09-03 13:19:26

---
title: Sum of first "n" odd numbers with Python
published: true
description: Two basic python programs to find the sum of first "n" odd numbers.
tags: Python, Code, Developer, Programmer
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rhou5xcbjrf4cjm5qo0z.png
---

It is my first post so ignore any silly mistakes.
Moving onto the topic. As it says I am going to make a python program to find the sum of first “n” odd numbers starting with 1.
Now before you go into my while loop if you are here for quick result. Here is the easiest way to do it.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9g6xkgx2s6n10sm37j48.png)

Now if you are wondering why the heck I print “square of number”, then you may need to go through basic mathematics. Alas! I am a coder man. So head to [this WikiHow post](https://www.wikihow.com/Add-a-Sequence-of-Consecutive-Odd-Numbers).

Now coming back to problem. If you are still reading probably you also don’t like such silly and short method.
Welcome to a large solution. (Still small xD)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8l3tm3c8uz1abv4s121z.png)

HA! Now comes my favourite (favorite if you are American 😄) part.

Step 1. We take input and convert it to integer. Cause that is string right?

Step 2. We define some variables. “i” is iterator which will tell when we have reached “n” numbers (If you forgot “n” is the number of odd numbers we have to add). The “current” variable is our sum of numbers which gets updated at every loop (the loop we will write in next step). Initially set to 1, cause that’s our first odd number in Mathematics. And finally we got our lovely variable for which we are writing this all, “sum”. By the way it also gets updated at every loop.

Step 3. We got our very own while loop. You know what it is right. It keeps on repeating itself until its argument is true. And that argument my readers is the boolean value of “ i < n ”.
Now it means when i becomes equal to n, we stop our loop cause we added them. And print the result. I know what you are thinking. The inner of loop.
Here we have “some” variable being incremented by the value of “current” variable. Which in first iteration is 1 (first odd number), after that we update our “current” variable to next odd number which always is +2, or am I wrong?
Next thing we do is increment our iterator cause without that you know it goes “to infinity and beyond”.
Hope you like it, cause even if you don’t I can do nothing.
Building A Community For Data Professionals at Data Council - Episode 96
Published: 2019-09-03 13:14:06

<p>Data professionals are working in a domain that is rapidly evolving. In order to stay current we need access to deeply technical presentations that aren't burdened by extraneous marketing. To fulfill that need Pete Soderling and his team have been running the Data Council series of conferences and meetups around the world. In this episode Pete discusses his motivation for starting these events, how they serve to bring the data community together, and the observations that he has made about the direction that we are moving. He also shares his experiences as an investor in developer oriented startups and his views on the importance of empowering engineers to launch their own companies.</p><p><a href='https://www.dataengineeringpodcast.com/data-council-data-professional-community-episode-96/'>Listen Now!</a></p>
Combining Python And SQL To Build A PyData Warehouse
Published: 2019-09-03 13:05:18

<p>The ecosystem of tools and libraries in Python for data manipulation and analytics is truly impressive, and continues to grow. There are, however, gaps in their utility that can be filled by the capabilities of a data warehouse. In this episode Robert Hodges discusses how the PyData suite of tools can be paired with a data warehouse for an analytics pipeline that is more robust than either can provide on their own. This is a great introduction to what differentiates a data warehouse from a relational database and ways that you can think differently about running your analytical workloads for larger volumes of data.</p><p><a href='https://www.pythonpodcast.com/pydata-warehouse-episode-227/'>Listen Now!</a></p>
How to visualize Pancakes Algorithm with React and Popmotion.io
Tags: react, algorithms, popmotion
Published: 2019-09-03 13:03:09

---
title: How to visualize Pancakes Algorithm with React and Popmotion.io
published: true
description: Visualize Pancakes Algorithm with React and Popmotion.io
tags: React, Algorithms, Popmotion
---


![Pancakes Algorithm Visualization](https://mihail-gaberov.eu/static/b2a4c82960de627dfb6204e97dc93813/6fc51/pancakes-algorithm.png)

What you are going to see below was suppose to be part of my solution to an exercise given in a coding challenge. It was several months ago and I had signed in for it. Due to unforeseen factors, I haven't gone to the end. Now, after that time and the challenge finished, I can share it here.

This is not going to be a step-by-step tutorial. Rather a quick review of how can we use frameworks like React and Popmotion.io, and an algorithm. And create a nice visualization of that very same algorithm. Somehow it feels nice! 🤓

The so called [Pancakes Sorting Algorithm](https://en.wikipedia.org/wiki/Pancake_sorting) is famous (or not?) sorting algorithm, that you can read about a lot in internet, if interested. Its nature is out of the scope of this article. Here we only see it in action with nice animations, thanks to Popmotion.io.

Here is the [live demo](https://pancakes-algorithm.herokuapp.com/) you can play with. There are two text inputs and two buttons. In the first input, you enter the time interval
which will be used for each animation round, i.e. how fast each pancake will be sorted. It's in milliseconds, which means if you enter the value 1000, the animation will execute for roughly 1 second. The second input is used to define how many pancakes you want to see sorting. The value there must be between 2 and 50. The buttons are self-explanatory enough. One is for starting the sorting animation, the other one is for resetting it. 

And [here](https://gitlab.com/mihailgaberov/pancake-algorithm-visualizer) is where you can find the source code for the demo app. Feel free to check it out and take a closer look. You might try to amend the animations I did. I would be more than interested to see your versions. :)

That was all. Nice and short, perfect for the summer! ☀️ 🏖

🔥 Thanks for reading! 🔥
OOPS! I made a framework
Tags: discuss, frameworks
Published: 2019-09-03 12:52:52

Haven't done a discussion post yet and I thought maybe this one might be interesting.

I have a really bad habit of trying to write my websites and web apps as vanilla as possible until it gets complicated enough that I end up writing my own mini-framework.

At this point I either ditch the project, soldier on, or rewrite it in an already established framework. 

I'm usually under the assumption that the people working on these large frameworks for years are smarter than me and/or have gone through the work of dealing with edge cases and performance bugs to the point of where the file size bump is worth it. 

Some people I have talked to like to write a ton of helper methods and refuse to touch a framework unless they're instructed or as part of a team effort.

At what point do you ditch the helper methods and move on to a regular framework? There seems to be a lot of opinions back and forth and I would love to hear some more.
API access in development with Conveyor
Tags: tooling, mobile, visualstudio
Published: 2019-09-03 12:47:24

---
title:  API access in development with Conveyor
published: true
tags: tooling,mobile,visual studio
---
In my workflow, when I'm developing an API with Visual Studio, and I need to access it from a mobile app, usually I publish it in Azure, or I need to do many steps to configure my IIS express.

This is because IIS express by default publish your API in the localhost endpoint, and it can't be accessed from outside your development machine.

Looking for a quick fix, I found [Conveyor, a Visual Studio extension](https://marketplace.visualstudio.com/items?itemName=vs-publisher-1448185.ConveyorbyKeyoti), it's in beta, and free for now, automatically will give access to our API to any device in our network, if you register an account, you could have access from the internet.

After installing the extension, it will run when we start our project in debug mode.
In the next screenshot, we can see the enabled endpoints.

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

We can also configure certificates if we want to use https.

A great addition to my Visual Studio's toolbox, very useful, and easy to use and install.
call Zig from Python
Tags: zig, python
Published: 2019-09-03 12:39:59

---
title: call Zig from Python
published: true
description: 
tags: zig,python
---

What is Zig? See here: https://ziglang.org/

Looks interesting!

Lets make a shared library with Zig that we can call with Python using ctypes.

```zig
export fn add(a : i32, b : i32) i32 {
  return a + b;
}
```

The code above is a function named add that takes two parameters both of type integer (32 bits). The function returns a 32 bit integer also.

To compile this to dynamic library run this
```
zig build-lib mathtest.zig -dynamic
```

At this point you will have a shared library in your current directory.

```
-rw-r--r-- 1 tonetheman tonetheman     58 Sep  3 07:28 mathtest.zig
-rw-r--r-- 1 tonetheman tonetheman 546152 Sep  3 07:35 mathtest.o
-rw-r--r-- 1 tonetheman tonetheman    395 Sep  3 07:35 mathtest.h
-rwxr-xr-x 1 tonetheman tonetheman 616728 Sep  3 07:35 libmathtest.so.0.0.0
```

Notice also you get some other files for free, most notably the header file mathtest.h. You could use this file with a C/C++ compiler to also call the Zig function.

Fire up your Python interpreter and see if you can call your first Zig function.
```
>>> import ctypes
>>> a = ctypes.CDLL("./libmathtest.so.0.0.0")
>>> print(a)
<CDLL './libmathtest.so.0.0.0', handle 58bfef25b470 at 78bf0457bf10>
>>> a.add(400,400)
800
```
Mixins in ECMAScript 6 - Awkward, inconvenient, powerful.
Tags: mixin, traits, modules, inheritance
Published: 2019-09-03 12:21:55

---
title: Mixins in ECMAScript 6 - Awkward, inconvenient, powerful.
published: true
description: Mixins in ECMAScript
tags: mixin, traits, modules, inheritance
---

(UPDATE: I am really not sure about the state of proposals for 'mixins' in ECMAScript. The information below were snippets I got from another source in 2017. I do know we are able to support traits in ES6 by way of Object.assign(..) but I was hoping it would be keyworded-in as part of the class definition syntax for future ES. )

---

So you've heard that ECMAScript 6 will sport "Mixins". Some languages implement this feature as "Traits" or Shared Modules. The origin of the concept, I feel, was born in the language called SELF (a Sun Microsystems experiment, see: http://www.selflanguage.org/).

In a simple explanation, traits, or mixins, is a language feature allowing classes of objects to share a common set of behaviors we call methods -- or functions, perhaps even data properties. It is NOT inheritance, but some think of it as multiple inheritance. It is an arbitrary implementation for simple code reuse when inheritance does not make sense.

For example:
In building a game, the Character, Level or Weapon classes might all posses the ability to log messages to a console for debugging purposes, so a mixin called Loggable could be used to package up a few methods to be shared across the class hierarchy. This way, classes even though not related, might share this common trait. As you see, inheritance does not make sense logically or semantically. A Person is-not a Loggable. It does not sound right, it does not read right, it conflicts with the beauty of code and clarity.

here is the Ruby representation. It's a beauty.

```
module Loggable
   def log (msg)
      puts msg
   end
end

class Character include Loggable
   def jump
      log("jumped")
   end
end

class Sword < Weapon  include Loggable
   def animate_blade
      log("do sword animation");
   end
end
```

In Scala, It's a beauty:
```
class Sword extends Weapon with Loggable {
   def animate_blade() { 
      log("do sword animation")
   }
}
```

In ECMAScript 6:
```
var Loggable = Base => class extends Base {
  log(s) { }
};
class Weapon { }
class Sword extends Loggable(Weapon) { }
```

WTF?!!!!!
It gets ugly if you wanted 2 or more mix-ins:

```
class Weapon { }
class Sword extends Loggable(Localizable(Weapon)) { }
```

I don't know. It's powerful. Definitely not a beauty!
Troublshooting npm proxy issues part 1
Tags: npm, javascript, node
Published: 2019-09-03 12:21:36

The npm package manager is a must have for JavaScript devs but, sometimes, being on a corporate network means you have to navigate a proxy to access the packages. This is the first post dedicated to troubleshooting npm proxy issues. 

If you run, for example, `npm install --save-dev grunt` on our home network grunt will be installed into your project as expected. If you are running on a network with a proxy server you may get an error like 

```bash
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/grunt failed ...
```

The error text will then go onto to suggest that if you are behind a proxy you must set the 'proxy' config. This means you have to tell npm the address of the proxy on your network. 

There's actually two config settings you have to set: proxy and https-proxy, https-proxy being the address for TLS. Let's say that the proxy address is http://proxy.example.com:8080 then simply enter

`npm config set proxy http://proxy.example.com:8080` 

and 

`npm config set https-proxy http://proxy.example.com:8080` 

At this point npm should start working, or it might give you a 403 error. Dealing with that 403 error will be the subject part 2.

### Additional Stuff
Config settings can be displayed using the folllowing commands. To display a list of the user config settings use `npm config ls`, all config settings are displayed with `npm config ls -l`. 

This second command will also show you the location of you .npmrc file, which is your userconfig file. You can type your config settings directly into that file and save it instead of using cli commands, if you want too, I prefer the cli. Here's more details on [npm config](https://docs.npmjs.com/cli/config).
How to safely access deeply nested object in Javascript
Tags: javascript
Published: 2019-09-03 12:03:25

---
title: How to safely access deeply nested object in Javascript
published: true
description: 
tags: javascript
---

An object 's property can be null or undefined.


Accessing step by step is tedious

```js
props.user &&
props.user.posts &&
props.user.posts[0] &&
props.user.posts[0].comments
```

Dynamic parsing path is too clever and involves string in the end, which is a no no

```js
const get = (p, o) =>
  p.reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, o)

const getUserComments = get(['user', 'posts', 0, 'comments'])
```

Instead let's use function and catch errors explicitly, and defaults with a fallback

```js
const get: (f, defaultValue) => {
    try {
      	const value = f()
      	if (isNotNullOrUndefined(value)) {
        	return value
      	} else {
        	return defaultValue
      	}
    } catch {
     	return defaultValue
    }
}

const comments = get(() => { .user.posts[0].comments }, [])
```

## Read more

- https://medium.com/javascript-inside/safely-accessing-deeply-nested-values-in-javascript-99bf72a0855a
8 Essential Logo Fonts for Digital Brand Designers 
Tags: logodesign
Published: 2019-09-03 12:00:52

It is critical to pick the correct font style when dealing with brand configuration projects. The choice of what font style to use is a basic point in any logo design. When talking about business logos, huge organizations requires rich, clean and not very extravagant.

You can pick any typeface for your customer’s image, however, it ought to be one of a kind and must have a valid permit. So free font styles are probably the best asset of sort for logos, which is accessible to free for business use.

The font style you use is a key viewpoint when designing a personality. You require something simple on the eyes, that can have a remarkable personality, and be applicable in different situations. When choosing a font style, think about the customer’s personality, the practical uses the logo will be utilized for, and the design’s agelessness. Being a professional web designer and to work in a global <a href="https://www.oodlesstudio.com/"> UI UX design studio</a> you should have knowledge of these logo fonts.

Logo styles can represent the moment your logo design. Picking the correct typography can recount to your image story and enhance the effectiveness of your logo at whatever point and any place audience see it. There are a huge number of font styles out there of which some of them are listed below with a little explanation:

1. DIDOT: This font style is generally found in the design world. Didot works best when utilized simply, with cautious kerning and high contrast hues.

2. FUTURA: Because of its remarkable geometric shape, enormous displays, corporate plans, books, and logos have utilized this font style frequently. The font style is considered by numerous individuals as a perfect one for small content.

3. BODONI: If you are searching for a perfect typeface for features, logos, and decorative content, at that point Bodoni can be your most logical option. It has a level and UN-bracketed serifs and has a thin basic structure. There are both thick and thin strokes in this text style and there is a complexity between the two. The font style looks stylish because of its geometric construction.

4. PROXIMA NOVA: Proxima Nova overcomes any gap between typefaces like Futura and Akzidenz Grotesk.

5. NEUE SWIFT: Think about this textual style for financial, well being or non-benefit enterprises.

6. RUFINA: Rufina applies classic typography norms to stencil plan. Instead of resembling a stencil, it nearly looks progressively like an artistic puzzle, with complexity and perceived surface.

7. COVES: Coves is a free text style included by ordinary curves, perfect for titles and logo plan. It incorporates two weights, light and strong.

8. EXODUS: Exodus is a showcase serif typeface with extravagant lines and a buffet of one of a kind alternative characters. Exodus Standard accompanies Exodus Regular, Bold, Stencil, Stencil Bold, Wide and Wide Bold.

 

A lot of incredible font styles are open to designers. We should pick a font style that can significantly express the brand’s identity and essence.
The guide to enjoy your first developer job
Tags: job, programming, startup
Published: 2019-09-03 11:38:59

---
title: The guide to enjoy your first developer job
published: true
description: This guide will give you the tools to get the best of your future developer job.
tags: job, programming, startup
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cz73ngj9d69w2zp9h426.jpg)

This guide will give you the tools to get the best of your future developer job.. [SEE MORE](https://medium.com/@farsi_mehdi/the-guide-to-enjoy-your-first-developer-job-7cc8c2abd8e0?source=friends_link&sk=a9ff524a57eb08d67a7ab2d4dd9de603)