teleren/devto huggingface dataset:
Appreciate your votes
Published: 2019-09-16 07:13:57

---
title: Appreciate your votes
published: true
description: I have sent CFPs for confoo Canada, appreciate if you vote in favour of the topics
tags: 
---
I have sent CFPs for confoo Canada, appreciate if you vote in favour of the topics
Link here https://confoo.ca/en/yul2020/call-for-papers/speaker/avichay-eyal
Maintaining balance in tech through hobbies.
Tags: career, productivity, discuss
Published: 2019-09-16 06:45:20

I woke up to the news that someone on youtube had taken one of my articles and done a whole video about it. Very exciting news! I am extremely humbled.

The article referenced was one about maintaining fitness and how hobbies can help maintain mental health and grow you as a person. You'll find it in the video description. Hope you enjoy 👌

{% youtube hg2PK_HCH2Q %}

That being said, I thought it'd be nice to have a small collection of articles by dev.to writers as a point of reference for anyone feeling stuck or thinking about picking a new hobby.

In case you have additional resources, please add them in the comments section.

##1. [Kayla Sween](https://dev.to/kaylasween)
{% link kaylasween/powerlifting-has-made-me-a-better-developer-part-1-interpersonally-3l6d %}

##2. [Ben Halpern](https://dev.to/ben/)
{% link ben/my-three-tips-for-maintaining-fitness-and-a-healthy-lifestyle-as-a-software-developer %}

##3.[Cat Carbonell](https://dev.to/catcarbn)
{% link catcarbn/mental-health-in-tech-4a9c %}

##4. [Ilona codes](https://dev.to/ilonacodes)
{% link /ilonacodes/how-to-stay-fit-physically-and-mentally-and-keep-coding-5a4p %}

##5. [Nicole Gallman](https://dev.to/cortisol51)
{% link /cortisol51/fitness-and-health-tips-for-app-developer--b18 %}
React Rainbow Components
Tags: react, web
Published: 2019-09-16 06:41:23

React Rainbow is a collection of components that will reliably help you build your web application in a snap.
- More than 60 open-source components built on top of React.
- Proper documentation based on Interactive Examples.
- Our components are test infected.
- We designed each component with i18n in mind.
- Accessibility is part of our definition of done.
- Our npm package provides webdriver.io page object (https://webdriver.io/docs/pageobjects.html).
- … and more

https://react-rainbow.web.app
Revisiting Old Code with new Goals
Tags: swift, xcode, ios
Published: 2019-09-16 06:13:14

So I decided it was time to revisit my open source iOS project. The app has been something that I work on when time permits, partly as a learning enabler but also an app I wanted to have.

Code Notes for iOS is still in the very early stages, but I wanted a place to stash all my little code snippets and learning notes.

Revisiting it now with several goals.

- Cross-Platform support.
- Update it to use native iOS dark and light themes rather than the custom system I built.
- Update it to use cloud save rather than CoreData.
- Take a look at using SwiftUI.

So with that, if you are interested in the current state of the code, you can find it on gitHub.

[https://github.com/GrfxGuru/CodeNotesForiOS](https://github.com/GrfxGuru/CodeNotesForiOS)
ShowDEV: Food recipe web app with diet, health and nutrition info
Tags: showdev, react, webdev
Published: 2019-09-16 05:33:10

---
title: ShowDEV: Food recipe web app with diet, health and nutrition info
published: true
description: Recipe Magic is a web app that uses Edamam API that allows users to search through massive recipe database, filter recipes by various attributes (diet, health, ingredients, etc.) and displays nutritional and health data.
tags: showdev, react, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hph0eeeaztg5sxcbt20v.png
---

[Recipe Magic](https://recipe-magic.netlify.com/) is a web app that uses [Edamam API](https://www.edamam.com/) that allows users to search through massive recipe database, filter recipes by various attributes (diet, health, ingredients, etc.) and displays nutritional and health data.

Website link: [Recipe Magic](https://recipe-magic.netlify.com/)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hph0eeeaztg5sxcbt20v.png)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m93cr7ywvg2xeyz1ixmz.png)

## Tech info

- React (with Hooks)
- Typescript
- Redux (with Hooks)
- react-app-rewired (instead of ejecting)
- react-router
- animejs
- PostCSS (with postcss-preset-env)
- [Edamam API](https://www.edamam.com/)
- Netlify hosting

## Challenges

### Restrictive API

Edamam API is awesome, but also very restrictive towards free users. It allows free users only 5 requests per minute, so I needed to implement a mechanism that will restrict users to 1 request every 12 seconds.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e1gwlfrtwbp1bijmjn30.png)

### Skeleton Loading

Most data is being loaded dynamically (recipe lists, recipe details, etc.), so having spinners everywhere seemed as a quick-and-dirty solution. Not to mention that it provided terrible UX.

Since the data is highly predictable, I've decided to implement skeleton loading or skeleton screens. I've written a short tutorial on implementing it here:

{% link prototyp/implementing-skeleton-loading-in-react-kia %}


### Delightful Animations

I also wanted to create a delightful UX, not only using CSS but also JS animations. I've used `animejs` to create simple animations to give the site more personality.

## Work in progress

Although this project is pretty much feature-complete, there are still some rough edges and code cleanups that I need to do.

Let me know what you think about the project, feel free to let me know if you have any ideas for improving the app.

<hr />

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.
Why Paying For Something You Can Get For Free?
Tags: ask, free, hosting, serverless
Published: 2019-09-16 04:23:28

Dear All

I use Netlify for my [website] (https://angora.me) because Netlify provide complete feature (SSL, hosting, deployment, etc) for free.

Another service such AWS, Azure, Firebase, etc, there are good. But the feature isn't as complete as Netlify. You need to integrate with external deployment to make it works. Or you have to subscribe monthly payment to upgrade the limitation.

I don't affiliated with Netlify or another service above. But I just curious, why so many people out there choose another service with limited feature and monthly payment?

Cheers!
Do Good Daily Day 4
Tags: swift, swiftui, ios
Published: 2019-09-16 04:00:03

📅 09/15/2019
🔥 4 day streak
📱 Do Good Daily
💰 $0.99 price
🤑 0 sales
⌚️ 3.5 hours spent
💻 8 files changed, 53 additions(+), 9 deletions(-)
✅ Today's goal: Write this blog post

## My PIC made some epic designs today

The best thing about being on a side project team with a designer is that even when you're *shoveling rocks* from your driveway into a wheel barrow and then dumping them in your backyard to make your wife happy, he still gets stuff done on the app 👍 

That's what happened today. I would share the designs with you because they're really good, but I'll wait until I have them implemented in swiftUI because this is dev.to not figma.to.

Alright I'll show one here because this post is kind of light

![picture of ben franklin with a quote from his auto biography](https://thepracticaldev.s3.amazonaws.com/i/5wcym9ktfv1vbqhbevs0.png)

The design is unlike most apps on the app store, it's actually got me kind of excited to get this out there and see if it helps anyone besides the two of us.

This next week is do or die time, either a lot of progress will be made or this thing is not launching on Sept. 30th. Hopefully I'll be at it bright and early tomorrow morning and knock some of these great designs out of the park in an hour 😅

Stay tuned for tomorrow's post.
My Initial Thoughts about using Styled-components
Tags: styledcomponents, css, javascript, react
Published: 2019-09-16 03:46:08

---
title: My Initial Thoughts about using Styled-components
published: true
description: 
tags: styled-components, css, javascript, react
---

CSS in javascript is a new concept for me. Being a web developer for almost 2 years now, I only knew about CSS and some preprocessors.

But now here's a new technology, silently creeping in like a ghost. Kidding aside, I've been reading stuff about styled-components on freecodecamp and dev.to, and honestly I don't know the true potential of it yet, until I began working for Farmgoat. Honestly speaking I haven't yet mastered the basics of it, but I'm having a clear and concise idea on what it does.

Basically, based on my current understanding Syled-components is a tool that let's us write components that possesses their own encapsulated styles.

So what does this mean? well for me, the first step to understand what this is, is to let go what you know about writing traditional css. If you have used React before, then basically, it lets you directly create a component which contains style, which you can use across your codebase. This way, mapping between styles and components are eliminated.

When creating styled-components you have to take into consideration that you are not naming classes, but rather directly a component. Names should be taken literally.

My first reaction was, what the effin heck was that? It doesn't make sense, why are we styling directly these component which according to W3C standard way of writing css is to put it in an external css file. There should be separation of concerns.

But as I've asked my colleagues, office-mates and friends who uses styled-components, I've asked them what styled-components really solves? and in connection to this controversial medium article that I've read.

Here's their top answers:


 ![First Image](https://djtechblog.netlify.com/static/8fc13771bd8fea63c8cf782e1ad11ccf/fbb21/answer1.png)


 ![Second Image](https://djtechblog.netlify.com/static/28dfa0a653935622256026478ed65d41/fbb21/answer2.png)

Now It makes sense! Maintaining over 2000+ lines of CSS code is a nightmare, with all those media queries and repetitive codes. It's hard to tell just by looking if its alright to delete this code. That is one awesome thing that styled-components can do, and ofcourse since it's written in JS you can easily pass props, implement themes and layout easily.

So that's it, currently I'm still exploring it, and so far, I'm starting to appreciate its power and capabilities. Now, I'm convinced I'll use styled-components on my future projects.
Lambda Functions in Dart
Tags: dart, todayilearned, beginners
Published: 2019-09-16 02:54:26


* Lambda is a short and concise manner to represent small functions.

* Lambda functions are also called Arrow functions.

* But here remember that by using Lambda function’s syntax you can only return one expression. It must be only one line expression. Just like normal function lambda function cannot have a block of code to execute.

* In short, if your function has only one expression to return then to quickly represent it in just one line you can use lambda function.

####Syntax

```dart
return_type function_name(arguments) => expression;
```
* Here also note that we don’t need a return statement explicitly.

####Program

```dart
int ShowSum(int numOne, int numTwo) => numOne + numTwo;

main() {
  print(ShowSum(10, 20));
}

Output
30
```

That’s it for lambda functions guys. Please play around with this concept for some time. Also, Feel free to let me know if I miss something. Till Then keep Loving, Keep Coding. And I’ll surely catch you up in next article.

Remember no teacher, no book, no video tutorial, or no blog can teach you everything. As one said Learning is Journey and Journey never ends. Just collect some data from here and there, read it, learn it, practice it, and try to apply it. Don’t feel hesitate that you can’t do that or you don’t know this concept or that concept. Remember every programmer was passed from the path on which you are walking right now. Remember Every Master was Once a Beginner. Work hard and Give your best.

###For More Information Please Visit Following Links
* [Fuchsia OS official site](https://fuchsia.dev/)
* [Dart official site](https://dart.dev/)
* [Flutter official site](https://flutter.dev/)


Jai Hind, Vande Mataram 🇮🇳

Wanna get in touch with me? Here are links. I’ll love to become your friend. 😊

- [My Site] (https://www.jaytillu.in)
- [My Blogs] (https://blogs.jaytillu.in)
- [Twitter](https://twitter.com/jay_tillu)
- [Facebook](https://www.facebook.com/jaytillu.1314/)
- [Instagram](https://www.facebook.com/jaytillu.1314/)
- [Medium](https://medium.com/jay-tillu)
- [LinkedIn](https://www.linkedin.com/in/jaytillu/)
- [Github](https://www.github.com/jay-tillu)
- [Stack overflow](https://stackoverflow.com/users/8509590/jay-tillu)
or just mail me at jd.tillu@gmail.com
Deploying to AWS - help
Tags: discuss, aws, s3, route53
Published: 2019-09-16 01:16:03

---
title: Deploying to AWS - help
published: true
description: 
tags: #discuss #aws #s3 #route53 
---

A few months ago, during my Flatiron days, I decided to create a guide to deploying your app to Heroku: https://dev.to/sofiajonsson/deploying-your-app-to-heroku-ob6 Heroku is a great free platform, but what you're not paying for is a quick and responsive website. 

I'm in the process of uploading my portfolio site through Amazon Web Services (AWS) using S3 and route 53 and have run into an issue getting my static endpoint to display the uploaded application. I have spent hours browsing blog posts and StackOverflow and there's something I'm not understanding. 
Instead of seeing my site I get a 404 NoSuchKey error:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mcvyqtijxixl3i0rjta3.png)

The YouTube tutorial I've been following suggests setting my endpoint to index.html, but that's not working and I'm assuming it's because the file is nested within one of my other React.js files? I also tried with index.js as that would make more sense, but ran into the same issue. When I tried to provide a direct location such as "src/index.js"or "public/index.html" I would get the following error:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4s8bj22jxtdsk8f4bqm0.png)

From what I've gathered, AWS is great for hosting static sites and suggests using vanilla JS, so could that be the problem?

I'm curious to hear about your experiences uploading to AWS using S3 and route 53  and any tips or tricks you might have. I'm going to keep working on this and hopefully follow up with an outlined post in case anyone else runs into this issue.
Lessons learned as a technical leader
Tags: career
Published: 2019-09-16 01:12:05

Being a technical leader kind of surprised me. I "had" this role once in a company I worked before but being a tech leader of only one person that was as senior as I was didn't really helped me to understand the nuances of it. 

It's been one year since I accepted to wear the hat of a technical leader in my current company and it's been incredible and terrifying. I learned so much, about me and about my teammates that really made me a better professional.

In this post, I'll try to share some valuable lessons I learned along the way. The first and most important of all is:

## Pay Attention

Pay attention to each team member, to the process, to the tools you're using. Doing this will allow you to better understand how you can help your colleagues to grow, how to fix some process gap or how to improve the performance of your daily tasks. Pay attention to every matter that involves the team, even for a non-technical subject as business requirements (because TBH they are also technical). 

It seems easy to stay alert but it's not. What is easy is to get lost in the endless tickets and meeting invites that you probably receive daily.

## Work on communication

As a technical leader, you will be the focal point of communication in the team. More than **receive** information and take the necessary actions with it, remember to **send** information to the team and other stakeholders. 

You can involve your team in technical decisions so you can all discuss and come to a conclusion together. This makes your team more synchronized and valued.

Communication with the stakeholders is important to assure that the team is in the right track about the expectations they had on them.    

## Help your teammates to grow

More than be responsible for the technical decisions in a team, the responsibility of a tech leader is to help it's teammates to grow their skills where necessary and wanted. 

**This one is a little tricky.**

If your company doesn't have a career plan you can talk to your team (individually, of course), and try to understand and identify what they wanna learn. If it fits the team and company reality is another matter, it's up to you to decide if you can guide them even if they are not interested in learning about something you use in work.

If your company does have a career plan it's a bit easier because it's already defined (in general) what they should learn to grow in the company.

With all this information in hand, reunite with them and build a plan with subjects and links to material that they can use. Be careful to not make it a goal with some deadline. Make it more like a restaurant menu, with options they can choose to work on.

Mentoring them will help you and them to be better.


## That's it?

Nops. There are more things to consider when you are a technical leader but I believe these three are the most important, at least for this post.

If you're a new as a tech leader, don't worry, you will make mistakes. keep in mind that your work is helping your team to be better is a very good first step.

Thank you, folks!
User Define function in Dart
Tags: dart, todayilearned, beginners
Published: 2019-09-16 01:04:27

A user-define function is a function that is created by the programmer for his/her custom need. It provides us the flexibility to reuse our code and divide them in small chunks. Let's discuss how we can create a user-define function in a dart.

First of all, remember, there are two main terminologies behind the use of function:

1. function definition
2. function call

* **function definition -** It is a time when we define a function. At this time we define its name, work, parameters, and its return type, etc.

* **function call -** It is a time when we need the function and we call it. Just remember before you call the function you need to define it. In short first define, the function then calls the function.

There are basically four parts of user-defined function:
1. function name
2. parameter
3. return type
4. function body

##Function definition
***
It is a time when we define a function. At this time we define its name, work, parameters, and its return type, etc.

####Syntax

```dart
function_name() {
  //statements
}
```

####Example

```dart
SayMyName () {
  print("Jay Tillu");
}
```

##Function calling
***

It is a time when we need the function and we call it. Just remember before you call the function you need to define it. In short first define, the function then calls the function.

####Syntax

```dart
function_name ()
```

####Example

```dart
SayMyName ()
```
##Sample Program

```dart
SayMyName(){
  print("Jay Tillu");
}
main(){
  SayMyName();
}

Output
Jay Tillu
```

* Here first we define the function and then we call it from the main function.

This is the basics of function guys. In upcoming articles, we will discuss further in functions. Till then Keep Loving, Keep Coding. And I’ll surely catch you up in next article.

Remember no teacher, no book, no video tutorial, or no blog can teach you everything. As one said Learning is Journey and Journey never ends. Just collect some data from here and there, read it, learn it, practice it, and try to apply it. Don’t feel hesitate that you can’t do that or you don’t know this concept or that concept. Remember every programmer was passed from the path on which you are walking right now. Remember Every Master was Once a Beginner. Work hard and Give your best.

###For More Information Please Visit Following Links
* [Fuchsia OS official site](https://fuchsia.dev/)
* [Dart official site](https://dart.dev/)
* [Flutter official site](https://flutter.dev/)


Jai Hind, Vande Mataram 🇮🇳

Wanna get in touch with me? Here are links. I’ll love to become your friend. 😊

- [My Site] (https://www.jaytillu.in)
- [My Blogs] (https://blogs.jaytillu.in)
- [Twitter](https://twitter.com/jay_tillu)
- [Facebook](https://www.facebook.com/jaytillu.1314/)
- [Instagram](https://www.facebook.com/jaytillu.1314/)
- [Medium](https://medium.com/jay-tillu)
- [LinkedIn](https://www.linkedin.com/in/jaytillu/)
- [Github](https://www.github.com/jay-tillu)
- [Stack overflow](https://stackoverflow.com/users/8509590/jay-tillu)
or just mail me at jd.tillu@gmail.com
Bare metal load balancer on Kubernetes with MetalLB
Tags: kubernetes, loadbalancer, baremetal, metallb
Published: 2019-09-16 01:01:13

---
title: Bare metal load balancer on Kubernetes with MetalLB
published: true
description: Using MetalLB to create a load balancer on a bare metal Kubernetes cluster
tags: Kubernetes, load balancer, bare metal, MetalLB
---

Part two of a mini series, the first part is here [1]

Now that I have a working Kubernetes cluster on bare metal, the next thing I wanted was to get external traffic into it without the need for `kubectl proxy`. Using the API path to access sites like the dashboard seems silly.

The cleanest way to get traffic into a cluster seems to be a load balancer. However, it requires an external service usually provided by GCP or AWS that doesn't come with Kubernetes. What to do?

Fortunately, there is this amazing software called MetalLB [2], designed for creating a load balancer on bare metal. Despite being in alpha stage (at the time of this writing) it works well and is enjoyed by folks in all types of cases, as evidenced by this GitHub "issue" [3].

I installed it using the manifest option with zero modifications and used the Layer 2 config [4], with a subset of IP address from the default OpenVPN range of `10.8.0.0`. The reason I used these IPs addresses is because I wanted to be able to access my "external" services from any machine in my cluster, including my master.

I was originally planning to fiddle with a Ingress and get a site running, but the nginx ingress controller pod and the Apache on my node were not happy with each other so, in the interest of having success, I decided to start with the dashboard.

It's a pretty basic task to create a LoadBalancer service for a single port [5], so I'll share my manifest here:

```
apiVersion: v1
kind: Service
metadata:
  labels:
    app.kubernetes.io/name: load-balancer-dashboard
  name: dashboard-service
  namespace: kubernetes-dashboard
spec:
  ports:
    - port: 8080
      protocol: TCP
      targetPort: 8443
  selector:
    k8s-app: kubernetes-dashboard
  type: LoadBalancer
```

Once I see what external IP my dashboard-server has obtained, I can go to the browser on the machine and visit `https://<external-ip>:8080/` to access my dashboard. No more `kubectl proxy`!

P.S. I almost forgot. Make sure you comment out the `tolerations` section of your dashboard manifest (or add them to your MetalLB manifest) so you can get the dashboard and metallb running on the same node. Ask if you give this a try and hit any issues!


[1]: https://dev.to/drazisil/setting-up-kubernetes-on-bare-metal-behind-a-nat-with-openvpn-5dj3
[2]: https://metallb.universe.tf/
[3]: https://github.com/danderson/metallb/issues/5#
[4]: https://metallb.universe.tf/configuration/#layer-2-configuration
[5]: https://kubernetes.io/docs/tasks/access-application-cluster/create-external-load-balancer/#configuration-file