teleren/devto huggingface dataset:
More remote developer teams launched this week! Chingu Weekly 104  
Tags: webdev, beginners, career
Published: 2020-02-03 18:29:23

---
title: More remote developer teams launched this week! Chingu Weekly 104  
published: true
description: Chingu Weekly 104 
tags: #webdev, #beginners, #career
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kf9kz66x1bvio2rtft11.jpeg
---


## News, Shout-outs & Showcases 
🔥Voyage-16 starts this week! Here we gooo! For anyone who wants to join in the future, check out https://www.chingu.io/

🔥Have a look at Kevin F's [Tonic fitness app](https://chingu-tonic-fitness.herokuapp.com/)! 


🔥brunabarbosa made this app called MyBook. [Check it out here](https://frozen-plateau-13168.herokuapp.com/)! 


🔥Darko wrote an article called [Improving your (Web) Dev Foo](https://dev.to/puritanic/improving-your-web-dev-foo-1m87).


🔥Throwback: Here's a project done by a team a few years ago in a Chingu Voyage: [Do-More](https://chingu-voyage3.github.io/geckos-15/) by Nicolas BG, louisf, dpbrinkm. 
This application provides users a clean and simple tool to organize their daily activities, improve productivity and speed up internet searches.

## Overheard in Chingu
*Random lines taken out of context from the Chingu community.*

>What does your name mean? Mel Gibson stole my name
try to identify what is getting you stuck and solve that. it might seem mundane or unimportant or even unrelated to coding but since it is impeding your progress…. It is now your focus.
you're talking in riddles, sir
I really should be getting ready for sleep but then I would have to be responsible
backend is where I spend most of my time. I really like js. My style skills are not great so usually I try to find people to do projects with that compliment my weaknesses. Mainly I really freaking hate CSS
I would love to make my passion my job.
This is the first step to learn how to code
I read, surf and of course code
"I am jack off all trades but a master of none" Thats a good and a bad thing at the same time but I enjoy being this kind of generalist.

## Resources of the week

From @ola: 
>"I stumbled across this great blog. Here is an article about getting started with using code challenges for learning test driven development"

[From Apprentice to Master: how to learn TDD aka Test Driven Development](https://philippe.bourgau.net/from-apprentice-to-master-how-to-learn-tdd-
test-driven-development/)

>"And [another article about creating a mind map](https://philippe.bourgau.net/to-do-list-or-mind-map-for-programming/) when you are pair programming with someone:"


## Meme to go

![Meme](https://dev-to-uploads.s3.amazonaws.com/i/nqk6bw2jaql4i2c4bbvh.png)
Blog migration complete
Published: 2020-02-03 18:17:53

Since I first discovered dev.to as a viable blogging platform (or I as I like to think of it, MySpace for Programmers), I've been [migrating my blog posts](https://dev.to/adamkdean/migrating-to-dev-to-190). Initially, and until today, that looked like this. 

First, I take an old blog post, such as this one [Melatonin Busting Glasses](https://dev.to/adamkdean/melatonin-busting-glasses-3mdc). I'd copy the markdown into this editor, set the title and tags, add an image, and then remove the frontmatter (a YAML header often used for metadata) and save the post.

Each day, I'd do a few, finding new header images, and each time adding a little note saying "Originally posted on x, 2013" etc, with a link to a post explaining it. A lot of the posts were outdated, but, I keep them with me as I move from blog to blog, ten years of writing.

Then, tonight, I forgot to remove the frontmatter from a blog post, and WHAM! the blog post had the date set as 2013. Not only did I find a way to set the date to the original posting date, but I could also make my life easier by creating a generic cover image for every post!

![Archived post](https://dev-to-uploads.s3.amazonaws.com/i/y9hxcwi5y92j6zfcxbjx.jpg)

So, for the last hour or so, I've just been copy pasting markdown files with the cover image added, one by one, into the write post. I was worried I was spamming the feed but I think actually that's not the case.

For the few posts which I already posted, I can't seem to now change the date of those, so I'll leave them as they are as they have comments. But, it's fair to say now, that at 191 posts and what felt like 74 hours of copy pasting manually, I've now migrated my blog to dev.to!

![](https://media.giphy.com/media/k4vY4FcPuqKWc/giphy.gif)
Pagination in React.
Tags: react, javascript, beginners, css
Published: 2020-02-03 18:05:13

Pagination is a type of feature you can find everywhere **Bloggin** website or on any **E-Commerce** website are the most common examples.

A few days ago I was working on a project in which I need to implement a blogging feature. Especially a timeline page where all posts will be visible. Now users can't see all posts at a time so it's a good idea to paginate data.

Now, there are a whole lot of libraries that can provide the same functionality but I don't want to use them. I want to create my own implementation and I haven't done it before. So I started searching for implementation on *google*. After a few hours of searching, I got nothing.

I found a few solutions but they were way complicated to understand. So I came up with my own solution. This solution may not be perfect but it's working for me.

Ok, so here how started picturing it.

1) In most of the pagination components, there are 7-page switching buttons. If we have data of length more then 7 pages.

As shown I picture below.

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

2) We need an array of page numbers to iterate and create page switching buttons.

Here is the logic for returning an array to iterate over.

```javascript
   if (total <= 7) {
      let arr = [];
      for (let i = 1; i <= total; i++) {
        arr.push(i);
      }
      setPages(arr);
      return;
    }
    if (active <= 4) {
      setPages([1, 2, 3, 4, 5, "...", total]);
    }
    if (active > 4 && active < total - 3) {
      setPages([1, "...", active - 1, active, active + 1, "...", total]);
    }
    if (active > total - 4) {
      setPages([1, "...", total - 4, total - 3, total - 2, total - 1, total]);
    }
```

Here I have handled four cases.

* If we have less content that will fit in less than 8 pages then we simply return an array with numbers from 1 - last page.

* Now if we have content that will fit in more than 7 pages. We need 1 - 5 numbers and "..." and last page numbers like `[1 2 3 4 5 ... 10] this`. Also if the user clicks on page number 1 to 4. The array will be the same.

* In the third case, we need pages like `[1 ... 4 5 6 ... 10]` this.

* In fourth case pages will be `[1 ... 6 7 8 9 10]` this. (considering total pages are 10)

That's all. Take your time if you didn't get my point. Try to understand again. It's really simple.

This is a working example and code.

{% codesandbox thirsty-brown-hbuw5 %}

I hope it will help. See you soon.

![Bye](https://media.giphy.com/media/l41lUeeQfYfACcYjS/giphy.gif)
Use DIG save headache
Tags: ruby, rails, hash
Published: 2020-02-03 18:00:52

Lets assume we send a request and get the following response as JSON

```ruby
user = {
  user: {
    address: {
      street: '123 Some street'
    }
  }
}
```

Now in order to get the street address, the simplest way would be `street = user[:user][:address][:street]` but what if `address` is empty or even the `user` object is empty.

In order to avoid the error sometimes we end up writing code which looks like

```ruby
if user[:user] && user[:user][:address] && user[:user][:address][:street]
 street = user[:user][:address][:street]
end
```

The above code is valid, but looks quite ugly. With ruby a less known functionality is `hash.dig`. As mentioned in [ruby docs](https://ruby-doc.org/core-2.3.0_preview1/Hash.html#method-i-dig) `dig` *Retrieves the value object corresponding to the each key objects repeatedly.*

So, if we use dig in the above example it becomes

```ruby
 street = user.dig(:user, :address, :street) || 'Default Street'

```

Cheers
January 2020 Progress Report
Tags: motivation, showdev
Published: 2020-02-03 17:59:42

Hopefully first of many as January was the most productive month in terms of Github commits. 

![Github](https://www.deskriders.dev/images/022/jan2020-github.png)

Here is a brief summary of the things

🚀 Started [DevRider](https://www.deskriders.dev/projects/dev-rider/). Please consider contributing if you are interested in Python and PyQt. Contributions for other languages needed as well. See [this](https://www.deskriders.dev/posts/010-introducing-devrider/) post on my motivation behind building it.

🚀 Created Windows Release Package for [HttpRider](https://www.httprider.com)

🚀 Started [MindBooks](https://mindbooks.club) - A collection of thought provoking books.

🚀 Started new series on Tooltips (Currently posting on twitter but website coming soon)

February Goals:

📝 Add links to MindBook to buy books

📝 Promote Mindbooks on ProductHunt, IndieHackers and other channels

📝 Publish around 30 tooltips

📝 Move tooltips to its own website

I usually post more frequently on https://twitter.com/deskriders_twt so please consider following there for updates 🙏
Fastest way to create and share code in any language
Tags: javascript, python, codepen, refactorit
Published: 2020-02-03 17:57:29

Share code using these lightning fast sandboxes available in almost all popular languages


![Language support for sandboxes in intervue.io](https://miro.medium.com/max/2706/1*UG2HhIgSuJ4Jx1EsiE7-AQ.png)



In my last article I mentioned about [Intervue](https://www.intervue.io) to take remote interviews effectively.

I also wrote about how Intervue team has integrated everything needed to take an interview under a URL.

Today I bumped into one of their new functionalities which I found was pretty cool!!

The GIF below shows how easy it is to open a sandbox

![How easy is it to create and Intervue sandbox](https://miro.medium.com/max/1054/1*ranob3_Cd93ER0FyIIrjxw.gif)

All you have to remember is:
*intervue.io/language_name*

![Go sandbox create via intervue.io/go](https://miro.medium.com/max/2728/1*AoU4Yzrio-xHuWAL2xT_Sg.gif)

---

# Few quick access sandboxes for your reference

## Compiled

- https://www.intervue.io/c
- https://www.intervue.io/c++
- https://www.intervue.io/dart
- https://www.intervue.io/php
- https://www.intervue.io/scala
- https://www.intervue.io/java
- https://www.intervue.io/swift
- https://www.intervue.io/erlang
- https://www.intervue.io/go
- https://www.intervue.io/kotlin
- https://www.intervue.io/rust

---

## Interpretated

- https://www.intervue.io/bash
- https://www.intervue.io/coffeescript
- https://www.intervue.io/elixir
- https://www.intervue.io/python3
- https://www.intervue.io/python2
- https://www.intervue.io/python3
- https://www.intervue.io/typescript
- https://www.intervue.io/javascript
- https://www.intervue.io/r
- https://www.intervue.io/ruby

---


## Databases

- https://www.intervue.io/postgres


--- 

## Others

- https://www.intervue.io/htmlcssjs
- https://www.intervue.io/text


I can even fork these sandboxes to share particular piece of code with my colleagues or share a proof of concept with my manager.

The only drawback that I found was that the forked sandboxes expire after 24 hours.

I hope Intervue team will bring some mechanism to store these sandboxes as I could not find any.


Before I end this article here is a sample code to make polyfill for *Array.prototype.filter* function:

**[My first Intervue Sandbox](https://www.intervue.io/sandbox-IFCNZ0WX) showing polyfill for Array.prototype.filter**


Although this might expire after 24 hours as they say.


*Another great part is that it Auto Saves. No need to click the save button*


---

## Conclusion


I really liked the sandbox functionality as it is pretty light weight, easy to use and so accessible.


Happy coding!
Discussion
Tags: cis114
Published: 2020-02-03 17:34:03

Inline style is a style added as attributes of an HTML element. Embedded style is a style added to the head of an HTML file. External style is a style created by the page author and placed into a CSS file and linked to the page. The external style is what you would use to apply to an entire website.

You will add the keyword !important.

/*Tri and Succeed Sports Color Styles*/

blockquote {color: rgb(255, 0, 0);}

address {color: black; background-color: hsl(90 , 100%, 50%;}

color: rgb(232, 121, 50);

h1, h2 {background-color: rgba(255, 255, 0, 0.7);
THE POWER OF GRAPHQL - Introduction and Tutorial
Tags: graphql, beginners, webdev, tutorial
Published: 2020-02-03 17:17:12

> This video is a talk from *Byteconf GraphQL 2020*, a free, live-streamed GraphQL conference that aired on January 31st, 2020. [Visit our website](https://www.bytesized.xyz/graphql-2020) to sign up for the Byteconf GraphQL "swag bag", a free downloadable resource with everything you need to get started with GraphQL, as well as info about future Byteconf events!

**GraphQL is a query language that provides an efficient, powerful and flexible approach to developing web APIs.** 

GraphQL has gained immense popularity in the last few years with many Fortune 500 companies using them for their product development. In this talk, we will learn the core concepts of the GraphQL Query Language. 

You will learn about **Types**, **Queries** and **Mutations**, and how they are used to work with your API data. I will be showcasing these concepts using the GitHub's Public GraphQL API. 

You can follow along, and have fun learning the core concepts of the GraphQL Query Language. The purpose of this talk, is to spark your interest in GraphQL and understand the fundamental concepts of the GraphQL Query Language and Schema.

Thanks to [Adhithi Ravichandran](https://twitter.com/AdhithiRavi), who presented this talk at [Byteconf GraphQL 2020](https://www.bytesized.xyz/graphql-2020)!

{% youtube c_U0LJ4txRw %}

If you enjoyed the video, give it a thumbs-up, and [subscribe to our channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg?sub_confirmation=1) for more web dev content every week. We also have a newsletter where we send out what's new and cool in the web development world, every Tuesday – [join here](https://www.bytesized.xyz/newsletter)!
I Didn't Expect This, But I'm Happy I'm Here
Tags: beginners, junocollege, junojourney, storytime
Published: 2020-02-03 17:10:27

From Teaching to Tech — My Journey to Front-End Web Development

I had just finished my education degree, graduated, and officially became an Ontario Certified Teacher, when it hit me: I don’t want to be here.

While teaching was something I legitimately enjoyed, I found classroom teaching to be a little too rigid and, after graduating, the profession once again became the target of a political campaign. Seeing my friends, who were passionate about teaching, struggle to find consistent work pushed me further away from the pursuit of classroom teaching and I began to look at education-adjacent careers. One job that caught my eye was a curriculum consultant for a mathematics video game company, which I had used during my time in the classroom.

I have always been interested in coding and video games. My friend taught me to customize HTML using our Neopets and Piczo accounts, I liked to dive into my computer’s settings to customize it as much as possible, and playing video games was a regular hobby (oh the glorious Playstation 2). Having a job involving video games was something I kept at the back of my mind, but that job posting brought it to the forefront.

I never applied for the curriculum consultant as I was offered a tutoring position from a recruiter who found my profile on an education job posting website. While I enjoyed tutoring, it didn’t serve well as a career path.

While helping coach new skaters at a Toronto Roller Derby practice, I overheard the head coach saying that she had started her career as a pastry chef and then transitioned to being a front-end web developer. After practice I asked if she’d be willing to grab a coffee to discuss her career change, and we made plans for later on in the week. When we met for coffee she told me about how she changed her career within a year.

We talked about how she learned HTML/CSS, then completed an immersive web-development bootcamp which prepared her for her career. After talking more about the school she attended, Juno College of Technology (then called HackerYou), I was sold. The bootcamp would get me job-ready, I would receive support while job searching, and I would be part of an alumni network that actually helped each other.

I signed up for Juno’s part-time Web Development Fundamentals and Advanced course, and loved it. It was challenging, but also appealed to the way my brain works. After finishing that course I decided to apply for Juno’s full-time Immersive Bootcamp. I was accepted into the bootcamp (woot!), took a part-time JavaScript course to help prepare, and now I’m here in bootcamp. Literally. I’m typing during my lunch break.

When I complete bootcamp in 8 weeks (we’re done week 1 now), it will be 6 days before the anniversary of the coffee chat that changed my life. When I thought about my career after university I didn’t expect this, but I’m happy I’m here.

(Originally published on Medium)
Creating Neumorphic components in React, Vue and Svelte
Tags: react, vue, svelete, neumorphism
Published: 2020-02-03 17:03:29

## Hello everyone! 

In the next few days, I'll start creating a neumorpic component - a UI trends that's going to be popular soon.

Although i draw UI inspiration from [dribble](https://dribbble.com/search/neumorphism)  i didn't even know what some UI concepts was all about until i stumbled at a blog post on medium [Neumorphism in user interfaces](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6) and since then I've been designing my applications UI with the concept but i feel like creating something new out of the spec, that's why am calling a frontend developers around to globe to help contribute in the creating of `neumo` a neumorphic UI trend this 2020 and beyond 


## What can be achieved with this?
if the project goes well, we would be able to achieve the following UI with our shiny project 

see the following screenshots to be convinced   

![media one](https://cdn.dribbble.com/users/3105764/screenshots/9399378/media/0285f7facb336eaf439ade5b00c029c7.png)


![media two](https://cdn.dribbble.com/users/1245976/screenshots/9833973/media/0f9aa03ecbb204e42b6c3dcc031c143e.png)

![media three](https://cdn.dribbble.com/users/2202649/screenshots/9527558/media/2caa8dfdadc4f3264149966b8132e51b.png)

![media four](https://cdn.dribbble.com/users/1936371/screenshots/9393020/media/300ef446de8fd329a81df1d4937b25b7.png)

view more [here](https://dribbble.com/search/neumorphism) - that's where i got it from 


In the future, the specification could also introduce elements of other embed-able frameworks like vuetify, quasar for vue etc, the library should integrate well with other frameworks as well.


## In the project I'll use all of the following concepts and technologies (& more) 

- [Storybook](https://storybook.js.org/) - open source tool for developing UI components in isolation for React, Vue, and Angular.

- [Typescript](https://www.typescriptlang.org/) - A typed superset of JavaScript that compiles to plain JavaScript.

- [Sass](https://sass-lang.com) - CSS with superpowers

- and more to come


## The Goal

The goal of this project is to create a neumorphic UI component framework for creating applications super fast. If everything goes well, it will be released someday!


## Contributions are welcome!

After I set up the initial project skeleton I'd appreciate any contributions from people who would like to collaborate in component development and/or learn hands-on.
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-02-03 16:49:43

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. CSS Magic

Sarah replicates an image of a physical product in CSS. In this post, they share the steps taken to complete this challenge.

{% link https://dev.to/fossheim/how-i-recreated-a-polaroid-camera-with-css-gradients-only-4la5 %}

#2. Pancake

Rich wanted to create fluid charts without JavaScript. In this post, we learn how they made it happen.

{% link https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp %}

#3. Progressive Web Apps

Ibrahima explains the benefits of PWAs, and walks us through how to build one.

{% link https://dev.to/ibrahima92/how-to-build-a-pwa-from-scratch-with-html-css-and-javascript-4bg5 %}

#4. Cool Tool

Geon shares their new creation: a tool that explains commonly used regular expressions and creates a visual graph for matching and highlighting code. 

{% link https://dev.to/geongeorge/i-hated-regex-so-much-that-i-made-ihateregex-io-1ih4 %}

#5. Commit Conventions

Yvonnick explains the importance of writing good commit messages, and shares a framework that works well for them (and their future self).


{% link https://dev.to/yvonnickfrin/a-guide-on-commit-messages-d8n %}

#6. Big Secret

Zak shares their frustration with reliably mocking an API call for Jest tests. In this post, they explain how to mock in three simple steps.

{% link https://dev.to/zaklaughton/the-only-3-steps-you-need-to-mock-an-api-call-in-jest-39mb %}

#7. Common Scenarios

Jeremy puts together a list of common problems and shares each solution in Python, along with additional resources for learning more.

{% link https://dev.to/renegadecoder94/71-python-code-snippets-for-everyday-problems-1mep %}


_That's it for our weekly wrap up! Keep an eye on DEV this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_