teleren/devto huggingface dataset:
Why did I build my portfolio website with GatsbyJS?
Tags: portfolio, gatsby, javascript
Published: 2020-07-11 19:25:15

---
title: Why did I build my portfolio website with GatsbyJS?
published: true
description: A short note on when it is a good idea to over-engineer
tags: portfolio, gatsby, javascript
---

TL;DR at the bottom.

-----

I've just finished building my [new portfolio](https://pimenta.co) and it's a simple one. Veeery simple (I'm a simple guy :). So simple that Gatsby is probably, definitely an over-kill, for the development side and for the client side as well. I don't need that much JavaScript.

---

## So why did I do it?

**To learn.** I finally got the energy to really learn JavaScript and the ecosystem around it, starting with React. So when building my portfolio, I grabbed the chance to expand my knowledge on the subject a bit more.

I also decided to add a few more things to the mix: [Strapi](https://strapi.io/), a Node.js CMS that I hosted on Heroku and an AWS S3 Bucket to store the images for Strapi.

It has been a very fun journey on learning so many different technologies and how they work.

---

## What am I saying

With this I just want to share with you the idea of taking the opportunity to learn wherever you can, even if it wouldn't be your first choice.

What do you think of this? Would you do the same or would you stick to the best tools for the job?

-----

**TL;DR: I overengineered my personal website to learn more JavaScript.**
Lazy Load images is only visible after scroll..!!
Tags: react, javascript, lazyload
Published: 2020-07-11 19:18:17

Hi, I am running a React project where I am using Lazy Load module for my images. The scroll component is in Popup div.
But it is not working as expected in Scroll Component. Images are not loading until I scroll it a little bit. I tried searching but most answers is solved with Jquery, but I need help with ReactJS or Pure Javascript.

Can someone help me with this. Thanks
Could C++ be as light in use as Python3 or Java
Published: 2020-07-11 19:16:07

Hi guys! Just your thoughts on this point.

I'm working on something to make this goal closer, and would like to share it with you. But first I'd like you to ask about it.

What do you think? As for me, main concerns are modularity and reflection.

P.S.: Sorry if it's a bit out of format. I'm still not sure what it should be like here. More like an article or some "instagram"-styled story.
Exploring the new MobX API
Tags: react, mobx, typescript
Published: 2020-07-11 18:54:07

### I have always been an avid admirer of [MobX](https://mobx.js.org/) and its simple API. Do read my previous posts regarding those in my profile.

Recently Michel Weststrate tweeted about a new API for MobX without the need of decorators or the `decorate` API.

{% twitter 1280987713341132803 %}

I have expanded on this example to show the simple API introduced by MobX named `makeAutoObservable`.

This API removes the need of using decorators which are still experimental and their API might change. This also removes the need of using the `decorate` method as we used to do before.

```ts
export class User {
  name = 'anonymous'

  updateName(name: string) {
    this.name = name
  }
}

decorate(User, {
  name: observable,
  updateName: action
})
```

Most of you folks would be familiar with the above syntax that we used to use MobX without decorators. One issue that I had with the above was I could easily miss any propery and that wouldn't be obsevable which could lead to unwanted behaviour.

`makeAutoObservable` solves the above problem and all the class properties are observable by default. The getters are computed and the methods are actions as well.

There's also another method `makeObservable` that lets us specify the properties that are required to be made as observable if we do not want all properties of the class to be observable by default.

I personally like this API as given the uncertain future of decorators and the pitfalls that I faced with the `decorate` API, this is a great addition to the library for cleaner code and not needing decorators as a primary API in MobX.

I have created a sandbox with React that you can explore. In this I have shown how we can combine multiple stores with a `Root` store, create our `RootStore` context, and fetch those values we require via the `useContext` hook.

As usual, the best part about MobX being components re-render only when changes are made to the values they're using and not otherwise.

{% codesandbox mobx-renewed-zjlhz %}

Do let me know your thoughts on this and thanks for reading :)
Laravel Blade Components Package
Published: 2020-07-13 09:07:30

---
title: Laravel Blade Components Package
published: true
date: 2020-07-11 18:52:51 UTC
tags: 
canonical_url: https://dcblog.dev/laravel-blade-components-package
---

I've released a blade components package.

Components can be made in projects easily enough but often its good to reuse components across projects, this is where [Laravel Blade components collection](https://github.com/dcblogdev/laravel-blade-components) comes in.

The first collection I've added is for forms. There are components for:

- form tags
- inputs 
- textareas
- checkboxes
- radios
- selects
- buttons

These allow you to write forms with less markup required, for instance, take the example login form:

```
<x-form.open action='login'>

<x-form.input name='username' class='form-control'>{{ request('username') }}</x-form.input>
<x-form.input name='password' type='password' class='form-control'></x-form.input>

<x-form.button class='btn btn-sm btn-info mt-3'>x Login</x-form.button>

</x-form.open>
```

Another example, populate forms for a typical edit form:

```
<x-form.open method='put' action='{{ route('post.update')}}'>

<x-form.input name='title' class='form-input'>{{ old('title', $post->title) }}</x-form.input>

<x-form.textarea name='content' class='form-input' cols='10' rows='10'>{{ old('content', $post->content) }}</x-form.textarea>

<x-form.button>x Login</x-form.button>

</x-form.open>
```

Check out the [Laravel Blade components](https://github.com/dcblogdev/laravel-blade-components) package.
How to Setup a Successful Team
Tags: management, career, webdev, productivity
Published: 2020-07-11 18:47:30

Before we jump into tactics let's talk about the definition of success. How would you define a successful team? You might measure team success by the cohesiveness of the team. 

Was the team really close? Are they a tight organization that from now on has one another's backs? Would you measure success based on the culture of the team or is the success of the team boiled down to having successful deliverables? Perhaps you measure success by the amount of planning that went into the team projects or clarity of vision or purpose. 

Maybe you measure success by how well the communication was of the team. Maybe you're just looking at the leadership of the team. Was the leader a great leader and therefore made the team successful? Was it about the individual willingness? Was everybody ready to give it their all and do the best they could for the team? You might measure team success based on the attitude of the team. 

Did everybody walk away loving what they did or are they kind of resentful about even being on the team in the first place? Typically people look at the final deliverable of the team and that's what determines whether the team was "successful" or not. 

As a business owner and a manager there might be other reasons why you put people on a team. It might have a lot more to do with the culture and cohesiveness than a final product, especially if you have a product that's not that important. 

You might have seen this in organizations where people were put on a project that didn't seem to be that important. The project and the team might have simply been a vehicle... to help pull people together to get a shared vision, to develop the culture, to build unity in the organization, etc. 

Teams can be put together for more than just getting a final deliverable out. Here's my final question about team success. It seems to be a popular idea right now in corporate world that we need to embrace failure. We need to allow failure and not be afraid of failure. 

The idea is that failure means that we're getting closer to a more successful result. I would invite you to think about the teams you're on or that you've ever been on and think about what the feeling of failure is or has been. Can you imagine an R&D department where failure wasn't an option? Failure's part of the package. They need to fail in order to get closer to their success.

Setting up a successful team, you must define how the team members fit together.
Road to Genius: advanced #46
Tags: javascript, codenewbie, beginners, computerscience
Published: 2020-07-11 18:38:54

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function POF(num) {
  if (num === 1)
    return true;
  if (num < 4)
    return false;
  if ((num & num - 💰) !== 0)
    return false;
  return (num & 1431655765) === 💎;
}
let A = POF(356);

// 💰 = ? (number)
// 💎 = ? (identifier)
// such that A = false (boolean)
```

In today's challenge we need to fix two bugs, in what seems to be quite complex code. Especially if you've never worked with binary operations, but fear not.

The `&` operator is a binary `and`, it works like this:
```
This is purely mathematical (not javascript)
The and-operation returns 1 if both values are 1,
and returns 0 if any of the values is 0.
1 & 1 = 1
1 & 0 = 0
0 & 1 = 0
0 & 0 = 0

Example:
x     = 1010
y     = 1100
x & y = 1000
```

We need to ensure that the output from the function `POF(356)` is `false`. The first two if-conditions we can ignore because they won't give us any false return value. But the third might:
```JS
if ((num & num - 💰) !== 0)
  return false;
```
With `num` as 356, let's have a look at the possible choices for 💰: 0, 1 and 356 itself. If we can use any of these to ensure that the if-condition returns false, then we've solved it, so let's try:
```
356 in binary is: 101100100

let 💰 = 0
-->  101100100 & 101100100 !== 0

let 💰 = 1
-->  101100100 & 101100011 !== 0

let 💰 = 356
-->  101100100 & 0 == 0
```
The answer for 💰 should either be 0 or 1 (but not 356) to ensure the function returns right there. The final bug 💎 can be anything as long as we respect the previous sentence.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/srevi7sb8quzsz3t7zyi.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
Git Commit Amend
Tags: git
Published: 2020-07-14 13:53:02

---
title: Git Commit Amend
published: true
date: 2020-07-11 18:33:26 UTC
tags: git
canonical_url: https://www.miketmoore.com/post/git-commit-amend/
---

I want to start writing regularly again so I thought I'd share one of my favorite git commands:

```
git commit --amend --no-edit
```

I use this command to combine just added changes into the last commit I made. 

Here is a scenario:

Let's say I have just edited a file and already commited it, but then I realize I made a typo before I push my changes. I can edit the file, add the change (stage it), and then run `git commit --amend --no-edit`. This will put my typo fix into the latest commit and replace that commit's hash with a new hash. This is usually referred to as "rewriting history" in git. Now, I can push my change up as one commit, instead of two. 

Here is what the official docs say about the `--amend` option:

> Replace the tip of the current branch by creating a new commit.

https://git-scm.com/docs/git-commit#Documentation/git-commit.txt---amend
What are the best SEO Strategies?
Tags: security, devops
Published: 2020-07-11 18:06:14

The development of <a href="https://seoresellerusa.com">SEO</a> is more than just page optimization and link building. As soon as unrelated areas such as social media and content marketing become an essential part of a successful strategy for search engine optimization.

SEO and website structure on the page

Web SEO is important so that search engines understand the content of your website better. The first step is to make sure that search engines can crawl your website and find all the valuable content. Content is the key for the key, prefer <a href="https://ghostwriting.services">ghostwriting services</a> for your content. To do this, you need to ensure that your website has good internal links, no broken links, good navigation, clear content, and reasonable loading time.

Your keyword research is also helpful here, as it helps you optimize your content. It is important to create certain pages related to the keyword topic, as this enables search engines to clearly understand the meaning of each page. Attempting to consider too many topics on the page does more harm than good. 

Most experienced <a href="https://www.seoagencycompany.com">SEO</a> companies usually launch campaigns after a thorough website review. There is a good reason for this because technical site audits can really understand what needs to be done to achieve the site's expected goals.

•	Keyword and SERP analysis
•	Competitive research and analysis
•	Technical analysis and analysis of on-site
•	Analysis at the page and content level
•	User Experience (UX) analysis

Link analysis

Understand the website, business, target market, current situation, and actual needs. The first step in a successful SEO campaign is to understand the entire content of the client's website. This phase sets the goals of the campaign by:

• Type (and size) of the website
• Nature of Business
• Target market
• Current situation

Look for opportunities

After weighing problems, challenges, and identified resources, it is easier to find and identify opportunities that can be used by the following process:

• Keyword research
• Competitive intelligence
• Solution

By summarizing the following results from audits and reviews, you can usually easily solve common SEO and traffic-related problems. The measures we should take to meet the real needs of the website.
Automate start and stop of Google Cloud Compute Engine
Tags: googlecloud, automation, bash, scripting
Published: 2020-07-11 18:03:27

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gkueypom4ulw23yot4eg.jpg)
<span>Photo by <a href="https://unsplash.com/@lucabravo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Luca Bravo</a> on <a href="https://unsplash.com/s/photos/bash-script?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

# Start and stop Google Compute Engine for developing (keeps cost and resources down) 

This script will start/stop Google Compute Engine vm instance, script starts a vm instance for anyone to use and test in a dev environment. 
Once task are done simply exit out of ssh and the script will automatically turn off the vm instances. 

You will need the [GCLOUDSDK](https://cloud.google.com/sdk/install) and setup ssh keys or os login for the vm instance. 

Download to dir and chmod +x startopvm.sh (or whatever name you want to call it) and then enter the input of which vm instances you are using 

```
./startopvm.sh project_name vm_instance zone 
```



```
#! /bin/bash

gcloud info 

gcloud projects list

# arguments

Project=$1   #project id that you'll be working on 

vminsta=$2  #vm instances name that you are starting within that project id 

zone=$3    # zone of vm instance that is running in, this format will be in i.e  --zone=us-central1-a 

gcloud config set project $Project 

gcloud compute instances list 


gcloud compute instances start $vminsta $zone

gcloud compute ssh $vminsta $zone



# An error exit function

error_exit()
{
	echo "$1" 1>&2
	exit 1
}

# Using error_exit

if gcloud compute instances list --filter="status=running"; then

  echo "Instance name: $instances"
	
else
	error_exit "Cannot start!  Aborting."
fi 
  if echo "logout"; then 
  gcloud compute instances stop $vminsta $zone 

  echo "gcloud compute instances stopping"  

else

  error_exit "cannot stop" 
fi
```

When you're done developing or testing simply enter exit in the ssh vm instance and the script will shutdown the vm instance.
My top 5 tools for Web Design
Tags: webdev, css
Published: 2020-07-11 17:55:19

Whenever I start a new web design project there are a few tools and resources I repeatedly use for my design process. They work all the time and help greatly ease the workflow and generally make it easier to complete my projects. 

<h3>1. Unsplash</h3>
Unsplash.com is my number one go to website to grab royalty free, professional high grade images to use for my website designs. These are the types of images that change the entire visual design of the website.
Link: <a href="https://unsplash.com">Unsplash</a>

<h3>2. Blobmaker</h3>
Blobmaker.app is a genius tool that generates for you the svg code for cool blobs. Which you can then paste in your html code. You can even control the shape and color. Super cool.
Link: <a href="https://www.blobmaker.app">Blobmaker</a>

<h3>3. Get Waves</h3>
Getwaves.io is another online resource from the makers of blob.app. Its the same idea but instead of blobs it let's you create beautiful waves for backgrounds like you see on those modern websites. Just copy and paste the code and you're done!
Link: <a href="https://getwaves.io">Get Waves</a>

<h3>4. CSS Gradient</h3>
Cssgradient.io is another online resource that lets you set beautiful gradient colors for your css with a convenient photoshop-like gradient color picker. I use this for buttons, backgrounds and text all the time!
Link: <a href="https://cssgradient.io">CSS Gradient</a>

<h3>5. Animista</h3>
Animista is a great css tool. It has a library of css animations that you can use to animate css elements. Instead of spending valuable time figuring out a smooth animation, animista has a list of tons of popular animations and generates for you the css code. There's even a customizer interface to create custom animations.
Link: <a href="https://animista.net/">Animista</a>

Those are my 5 favorite resources which i use in countless projects, go ahead and try those and let me know what you think of them!
Day 14 of #30DaysOfCode | Functions in Go(golang)
Tags: go, codenewbie, challenge, motivation
Published: 2020-07-11 17:54:01

Hey awesome people! How are you doing today? Are you having fun and enjoying this wonderful gift called life? Did you learn anything today?
You know, there is fun in learning new things, there is enjoyment in learning new things. I hope that you are enjoying as well as learning new things every day. Now, without any further ado let's talk about what I learned today.

Today, I dived into the realm of functions and methods in Go. It was amazing. I learnt about the anonymous function. I learnt about the first-order function and passing these functions as parameters, returning multiple return values. Then I learnt about writing Variadic functions in Golang. These were the new things I learnt about functions in Go.

Now, for today's coding example, I would like to share a simple variadic function code with you. Here is the code example, take a look at it and then we will talk about what it does how it works?

![Variadic function in Golang](https://dev-to-uploads.s3.amazonaws.com/i/u8whx5vknmtgeyecv2tl.png)

The <code>sum</code> function returns the sum of all the numbers that are passed as a parameter. This is a Variadic function and in the function call, we are printing the return value. Now let's talk about the code part of the example.
This function will take an arbitrary number of ints as arguments. It is possible because we used the <code>...</code> operator before <code>int</code>. We have a variable named <code>result</code> to store the sum. We are looping through the <code>nums</code> and in the loop we are adding each element to the <code>result</code> variable. When the loop ends, we are returning the <code>result</code> variable as the return value. In the main function, we are calling the <code>sum</code> function and the return value is then printed in the main function. It's as simple as that.

Alright! That's all for today. Do follow me for more posts like this. Also, after the completion of the challenge, I will be covering the entire fundamentals of the Go Programming Language in great detail. So be on the lookout for that.
Thanks.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
What do you use for your Instagram material?
Tags: marketing, design, discuss
Published: 2020-07-11 17:52:47

I'm curious...

**What do you use to create your marketing material for Instagram, Twitter, etc?**

I've been using an Android app called *Over*. It's not the best solution, but it saves me paying out for Adobe Spark. Canva would be great if it didn't have alignment bugs on exported content. What do you use?
How do you explain your excitment, when you fix that bug?
Tags: discuss
Published: 2020-07-11 17:49:34

---
published: true
title: 'How do you explain your excitment, when you fix that bug?'
cover_image: ''
description: ''
tags: discussion
series:
canonical_url:
---

I hope the title makes sense because this is something I have been thinking about for a little while now. You know that feeling when you finally get that bug, and it turned out to be something relatively simple. You've spent hours Googling, and browsing Stack Overflow, and then when you finally get it fixed, that feeling. How do you explain that to someone who isn't a developer or even someone who doesn't know much about IT? If I had to try and explain that to my grandparents or even my parents, they would probably look at me like I'm crazy :joy:

# Found a typo?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. Instead of posting a comment, please go directly to [github.com/Kvanrooyen/dev.to](https://github.com/Kvanrooyen/dev.to) and open a new pull request with your changes.
World of WoqlCraft - Ep.15 Querying movies data graph
Tags: python, database, dataanalysis, query
Published: 2020-07-11 17:35:25

---
title: World of WoqlCraft - Ep.15 Querying movies data graph
published: true
description: We can now test out the IMDB movies data by making querying, asking what movie an actor is in and try to find a movie to watch by picking a genre. These all can be done in Jupyter Notebook with the TerminusDB Python client. Follow this series to see how we use TerminusDB client and making queries in Python.
tags: python, database, dataanalysis, query
---
We can now test out the IMDB movies data by making querying, asking what movie an actor is in and try to find a movie to watch by picking a genre. These all can be done in Jupyter Notebook with the TerminusDB Python client. Follow this series to see how we use TerminusDB client and making queries in Python.

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).

Join the TerminusDB community at [Discord](https://discord.gg/Gvdqw97)