teleren/devto huggingface dataset:
How Loops Work in JavaScript😭🤔
Tags: programming, javascript, webdev, beginners
Published: 2018-04-18 00:36:43

---
title: How Loops Work in JavaScript😭🤔
published: true
description: use of loops if while for
tags: programming,javascript,webdev,beginners
cover_image: https://cdn.pixabay.com/photo/2018/03/25/21/01/motor-loop-3260697_960_720.jpg
---


## Have you Ever Confused about Using a Different kind of loops in JavaScript 

No Problem Today we clearing the confusion


Let's Print 1-100 numbers using a different Kind of loops.

First We Print 100 numbers using For Loop.

```js
for(let i=0; i<=100;i=i+1){
  console.log(i)
}
```
Let's talk about what is the use of above code. 

**for loop takes three optional expressions** 

1) **Initialization**: we are initializing our value - (let i=0);

2) **Condition**: On which condition iteration if the condition is true 
then the loop continues otherwise loop stop running.(i<=100);

3) **Final expression**: How loop increments or decrements on each iteration (i=i+1)

Inside the `for` loop, we are logging the value on each iteration.

Without for loop, we need to write 100 numbers manually 1 by 1 using 
for loop, it only takes 2 lines of code.

### Lets Solve the same problem using *While* loop.

```js
let n=1
while(n<=100){
 console.log(n);
 n=n+1;
}
```
while loop runs only if something is true.Otherwise it doesn't enters 
inside the loop.

- We first initialized a value to the variable n with 1.

- while loop only takes a single expression which is a condition(n<=100).

- It only runs up to n value is equal to the 100.

- On line 2 we are incrementing n on each iteration.

Now let's solve the same problem using if and while loop.

```js
let enter=true;
let n=1;
if(enter){
while(n<=100){
 console.log(n);
 n=n+1;
}
}
```

## if condition also runs on the basis of the truthy values.

 - In our above problem enter is true so it enters the loop.
 - Inside the if condition we placed a while loop.

How if condition works in daily life. In our day to day life, 
we are making decisions like if time is 9 am I need to eat breakfast.
if time is 12 am I need to eat lunch.

 Have you thinking about if-else. if time is 9 am I need to eat breakfast
 else I need to do some other things(brush, bathing,etc..).

**Hope you guys love these**
                                 👍👍👍👍👍👍👍👍

Check out my other Interesting posts
- [How fun functions work in JavaScript ](https://dev.to/saigowthamr/how-fun-funfunctions-workin-javascript-nbo)

- [How CSS Specificity Works🤹🏼‍♀️](https://dev.to/saigowthamr/how-css-specificity-works--2e2e)
Continuing education - a unique problem with our industry
Tags: career
Published: 2018-04-17 23:42:49

---
title: Continuing education - a unique problem with our industry
published: true
description: 
tags: career
---

A brain dump of some thoughts I've had recently.

Consider these interview questions (variations of the same question):

**What are you doing to continue your education?**

or

**How are staying on top of the latest technology?**

On the surface, they are fairly standard questions. In any industry, people generally want to stay informed, continue learning, and get better at what they do.

Seems reasonable. Except I've never been asked that outside of the tech industry.

Let me back up a little. I was a dental technician for 15 years - I made dentures, crowns, bridges, metal frameworks, etc. Everything about that industry I learned on the job. It was a combination of learning from people who were further along than me, doing what I learned, and figuring things out when no one else had the answers. But it all happened during work hours - never in my personal/free time.

In the tech industry, we're often expected to spend our off-work hours keeping up on trends and ever changing technology. Yet in other industries, you either learn by doing the job, or are given training time during work hours to learn.

This is one of my favorite posts about the overall expectations of devs, especially the referenced comment by Leighton Darkins:

{% link https://dev.to/ben/its-perfectly-fine-to-only-code-at-work-dont-let-anyone-tell-you-otherwise--25i3 %}

The professional side of the industry shouldn't expect personally paid for training (e.g. online courses), personal projects, or after hours meet ups to be the norm for our training. It's different if a person _wants and chooses_ to do those activities, but it shouldn't be a professional expectation.

Coming back to the above questions - they shouldn't even be interview questions. Like I said, outside of the tech industry, I've never been asked that. It was generally assumed you're learning on the job.

Any employer who isn't providing training/learning opportunities to their people, during work hours, is doing a disservice to their employees, and in turn, their products and clients. If our industry (as a whole) grasped that, then maybe that question would fade to obsolescence, as it should.
Kamisado, a JavaScript Implementation of an Abstract Board Game.
Tags: showdev, webdev, javascript, p5js
Published: 2018-04-18 00:30:42

---
title: Kamisado, a JavaScript Implementation of an Abstract Board Game.
published: true
description: A JavaScript version of Kamisado, an abstract board game.
tags: showdev, webdev, JavaScript, p5.js
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jf77d6d1xwu5g8m79pxo.png
---

I have a problem. I have **way** too many unfinished side projects in my `~/dev` folder. So I wanted to build something quick, and commit to releasing it and showing it off as quickly as possible. So here it is!

For the best experience, [click here to go to CodePen's Full screen view](https://codepen.io/bigblind/full/xWBrxP/). But I've embedded it here for your convenience.

{% codepen https://codepen.io/bigblind/full/xWBrxP/ %}

I've built it using p5.js, mainly so I wouldn't have to deal with the raw canvas API.

# About Kamisado

Kamisado is an abstract board game for 2 players, played on a grid with differently colored squares. Each player has 8 pieces, each one corresponding to a tile color.

The first player, white, can choose which piece to move. After the first move you must always move your piece that corresponds to the color of the square the last player moved to. You can move a piece as far as you want straight forwards, or diagonally forwards. Never sideways or backwards.

You win by moving one of your pieces to the opponent's home row.

# Known shortcomings

This version only includes the short mode of Kamisado. In the real game, you can continue playing once you've reached the other side, by turning your piece into a sumo that can push other pieces. I might build upon this version to add this in the future.

The code isn't very pretty. I've used snake-cased capital letters for global variables, rather than for constants, as they're usually used in JavaScript. I've also written purely procedural code (no classes), and I don't think the structure is as good as it could be. 

# Roadmap

I'd like to write a post here on board game AI, and would like to implement a simple AI for Kamisado as an example. I'll work on this during the next week.

I'd also like to allow people to play over the internet. I'm trying to decide whether to implement this using firebase or a WebRTC data channel.
Caching in ASP.NET Core with LazyCache
Tags: dotnet
Published: 2018-06-12 01:44:58

---
title: Caching in ASP.NET Core with LazyCache
published: true
tags: dotnet
canonical_url: http://lukencode.com/2018/04/18/caching-in-aspnet-core-with-lazycache/
---

Caching is a great way to get improve the performance of your application - either enabling high load scenarios or papering over some bad code to make life bearable. I have always favoured a simple “GetOrCreate” style caching API so when I found the open source [LazyCache](https://github.com/alastairtree/LazyCache) by [Alistair Crabtree](https://alastaircrabtree.com/) I was keen to check it out.

LazyCache describes itself as “An easy to use thread safe generics based in memory caching service with a simple developer friendly API for C#” which I would pretty much have to agree with.

The ASP.NET Core version is currently in beta (though seems to be pretty solid) and can be installed via nuget:

```
Install-Package LazyCache.AspNetCore -Version 2.0.0-beta03
```

Once installed it can be easily made available when configuring services in startup:

```
services.AddLazyCache();
```

This will inject IAppCache throughout your application.

Here is a simplified example of using LazyCache from the homepage my [Australian tech job board - Austechjobs](https://austechjobs.com.au):

<script src="https://gist.github.com/lukencode/f974c562b2e48c9cbad63aa768ddb4a7.js"></script>

IAppCache is the Lazy Cache service being injected into my class. It provides a _GetOrAddAsync_ method that accepts:

- A cache key which in my example is the string “HomeModel”.
- A factory to retrieve the data to be cached in the form of a function Func\<ICacheEntry, Task<t>&gt; addItemFactory. The code in my example returns a model after making a database call (the bit I wanted to cache).</t>
- Options for cache length. I am using a simple sliding timespan of 12 hours.

I find the simplicity of this caching setup very pleasing. It’s implementation uses Lazy\<T\> to ensure the factory method is only executed once. Under the hood by default LazyCache will use IMemoryCache in Microsoft.Extensions.Caching.Memory. This is implementation will only cache data on the machine it is running on. If I was running a more intensive service I would want to extend [LazyCache](https://github.com/alastairtree/LazyCache/wiki/2.0-Extending-LazyCache-with-Redis,-Cassandra-etc) and implement something like redis for distributed caching. The good news is because I am using IAppCache throughout my application I can change the underlying caching provider with relative ease.
Draw maps like paintings
Tags: r, rstats, rspatial
Published: 2020-06-09 14:30:18

---
title: Draw maps like paintings
published: true
date: 2018-04-18 00:00:00 UTC
tags: r, rstats, rspatial
canonical_url: https://statnmap.com/2018-04-18-draw-maps-like-paintings/
---

Painting maps: context On the Grrr Slack, a mutual-aid Slack on R for French speaking people, Thomas Vroylandt showed the following maps asking how this could be done using {ggplot2} :EDIT : This maps was originally presented on visionscarto.net with drawings by Agnès StienneRomain Lesur reminded us about this nice R-package on Github called ggpomological.I found these maps really nice. As I like drawing maps, indeed, I was drawing French regional maps to prepare a tutorial, I decided to take a few minutes to install the library and change the look of my maps.

See more: [Draw maps like paintings](https://statnmap.com/2018-04-18-draw-maps-like-paintings/)
GraphQL API with React.js
Tags: javascript, react, graphql
Published: 2018-04-17 23:29:58

---
title: GraphQL API with React.js
published: true
description: A tutorial for using modern GraphQL APIs with React.js.
tags: #javascript, #react, #graphql
---

Hey everyone, I just made a new blog post about using React with a GraphQL API. The demo uses [AniLists's V2 API](https://github.com/AniList/ApiV2-GraphQL-Docs) along with `create-react-app` and `axios` to get some GraphQL data.

Check out the full tutorial here: https://codebushi.com/graphql-api-with-react/
Thoughts as a junior in her first real dev gig.
Tags: juniordev
Published: 2018-04-17 23:23:33

---
title: Thoughts as a junior in her first real dev gig.
published: true
description: 
tags: #juniordev
---

Rather than going on and on about my background, I'll try to sum it all up in the following sentence. I'm a neuroscience grad who got a job at retail banking but quit to pursue the glittery world of web development.

And here I am. After some schooling (yay Bitmaker!), I'm a full-stack dev at a major financial institution that uses Spring for their backend.

Truth be told, I learned React and Rails and had no background with Spring nor Java. But that's the beauty of this industry and why I was drawn to it in the first place. It's this never-ending pursuit of knowledge. And people in the industry embrace it! Learning is fostered and encouraged and as much as it sounds like it's for some grand, altruistic reason, it makes sense for businesses too. Who wouldn't want their employees to improve their skillsets and add value to the business? Right? C:

I'm sure it's never this sunshine-y in every company or team. Though, I'm truly fortunate that my current team is super patient with me and my development. It gives me more motivation to learn as fast and effectively as possible so that I can make meaningful contributions.

Having a seemingly endless number of resources online really facilitates growth. And with that, I'm happy I stumbled upon dev.to and will continue to <del>lurk</del> contribute for the many days to come.
Advice to the New Programmers👦
Tags: career, beginners, javascript, webdev
Published: 2018-04-17 20:07:01

---
title: Advice to the New Programmers👦
published: true
description: No one has 100% clarity about everything. 
tags: career,beginners,JavaScript,webdev
---




**Advice to the New Programmers.🏁** 

- Don't think that you are not enough to compete.
- No one has 100% clarity about everything.
- Every one is zero at the time of starting.
- Never stop learning.
- Start slow and Strong. 
- Never Ever think Coding is for Clevers.
- Make Mistakes and Learn from your mistakes.
- Don't Learn Coding for the sake of Job
Youtuber Adventure!
Published: 2018-04-17 18:18:17

---
title: Youtuber Adventure!
published: true
description: 
tags: 
---


I was always thinking about starting my personal YouTube channel, I love teaching people why I know from my experience in programming so the time has come :

I started a series called "Unity Demos" where I will make a demonstration of a features/tricks every Unity Developer can use.

If you find it useful, don't forget to subscribe :)

My Youtube channel link:

https://www.youtube.com/channel/UCYcA8F0TSz7--trnny9jM6w

Cheers!
Released AWS ECS deployment manager
Tags: aws, opensource, docker, devops
Published: 2018-04-17 17:08:54

---
title: Released AWS ECS deployment manager
published: true
description: Introduction of ECS deployment manager
tags: aws, opensource, docker, devops
---

I developed [AWS ECS](https://aws.amazon.com/ecs/) deployment manager named `genova`.
This package provides ECS deployment function.

## Features

* YAML based task definition
  * Support encryption of environment variables by [KMS](https://aws.amazon.com/kms/)
* Supports multiple deployment methods
  * Command base deploy
  * Slack interactive deploy
  * GitHub push detect deploy
* Provide web console
* Deployment execution
  * Build image from repository on GitHub
  * Push image to [ECR](https://aws.amazon.com/ecr/)
  * Create service
  * Update service
  * Support scheduled event
  * Rotation cleanup of repository on ECR

<img src="https://raw.githubusercontent.com/wiki/metaps/genova/assets/images/overview.png" width="60%">

## This package is open source

For contents, please refer to README.
https://github.com/metaps/genova/
(Core library: https://github.com/naomichi-y/ecs_deployer)
Jenkins Pipeline, succinct presentation
Tags: jenkins, pipeline, deploy
Published: 2018-04-17 14:38:47

---
title: Jenkins Pipeline, succinct presentation
published: true
description: Knowledge on Jenkins Pipeline
tags: jenkins, pipeline, deploy
---

To access to the pipeline possibilities, you need to create a project with the pipeline default type.

Pipeline code must start by `Pipeline {}`
Into this, we can define stages like this: `stage('NameOfStage') {}`
And into these stages, we can define multiple steps like this: `steps {}`
Commands go into the steps. Before the stages, you should add an [agent](https://jenkins.io/doc/book/pipeline/syntax/#agent) to let know Jenkins where to run and other configurations like [post](https://jenkins.io/doc/book/pipeline/syntax/#post) (defines other operations to come after the steps or stages) and [tools](https://jenkins.io/doc/book/pipeline/syntax/#tools) (define the tool and put it on the `PATH`).

This matches a declarative pipeline;

There is also scripted pipelines which starts by: `node {}`
Then, you can add stages to it but no steps. The code resides in the stages.
 

A descriptive pipeline will checkout source code management (git) by itself before running anything contrary to a scripted one.

In a descriptive pipeline, you can add a `script {}` into a steps to execute some code otherwise, you are forced to use pre-formatted commands like `sh mvn --version`, `echo Hello World!`, etc.

We must use the [Groovy language](http://groovy-lang.org/) to code into a scripted pipeline (or the script block). Different Java libraries and [plugins](https://plugins.jenkins.io/) may be added to Jenkins depending on needs.
For example, to use the Double class, it should be added. I didn't know so I tried to build the project using it and once the build failed, I looked up the console log and saw a link to add the class. The link leads to a form when you can add or delete libraries. You can find this form in "Manage Jenkins" => "In-process Script Approval".

Some [Jenkins environment variables](https://wiki.jenkins.io/display/JENKINS/Building+a+software+project) are also alvailable to use into the pipeline: `env.BUILD_NUMBER` for example.


Also, the code of the pipeline can be stored in a Jenkinsfile which will be commited to your project repository defining the continuous delivery process as part of the project.
Chrome 66 (and a Delayed Chrome 65 Update)
Tags: chrome, browsers, devtools
Published: 2018-04-17 13:57:52

---
title: Chrome 66 (and a Delayed Chrome 65 Update)
published: true
description: How the Chrome browser has changed in release 65 and 66
tags: chrome, browsers, devtools
---

* [Chrome 66 - What's New in DevTools](https://youtu.be/eaYXFTJVewA)

And the same again in text form:

* [What's New In DevTools (Chrome 66)  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/02/devtools)

<!--more-->

## Chrome 65

* [New in Chrome 65: CSS Paint API, Server Timing API, and CSS display: contents](https://www.youtube.com/watch?v=_W4GSpoSOZI&index=2&t=0s&list=WL)
* [Chrome 65 - What's New in DevTools](https://youtu.be/D1pV7ermy6w)

Or, if you prefer words:

* [New in Chrome 65  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/03/nic65)
* [What's New In DevTools (Chrome 65)  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/01/devtools)
HTTPS Everywhere ! (Or at least on your website(s))
Tags: webdev, showdev, raspberrypi
Published: 2018-04-17 13:37:50

---
title: HTTPS Everywhere ! (Or at least on your website(s))
published: true
description: How to easily setup SSL Encryption (HTTPS) on self-hosted websites
tags: webdev, showdev, raspberry-pi
---

*Originally posted on 2017-10-24 on [my self-hosted WIP Blog](https://alzai.xyz/post/3)*

You might have noticed this website is encrypted !

This is because with the recent release of KRACK, the WPA2 vulnerability, I decided to setupt what I had tried to four months ago *(see [my previous post](post/2))* 

Last time, the process was difficult since my OS (Raspbian) was missing some dependencies and I had to fiddle with repositories lists to install software written for Debian.
I had no idea what I was doing and decided it was best not to continue.

This time on the other hand, I discovered [certbot](https://certbot.eff.org/) ! This Let's Encrypt client made it so much easier. This is how the process went :
* Download certbot
* *RTFM*
* Run certbot
* Fail because you haven't redirected port 443 to your server
* Spend half an hour trying to remember your router's password (and fail)
* Ask your network admin (aka Dad) for the password
* Redirect port 443
* Run certbot
* Have a cup of tea and some biscuits to celebrate !

It's as easy as that ! So really, if you have a web server with self hosted apps, don't hesitate and encrypt everything !

Cheers !

Alzaï
Chameleon v.12 Release Notes
Tags: devexperts
Published: 2018-04-17 11:10:07

---
title: Chameleon v.12 Release Notes
published: true
tags: Devexperts
canonical_url: https://blog.devexperts.com/chameleon-v-12-release-notes/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q5uzh1mcekbhclgv045k.png
---

*The following release notes report a complete changelog from v.7 to v.12.*


Chameleon is a powerful web tool for creating and controlling multiple color palettes across an entire product suite. This release includes several long-awaited updates with many new features and performance fixes. With this release, Chameleon has a large set of stable foundational features and is better positioned for the next wave of improvements.

Version 12 is available on the link:

[https://github.com/Devexperts/chameleon](https://github.com/Devexperts/chameleon)

**CHANGE REQUESTS**

1. Changes made during each user’s session are now persistent. Any uncommitted changes or selected palettes when a user session is exited are restored when the user begins a new session. These sessions are saved to local storage on the user’s device. The Save Changes button has been renamed Commit Changes to reflect this new functionality.
2. All changes are highlighted prior to committing to make it easier to identify the current color changes before saving to the server.
3. Finally, we’ve added Delete and Rename buttons to the “Select Palettes” window to help manage clutter in the UI space. Delete in this context actually performs an archive action so no information is lost from the Chameleon server.
4. You can now delete any color in “Edit Variable” window by clicking on the “flame” icon 🔥. It removes the color from the color palette but does not automatically commit this change to the server. This color becomes highlighted as an uncommitted change.
5. There is now better support for color and opacity input and validation. Invalid input data is now highlighted in red. Auto-complete for color codes is added.

**IMPROVEMENTS**

1. Layout better fits smaller screens down to tablet size. Now page width can go down to 780px without loss of productivity. It is possible to use one monitor for two open applications.
2. Significant improvements in performance after clicking “Commit Changes”.
3. Now utilizes an expanded layout which has less space for padding and more space for color palettes.
4. Small tweaks to the main navigation. Navigation buttons are grouped in a single fixed header. Scrolling color palettes do not block access to the primary features: selecting new palettes, adding variables and committing changes.
5. A more user friendly Chameleon UI appearance.

**BUGS**

Small fixes to importing external color palettes and saving color changes to the server.
[flame]: https://thepracticaldev.s3.amazonaws.com/i/9ptll66buzt7bbe5y06i.png
Convert snake_case to CamelCase in Vim
Tags: vim, bash, fish, perl
Published: 2018-04-17 08:37:25

---
title: Convert snake_case to CamelCase in Vim
published: true
description: 
tags: vim, bash, fish, perl
---

This is a small snippet.

Create this function in your shell:

```bash
# .bashrc / .zshrc

camelcase() {
    perl -pe 's#(_|^)(.)#\u$2#g'
}
```

If you use fish:

```php
# .config/fish/config.fish

function camelcase
    perl -pe 's#(_|^)(.)#\u$2#g'
end
```

Then, you can convert standard input to CamelCase:

```
~> echo array_map | camelcase
ArrayMap
```

These functions are useful themselves. Furthermore, you can use them in Vim.

Select snake_case lines to be converted, then type `!camelcase` then press return key.

![out.gif](https://qiita-image-store.s3.amazonaws.com/0/103885/8b8fbbb7-7124-5199-38e7-a67691037ff0.gif)

# Appendix

You can convert CamelCase to snake_case with this function:

```php
function snakecase
    perl -pe 's#([A-Z])#_\L$1#g' | perl -pe 's#^_##'
end
```

We can enhance vim using command line function.
Hope this article helps you have a better CUI experience in Vim.