teleren/devto huggingface dataset:
Chessboard pattern problem
Tags: javascript, beginners, codenewbie, career
Published: 2020-08-17 17:50:32

---
title: Chessboard pattern problem
published: true
description: 
tags: #javascript #beginners #codenewbie #career
//cover_image: https://direct_url_to_image.jpg
---

### Chessboard problem:

Write a program that creates a string that represents an 8 x 8 grid. At each position of the grid there is either a space or # character. The characters should form a chessboard.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zfq8f3zasfgjfxbfoyir.png)

### Solution:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k3uaqztpnhl5xc9u42jj.png)

Happy Coding!
Tooltip-sequence v0.2.2 🔥
Tags: showdev, javascript, ui, webdev
Published: 2020-08-17 17:42:18

[tooltip-sequence](https://tooltip-sequence.netlify.app/) - A simple yet creative chain/sequence of tooltips to help guide users in your site.

So a couple of days ago I started off with this idea of creating a simple, yet creative solution for all the people who are finding it difficult to show certain actions on the web, without writing a big passage or documentation with a whole bunch of screenshots. This often seems to be meticulous or confusing for new users or for existing users who find it difficult to keep track of the changes in your app. 
   This plugin will help you solve that by focussing on what you want your users to see and guide them to it. The cool thing is that it is lightweight and has no dependencies to it. It can be used with ease and just by calling a simple function.

### Some of the features in this plugin
* Literally put anything in the tooltip description, text, html or emoji. Your can express your creativity through it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7qui9aibx0hah129c2wo.png)

* Is Responsive on mobiles. You a want it to work on mobile sites also, no worries, it looks as good as on web on mobiles too.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zsp6wcy1xcn4fgwyy18v.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vt1e9crnv1xw9oo8xe2u.png)

* Takes you to the element with focus. Hard to find something on the page, hidden long way below that you find it difficult to scroll into. No issues, each tooltip will take you to the corresponding element with focus.

* Stop from any step. If you think you are clear in step 2 and want to skip the guide, you can literally stop it from anywhere.

* Callback events (coming soon) - Suppose you want to do something when the element is focused. Say for example, you guide the user to a form, and you want to show them each element of the form and samples to type. So in each step in the event you could literally fill the form with sample values and when the user quits, you could refresh the form. 

This plugin would be basically be doing the work of a tutorial but without someone spending the time and effort making a video or a documentation, but showing the user what needs to be done in a step by step way. 

Thanks for reading this and if you like this plugin, please make sure to like this post and star my github repository. ❤️
String in Dart/Flutter – Things you should know
Tags: dart, flutter, nextfunc, coflutter
Published: 2020-08-17 17:37:50

String is an important data type in almost programming languages (if not all). Dart is not an exception. In this post, I will show you several things that you may (or may not) know about String in Dart/Flutter.

**1. String literals can be wrapped in single quotes or double quotes.**
```
// Both are accepted in Dart
const singleQuoteString = 'Hello Coflutter';
const doubleQuoteString = "Hello Coflutter";
```
👉 It is recommended that you make it consistently, choose one style and use it throughout your code.

**2. If you use pedantic as your linter, single quotes is preferred.**

```
// Warning with pedantic
const s1 = "Hello Coflutter"; // Warning: Only use double quotes for strings containing single quotes.
const s2 = "Hello. I'm Coflutter"; // OK
```
👉 You can find the rule [here](https://dart-lang.github.io/linter/lints/prefer_single_quotes.html).

**3. Use a backslash ( \ ) to escape special characters.**

```
print("I'm Coflutter");
print("I\'m Coflutter");
print("I\'m \"Coflutter\"");
print('Path: C:\\Program Files\\Coflutter');
```

```
// Output
I'm Coflutter
I'm Coflutter
I'm "Coflutter"
Path: C:\Program Files\Coflutter
```

**4. “Raw” string (r before string) can be used to escape special character too.**
```
// "Raw" string
print(r'Path: C:\Program Files\Coflutter');
print(r'I have $100 USD');
```

```
// Output
Path: C:\Program Files\Coflutter
I have $100 USD
```

**5. Triple quotes can be used to represent multiple lines string (instead of using “new line” character (\n)).**

```
// Multiple lines string
print(
      '''This is a multiple line string,
      created by Coflutter
      '''
);
```

**6. Override toString( ) method in your object to have beautiful output when print( ).**

👉 Find [details and example here](https://coflutter.com/dart-how-to-print-an-object/).

**7. String supports padding methods: paddingLeft( ) and paddingRight( ).**

👉 Find [details and example here](https://coflutter.com/dart-how-to-print-an-object/).

**8. String multiplication is supported in Dart. But the string must be placed before the multiply operator (Permutation does not work).**

```
const fire = '🔥';
  for (var i = 0; i <= 3; i++) {
    // final output = i * fire;
    // -> Error: The argument type 'String' can't be assigned to the parameter type 'num'.
    final output = fire * i;
    print(output);
}
```
```
🔥
🔥🔥
🔥🔥🔥
```

**9. String interpolation.**

👉 [Interesting facts about String Interpolation](https://coflutter.com/dart-interesting-facts-of-string-interpolation/).
Acceptable Magic 🧙
Tags: discuss, javascript
Published: 2020-08-17 17:29:38

I wrote a class which when instantiated, resulted in a callable object with a valueOf string.

The result was a very slick and intuitive interface for a library with 0 boilerplate.

The thing that bugs me is that I'm totally fine with this in the context of it's usage, that the CSS equivalent of what I was making had similar ergonomics. Is it okay to use magic JavaScript that would otherwise be strange if your mirroring an existing interface from another language?

What is the line between complexity and innovation?
Tree Views
Tags: codenewbie, codepen, computerscience, cpp
Published: 2020-08-17 17:17:54

I was going through some coding problems related to Views(Top view, Left View, Bottom View, and Right View). So, I decided to share my knowledge with you guys. Keep reading :)

Firstly, let me introduce each view with a brief description.
1. The <b><i>top view</i></b> of a binary tree is the set of nodes visible when the tree is viewed from the top. 
2. The <b><i>left view</i></b> of a binary tree is the set of nodes visible when the tree is viewed from left.
3. The <b><i>right view</i></b> of a binary tree is the set of nodes visible when the tree is viewed from right.
4. The <b><i>bottom view</i></b> of a binary tree is the set of nodes visible when the tree is viewed from bottom.

##Top View
Steps to find Top View:-
1. Create a queue and a map<int, int>.
2. Push the root node inside the queue.
3. In class Tree, initialize int hd = 0 as its member.
4. Now map the value with of root with its hd(Horizontal Distance). 
5. Now make a while loop which will run until the queue becomes empty.
6. Now pop out the element and check if hd count in map == 0, then map it with its horizontal distance i.e., hd.
7. Check whether it has left child, if yes then firstly map the root-<left value with hd-1, and then push it in the queue.
8. Similarly, check for the right child, and map it with hd+1, and push inside the queue.

What we are doing here is, we have defined horizontal distance of root node = 0, as we move leftwards, its horizontal distance decreases by 1 and for rightwards, its horizontal distance increases by 1. Then in Step 6, we are checking if the element is already present at that horizontal distance or not, if it is present, then we don't map the root value with hd. As we want only the top view nodes.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2chz41j8a1gy4zivbbou.png)

Refer to this image to understand horizontal distance in a better way.

I Will Continue this topic for next type of views, as I like to keep my blog short, so stay connected and please follow me for new updates :)
Chingu Weekly 108
Tags: softwaredevelopment, community, learning, applicationdevelopme
Published: 2020-08-17 17:00:49

---
title: Chingu Weekly 108
published: true
date: 2020-08-17 16:49:32 UTC
tags: softwaredevelopment,community,learning,applicationdevelopme
canonical_url: https://medium.com/chingu/chingu-weekly-108-46300aad1122
---

Congratulations Voyage #21 Chingu’s & Welcome Explorer Cohort #1

![](https://cdn-images-1.medium.com/max/1024/1*D_kMyjq51XeLhIvZ_f3OAg.jpeg)

### Shout-outs & Showcases

🎉 Congratulations to the Chingu’s in Voyage 21 who completed their projects and received their Certificates of Completion!

Not only did you get a new project to add to your portfolio, but you’ve refined your technical skills and learned much about how to be productive in a remote team!

🎉 Welcome to members of the Explorer Cohort #1 that kicked off on August 10th!

We are very excited that you’ve joined the Chingu Community as you work to complete your Solo Project by September 4th! We are looking forward to seeing what you’ll be creating and we’ll be providing valuable feedback for all submissions

![](https://cdn-images-1.medium.com/max/1000/0*jyKZPpcjuu2j7_Xu)

And last, but certainly not least, a big shoutout to both _PabloWBK & SilentK_ who landed new Developer jobs this week! Well done!

### Overheard in Chingu

![](https://cdn-images-1.medium.com/max/1000/0*4ncBSPYwsRO_iKLR)

> I could imagine this in some cool color scheme

> I found implementing authentication and authorization something lots of apps can use

> I believe in getting a head start on the weekend. That’s why I start mine on Tuesday

> It’s way too stressful for a Friday

> Well, I need to go eat dinner. Then study JS until I fall asleep

> Lol I am rediscovering all the old songs

> If you talk to @abandoned\_VarunR enough you learn all the possible frameworks, libraries, and packages you can run

> Humidity here makes running difficult some days…Like breathing under water

> Also google is a developers best friend

> Prob gets a random number and checks if a timeout or interval already has that id. Return it if it’s unique other repeat the process. Assuming it uses Math.random since it’s built into JS

> I just want an ssd that won’t die on me

### Resources of the week

![](https://cdn-images-1.medium.com/max/1024/1*bYKnEfRN--tG8GT4F4XRZQ.png)

[OpenGenus Cosmos Algorithms](https://github.com/OpenGenus/cosmos)

![](https://cdn-images-1.medium.com/max/916/1*Og6I7ntDrHD1cfjUp0EOAQ.png)

[Web Applications 101](https://www.robinwieruch.de/web-applications)

### Chingu of the week

A big thanks to [Max Weber](https://medium.com/u/9f49bfc60bf8) & [Mahtab Tadayon](https://medium.com/u/332a792cb4a0) from Flutter Explained who have helped make the Explorer Cohort #1 a success.

They are longtime Chingu’s who are the driving force behind [Flutter Explained](https://www.youtube.com/c/FlutterExplained)!

### Quotes to Go

![](https://cdn-images-1.medium.com/max/1024/0*2NjhRIzVzUW0LdfG.png)

> You can learn more about Chingu & how to join us at https://chingu.io

* * *
What am I doing wrong? (I’m trying to make a Django project) 
Tags: django, python
Published: 2020-08-17 16:27:27

I have a folder DjangoTest

I first run:

python3 -m pip install —user virtualenv 

Then 

Python3 -m venv env

Then activate:
source env/bin/activate 

INSTALLING DJANGO:
python -m pip install Django 


But it’s not running.... how do I start it???
Code feedback
Tags: feedback, productivity, javascript
Published: 2020-08-17 16:25:12

![Feedback](https://dev-to-uploads.s3.amazonaws.com/i/ejrdpsdsz034xt20ka6r.png)

Hi guys, I just finished some vanilla javascript mini projects. And i tried my possible best to follow best practices. Please I would be so honoured if you can give me feedbacks on the code.

Thanks,

### Code Up For Review
* [Todo Repo](https://github.com/rustydcoder/todo-list-js) --- [js code](https://github.com/rustydcoder/todo-list-js/blob/master/index.js)

* [Flip A Card](https://github.com/rustydcoder/flip-a-card) --- [js code here](https://github.com/rustydcoder/flip-a-card/blob/master/game.js)

* [Bin2Dec](https://github.com/rustydcoder/bin2dec) --- [js code here](https://github.com/rustydcoder/bin2dec/blob/master/app.js)
10 best responsive front-end framework you should know about🔥
Tags: uiweekly, codenewbie, webdev, css
Published: 2020-08-17 16:23:41

Frameworks are based on precompiled CSS and common HTML that provide a structure, a framework if you will, for you to base your website on. Frameworks are designed to get you up and running with a functional fast and easy. 


##**1. [UIkit](https://getuikit.com/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1594rvxfsoxgrzuwsxe4.PNG)

A lightweight and modular front-end framework for developing fast and powerful web interfaces that comes with its own SVG icon font and a number of components.


##**2. [Foundation](https://get.foundation/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yqokhslpl3c0vk4wnx20.PNG)

The most advanced responsive front-end framework in the world.



##**3. [Bulma](https://bulma.io/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d01oz20qmzecmyc3u5xu.png)

Bulma is an open-source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.



##**4. [MaterializeCSS](https://materializecss.com/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5vlygvaem46igs2gj8p4.jpg)

A modern responsive front-end framework based on Material Design. It's really simple to use.


##**5. [Material-UI](https://material-ui.com/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dbipe1xaa67lry7sv54r.PNG)

A CSS Framework and a Set of React Components that Implement Google's Material Design.



##**6. [MiniCSS](https://minicss.org/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hmmeuy5odzk0730frac4.png)

Responsive, style-agnostic CSS framework.



##**7. [Skeleton](http://getskeleton.com/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6a6jssdsx703d3ztewrd.PNG)

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.



##**8. [Bootstrap](https://getbootstrap.com/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xjvo5h54ru74vvwaeb3r.png)

Simple and flexible HTML, CSS, and JS for popular UI components and interactions.



##**9. [Element UI](https://element.eleme.io/#/en-US)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8hzlyw3r7b3zul9zffkx.PNG)

Element, a Vue 2.0 based component library for developers, designers and product managers.



##**10. [Purecss](https://purecss.io/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gtjw20itfdaqtgbrfawo.PNG)

A set of small, responsive CSS modules that you can use in every web project.


![Alt text of image](https://media.giphy.com/media/VObHs6oqEWFNe/giphy.gif)



{% link https://dev.to/satyampandey24/beginners-gradient-background-generator-project-iao %}
I made a clone of xiaomi phones calculator
Tags: react, javascript, html, css
Published: 2020-08-17 16:15:46

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4f1y93niompqyu7uczdq.png)

Hello!

I am learning ReactJs and to practice I made a clone of xiaomi phones calculator.

This application has almost all the features of xiaomi phone calculator, it includes basic arithmetic operations and it stores history of the basic operations in local storage of device and it has two more section named as **Life section** and **Finance section**.

# Life section  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dh2rd9pmhdguh8wxcu36.png)


It includes operation's like calculate **Age**, **Discount**, **Length**, **Percentage**, **Time**, **Number System** etc.


# Finance section
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gku1pxsw0iqa61izz71w.png)


It includes operation's like calculation of Currency conversion which supports 30 different currencies and the currency rate is fetched from API. Along with that it also contains Bill split and GST calculation feature.

This application is created using `creact-react-app` so it gives all the features of PWA and that can be enabled by just changing one line of code in `index.js` file. so this is a PWA application.

#Demo 
Demo of the application is available [here](https://cal-rouge.now.sh/)

#[Code Repository](https://github.com/deepakmauryamd/calculator)

Please have a look and let me know your thoughts about it and any feedback would be appreciated.
Are your Ruby gems up to date ?
Published: 2020-08-17 16:13:35

Do you write Ruby applications ? Are your gems up to date ? You can now automatically update your Ruby gems with our CLI v1.10.0+ ! 

All you need to do is update your `.pmbot.yml`:

```yaml
version: '1'
packageManagers:
  - packageManager:
      name: ruby
```

and use our latest `pmbot/bot:ruby` Docker image that embeds Ruby 2.7 and Bundler 2.1.4.

Go secure !

Read further:
- [the official blog post](https://blog.pmbot.io/automated-dependency-updates-with-ruby-and-pmbot/)
- [Ruby package manager plugin docs](https://docs.pmbot.io/package-managers/ruby)
- [our official website](https://pmbot.io)
Win Nintendo Switch and get Jupi’s coverage in Web Monetization category
Tags: js13kgames, challenge, webmonetization, javascript
Published: 2020-08-17 16:29:37

---
title: Win Nintendo Switch and get Jupi’s coverage in Web Monetization category
published: true
date: 2020-08-17 15:51:08 UTC
tags: js13kgames,challenge, webmonetization,javascript
canonical_url: https://medium.com/js13kgames/win-nintendo-switch-and-get-jupis-coverage-in-web-monetization-category-1c7b859c6451
cover_image: https://cdn-images-1.medium.com/max/1024/1*UDmXjjXOAq_y-utEUTM-hQ.png
---

Since you can win Magic Leap in the [WebXR category](https://js13kgames.com/webxr) this year, I thought the [Web Monetization one](https://js13kgames.com/webmonetization) is missing something as well - that’s why I’ve decided to add **Nintendo Switch** as the prize for the best entry.

![](https://cdn-images-1.medium.com/max/1024/1*UDmXjjXOAq_y-utEUTM-hQ.png)

Remember that we’re making slight changes in how the entries will be judged. Last year, we had an “overall” ranking, and then the categories were more like a filters. If you won in Desktop, and submitted to Mobile and Web Monetization, you won those as well, no matter how good your actual mobile or monetized implementation was. This year your entry will be judged in every category separately, so you will be able to end up low in Desktop but high in Mobile if you focus on delivering the best touch-enabled experience, or win Web Monetization if you make your implementation original and outstanding enough.

![](https://cdn-images-1.medium.com/max/1024/1*mQS3oPk2MWfp5U8B8JQzPA.png)

We’ve also teamed up with [Jupiter Hadley](https://www.youtube.com/channel/UC6A61A0RUz94hbgreCMO3cw), who will be **playing all the games** submitted to the Web Monetization category as a priority, and then if time permits the other compo games as well. If you want to score a 100% chance of having your entry covered by a YouTuber, this is the best way to go.

Don’t forget about the [Coil](https://coil.com/) memberships for half a year each that will make you a paying Web Monetized user - we are giving that away to all participants. Those submitting to the [Web Monetization category](https://js13kgames.com/webmonetization) will get the coupon codes automatically via email, while others will have to [request](https://js13kgames.com/#contact) them.

If you have any questions, or want to discuss anything, then please join our [Slack channel](https://slack.js13kgames.com/)!

* * *
Handling subdomains with js frameworks
Tags: vue, routing, javascript
Published: 2020-08-17 15:33:17

Is it possible to handle subdomains with frameworks? 

Here I'm talking about nuxtJS specifically, 
I'm having a site, let's say example.com which shares the layout and few components with subdomain blog.example.com, now i want to create common nuxtJS project for this so that the layouts and other things can be shared between them. I already tried to implement it but I'm not getting the expected result... 
Let's say I'm having folder structure like:
```
Pages / main-domain 
     |__subdomain
```
As we can get subdomain part from window.location,so modifying default routes i can serve the files based on the url, and even my DNS is also configured for wildcard card locations so i can go to *.example.com and it'll show me my site but now problem is that I don't know how can i travel between different subdomains.
Azure spell checker GitHub action
Tags: actionshackathon, github, opensource, showdev
Published: 2020-08-17 15:28:59

---
title: Azure spell checker GitHub action
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f6f8theruy4eu0xy8pqm.png
published: true
description: My submission to the GitHub Actions x DEV Hackathon! This action will correct the spelling of an issue comment
tags: actionshackathon, github, opensource, showdev
---

> **Spelling errors cause frustration for maintainers, it can delay a response or cause confusion in what is being discussed.**

I'll admit, I'm not a great typist. I fat-finger keys and misspell words a lot. I try to be careful, write slowly, and proofread anything before sending a message. I also leverage tools that will flag spelling and grammar errors. When I write quickly it typically results in some misspellings.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lw4psmtvw0jea81teu8u.jpg)

### My Workflow 
The opensource community uses issues as a way of communicating problems feature requests questions, etc. Maintainers need to read each issue and all the comments. Spelling errors cause frustration for maintainers, it can delay a response or cause confusion in what is being discussed. To help a maintainer I have created a spell check using the [Bing spell check API](https://azure.microsoft.com/en-us/services/cognitive-services/spell-check/) azure service. 

Once a person leaves a comment on an issue an action will trigger to grab the text and spell-check it using the Azure API. If any corrections come back in the response the action will check how confident the suggestion is against what the configuration is set to. If the confidence is higher than the configured confidence, the action will update the word(s) automatically. 

_This can save a maintainer so much time that I wanted to submit it to this Hackathon._

#### Requirements
You will need to signup for [Azure](https://azure.microsoft.com/en-us/account/) and create a Bing spell check service. This can all be done for free. Once created, you will get a Key and Endpoint that you can add to your [Secrets](https://docs.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) in the repository.

### Submission Category: 
Maintainer Must-Haves

### Yaml File
```yaml
uses: tonydiaz/bing-spellcheck-github-action@main
with:
  spellchecker-key: ${{ secrets.SPELLCHECKER_KEY }}
  spellchecker-endpoint: ${{ secrets.SPELLCHECKER_ENDPOINT }}
  spellcheck-confidence: 0.90
  github-secret: ${{ secrets.GITHUB_TOKEN }}
```

### Link to Code
{% github https://github.com/tonydiaz/bing-spellcheck-github-action %}

### GitHub Action in action:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/37mktds0s31ix2ynzlo7.gif)

### Additional Resources / Info
- Dev username: tonydiaz