teleren/devto huggingface dataset:
TECH HUBS IN KENYA
Published: 2019-06-18 17:32:24

More often developers need to share ideas and engage with other developers. I found this overwhelming and wanted to share alittle about technology hubs in Kenya.
I have found some time and visited some of this area's and attended bootcamps and Hackathon in Kenya.
I will list some of the technology hubs (places)where one can visit.
First on my list is.
1.Ihub -located in the country's capital Nairobi,it offers a cool environment and not to mention the high speed WiFi provided at the place.
2.Eldohub located in Eldoret just away from the busy town.Personally I have visited this place.
3.Lakehub located in Kisumu. It provides developers with free internet connection and the location is near the town so you can grab a coffee when you feel alittle wasted.
For other locations you can follow the link below.

http://www.philoweb.co.ke/tech%20-hubs-to-learn-webdevelopment-and-software-engineering-in-kenya.html
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-06-18 17:20:56

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@amypellegrini left an amazing comment in **[What's your advice to someone over the age of 30 considering a career in software development?](https://dev.to/ben/what-s-your-advice-to-someone-over-the-age-of-30-considering-a-career-in-software-development-3jib)**.  Tons of wisdom here:
{% devcomment bn1k %}

Answering **[What do you want to be when you grow up?](https://dev.to/aspittel/what-do-you-want-to-be-when-you-grow-up-49ed)**, @georgecoldham left a reply about the fundamental desire for their relationsihp with work:
{% devcomment bmje %}

These meta-threads are so great.  Chiming in to **[Should a button communicate the current state, the intended behavior, or both?](https://dev.to/ben/should-a-button-communicate-the-current-state-the-intended-behavior-or-both-50na)**, @nickytonline offers some great analysis:
{% devcomment c1fh %}

**[What's your worst nightmare as a coder?](https://dev.to/ben/what-s-your-worst-nightmare-as-a-coder-337)**  @ddaly shared a classic fear for anyone who enjoys a stress-free weekend:
{% devcomment bp99 %}

Speaking of weekends, @notoliverearl offered their reply to **[Do you code on the weekend? How often, what’s your routine like?](https://dev.to/ben/do-you-code-on-the-weekend-how-often-what-s-your-routine-like-4h00)**:
{% devcomment c0h3 %}

See you next week for more great comments ✌
Create a JavaScript Kinetic Typing Animation with Scene.js
Tags: javascript, css, codepen, opensource
Published: 2019-06-18 17:13:04

I write a post to inform you that I have added a typing effect to Scene.js Effects library.
https://github.com/daybrush/scenejs-effects

In this article, I want to introduce the principles of typing animation.


### Typing Animation

There are three typical ways to make typing animations.

1. JavaScript Animation
2. CSS Animation (PC Chrome Only)
3. SVG Animation


The animation to be described in this article is JavaScript.
Because it's simpler than I thought.

CSS animation can also create typing animations using the before or after pseudo selector and content properties. However, since it is a selector that only supports PC Chrome, it is too much to use.


If your browser is PC Chrome, you will see the animation below.
{% codepen https://codepen.io/daybrush/pen/rELxqr %}


Typing animation is a method of importing text sequentially into html as shown below.

```js
const text = "Make a typing effect with Scene.js.";
const length = text.length;
for (let i = 0; i <= length; ++i) {
    element.innerHTML = text.substring(start, i);
}
```

Once you create a typing animation using Scene.js, you can write the code as follows:
```js
Scene.typing({ text: "Make a typing effect with Scene.js." });
```

Play the above code and it will look like the following CodePen:
{% codepen https://codepen.io/daybrush/pen/ydOVPW %}


### Kinetic Animation
In addition to typing animation, it tries to have a kinetic effect.

The kinetic effect moves the origin point in the opposite direction.
The origin point appears to be fixed but is moving.

```css
.kinetic {
    transform: translate(20px, -40px);
    transform-origin: calc(50% - 20px) calc(50% + 40px);
}
```

Once you create a kinetic animation using Scene.js, you can write the code as follows:
```js
Scene.kineticFrame({ left: "20px", top: "-40px" });
```


Play the above code and it will look like the following CodePen:
{% codepen https://codepen.io/daybrush/pen/NZrVGv %}


### Kinetic Typing Animation

Finally, add typing animation in time for kinetic effect.
```js
scene.set({
  "[data-typing='i']": Scene.typing({ text: "I ", duration: 1}),
  "[data-typing='frontend']": {
    1: Scene.typing({ text: "'m Front-End", duration: 1}),
  },
  "[data-typing='engineer']": {
    1.5: Scene.typing({ text: "Engineer", duration: 1}),
  },
  "[data-typing='with']": {
    3.3: Scene.typing({ text: "with", duration: 0.5}),
  },
  // ...
});
```
Finally, if you tie the typing effect to the kinetic effect, it will be as follows:
{% codepen https://codepen.io/daybrush/pen/MMyORm %}


Check out my projects at the following link.
https://github.com/daybrush/scenejs
https://github.com/daybrush/scenejs-effects

If you like it, press the star.


If you have the features or questions you want, please register the issue or write down the questions at any time.

Thank you
Writing an RSS reader in Godot - tutorial series
Tags: game, godot, godotengine, gamedev
Published: 2019-06-18 16:42:57

---
title: Writing an RSS reader in Godot - tutorial series
published: true
description: A series of tutorials for Godot Engine on how to create a non-game app - an RSS reader
tags: game, godot, godotengine, gamedev
---

Recently, I wrote a series of articles on how to create a simple RSS reader in Godot Engine (known normally for being a game creation tool). It is such a cool and versatile tool, that you can create just about anything you can think of in it. Here are the tutorials:
* [Part 1](https://andreww.xyz/tutorials/2019-02-25-creating-an-rss-reader-in-godot-part-1/)
* [Part 2](https://andreww.xyz/tutorials/2019-03-05-creating-an-rss-reader-in-godot-part-2/)
* [Part 3](https://andreww.xyz/tutorials/2019-03-17-creating-an-rss-reader-in-godot-part-3/)

I had originally created them in Medium, but later I've realized it's better to create content on your own site and share to sites like this instead of depending on some third party to host your content. 

Hope you like it! I'm planning on writing a book about [Godot](https://godotengine.org/) this year.
Any clue about how to configure keyboard language in Hyper app?
Tags: help, askdev, codenewbie
Published: 2019-06-18 16:21:28

So I am dealing with the hyper shell app, and I don't see how can I change the keyboard language (if that is possible). I usually use a Spanish keyboard. 
However, it doesn't seem to be a matter of the language completely, since arrow keys don't have the same function either.
If this is a silly question, can you please leave me some resources where I can find out more about keyboard distribution or keyboard in hyper/cmd?

Thanks a lot!
Node.js for Rails Developers 
Tags: node, rails
Published: 2019-06-21 15:09:53

---
title: Node.js for Rails Developers 
published: true
tags: [node, rails]
canonical_url: https://medium.com/6overground/node-js-for-rails-lovers-d3c617f55bec
---

Good stuff for [Rails devs starting to tinker in JavaScript](https://medium.com/6overground/node-js-for-rails-lovers-d3c617f55bec) by @craigphares.

A couple of thoughts:

1. Use [Postgres.app](https://postgresapp.com) instead of homebrew for PostgreSQL. It is simpler and makes switching versions a breeze.
2. You would think there would be a framework for this already.
Suggestion Needed | Flask or Django ?
Tags: python, flask, django, sql
Published: 2019-06-18 16:12:52

Recently i have started learning Python basics and then did one small project using flask. I wanted to explore more about flask but saw most of the companies are using Django instead of flask for Python based web development. Now i am planning to take a take a full fledged course but m not sure whether i should learn flask or Django. Please suggest me what should i do.
what is your recent dev-related confession?
Tags: discuss, webdev, beginners
Published: 2019-06-18 16:11:08

---
title: what is your recent dev-related confession?
published: true
description: 
tags: discuss, webdev, beginners
---

Programming and building things is fun, until it's not and you want to drive your head against the wall 😁

It happens to everyone and it is part of the magic. 

What's a recent confession you feel like sharing? here's mine from earlier today:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I just spent 2 hours to refactor some code so I can properly test it<a href="https://twitter.com/hashtag/devconfessions?src=hash&amp;ref_src=twsrc%5Etfw">#devconfessions</a></p>&mdash; Liran Tal (@liran_tal) <a href="https://twitter.com/liran_tal/status/1141013956372381696?ref_src=twsrc%5Etfw">June 18, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
PHP mail() function fails with PHP-FPM in OpenBSD's httpd
Tags: phpfpm, mail, openbsd, troubleshooting
Published: 2019-06-18 15:34:39

---
title: PHP mail() function fails with PHP-FPM in OpenBSD's httpd
published: true
description: How to fix the failure of PHP mail() function behind PHP-FPM with OpenBSD's httpd
tags: phpfpm, mail, openbsd, troubleshooting
cover_image: https://thepracticaldev.s3.amazonaws.com/i/uamey9x7zuz5bfdw3omz.jpg
---

*\* The cover image is originally by [Kdsphotos](https://pixabay.com/users/Kdsphotos-3037209/) and edited with great appreciation.*

## Introduction

I was seriously in trouble to use [PHP](https://www.php.net/) [`mail()`](https://www.php.net/manual/en/function.mail.php) function via [PHP-FPM](https://php-fpm.org/) in [OpenBSD](https://www.openbsd.org/).
The reason of the failure was very simple; `/bin/sh` didn't exist in the environment after [`chroot`](https://man.openbsd.org/httpd.conf#chroot) by PHP-FPM!

#### My case

I have used [Contact Form 7](https://contactform7.com), one of [WordPress](https://wordpress.org/)'s plugins, to enable visitors to send requests.
After migrating the server, submitting the form always failed. I debugged it and found the error message in the browser console, which was as url: https://$FQDN/wp-json/contact-form-7/v1/contact-forms/28/feedback. It said, "{"code":"rest_no_route","message":"URL [...]","data":{"status":404}}".

## Body

#### Environment

- OS: OpenBSD 6.5
- Web: OpenBSD's [httpd](https://man.openbsd.org/httpd.8)
- App: PHP 7.3 via PHP-FPM

#### Backgrounds

My php code was like this:

```php
$mail = mail($to, $subject, $message, $headers);
if ($mail) {
    ...
```

It failed and all the errors I managed to get were difficult for me to understand.
For example, putting [`error_get_last()`](https://www.php.net/manual/en/function.error-get-last.php) behind `mail()` returned only `1`.
Also, I couldn't find any useful log.

I checked the PHP core config files aka `/etc/php-7.3.ini` and `/etc/php-fpm.ini` again and again, which seemed correct.
Then I got lost...

After a while to struggle, I found [Joel Carnat's article of this](https://www.tumfatig.net/20180309/send-email-with-chrooted-php-in-openbsd/) and got the solution thanks to it!

In OpenBSD's PHP-FPM as well as httpd, `chroot` defaults to `/var/www` defined in `/etc/php-fpm.conf`.
In this case, `/var/www/bin/sh`, the executable, was necessary in order to execute PHP `mail()` function.

#### How To Solve It

My solution was just to copy `/bin/sh` to the environment after `chroot`:

```console
# cp -p /bin/sh /var/www/bin/
```

After doing it, I opened the website with my browser and then a mail was successfully sent :)

## Conclusion

OpenBSD's httpd and PHP-FPM use `chroot`, which defaults to `/var/www`.
Therefore, as developing apps behind them, the environment under `/var/www` is worth to pay attention to.

Thank you for your reading.
Happy computing.
TinyMCE Templates Package In Episerver
Tags: episerver
Published: 2019-06-20 00:35:21

---
title: TinyMCE Templates Package In Episerver
published: true
tags: #Episerver
description: Since my last post about Episerver TinyMCE default templates, I have worked on several projects that could benefit from them. I decided to create a NuGet package of some generic templates that I think most projects could benefit from.
cover_image: https://photos.davidboland.site/debpu06-blog-container/8dc28269-e6df-4ad7-a2e9-029da71c3b34-tinymce template package hero-min.png
canonical_url: https://davidboland.site/blog/tinymce-templates-package-in-episerver
---

Recently I posted about how to [Create Episerver TinyMCE Default Templates](https://davidboland.site/blog/create-episerver-tinymce-default-templates). Since then, here at Nansen we have worked on several projects that have benefited from them. I decided to pull some of the generic ones into a NuGet package and share it with the community through [Episerver's NuGet Feed](https://nuget.episerver.com/package/?id=Nansen.Components.TinyMCETemplates). 

Aside from what I have below, you can find information on the project, as well as how the templates render on the [project page](https://davidboland.site/projects/tinymce-templates-package). 

## Whats Included

The package itself is straight forward. It contains an initialization module for registering the templates. It adds it to the TinyMCE default configuration. It also includes the templates plugin, and the templates icon in the toolbar.

The templates get added to your modules/\_protected folder. There will be 9 unique templates, each of which is implemented with both bootstrap classes and custom ones. All the images for the templates are embedded in the HTML using base64.

## Styles

The templates are all rendered using [bootstrap](https://getbootstrap.com/) CSS classes by default and were designed to be responsive. 

A set of templates were added that use the same bootstrap classes that are all prefixed with "ntemplate-". This was done to make it easier to add your own custom styling. You can use these templates by adding the following appSetting:

```xml
<add key="nansen:tinymce:customcss" value="true"></add>
```
*Note: Updating this appSetting once content is already published with existing templates will not modify them. Once content is published, it saves the content that it got from the template as normal text, and will not look to the template for updates.*

## Final Thoughts

My goal is to have this be a constantly growing repository. The more options we give our editors, the more time and effort they can save when populating content. If you are interested in contributing, feel free to visit our [Github repository](https://github.com/nansen/Nansen.Components.TinyMCETemplates) and create a pull request. 

As always, if you have any questions or thoughts on improvements, feel free to leave a comment below.

Thanks!
See your code execute as you write it!
Tags: replit, python
Published: 2019-06-18 15:24:00

This is a demo for a coding tool that will be released soon.

It visualises the execution of your code as you write it.
This means you're never unsure of what your code is doing.

Any honest feedback would be really appreciated!

{% replit @FraserGreenlee/LiveCoder %}
How to Check Site Positions in Search Engines 
Tags: serp, sitechecker, googleserp, siterankings
Published: 2019-06-18 14:45:11

Top positions are the goal of all the private webmasters and whole large corporations and small companies. To run seo campaign blindly – to waste time and get nowhere. To succeed in it you need professional seo tools including SERP.  
Website’s keyword positions in SERPs is one of the core point for seo strategy. If the rank is high enough and the schemes show regular progress, everything is okay and you’re going proper way. If the positions are not increasing and the schemes show distinctly their falling, the webmaster needs to change his seo-strategy and look for more effective way of the web-site development.
Using effective and <a href="https://spyserp.com/">accurate search engine ranking checker</a> you could check landing pages on the basis of the key-words you need to bring to the top of search results. The detection of the web-site position or URL and the comparing the same positions of competitive web-site is possible with professional key-word position checker.
The thematic of the web-site could be various. For sample if your web site offers such tool as rank checker, you’d like to observe it in top Google for the key: «best rank checker». But to check this position manually would be difficult if besides it you have to check several hundred more positions.   
Choosing the tool we should consider not only whether it is paid or not. The tool should be reliable and offer detailed scheme and graphics, on the bases of which the webmaster can make the analysis and observe the changes of the positions of the website in core search engines.   
The relation to the competitive website is also actual and due to it you may see real picture and build your strategy. All web-owners are reaching out for top three positions in Google, Yahoo and other popular search engines. To achieve this goal one should know what sites have top positions in SERPs. 
Of course, it takes time to achieve top, but you have to start going for your goal right now and available checker is a big advantage in the deal. To use most of them one shouldn’t be seo-expert. The tools are usually not difficult and do not require strong technical experience.  
Achieve more with proper tools and enjoy your results.
How to make Nginx cache cookie aware?
Tags: webdev, nginx, cookie, cache
Published: 2019-06-18 14:16:20

---
title: How to make Nginx cache cookie aware?
published: true
description: In this post, I'm going to describe how we can configure nginx to be able to cache responses based on the specific cookie value. 
tags: webdev,nginx,cookie,cache
---

In this post, I'm going to describe how we can configure nginx to be able to cache responses based on the specific cookie value. 

Let's imagine a situation when you want to do an A/B test on your website, where 50% of users should see new headline text on the page. Other 50% of visitors will continue see the old page. In this case, all your server-side manipulation about splitting users to different versions will be ignored by nginx cache (of course, if you have it).

It happens because nginx, by default, has this configuration:

```
proxy_cache_key $scheme$proxy_host$request_uri;
```

So, it will use the same cache key for all users, who requests page with the same url.

Luckily, nginx allows us easily to customize proxy_cache_key! What we need to do, it's just to add a specific cookie to this key:

```
proxy_cache_key $scheme$proxy_host$request_uri$cookie_MY_COOKIE_NAME;
```
 
And that's it! After this, if userA has MY_COOKIE_NAME=A and userB has MY_COOKIE_NAME=B they will receive different versions of page by the same url.



If you need more complex behaviour, where you won't use hardcoded cookie name in your nginx config, you can do something like this:

```
if ($http_cookie ~* "ab_(.*?)=([\w-]+)" ) {
  set $abcookie $1$2;
}

proxy_cache_key $scheme$proxy_host$request_uri$abcookie;
```

As you can see, you can use $http_cookie and generate proxy_cache_key based on specific cookie patterns. In this concrete example we check if http cookies contains cookie with regex pattern "ab_(.*?)=([\w-]+)" and if this cookie exists, we generate new variable for proxy_cache_key.
Number Formatter in Javascript
Tags: javascript, angular, typescript
Published: 2019-06-18 14:10:48

---
title: Number Formatter in Javascript
published: true
description: 
tags: 
---

In this short tutorial, we are going to create a simple number formatter using Javascript. Numbers greater than or equal to a thousand will be shortened and replaced with number category symbol. Examples of symbols:

```js
Thousand    = K
Million     = M
Billion     = G
Trillion    = T
Quadrillion = P
Quatrillion = E
```
And so on.

The method below is the number formatter functionality
```js
numberFormatter(number, digits){
    const symbolArray = [
      { value: 1, symbol: "" },
      { value: 1E3, symbol: "K" },
      { value: 1E6, symbol: "M" },
      { value: 1E9, symbol: "G" },
    ];
    const regex = /\.0+$|(\.[0-9]*[1-9])0+$/;
    let result = "";

    for(let i = 0; i < symbolArray.length; i++) {
        if (number >= symbolArray[i].value) {
            result = (number / symbolArray[i].value).toFixed(digits).replace(regex, "$1") + symbolArray[i].symbol;
        }
    }
    return result;
}
```
Other values than can be added are
```js
1E12 = 1000000000000
1E15 = 1000000000000000
1E18 = 1000000000000000000
```

## Examples
```js
numberFormatter(1000, 1) = "1K"
numberFormatter(10000, 1) = "10K"
numberFormatter(2134564, 1) = "2.1M"
numberFormatter(5912364758694, 3) = "5.912T"
```


You can follow me [Twitter](https://twitter.com/uzochukwueddie) and also subscribe to my [YouTube channel](https://www.youtube.com/channel/UCqTEGhqVPcjfhs7_bQjnoRA/videos?view_as=subscriber).
How do you feel about the "misuse" of HTTP methods?
Tags: discuss, webdev, http, rest
Published: 2019-06-18 14:10:20

In case you're not sure what the difference between `GET` and `POST` in HTTP are (or what that sentence even means), here is a great post from today:

{% link https://dev.to/flippedcoding/difference-between-those-http-requests-2m13 %}

It got me thinking that there are definitely situations where folks hack on different methods to create the desired outcome. Sometimes `GET` is used alongside a "url param" password of sorts in contexts like one-click actions from an email (for unsubscribing or otherwise).

I also notice that, for example, Algolia uses a `POST` request for searches where I would expect a `GET` request. I think this is for mild performance improvements, or simply for consistency due to the fact that _some_ of their requests probably should be triggered via `POST`.

Anyway, what are your thoughts about when to use the "wrong" method, or if this is ever advisable?