teleren/devto huggingface dataset:
Full Course on Solidity (Blockchain)
Tags: ethereum, blockchain, solidity
Published: 2020-07-16 05:29:08

---
title: Full Course on Solidity (Blockchain)
published: true
description: 
tags: ethereum, blockchain, solidity
canonical_url: https://youtu.be/d_Rynes-SvI
---


I just released a [full course on Solidity](https://youtu.be/d_Rynes-SvI) for beginners.

There is 0 pre-requisite necessary to follow.

The course is based on the popular game CryptoZombies: you learn smart contract programming on Ethereum by creating an army of Zombies!

{% youtube d_Rynes-SvI %}

If you want to get into Blockchain, learning smart contract programming is great entry point. Solidity is the most popular language for Ethereum smart contracts, so it makes sense.

If you don't know what Ethereum is, that's the most popular Blockchain, and the first one to have introduced the concept of smart contracts.

Smart contracts are little programs that run on top of the Blockchain. The 2 big advantage smart contracts are:
* they can manipulate natively money (Ether and ERC20 tokens)
* they are immutable
The last point is important. It means smart contracts cannot be censored: they will run the EXACT code that was deployed, forever, and nobody can ever change that.

Smart contracts are also a bit more limited compared to traditional programs:
* you can't store too much on them (its expensive)
* you can't run computations that are very complex (its expensive)
* modifying data cost money
* modifying data takes time (15s to mine a block)
* you can't call external APIs

These limitations are consequences of running in a Blockchain.

But even with all these limitations, smart contracts getting increasingly popular. DeFi, or Decentralized Finance is a new industry that vows to re-invent Finance on the Blockchain, to make it more decentralized, open and composable. You can assemble different DeFi projects like Lego blocks build your own DeFi projects. No need to ask for any permission. You can see that the [market cap of DeFi](https://defipulse.com/) is exploding.

But if you to want enter this wonderful world, you need to understand Solidity first, so go [follow this course](https://youtu.be/d_Rynes-SvI).

{% youtube d_Rynes-SvI %}
Up and running with Vue.js
Tags: html, vue, slingcode, pwa
Published: 2020-07-16 05:25:46

In this screencast I'll show you how to get up and running with Vue.js using nothing but your browser. We'll do this using the [Slingcode editor](https://slingcode.net/) so we don't have to install anything or use the command line to build an app. Enjoy!

{% youtube OJ7eEIsfIJo %}
Search engine optimization plays an important role in leading your business and website
Published: 2020-07-16 05:24:53

The top <a href="https://www.wondermouse.in/top-seo-company-noida/">SEO agency in Noida</a> plays a key role in grabbing market attention and increasing conversions. Always remember that SEO alone cannot do magic. Therefore, it should be synchronized with branding, social media and other important marketing strategies. More than 72% of consumers do thorough research on online companies before placing their orders. Therefore, a better search engine rank becomes necessary. It's not enough to have a working website to win the Arena. If you want to grow your company and attract a lot of clients, then smart use of SEO techniques is needed. If you have low ranking in search engine results then you will not be able to reach your future customers.
Are you looking for the best SEO Company in Noida?
Have you ever wondered why you don't appear on the first page of search engine results? There can be many reasons for this, but if you are not paying attention to SEO, then this can be the main reason. A certain set of proven methods is required when doing SEO of any post. To achieve a higher rank in an SEO on-page with a <a href="https://www.wondermouse.in/top-digital-marketing-company-in-india/">Digital Marketing Services India</a> consists of optimizing individual website pages and grabbing more productive traffic in search engines, this can be done by the best SEO services company in Noida. Search engine optimization is a broad concept. If you want to take full advantage of this, then you should make a smart and effective SEO strategyTherefore it is necessary to establish an SEO strategy based on contemporary methods and technology, both time and technology are changing rapidly.
Summary
At XYZ, we have several years of experience in Noida's SEO services and a proactive approach to all ventures that come our way, big or small. Our developers and designers are well versed in how custom web design operates, and are working to produce results of high quality on a timely basis. We also deliver robust online applications and enable clients to expand their audiences.
Deployment pipeline for a platform with collaborating bounded contexts
Published: 2020-07-16 04:44:53

---
title: Deployment pipeline for a platform with collaborating bounded contexts
published: true
description: devops, continuousdelivery, deployment, deploymentpipeline
tags: 
//cover_image: https://direct_url_to_image.jpg
---


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a1dtamde4dpnpulr3x3g.png)
How to create an animated flip card with CSS 3D transforms
Tags: css
Published: 2020-07-16 04:20:00

*** Working demo on [CodePen.io](https://codepen.io/michaelburrows/pen/PoZyZEg).

Flip cards can be created using just HTML & CSS.

They can be used in a number of ways to display more information to a user on hover.

In this example we’ll create a flip card with an image on the front and text on the back.

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

First let’s start with the HTML:

```html
<div class="flip">
  <div class="flip-content">
    <div class="flip-front">
      <img src="https://www.fillmurray.com/150/150" />
    </div>
    <div class="flip-back">
      <strong>BILL MURRAY</strong>
    </div>
  </div>
</div>
```
 
Next add the following CSS:

```css
.flip {
  width: 150px;
  height: 150px;   
  text-align: center;
  perspective: 600px;  
}
.flip-content {
  width: 100%;
  height: 100%;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}
.flip:hover .flip-content {
  transform: rotateY(180deg);
  transition: transform 0.3s;
}
```
- If you’re creating a card larger that 150×150 you’ll need to increase the `perspective`.
- You can speed up or slow down the animation by changing `transition` speed .
- For a 360 spin effect change the rotation to `360deg` – this works well with single sided buttons.

If you preview what we have done so far in the browser you’ll see the text and image flip into a reversed state.

To achieve our desired full flip card effect this additional CSS is required:

```css
.flip-front, .flip-back {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 150px;
  backface-visibility: hidden;  
  color: #fff;  
  background-color: lightseagreen;
  border: 6px solid lightcoral;
  box-shadow: 6px 6px lightseagreen;
}
.flip-back {
  transform: rotateY(180deg);
  border: 6px solid lightseagreen;
  box-shadow: 6px 6px lightcoral;
}
```
Wrote my first JS quiz app 🙌🏽 
Tags: javascript, codenewbie, quiz
Published: 2020-07-16 03:56:47

Interestingly enough, this is also my first post! All kinda firsts this week. I recently challenged myself to write a quiz app using vanilla JS. I’m still very much a code newbie going into front-end. However, based on an unfinished Colt Steele ‘Web Developer Bootcamp’ course (I got through the JS and DOM sections) and Google, I not only completed it, but in less than a week!!

Honestly, it was fun-the googling, the styling, the coding, the trial-and-error, the use of console.log to check values. And believe it or not, I spent more time deciding on the colors than writing the actual code. The most challenging part was adding the score function and placing the for loop but I got it figured out.

Feel free to leave comments, feedback on improvements, suggestions, etc.

GitHub Repo: https://github.com/nlefty/quiz
Quiz: https://nlefty.github.io/quiz/
Creating GISTs from a GITHUB Repo on the go
Tags: github, tutorial, productivity
Published: 2020-07-16 03:41:21


Github provides you with the functionality to make and embed a gist anywhere on the internet, but there's something missing, what if we want to share a gist of code from existing repo without the need of creating a new gist for it?

---

### TLDR;

Hello there,

For anyone who works with documenting or creating how-tos and tutorials on software development, we know how hard it is to include a chunk of code in between.


There are few options that we can consider -
- We can include a code block in between and write down all the code we need to display.
- We could create a gist on GitHub, but creating and managing gists is tedious.

But then, we have the code in a repository most of the time, after all, one of the principle we developers adhere to is DRY (Don't repeat yourself).

This is where git-repo-gist comes in, as the name suggests, this utility allows you to create a gist out of any file from a GitHub repository.

---

### Features

- Two modes available
    - Script and Iframe
- Supported Languages (I suppose all the popular languages are supported but the list below is for sure)
    - typescript
    - javascript
    - dart
    - json
    - php

---

### How to use it

There are few simple steps to get gist out of code - 

- Get the `uri` to the `raw` file, for eg `https://raw.githubusercontent.com/thefallenmerc/git-repo-gist/master/app.js`
- extract the part starting from your username till end, (everything after `https://raw.githubusercontent.com/`), we get `thefallenmerc/git-repo-gist/master/app.js`
- Append this to our base url with any of the option available in between, the solution is hosted at [https://git-repo-gist.herokuapp.com/](https://git-repo-gist.herokuapp.com/), thus we get `https://git-repo-gist.herokuapp.com/<option>/thefallenmerc/git-repo-gist/master/app.js`, where option can have the following value -
    - __gist__: gives back and actual gist script
    - __framed__: gives back an iframe with the gist in it

---

Link to Git Repo Gist - [Git Repo Gist](https://git-repo-gist.herokuapp.com/)

{% github thefallenmerc/git-repo-gist %}
Lost in VS Code windows?
Tags: vscode, productivity, tools, webdev
Published: 2020-07-16 03:38:06

[Marquee](https://marquee.activecove.com/) strives to make working inside VS Code more productive 🦾. Thanks to VS Code's lightweight nature, devs love to open multiple windows for projects, repo, and workspaces. Running multiple VS Code 🗃 instances at the same time. Here are some tools available in Marquee's latest release to help you stay on top of your workspaces.

[Install Marquee](https://marquee.activecove.com/), if you haven't already 🤔

💣 Add todo from editor's context menu
Creating a todo while you're deep inside your editor is now as easy as two clicks away. Just select the text inside your editor, right click, and select "Add todo to Marquee". Done.

![Add todo from context menu](https://dev-to-uploads.s3.amazonaws.com/i/5vh0a7rly71dlsxpzqnl.gif)

🤖 Auto-suggest to add todos
Even more conveniently Marquee will auto-suggest to add a line as todo whenever it's prefixed with uppercase TODO. Notice the blue underline, hover over it, click "Quick Fix", "Add todo". Leave losing track of your thoughts while coding behind you.

![Auto-suggest adding todos in code](https://dev-to-uploads.s3.amazonaws.com/i/gyxq5inr8ag3d3imrlle.gif)

🤓 Workspace specific todos
Marquee will keep a record of all your VS Codes no matter whether you open a new window for workspaces or folders. Whenever you add a new todo Marquee will associate it with your currently active workspace and allow you to toggle the list of displayed todos between all of them (global) or workspace-specifc, scoped down to the active workspace/folder you're currently running.

![Toggle between global/workspace todos](https://dev-to-uploads.s3.amazonaws.com/i/sm5xkih0eobr0w4st511.gif)

📮 Didn't do it for you?
Let us know what you think. We've located a "Give Feedback" button in the Marquee UX to easily share feedback 📨 with us, good or bad. Please be candid 🤩. If you like Marquee, let your 🧑‍🤝‍🧑 friends know. We mightily appreciate it!

Don't forget to [install Marquee](https://marquee.activecove.com/) and give it a spin please.
What do you think about my new domain?
Tags: domain, idea
Published: 2020-07-16 03:07:41

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

Hey guys 👋🏼,

I hope you all are doing great.

I just bought a domain: desk.sh

I don't know but I was compelled to grab it as soon as I saw it. It's short, memorable and can fit with different niches from tech to non-tech material.

I wonder what you guys think about this? Do you like this short name? What can I possibly do with this other than using it as my new secondary email?

I'm exploring different options at the moment and your valuable thoughts on this would be much appreciated.

Thanks 🙏🏼
Two Soft Skills That Are Not That Soft
Tags: softskill, career, firstyearincode, management
Published: 2020-07-16 03:07:27

Soft skills are the hardest ones to develop. They make you stand out in your team, either because you own them or because you are missing them.

And most of the time they are not a gift that you were born with it, but skills that you can learn and apply.

This time I will show you two essential soft skills that are tough enough to make the difference between an assertive person and a sloppiness one.

#Straight Talk

Communication is the key. If you are not capable of saying things in a way that other people can fully understand your concerns, you are lost.

Your message has to be clear, transparent and direct. A formula that people often use to develop clear communication is to build the sentence like

#####Context + Problem + Request

You don’t have to build an entire talk to request something. That’s a waste of time, omit intro, get to the point. That doesn’t mean that you have to be petty and rude, people will thank you if you give their time the value that it deserves.

##Give direct feedback

When you are giving someone else feedback give it in a way that they completely understand the message. If you are trying to minimize their chances of getting better by not making them feel bad, you’re not helping them.

Remember that truths without empathy are only cruelties. Give clear feedback with the intention that others grow, don’t take away their mistakes. Be honest and assertive, you won’t gain anything if they just feel dejected.

#Grit

If you are going to make something, do it great. That means there could appear problems, obstacles and questions, but you have to be strong enough to take them and build a stairway to your goal.

When you quit a task just because you don’t know how to solve it yet, you are missing the opportunity to learn in a potential way.
The more productive people are well learners. The time that you invest in searching for a solution today may be time saved on a future task. You can’t avoid them all your life.


Soft skills may not be that soft but they are transversal. They will not fit in a job profile because they don’t depend on your career, they depend on you. Become a better version of yourself.
useState  hook with Functional Components
Tags: react, functional
Published: 2020-07-16 02:48:20

# What is useState?

Potentially the most important React hook. It is important because it allows you to have state variables in functional components. According to the official documentation on [React.org](https://reactjs.org/docs/hooks-reference.html#usestate), 

> Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Prior to the addition of hooks we would need to write a class to store state and make a dynamic component. 

## How do you implement its functionality?

First, we must import the hook from react like so:

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

## Before diving in it is important to note:

1. Hooks can only be used inside functional components
2. Hooks must execute in exact order in every component render. For example, 
```if (true) { 
useState() 
} 
useState()```
will give you and error:
> React hook "useState" is called conditionally

In other words they can't be placed inside functions, conditionals, loops, etc. and must be at the top level.

## How do you use it? 

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

* Import useState. 
* Initialize useState. The first argument in useState(initialState) is default state. For example, I want a user to click a grey button and the background color of an icon turn pink. default state is false. In other words, the user has not clicked the button; therefore, its initial state is false, the button hasn't been clicked and the background of the icon is grey.

```
import React, { useState } from 'react';

function iconColor() {
  const [color, setColor] = useState(false);
  
}
```
When the function, useState(false) is invoked, it will return an array with two values. Our first value is state and our second value is a function that allows us to update the current state. 

* Update state. Using the second value, again a function, we will update state. 

```
function changeColor() {
const [color, setColor] = useState(false);

  const iconGrey = () => setColor(false);
  const iconPink = () => setColor(true);

  return (
    <>
      <div className={color ? "icon-pink" : "icon-grey"} />
      <button onClick={iconPink}>On</button>
      <button onClick={iconGrey}>Off</button>
    </>
  );
}
```
for this example, "icon-pink" and "icon-grey" are icons that have preset colors.

## Conclusion

This is the absolute basic use case of useState. If you would like to learn more about different use cases I would recommend checking out React.org's official documentation.
🤦‍♂️  Facepalm Lesson One: The Delayed Aha Moment
Tags: devops, productivity, saas
Published: 2020-07-15 22:30:41

_"What became clear in our reflection and research is that we made a few mishaps. And there was one in particular that we wanted to fix ASAP."_

**Lesson one, don’t gatekeep your aha moment. Deliver value to users right away or say goodbye.**

***

Quick background. Smallstep is building a product-led go-to-market. This approach can be amazingly powerful when done correctly and has produced some of the world's strongest performing companies. The core concept is the organic adoption of products, not sales adoption of products. It worked for Zoom, Slack, Calendly, Expensify, Dropbox, Hubspot, and many others. Our product launch looked to emulate these companies but fell short in a few key areas. This is the first in a series of posts highlighting a few of the go-to-market mishaps we are making here at Smallstep. Yes, you read that right, a blog series on where we went sideways and some suggestions on how to avoid them in your world.

So let’s get started. First up, _'making your users wait forever for that aha moment.'_ Or to put a positive spin on it, _'filtering users to only the truly dedicated through an involved onboarding process'_. But before we get into that, a quick summary of what you might have missed.

### How Did We Get Here?

It started with a zinger of a [blog post](https://smallstep.com/blog/use-ssh-certificates/ "Use SSH Certificates") from Mike Malone that set the direction for what was to become our first product. The post created a strong reaction that we parlayed into over 100 good discussions with would-be users. We quickly formulated an MVP and shared the details with the team. To prove we could do it, we spent a day building a throwaway prototype. With a prototype in hand, we set out demoing the product to anyone that would listen. The reactions were SUPER positive and translated into a good number of early access users to help prove out the value. We love our early access users. They helped more than they know and quickly became friends. Plus they gave us direct and honest feedback:

![malort](https://smallstep.com/uploads/malort-3.png)

[About Malort](https://www.thrillist.com/drink/chicago/14-things-you-didn-t-know-about-malort-thrillist-chicago "Try it, we dare you!")

With our core functionality in place and real-world users pushing us to build the best product, we focused on the final mile, onboarding. We created user self-service. No sales calls or required professional services, just try it and find your **aha moment**.

Post continued on [smallstep.com](https://smallstep.com/blog/delayed-aha/)
How to keep check state  in el-table(ElementUI) when using Paging
Published: 2020-07-16 01:58:31

#el-table with paging 
If your page has el-table which including paging. el-table doesn't keep checked state by default when switching pages. 

The solution is, set reserve-selection option to true. Then you can keep checked even if you switch page using paging. Also, don't forget to set row-key option too, otherwise you can't get row key.

```
<el-table
  ref="deviceListTable"
  class="device_list_form"
  :data="list"
  :row-key="getRowKey"
  @selection-change="handleTableSelectionChange"
>
  <el-table-column type="selection" width="55" :reserve-selection="true" />
  <el-table-column prop="uuid" label="UUID" width="200" />
  <el-table-column label="DeviceName">
    <template slot-scope="scope">
      <SelectItem :label="scope.row.deviceName" name="DeviceName" />
    </template>
  </el-table-column>
  <el-table-column label="DeviceLabel">
    <template slot-scope="scope">
      <SelectItem :labels="scope.row.labels" name="DeviceLabel" />
    </template>
  </el-table-column>
</el-table>         
```
Finally, I rebuild my blog (Jekyll based) with Vue 🥳
Tags: showdev
Published: 2020-07-16 01:26:57

---
title: Finally, I rebuild my blog (Jekyll based) with Vue 🥳
published: true
description: 
tags: showdev
//cover_image: https://direct_url_to_image.jpg
---

It's my new blog:

![Halaman depan blog Zen](https://dev-to-uploads.s3.amazonaws.com/i/2f5plrhnmyt4d69v294f.png)

![Halaman detail blog Zen](https://dev-to-uploads.s3.amazonaws.com/i/21bipgrudnyhramz2q9y.png)

Technologies what I use:

- Vue
- Vue Router
- Custom CSS (I write these in one night!) 🙃
- Images from [Freepik](https://www.freepik.com/) (I'll write the attribution soon)

You can fork this from my Github repo:

{% github mzaini30/mzaini30.github.io %}
Help Validate My Idea (Seeking Home Owners)
Tags: idea, home, owner, house
Published: 2020-07-16 01:17:17

---
title: Help Validate My Idea (Seeking Home Owners)
published: true
description: 
tags: idea, home, owner, house
//cover_image: https://direct_url_to_image.jpg
---

I am working on generating an idea for SAAS that helps homeowners manage their projects at home. Everything from painting, to replacing one's floor, I feel like there should be some digital book you can use to keep track of these changes. Kind of like GitHub but for your home. Therefore I am looking for a few homeowners to answer some quick questions I have in a survey posted below.

https://forms.gle/PX9jrxAGquRK3qKUA

Sincerely

- Taylor Brazelton