teleren/devto huggingface dataset:
Running Trails With Google Maps in React
Tags: showdev, react, learning
Published: 2021-01-01 15:26:01

> Working [app](https://trails.ptifur.digital). Source [code](https://github.com/ptifur/react-google-maps-practice)

## Introduction

Hey! So I am a print designer. I discovered the world of web development last summer. What I find exciting in this media is two things.

**How the layout is fluid**. It occupies space in a different manner, changes size and colour from device to device. Or as you change the browser window size.

**How you can output the data.** You don't have to create charts, set circle size and so on manually. You just feed the data and tweak how to display it.

Here is another one of my projects.

## The plan was to...

- use public map API

- output the data over the map

- create a responsive layout


## Main resources

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

The website displays a running trail with [Polyline](https://react-google-maps-api-docs.netlify.app/#polyline) object and the trail info with [InfoBox](https://react-google-maps-api-docs.netlify.app/#infobox)

1. Google Maps Javascript API [official docs](https://developers.google.com/maps/documentation/javascript/overview)

2. Thare are lots of libraries for using Google Maps in React. I went with [@react-google-maps/api](https://react-google-maps-api-docs.netlify.app/)

3. You can go winamp with your map using [snazzymaps.com](https://snazzymaps.com) themes

4. Leigh's [channel](https://www.youtube.com/c/leighhalliday/videos) was the main reference. Google maps, Mapbox, clustering and tons of other React stuff there

## Learned a thing or two in the process

- So yeah, I figured out how to use Google Maps API in React

- Convert GPX running tracks to GeoJSON format

- Import json data to React components

- Refreshed memory on importing images / using them as CSS background in React

- Practiced splitting an app to components / helper functions in separate files

- Created responsive layout with media queries and a burger menu

That was fun!

## Known issue

The InfoBox does not appear after clicking the navigation menu and going back to the home page.

I admit that this is beyond my understanding of React / Google Maps inner mechanics at this point.

If you feel like investigating you may find the issue following this [link](https://github.com/ptifur/react-google-maps-practice/issues/1)

## Anyway

Here is my [twitter](https://twitter.com/ptifurr).

See you around! 👹
Multiple TTY Console
Published: 2021-01-01 15:06:19

Something useful when you are installing Arch and you are stuck.
You can't access your login at startup
Try to use another TTY by pressing 

ctrl+alt+F1
ctrl+alt+F2
ctrl+alt+F3
ctrl+alt+F4
ctrl+alt+F5
ctrl+alt+F6
ctrl+alt+F7

My default is tty7, but if you ever need to additional consoles to use, you have it there.

One time I had to use irc in the terminal because my tty7 wasn't working correctly due to an update corruption or something and I went on TTY2 and went on weechat to ask for help.

You can also use this to do your upgrades in the background
Code fatigue - intro
Tags: mentalhealth, fatigue, reflection, inspiration
Published: 2021-01-01 14:55:26

Hello fellow bloggers.

This brief 3-part is a reflection piece on some of the struggles I've had in 2020 coding. This is a bit of a rant, but I also cover solutions along the way.

A few times in 2020 year (including at the moment) I have felt mentally exhausted and uninspired about coding. 

This happens when I feel overwhelmed about writing code, learning new languages or libraries, and even just reading about code from the dazzling amount of courses, tutorials and news feeds. 

## Context

By the way, I am a professional fullstack Python/JavaScript software engineer in South Africa. I have ton of coding projects on the side.
Day 1 Challenge
Tags: javascript, challenge, webdev, 365daysofcoding
Published: 2021-01-01 14:52:25

## The Problem

Create a function that accepts a string and returns if it is a palindrome.

Example:
```javascript
      isPalindrome('Red rum, sir, is murder') //true
      isPalindrome('No lemon, no melon') //true
      isPalindrome('Eva, can I see bees in a cave?') //true
      isPalindrome('My dogs are adorable') //false
      isPalindrome('I come in peace!') //false
      isPalindrome("Racecar") //true
      isPalindrome("HelloDevWorld") //false
      isPalindrome(9119) //true
      isPalindrome(12345) //false
```

If you would like the challenges emailed to you every morning subscribe [here](https://hellodevworld.com/misc/365-of-coding-announcement). I will post the challenges on [my blog](https://hellodevworld.com) and send out an email at 7am every morning and will post the solution and send an email for the solution at 6pm every night. I will also be posting a video on my [YouTube channel](https://www.youtube.com/channel/UCJ-cXLeP-2NJzMGmzJ9JHpQ) for each challenge so subscribe there so you don't miss one!

I can't turn off commenting so **please do not comment your solution on this post** I will post a solution later tonight and you can post it there. If people cannot follow this I will not post the challenge on this platform and will only post the solutions.
MoviesBoard - TMDB API project
Tags: kotlin, android, opensource
Published: 2021-01-01 14:45:41

MoviesBoard app showcases Android best practices with Google's recommended architecture: MVVM + Repository + Offline support + Android Architecture Components + Paging 3 + LiveData + Moshi + Coroutines + Material Theme Components + Retrofit2.

I would appreciate more contributions

[Github Repository] (https://github.com/mbobiosio/MoviesBoard)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-01-01 14:36:47

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Happy Friday!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Landing a new job
- Making a list of awesome New Year's resolutions... or whatever else might spark joy ❤️

P.S. Refusing to make New Year's resolutions is totally cool, too. 

AND for those of you who recognize the new year in a different month (i.e. a HUGE portion of the world,) thanks for bearing with all of this irrelevant New Year's content that's surely bombarding you 😂
---

Have a great weekend!

![Home Alone New Year](https://media.giphy.com/media/NsKiCmWdA96V4w10N5/giphy.gif)
Making 2021 your Best Year Ever
Tags: programming, productivity, discuss, career
Published: 2021-01-01 14:35:15

Hello Hackers,
First of all, I won't wish you "Happy New Year".
Celebrating the completion of revolution around a star doesn't make any sense to me but since we are citizens of `Earth`, we have to take some consideration.

Let's make this post one of the most productive post in `DEV`.
In the comments, mention:
1. What have you achieved in 2020 from where you were?
2. What are your goals in 2021?
3. What are you going to do to achieve that?

Let's start with me:
1. I was a below-average coder in python struggling to write even basic loop. Lockdown happened and I focused more on learning python. After some time, I started doing challenges in HackerRank and was able to reach a world rank of ~23k in python(BTW, here's my [HackerRank Profile](https://www.hackerrank.com/ashu_vampire13)). Then I started web development,  participated in Hackathons, got ranks, my connections grew, completed my first internship, involved in a startup, contributed in open source. Aah! Let's keep that much info for now ;P

2. My goal is to crack a national level exam to get into a really good college like National Institute of Technology, India, be a good Frontend Developer and grow myself as a known developer.

3. Perseverance, patience, consistency. Making a TODO every day. Limit my time in Social media. Make meaningful connections.

That's for me, what about you, let us know in the comments. *You will never know to whom your journey is inspiring.* ;P

*Feel free to connect with me over [LinkedIn](https://www.linkedin.com/in/ashutoshdash1999/) and checkout my profile on [GitHub](https://github.com/AshutoshDash1999).*.
Service Mesh & Istio simply explained
Tags: istio, devops, kubernetes, beginners
Published: 2021-01-01 14:33:27

In this tutorial you will learn about **Service Mesh and one of its implementation, which is Istio**. In order to understand the concepts, we will first look at the **new challenges introduced by a Microservice Architecture**. 

Then we will see how different features of a Service Mesh solve these challenges. We will look at how Istio implements Service Mesh and learn about **Istio architecture** as well as **how to configure Istio** for our microservice application.

#Overview of topics covered#
- Challenges of a microservice architecture
- Solution: Service Mesh with Sidecar Pattern
- Service Mesh Traffic Split feature
- Istio Architecture
- How to configure Istio?
- Istio Features: Service Discovery, Security, Metrics & Tracing
- Istio Gateway
- Final Overview: Traffic Flow with Istio

---------

Watch the full video here 🤓
{% youtube 16fgzklcF7Y %}

----------

####Challenges of a microservice architecture####
![Challenges of a microservice architecture](https://dev-to-uploads.s3.amazonaws.com/i/5btfwg3eiu81xjd1s6zg.png)

####Solution: Service Mesh with Sidecar Pattern####
![Solution: Service Mesh with Sidecar Pattern](https://dev-to-uploads.s3.amazonaws.com/i/qn2533quzfchl3livd49.png)

####Istio Architecture####
![Istio Architecture](https://dev-to-uploads.s3.amazonaws.com/i/fkokgamsisky34rk6rtf.png)

####How to configure Istio?####
![how to configure istio](https://dev-to-uploads.s3.amazonaws.com/i/yxesjesh7rrp8qcdwd4g.png)

-----------------
► Get **30% off** - with this code: UDEMY_NANA_NOV2020: [Udemy course here](https://bit.ly/35qF26i)
► **Kubernetes 101**: [Compact and easy-to-read ebook bundle 🚀](https://www.techworld-with-nana.com/e-books) 
It's a handy way to quickly look something up or refresh your knowledge at work and use it as your cheatsheet  😎


**Like, share and follow me** 😍 for more content:
- [Private FB group](https://www.facebook.com/groups/techworldwithnana)
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
- [LinkedIn](linkedin.com/in/nana-janashia)
💡TensorFlow Tip, use .cache
Tags: tensorflowtip, machinelearning, deeplearning, tensorflow
Published: 2021-01-01 14:28:55

💡#TensorFlowTip

Use .cache to save on some ops like opening file and reading data during each epoch
- transformations before cache are only run for 1st epoch
- can cache in-memory or on-disk
- not repeatedly perform expensive CPU ops

See the speedup with `.cache` in this image.

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

Try it out for yourself:

{% gist https://gist.github.com/Rishit-dagli/5d06c69c69e990f9e15249e15002bb07 %}
🚀10 Trending projects on GitHub for web developers - 1st January 2021
Tags: react, javascript, typescript, css
Published: 2021-01-01 14:09:27

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. IconPark

IconPark gives access to more than 1,400 high-quality icons, and introduces an interface for customizing your icons. Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons

{% github bytedance/IconPark %}

---

### 2. Fre

Coroutine with Fiber which implements the coroutine scheduler in JavaScript, and the rendering is asynchronous, which supports Time slicing and suspense components.

{% github yisar/fre %}

---

### 3. TypeScript Deep Dive

The definitive guide to TypeScript and possibly the best TypeScript book. Free and Open Source

{% github basarat/typescript-book %}

---

### 4. Vendure

A headless GraphQL ecommerce framework built on Node.js with Nest & TypeScript, with a focus on developer productivity and ease of customization.

{% github vendure-ecommerce/vendure %}

---

### 5. Turbo

Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write

{% github hotwired/turbo %}

---

### 6. AI Expert Roadmap

Roadmap to becoming an Artificial Intelligence Expert in 2020

{% github AMAI-GmbH/AI-Expert-Roadmap %}

---

### 7. GraphQL Tools

Build, mock, and stitch a GraphQL schema using the schema language

{% github ardatan/graphql-tools %}

---

### 8. react-worker-components

React Worker Components simplify using Web Workers

{% github dai-shi/react-worker-components %}

---

### 9. Smoldash

Smoldash, A tiny lodash alternative built for the modern web

{% github marvinhagemeister/smoldash %}

---

### 10. Bulma

Modern CSS framework based on Flexbox

{% github jgthms/bulma %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top 10 CSS Effects 2020
Tags: html, css, beginners
Published: 2021-01-01 14:00:43

####01: Smoke Animation Effect On Text By Using Html Css####
{% youtube TFd55Jvd4dw %}

####02: Shining Text Animation Effects using Html and CSS####
{% youtube jSw7sk58HcY %}

####03: Card Hover Animation 2020 🔥🔥🔥####
{% youtube pUNbVB3Zfi4 %}

####04: How to create a meet the team section####
{% youtube JbYIL8A7C1M %}

####05: Glowing Text Animation Effects Using HTML and CSS####
{% youtube fPSXO5qHPJM %}

####06: Glitch Text Animation With Blur Effect 2020####
{% youtube DxWl99qLFmM %}

####07: Animated Background Using Html & Css####
{% youtube lTQxUBryhIw %}

####08: Charging Animation of Battery | HTML and CSS####
{% youtube 7Qdy8Dw1FD4 %}

####09: Neumorphism Cards Using Html & CSS with Hover Effects | CSS UI Design Tutorial####
{% youtube hoLeF8PF5H8 %}

####10: CSS Blob Radius Animation Effects | Html CSS####
{% youtube wLqeqwat2-Y %}

> All videos source code are in below link

<a href="https://blog.stackfindover.com/" rel="dofollow">Visit for free source code</a>
Gui to get live weather, news headlines and send emails
Tags: python, github, ai, beginners
Published: 2021-01-01 13:57:36

Here is my link to my repository: https://github.com/Epicalable/JARVIS-GUI

My Chatbot Gui

Started self-learning Python 2-months ago.

I was getting tired and bored of Command-Line Interface so I decided to create a chatbot with a Gui since it was my dream to have a personalized AI (But due to my potato PC I could only build a chatbot).

I was lucky to be stumbled across PySimpleGui since it was very easy to be learned by beginners.

This chatbot is capable to get live weather, news headlines and send emails. You will need to register for FREE to get Weather and News from these websites:

News: https://newsapi.org/ and Weather: https://openweathermap.org/

Copy the given API-Key and enter it in the Settings-Ui in the Menu of the Chatbot's Gui.

You can also customize the output for chatting by editing the intents in the .json file.

So I started a small organization on github to host it and hope for people to share their input or issues and guide me on things I don't know.

It would be kind if you can star this repository if you like it.

So here is my link to my repository: https://github.com/Epicalable/JARVIS-GUI

Thank you :-)
What is Javascript?🤔
Tags: javascript, programming, beginners
Published: 2021-01-01 13:48:27

Hi everyone...! 
Happy New year...
This is my first post in DEV.😅

So let's start. 🏎️

Javascript now a day is a very useful and creative thing in the world. I love javascript because it's very easy to understand, readable. 
Javascript working with AI and ML

So are you confused about how do I start programing language?
Don't worries you can start with javascript.

![javascript-powered-multichannel-1280w](https://dev-to-uploads.s3.amazonaws.com/i/cpvrm2thyrcj5yocpv2e.gif)

You think you heard this word **Java**. Right!
Java and javascript are different things in the programming world.

![Java-Debugging-Tips-1280x720](https://dev-to-uploads.s3.amazonaws.com/i/t4gwunut4kdyyemcl7gf.jpg)
 
#Java
1. java is a statically typed language
2. java is class-based work
3. java uses block-based scoping
4. java uses in the android app.


![javascript](https://dev-to-uploads.s3.amazonaws.com/i/7ch1sn72lyovddaboglh.png)
 
#Javascript
1. javascript is dynamic.
2. javascript is a prototype-based worked.
3. javascript uses a function-based scoping.
4. javascript uses in website design, web app.

In short one line different java and javascript are like car and carpenter.

I hope it is helpful for you. If you want to learn about more javascript then follow me. We are going step by step.
Scrimba's Javascriptmas Challenges
Published: 2021-01-01 13:33:45

While going through the Front End Developer program at [scrimba](https://scrimba.com), a friend pointed me to the [Edabit](https://edabit.com/challenge) interactive challenge website. After spending some time going through many challenges, I discovered how wonderful they can be especially if they are beyond your present understanding and skills. Through this I have gained a handhold in higher order functions by studying others' solutions. Note that you cannot see the solutions until you have solved the challenge yourself. While they may not be up to best practices in that the solutions are very complicated, it is a wonderful way to ponder chaining functions to achieve a solution. There is also a lot art here to be appreciated, and I do.
Scrimba had a wonder daily challenge, JavaScriptMas which I enjoyed first thing each morning as they were presented daily. Below are the daily links to the solutions presented.
I feel that I cannot get enough!
lbc


[Day 1 Deposit/Profit]
(https://t.co/VfcX6rVPsD?amp=1)

[Day 2 Candies]
(https://t.co/15eDZpmIi2?amp=1)

[Dec 3 chunkyMonkey]
(https://t.co/V74nWaLccZ?amp=1)

[Dec 4 CenturyFromYear]
(https://t.co/3J01WRLees?amp=1)

[Dec 5 reverseAString]
(https://t.co/LGDIwWzVHc?amp=1)

[Dec 6 sortByLength]
(https://t.co/IMFmjyxYNJ?amp=1)

[Dec 7 countVowelConsonant]
(https://t.co/bMO8ake5Xp?amp=1)

[Dec 8 dieFace]
(https://t.co/stwowSZjBo?amp=1)

[Dec 9 sumOddFibonacciNumbers]
(https://t.co/DkW4FLNJXw?amp=1)

[Dec 10 adjacentElementsProduct]
(https://scrimba.com/scrim/co88140eea7b3c004a4cb3b33)

[Dec 11 avoidObsticles]
(https://t.co/ROLLPvN1Gm?amp=1)

[Dec 12 validTime]
(https://t.co/OTel1wgwXi?amp=1)

[Dec 13 extractEachKth]
(https://t.co/zKACECATjw?amp=1)

[Dec 14 arrayMaximalAdjacentDifference]
(https://t.co/WpK9zhLydH?amp=1)

[Dec 15 Carousel]
(https://t.co/fl8wRYmNx3?amp=1)

[Dec 16 insertDashes]
(https://t.co/WiMuCvMwha?amp=1)

[Dec 17 differentSymbolsNaive]
(https://t.co/V3jWsNMv3G?amp=1)

[Dec 18 arrayPreviousLess]
(https://t.co/zHJEsP83aR?amp=1)

[Dec 19 alphabetSubsequence]
(https://t.co/c4Wr1SxB7l?amp=1)

[Dec 20 domainType]
(https://t.co/UuK1xYjYql?amp=1)

[Dec 21 sumOfTwo]
(https://t.co/GwOFnMDxAu?amp=1)

[Day 22 extractMatrixComumn]
(https://t.co/WZJwPC58j7?amp=1)

[Day 23 tweetCharCounter]
(https://scrimba.com/scrim/co42b4c038ca069bc7e4fd875)

[Day 24 Test Your Agility]
(https://t.co/SknciFFeA4?amp=1)
2020 was a rocky start
Published: 2021-01-01 13:28:14

Hi everyone, this is my first post here and I’m kind of hesitant to write about my journey , maybe because I’m a beginner who just joined a community full of experts and seniors , but I decided to go with writing this because as I said before, I wanna talk about my weird journey.
.
I was a IT college student back in 2019 , but I didn’t too much work into learning about programming and web development like you would expect, I was just doing home works and delivering assignments like a dead robot, no passion, no nothing.
.
Until….
I stumbled across this youtuber named “Brad Traversy” when I just randomly typed in “Web Development” , and his video of web developer map made me curious about this “map”

Neither to say , I felt like a bomb went off inside me, like I wanted to become a web wizard and create cool stuff like Brad, that’s when I decided to walk through this map.
.
But the motivation and excitement aren’t enough to become a wizard, I needed resolve and patience and lots and lots of practice, I started with HTML,CSS then chose JavaScript as a programming language , keep in mind , as an IT student , I actually learned a lot about C++, C# and Java , with some data structures and algorithms but like I said, I felt like a robot while writing code and running it.
.
Through 2020, it was like climbing a mountain, sometimes I reach a new height , and sometimes I sit for months doing nothing but watching tutorials or reading through Medium and Dev to.
.
As a beginner , there were times that I felt dumb or this is not where my talents are , turns out, I wasn’t the only one struggling in this field, and they made posts on reddit talking about being overwhelmed or feeling like a fraud compared to all these masters and wizards on YouTube or Codepen, but the amazing thing is that the replies were full of stories and encouragement that made me realize that I lack patience and stubbornness to continue this roadmap.
.
In the end, this is just a post of my thoughts about the previous year and I hope in 2021 I will be able to beat this map and become better than the years before :)
How to Check For Undefined in JavaScript / TypeScript
Tags: javascript, typescript, tutorial, beginners
Published: 2021-01-01 13:21:50

*This post was originally published at [kais.blog](https://kais.blog/p/how-to-check-for-undefined-in-javascript-typescript).*

**Let's move your learning forward together!** [Follow me on Twitter](https://twitter.com/intent/follow?screen_name=kais_blog) for your daily dose of developer tips. Thanks for reading my content!

---

The correct way to check if something is undefined in JavaScript / TypeScript: Use the `typeof` operator! It returns a string showing the type of the unevaluated operand.

Let’s say you have an object `user` that looks like this:

```ts
const user = {
  email: "kai@example.com",
}
```

If you use the `typeof` operator on the `email` and `id` property, you'll get this:

```ts
console.log(typeof user.email); // "string"
console.log(typeof user.id); // "undefined"
```

Thus, to check for an undefined property you can combine an `if`-statement and the `typeof` operator:

```ts
if (typeof user.id === "undefined") {
  //
}
```

Easy! Yet, there are other ways to check for `undefined`. However, those are sometimes quirky and will throw a `ReferenceError`. So, I suggest that you always use the `typeof` operator if you are checking for `undefined`.

---

**Let's move your learning forward together!** [Follow me on Twitter](https://twitter.com/intent/follow?screen_name=kais_blog) for your daily dose of developer tips. Thanks for reading my content!

*This post was originally published at [kais.blog](https://kais.blog/p/how-to-check-for-undefined-in-javascript-typescript).*