teleren/devto huggingface dataset:
Web Surgery - Ep.6 - Adding Netlify CMS to the website
Tags: jamstack, webdev, jekyll, netlifycms
Published: 2020-05-05 01:08:18

---
title: Web Surgery - Ep.6 - Adding Netlify CMS to the website
published: true
description: This episode we will start to add Netlify CMS so the website. It can easily be done by adding an html and config.yml under admin. It is promising running on localhost but it is not fully working yet because we still have to figure out the Auth for GitHub, also we may add more functionality in the future, tell me what you suggest at my [Twitch](https://www.twitch.tv/cheukting_ho).
tags: JAMStack, Webdev, Jekyll, NetlifyCMS
---
This episode we will start to add Netlify CMS so the website. It can easily be done by adding an html and config.yml under admin. It is promising running on localhost but it is not fully working yet because we still have to figure out the Auth for GitHub, also we may add more functionality in the future, tell me what you suggest at my [Twitch](https://www.twitch.tv/cheukting_ho).

The code is work in progress but if you want to check it out, it will be uploaded and updated in [this repo](https://github.com/Cheukting/animal-crossing-wishlist)
13 Weeks Challenge
Tags: challenge, computerscience, codenewbie, interview
Published: 2020-05-04 20:01:09

Hey, everyone. This is my first post, I have considered writing for a long time, in this lock-down period I thought to give it a short. I am preparing for my upcoming interviews and I was quite weak in Data Structures and Algorithms. Honestly, I never tried so hard and have long given excuses to keep it for the last.
    So, I finally thought to start. This lock-down period is giving me many of my firsts.

I was following various threads and including this one - 
https://www.reddit.com/r/cscareerquestions/comments/1jov24/heres_how_to_prepare_for_tech_interviews/
So, I have made a 13 week plan on what and how I will cover all the numerous algorithms and data structures, hope I become successful in my venture. 
Will tell you about my journey and accomplishments along the way.
Thankyou.
I am going to build 6 products in 12 months
Published: 2020-05-04 20:10:41

---
title: I am going to build 6 products in 12 months
published: true
description: "I am going to build 6 products in 12 months on my way to create financial freedom for myself. And I seem to have picked the worst time to start."
---

Originally posted on [attempts.space](https://attempts.space)

I am going to build 6 products in 12 months on my way to create financial freedom for myself. And I seem to have picked the worst time to start. Right in the middle of COVID-19. The largest economic depression since THE great depression and do I go and find a secure job?

No. I do the exact opposite. I start working for myself.

This all started when the office for my day job closed and we began to work from home. Without a commute I found myself with ample amount of time to do things _just for me_. It was the most empowering and freeing 2 weeks of my life. Working on what I want, feeling like I am making an impact in the lives of people. I haven't felt that energized in ages.

So I started to chase that.

I started a [vlog](https://www.youtube.com/playlist?list=PLCct7zpeN4PFQJ1dfW1NpCfsqBZ9shT-7), producing [YouTube videos](https://www.youtube.com/channel/UC8s7-Eb0vO7BJfudkTQUWyQ), developing and releasing [side projects](https://team-img.now.sh), [writing](https://journal.ericadamski.dev), and reading more. I created whatever, whenever. And it was **AMAZING**. So amazing that I wanted more.

Then the next month passed and I hadn't been able to rekindle that experience. I couldn't find that same passion no matter the amount of searching. I figured out that the more time I spent on my day job and the less time I spent on things I wanted to do the worse I felt.

So I am taking a stand.

I am going to challenge myself into financial independence. Into my dream job, my destiny, into an entrepreneur.

Over the next year I am going to create and launch 6 new products and work to make them profitable. The most successful business I run currently is [Team-Img](https://team-img.now.sh). It is profitable, but no where near sustainable for me to live on with only \$7 MRR.

Thats right, 7 whole dollars. The math is hard but that is a total of \$84 a year. Not much to live on.

But that is my inspiration. [Team-Img](https://team-img.now.sh) was the catalyst that showed me I could produce something useful.

And so begins my journey. Starting from \$7 MRR I will build a life for myself and my family by working on things I love with people who care. It is going to be an adventure, a challenge but most of all it will be - hard. Also fun. I am thrilled to be going on this journey and it starts today.

With inspiration from [Pulsar](https://www.trypulsar.com/) I am going to count [Flawk](https://flawk.to), which is super early alpha, as my first of 6 products. I have 6 others in the pipeline and over the next year I am going to attempt to make each one a profitable product.

[Flawk](https://flawk.to) isn't even close. But that is where the fun is.

0/6 profitable products and counting.
Job Search Week 11
Tags: makers
Published: 2020-05-04 21:45:35

I started looking at python this week just to get an idea of what it was like to use and I quite enjoyed it but I think from now on I'm gonna focus on using a MERN stack because JavaScript is my favourite language to code in.

Day 1

Naturally, I started with the basics going over pythons lists(arrays), dictionary(hashes) etc. I had heard python was similar to ruby but I now see why people said it. But the syntax was all a little bit different so I'd often catch myself trying to type ruby which I was a little bit confusing but I managed.

Day 2

Next, I moved onto making an app in python. I used the battle app because I think it's a nice thing to start with. I started by building a character class and giving some basic stats that they'd all need giving them health magic and a basic attack. I then made the enemy and the player using this class.

Day 3

I then built a class that would run the game and started working on magic allowing it to first do damage then reduce your magic bar and finally I added healing magic to restore your health.

Day 4

I spent Thursday building usable items in the game magic potions health potions and attack items. I added these to the players choice of attacks on their turn. After that, I started adding some styling for the health bars and magic bars.

Day 5

Finally, I added multiple enemies and also added so artificial intelligence giving them a small chance to heal if they dropped below 50% health.

Summary

Python was interesting but I want to work on JavaScript right now and get really good at it. I feel like I'm better of knowing one thing really well than being a jack of all trades.
Streaming data from Kafka to Elasticsearch - video walkthrough
Tags: apachekafka, elasticsearch, search, kafkaconnect
Published: 2020-05-05 08:57:34

Getting data from Kafka into Elasticsearch is easy with the Kafka Connect sink connector. 

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

Check out this video tutorial on how to use the connector and a walk through some of the common requirements when using it including

- Updating and deleting documents in Elasticsearch
- Handling schemas and field mappings, including Timestamp fields
- Changing the name of the target index
- Error handling

🎥 Watch it here: https://rmoff.dev/kafka-elasticsearch-video


👾 You can also try it all out for yourself and follow along with the code using Docker at https://rmoff.dev/kafka-elasticsearch
Setting Up Netlify Forms With Gatsby
Tags: gatsby, netlify, webdev
Published: 2020-05-05 10:07:07

I recently built a website using Gatsby, choosing to host it on the Netlify free tier. One of the features I wanted to try was form handling. Typically, handling form posts requires wiring up and hosting a backend to process requests. Netlify forms allows me deploy a simple static site with zero backend, letting them handle the rest for me. You can read more about the functionality here.

##React setup

The setup is relatively straight forwards. Firstly, we need to add in the usual form, input and button tags. Below is a sample component for submitting a user email address.

{% gist https://gist.github.com/wdchris/7d009b67e39ba89d4aa0d4b92bca27a2.js %}

Notice two extra attributes on the form tag. `data-netlify` is used to tell Netlfy we want to track this form. `data-netlify-honeypot` is the name of an input within the form we’ll use to counter bot attacks. Note also that we need to specify a `name` attribute on the input we're tracking. This is a key, the input being the value, which will be sent to the Netlify forms api.

The last pieces of markup we need are two hidden inputs.

{% gist https://gist.github.com/wdchris/e0242e38fdff3e02ad79c9de00ce3c29.js %}

The first wires up the form name to the Netlify api. The second is the aforementioned honeypot input field for tricking bots. This will be hidden from users, but will likely be completed by any bots informing Netlify to ignore this response.

## Hooking it up

Now that the markup is in place, we just need to add some standard React code to track the state of the input and send a POST request for Netlify to capture.

{% gist https://gist.github.com/wdchris/36a4a327ed83983eeaef6855d99fbbe8.js %}

Here we have used React hooks to track the state. A `fetch` method is then used to send a POST request, encoding the form name and email address response to be sent to the Netlify api.

## That’s all folks

And that’s all it takes. Push this to deploy and you’ll notice submissions coming through on the Netlify forms dashboard. It will track a form called *register*, and will contain a field called *email*. All this built on a static React site with a stateful front-end. You can see the full code sample [here](https://gist.github.com/wdchris/c64309f50add47196c3d743292ef6660).
How to Write Middleware using FastAPI
Tags: python, api, fastapi, rapidapi
Published: 2020-05-05 16:23:46

---
title: How to Write Middleware using FastAPI
published: true
description: For one of my project, I needed to host an API service on the RapidAPI platform. In order to make sure that all the requests to the application are routed via RapidAPI I needed to check special header sent by RapidAPI.
tags: python, api, FastAPI, RapidAPI
canonical_url: https://learnings.desipenguin.com/post/middleware-fastapi/ 
---

For one of my project, I needed to host an API service on the RapidAPI platform. In order to make sure that all the requests to the application are routed via RapidAPI I needed to check special header sent by RapidAPI.

RapidAPI forwards each *valid* request to the configured server, but injects additional header `X-RapidAPI-Proxy-Secret`. While a hacker may also send the same header, the value of this header will be only known to RapidAPI platform and your app.

I deployed the server on heroku, and defined an environment variable
`PROXY_SECRET` which I check against the one sent with the request.

Sometimes I need to test the server directly, in which case I simply do not set this variable (like on my local machine) and this check is bypassed.

### Code ###

```python
import os
from starlette.requests import Request
from starlette.responses import PlainTextResponse

app = FastAPI()

@app.middleware("http")
async def check_rapidAPI_proxy_header(request: Request, call_next):
    # Check if server knows about valid "secret"
    secret_header = os.environ.get("PROXY_SECRET", None)
    if secret_header:
        headers = request.headers
        # If the header is missing, or does not match expected value
        # Reject the request altogether
        if (
            "X-RapidAPI-Proxy-Secret" not in headers
            or headers["X-RapidAPI-Proxy-Secret"] != secret_header
        ):
            return PlainTextResponse(
                "Direct access to the API not allowed", status_code=403
            )

    response = await call_next(request)
    return response
```


### Resources ###

* [Uvcorn's
  ProxyMiddleWare](https://github.com/encode/uvicorn/blob/master/uvicorn/middleware/proxy_headers.py) -
  This is related but was not directly useful for me.
* [FastAPI middleware documentation](https://fastapi.tiangolo.com/tutorial/middleware/)
* [RapidAPI Proxy Secret](https://docs.rapidapi.com/docs/headers-sent-by-mashape-proxy2#headers-sent-to-the-request)
Magento 2 Upgrade or Migrate? What to do Next? What Expert Says
Published: 2020-05-06 08:41:17

Magento 2 is one of the leading CMS platform businesses use to build their eCommerce website. Since it’s release, it has taken the world of eCommerce by surprise. Many eCommerce leaders adopted Magento 2 foreseeing its advantages and capabilities in handling the eCommerce business. Many Magento 1 users migrated to Magento 2 due to the powerful features it has over others.
Still, many Magento 1 users are confused about upgrading or migrating to Magento 2. Well, if we look at these two terms upgrades and migrate, they both have different meanings. Upgrading means updating or moving to the latest stable Magento 2 version from the current Magento 2 version. While migrating means updating or moving from Magento 1 to Magento 2 eCommerce platform.
If you have already migrated from Magento 1 to Magento 2, then you may have to upgrade your Magento 2 platforms to stay on top of all the issues, and security concerns the last platform had. Magento releases upgrades for its flagship platform quarterly, which improves the performance, security, other things by adding new features and functions. So, upgrade your Magento 2 right away.

[Magento 2 Upgrade or Migrate? What to do Next? What Expert Says](https://www.mconnectmedia.com/blog/magento-2-upgrade-or-migrate-what-to-do-next/) on [Mconnect Media](https://www.mconnectmedia.com/).
split .gitconfig for domains
Tags: git, go
Published: 2020-05-06 09:09:02

---
title: split .gitconfig for domains
published: true
description: how to use global .gitconfig for different domains
tags: git, go
---

It's possible to use --local and --global .gitconfig's. 
Sometimes you need something in between, i.e. your workspace uses GitLab on a private domain and you use GitHub for your own purposes.

Since [2.13.0](https://github.com/blog/2360-git-2-13-has-been-released) possible to split logic for different domains.

You need a file for your GitHub (.gitconfig-github)
```
[user]
    name = username
    email = email@example.com
```

Another file for your GitLab (.gitconfig-github)
```
[url "git@gitlab.yourdomain.com:"]
    insteadOf = https://gitlab.yourdomain.com/
[user]
    name = John Johnson
    email = johnjohnson@yourdomain.com
```
Finally, split the configs via .gitconfig
```
[core]
    excludesfile = /Users/username/.gitignore
[includeIf "gitdir:$GOPATH/src/github.com/"]
    path = /Users/username/.gitconfig-github
[includeIf "gitdir:$GOPATH/src/gitlab.yourdomain.com/"]
    path = /Users/username/.gitconfig-gitlab
```
Last 9 instagram photos on your wordpress blog in 3 minutes
Tags: wordpress, webcomponents, php, instagram
Published: 2020-05-06 09:25:45

---
title: Last 9 instagram photos on your wordpress blog in 3 minutes
published: true
description: Show last 9 photos from your instagram profile in wordpress
tags: wordpress, webcomponents, php, instagram
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ofnx0ufo1jvzxsr8m1b9.png
---

Hi!
The other day I told you how I created [my first webcomponents](https://dev.to/ptkdev/instagram-widget-my-first-webcomponent-51ja). Today I wanted to tell you that I have implemented a wordpress plugin that loads the webcomponent into your blog and allows you to insert the [instagram widget](https://github.com/ptkdev-components/webcomponent-instagram-widget) wherever you want: html box, post or in the theme.

## 👔 Screenshot
Wordpress default theme + instagram widget:
![WebComponent: InstagramWidget ](https://dev-to-uploads.s3.amazonaws.com/i/1ywvulisyhyhvejafzhu.png)


## 🚀 Installation (Wordpress)
1. Download [wordpress-plugin](https://github.com/ptkdev-components/webcomponent-instagram-widget/raw/master/dist/wordpress/instagram-widget-wordpress-plugin.zip) and install it.
1. Add code to your html widget, example: `Appearance` --> `Widget` --> insert `HTML Widget` and paste html code (and replace `@ptkdev` with your instagram username):
```html
<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
```

You can insert this html code in posts, widget, html box or theme. Where you want see instagram photos box.

Resources: [[DEMO](https://codepen.io/ptkdev/pen/WNQOYqy)] [[NPM](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget)] [[GITHUB](https://github.com/ptkdev-components/webcomponent-instagram-widget)]


## 🧰 Options / Attributes

| Parameter | Description | Values | Default value | Available since |
| --- | --- | --- | --- | --- |
| username | Set your instagram username | Your instagram username with or without @ | `@ptkdev` | v1.0.0 |
| items-limit | Set the max number of pictures | number: from `0` to `12`  | `9` | v1.1.0 |
| grid | Set grid aspect ratio | `1x1`, `2x2`, `3x3`, etc... or `responsive` | `responsive` | v1.1.0 |
| image-width | Set width of images (NOTE: grid different than `responsive` overwrite this value) | length units: `100%`, `100px`, `100pt` | `100%` | v1.1.0 |
| image-height | Set height of images | length units: `100%`, `100px`, `100` | `100%` | v1.1.0 |
| border-spacing | Set spacing around images | length units: `5%`, `5px`, `5pt` | `2px` | v2.1.0 |
| border-corners | Set border radius of corners: `0`: square / `15`: rounded / `100`: circle | number: from `0` to `100` | `5` | v2.1.0 |
| force-square | Force square aspect ratio if you post photos with different size on your instagram | `yes` / `no` | `yes` | v2.4.0 |
| cache | Enable/disable cache | `enabled` / `disabled` | `enabled` | v2.1.0 |


## 💫 License
* Code and Contributions have **MIT License**
* Images and logos have **CC BY-NC 4.0 License** ([Freepik](https://it.freepik.com/) Premium License)
* Documentations and Translations have **CC BY 4.0 License**


# ❤️ Thanks! Leave a feedback!
McDonald's Card - TailwindCSS in 10 mins
Tags: tailwindcss, css, beginners, webdev
Published: 2020-05-06 12:28:14

Hi, Watch me coding this with just TailwindCSS under 10 minutes. It's a very simple approach to code an isometric card.

See this codepen:
{% codepen https://codepen.io/justaashir/pen/oNjpmjj %}
🌟 Be the person you needed when you started in the IT world 🌟
Tags: motivation, mentalhealth, beginners, career
Published: 2021-08-30 19:30:30

 
Let's talk about mentors ✨ 

I think the figure of a mentor in our lives and when we start our careers in the IT world, is very important.⭐

> “A mentor is someone who sees more talent and ability within you, than you see in yourself, and helps bring it out of you.” - Bob Proctor ✨ 

In my first job, where I was a functional analyst, I didn't have any person by my side to be my mentor, guide or someone to teach me.

Honestly, **I felt lost**, **scared** and with a lot of uncertainties that many times I didn't solve because I didn't have anyone to talk to. I learned a lot but **I felt alone** and **full of fears**. ***I didn't feel confident in myself*** 👾

Until then, I didn't know what it was to have a mentor or what it could be. I didn't know of their existence. Until one day I changed my job, my place and also my tasks. I started my way as a developer. And the first day I was assigned someone to accompany me during my process as a trainee.

I don't think a mentor is a teacher or a friend. It is that person who may even work with you in the future. A colleague. A team worker, maybe. 

### “A mentor is someone who allows you to see the hope inside yourself.” — Oprah Winfrey 🌟


**Finding a good mentor early on the learning process can help build confidence.** In ourselves but also in our professional future. 

🌟 A mentor is not only someone who accompanies us on our professional or learning path. In addition to helping us avoid getting stuck technically and helping us to go step by step following the procedures, it is also someone who is interested in helping beginners move forward. 

🌟 Some of us, worried about our future, ask our mentors how much we are going to earn. If we have possibilities to travel and even live abroad. With our insecurities, we also worry if we are going to be able to keep up with the rest of the people working on the same technologies.

🌟 I was lucky to meet someone very good and genius, and I dedicate this post to him. Hopefully everyone can find someone to be a guidance in this long way.

> ***Mentoring builds confidence, both individually and as a group. It is a light in the darkness of the road, especially in unbalanced and hostile environments such as the technology sector.***

🌟 I wish we were all mentors and help those who are starting out in this world. The word mentor always reminds me of this phrase that accompanies me every day: 

> ###🌟 Be the person you needed when you started in the IT world

Tell me, would you like to be a mentor?
What simplicity means in OO design principles ?
Tags: oop, java, deisgn
Published: 2021-08-30 19:46:15

Simplicity is one of the Object Oriented Design Principles that helps developers keep the complexity low in an object oriented program.

#### Do not code for future
It says, a class and its method should be as simple as possible, the code should do exactly what it should do, nothing more. We should  refrain from anticipating some functionality for future and implement it for completeness. It's better to code what is known as of now and code in a way that it can be easily extended when new functionality is needed. 

#### Do not provide many arguments
Sometimes programmers add more arguments to methods to make it more generic so that it can handle a lot of cases. But in reality all parts of the code may not be executed because all the possible scenarios the programmer thought of, is not happening now. just write what is known to be happening and don't make your method a generic one. 

#### Detect reusable logic and refactor 
If you anticipate you are writing a logic  part of which can be used later in some other cases, break that method into parts, white the reusable logic in separate method(s). Call the reusable method from another method. 
An easy way to detect this is, when during development you need to refactor a certain part once that means it might have to be modified later too. So better to put an extra effort to refactor it so that later a refactoring is not needed, otherwise just leave as it is. You can use design patterns to refactor the code and write a more general solution but design patterns do come with more code and complexity. So if the situation demands it then only apply it.

To read the main blog post with a concrete example please refer this [link](https://www.cloudnativemaster.com/post/what-simplicity-means-in-oo-design-pattern-how-to-apply-it-in-code)
To read all my posts related to Object Oriented Design please refer this [link](https://www.cloudnativemaster.com/object-oriented-design)