teleren/devto huggingface dataset:
Drawing a cartoon in CSS
Tags: codepen, css, html, showdev
Published: 2020-12-21 16:47:01

---
title: Drawing a cartoon in CSS
published: true
tags: codepen,css,html,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/po4w9i7wr7eohu4l7o9c.png
---

It's been a while since the last CSS drawing I coded —or at least it feels like a long time—, and it felt good to draw something even if it was small.

I started strong, I really like how the face looks, adding shadows to create the impression of lines changing thickness, and actual light/shade tones... but then I kind of lost steam and not really happy with the body and neck. May need to revisit that part.

Here you can see a time-lapse video of the process:

{% youtube -YhINpBGzaA %}

In the video you can see how I never saved (big mistake) and at the end, when I clicked on "Save", something happened and the browser went back to the previous page... losing all the unsaved work!

...or so I thought (when I stopped the recording in panic). Luckily for me, going to the next page restored most of the code and was able to recover the drawing.

And here it is the code, you can see it on [this demo](https://codepen.io/alvaromontoro/full/WNGEjMz):

{% codepen https://codepen.io/alvaromontoro/pen/WNGEjMz %}
Released Tailwindcss Admin theme
Published: 2021-09-18 17:47:53

---
title: Released Tailwindcss Admin theme
published: true
date: 2020-12-21 16:40:38 UTC
tags: 
canonical_url: https://dcblog.dev/released-tailwindcss-admin-theme
---

 ![Released Tailwindcss Admin theme](https://dcblog.dev/assets/images/blog/tailwindcss/admintw.png) 

I've released a new Tailwindcss based theme for admin style applications, the theme is in pure HTML so it can be adapted to any system. I've also added in dark mode support based on a user's preference on the OS.

The theme comes with the following pages:

- Dashboard
- Starter
- Alerts
- Card
- Tabs
- Profile
- Login
- Register
- Forgot Password
- 400
- 500

The theme also makes use of alpineJS for the interactions for menu's it's very lightweight, for more details checkout the repo [https://github.com/dcblogdev/admintw](https://github.com/dcblogdev/admintw)

<style type="text/css">.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}
</style>
Project Management Software
Published: 2020-12-21 09:54:45

A bug is an error that comes while developing the software. A bug is a programming issue that comes in software when some features of that software stop working or creating errors in the software that is called a bug.&nbsp; Bug finding is done by the testing team first the software is developed to then testing team will check the software like its features that everything is working as per design or not if its bug and testing team will report that bug to a developer with the complete notes of it then the developer will fix that. Testing is like a quality check of the software which checks the complete functionality of the software before its release. Bug report by the testing team should be very specific and that should be done with the detailed notes about the bug so that it will be easy for a developer to find that and fix it. 
<a href="https://www.scopidea.com/issues-tracking"><strong>Bug tracking</strong></a> tools help a tester and developer in better communication and collaboration as they both work on the same platform where they can easily share information with each other in effective ways. <a href="https://www.scopidea.com">Bug tracking</a> helps the company to know the flaws of the software before its release so that the customer doesn&#8217;t face any issue later in that software.</p>
<p>Example like XYZ company is working for game software development. So the first developer will develop the software then testing team check its functionality and features are working the way it was designed or not if not. Then tester will make the report of the bug that where he got that in which functionality complete notes about it, then send the email to the development team to fix it this is a very time-consuming process. But in the same case if a company is using a <a href="https://scopidea.com">bug tracking tool</a>, then developer and tester will work on the same platform like first the developer will develop the software then tester will check the software that it is working fine or not if not, then he will make a bug report and forward it to developing team and as they are working on the same tool so tester need to forward and they will get quicker response for it. This fills the communication gap between them helps to save time and get the positive result faster.
Hiring JS and related Web App Developers
Tags: javascript, angular, xamarin, vue
Published: 2020-12-21 16:11:08

We are a product development company based out of Denver, CO. Looking forward to connecting with and hiring championing modern web app developers. Please hit me up, and let's connect.

I have WhatsApp number for overseas tech geeks. 
+1 650 730 3767

Let's make some great products together.
Let's Build for Ruby and Rails Developers - Part 15
Tags: rails, ruby, vue, javascript
Published: 2020-12-24 16:37:00

---
title: Let's Build for Ruby and Rails Developers - Part 15
published: true
date: 2020-12-21 16:08:40 UTC
tags: rails, ruby, vuejs, javascript
canonical_url: https://web-crunch.com/posts/lets-build-for-ruby-and-rails-developers-part-15
---

{% youtube 0LlqrBnoe1s %} 

In part 15 I'll be focusing on the Vue.js job checkout form and integrating Stripe.

Welcome to part 15 of my Let's Build for Ruby and Rails developers series. In this part, I'll continue building the checkout experience on our multi-step job form built with Ruby on Rails on the back end and Vue.js on the front end.

We'll start to wrap up the form by integrating Stripe into the checkout experience and establishing some pricing patterns. My plan is to enable some upsells during the construction of a job as well so look for that in upcoming parts. We're narrowing in on this massive form endeavor and I'm excited to get a prototype built and ready to roll. I think after this phase I'll keep cranking on the design of the app a bit as well as tackle some transactional emails for those that do post a job.

We need to think about the expiration of a job since it should expire after a set period of time in my opinion. Should this be a one-time fee or should I enabled subscriptions by default so that when you post a job it's essentially setting up a new subscription with Stripe and billing monthly until the job either expires or is canceled by the employer. All these decisions still need to be made but I feel I'm laying a good foundation for making that process easier for the end-user who is posting the job, to begin with. I'm excited to wrap up the job board soon so we can tackle more of the community and profile features. My short term goal is to get an MVP of the job board live on railsdevs.com and then keep adding features as I go.

Thanks for your attention so far if you've been following along. My goal is to be as transparent as I can with this. Any feedback, pointers, or ideas for features are welcomed!
Database Replications
Tags: database, databasereplication, masterslave
Published: 2020-12-21 16:06:34

#Why we need replication? 
Earlier days, we used a simple machine having a web server, database, cache. But problem arises when this machine goes down, this is where we need a backup of this machine. So, In replication when we write to a machine we also ensure to write to other replicas (and the most common model we use is
 a master-slave).

# Types of replications
- Synchronous replication : In simple master-slave model, we this sequence, when a write comes in 

1.Master writes to its own database
2.Master sends it to replica to write
3.Replica write in its own db
4.Replica sends an ack to master
5.Master sends ack to client

And the master waits until all the replicas are write the change. There can be retry policy/roll back mechanisms too on master when the acks from replicas fails.
use case: banking and financial services 
pros: no replication lag
con: takes longer - latency is more
with many replicas, it takes more time 
this needs high speed network -typically lan 
- Asynchronous replication : 
In this case, when a write comes in

1.Master writes to its own database
2.Master returns the ack to client 
3.replication to replica will start
4.eventually, the Replica will have the write.

In this case, replica can have a delay - replica might not have the latest data at a point
use case: to update likes/tweet/views
pros:
* No waiting for replications
* with many replicas performance remains
* replication can be performed over internet too.

cons: replication lag - replica might be behind

This maintains eventual consistency. We can maintain a log when a replica goes down and perform the all the missed operations in order. 

# What happens when master fails?

* sync replication of master :  
We can have synchronous HA master. (semi synchronous setup i.e sync with back up master and async with all other replicas). the benefit here is there won't be no down time.
* sync replication of logs :
Other way here could be to have a master backup which is checkpointing the db for every x minutes, but the master1 is writing the logs to backup synchronously.so backup can replay all the operations in the log if master goes down
Playing with Objects using Spread operator
Tags: javascript
Published: 2020-12-21 14:36:15

As a programmer you'll get into situations where you want to modify object values according to your need or convert array values into object key value pairs, so there are couple of examples here which could help you achieving so.

**Using Spread(...) operator:**

**example:** Converting array values into object properties and values

As you can see from below, I have used a declared array and converted the same using spread operator. so when you use spread operator to convert from array into object at that point of time *...* converts all values of arrays inside into key value pairs and spreads it into an object. by default as you notice it takes keys values from the array index of individual elements

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

**Using for...in Loop:**
Using  for...in loop is another way of playing with objects and converting values of individual properties as the properties of the object, yes you heard it right !!!, as you can see below I have an object countries with key value pairs and by using the for...in loop I have modified values of old object into the keys of new object. Here in this example I have again used spread operator to make sure not leaving behind a single value and making sure I have all the values in newCountries object.

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

There are so many more such examples, feel free to add in comments and keep learning :).
Laravel Tutorial
Published: 2020-12-21 15:50:10

Laravel is a PHP framework and, follows an MVC pattern. MVC is a Model View Controller that is a toolkit -for building a website. Laravel Tutorial aimed is to introduce the laravel framework and basic configuration and setup and give tutorials for basic to the advanced level. Laravel is an open-source software rapid development web framework that is generally for PHP.  If you are a beginner and you want to learn then visit here.  https://www.phptpoint.com/laravel-tutorial/
[Badge System 🏅] Project sections and technologies used
Published: 2020-12-21 15:49:13

We at [omegaUp](https://omegaup.com/) built a badge system for the platform almost one year ago. In this set of tutorials, I'll describe how we did it so this could serve as a guide for you to build your own badge system on any of your platforms.

This post will cover the following topics:
- [How was the project divided?](#division)
- [What are the technologies used on each part of the project?](#prerequisites)

So, let's start!

## How was the project divided? <a name="division"></a>
To reduce the complexity of the project, we divided it into three parts, which are:
* **Badges creation:** how the new badges proposed by our contributors will be created, processed, and put into execution?
* **Badges assignation:** how and when will the badges that correspond to each user be assigned?
* **Badges display:** how are the badges going to be shown to users?

## What are the technologies used on each part of the project? <a name="prerequisites"></a>

#### Badges creation:
* PHP (vanilla PHP)
* Python (vanilla Python)
* MySQL
* JSON

#### Badges assignation:
* Python (vanilla Python)
* MySQL

#### Badges display:
* Vue.js
* TypeScript
* PHP (vanilla PHP)

In the following posts in this series of tutorials, we will finally start with the technical part of implementing the badge system. Starting with Badges creation.

Until the next post! 👋
Next app
Tags: nextjs, dohackathon
Published: 2020-12-21 15:45:37

So, I decided that my front-end would be in **Next.js**.

The norm for Next.js is Vercel, but since this is DO hackaton, I decided that trying alternative is the way to go.

### But there came a problem.

Image loading is **waaay too slow**. I am aware that next does image optimization on-the-fly.
So I decided to upgrade to the $10 plan, to see if that is acceptable. Not better at all.

Vercel uses CDN for caching the images. So I decided to use Cloudflare to eliminate this issue.

And I found this quote in the docs **"App Platform apps cannot be routed through your own Cloudflare account and must instead use App Platform's built-in CDN functionality."**
 
The built-in CDN does not seem to be helping AT ALL.

Anyone got a solution?

## Update 
The solution was to change the Cache headers on the images hosted on S3. Next.js app would then use the cache settings from the header.

So what was happening?
Next.js app was caching the generated images for only 60 seconds, which ment that almost every visitor would be  waiting.


After this, the development was super easy. Everything worked as expected.
Deliver best in class customer experience with ERP for manufacturing
Published: 2020-12-21 15:06:38

Every manufacturer knows that it’s important to deliver the highest quality products, while delivering consistent results. If costs are low, then that will be even better. Which is why you need to focus on getting the best ERP for manufacturing, as this will help a lot. It will make it easy to manage your business resources more efficiently, while getting the ultimate return on investment.

Optimizing the workflow

An ERP solution always keeps the manufacturer up to date with customer and resource information. It’s easy to see the demand through all the acquired data, while also understanding the resources available at this time. It can also help with dynamics nav manufacturing. In addition, once you use an ERP tool, it makes it easier than ever to bring in front quality solutions and features, and that will help focus on growth, while solving any customer issues.

Maximizing and automating resources

The ERP for manufacturing does a very good job at helping you track and also manage all available resources. The faster you do that, the better it will be for your entire business. You can automate the core productivity tasks, while also centralizing the data and integrating any systems you need. It works, it’s very easy to customize, and you will find it durable and very dependable for the long term.

Safer data storage

It’s imperative to store your data safely so you can have access to it later on. With help from ERP for manufacturing, you will find it easy to store your data in the cloud. This way you can see and use all data with ease, without worrying about improper management or any other issues.

Inventory control

One of the main benefits of manufacturing ERP solutions is that you get amazing inventory control. You can see the stock movements, monitor sales and ensure that you always have all the items on stock or preorder. It’s easier and more convenient than doing all of that manually. As a bonus, you also get to link all the manufacturing departments with a single tool. That enhances communication and it just makes the entire process faster and better for everyone involved.

Streamline the fulfillment and supply chain process

With help from manufacturing ERP, you will find it easy to ensure that all the fulfillment processes are done adequately. You can monitor them from the ERP tool, and you can also do that for the supply chain. It’s better, more dependable and the results will shine every time in the long term. That’s the best approach to pursue in a situation like this.

Conclusion

Thanks to ERP for manufacturing, it’s easier than ever to access all the data you need, while also monitoring your inventory. ERP solutions are great if you want to improve your decision-making. Plus, you can link all departments for better communication, and you can also have work order management. One thing is certain, your business gets to grow and expand thanks to ERP solutions, so don’t hesitate and find the right one to suit your requirements!
Add utteranc.es to Gatsby  (React)
Tags: react, gatsby, utturances
Published: 2020-12-21 15:26:36

Excuse me, I'm using Gatsby (React) and I'm trying my hard to add dark/light mode toggleable utturanc.es. My idea is that dark/light mode change, the state of utturancesComments will be updated and make it re-render but I haven't been succeed yet. Anyone could help me. Thanks
```jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class Comments extends Component {
  constructor(props) {
    super(props);
    this.commentBox = React.createRef();
  }
  componentDidMount() {
    const scriptEl = document.createElement('script');
    scriptEl.async = true;
    scriptEl.src = 'https://utteranc.es/client.js';
    scriptEl.setAttribute('crossorigin', 'anonymous');
    scriptEl.setAttribute('repo', 'loctran016/comments');
    scriptEl.setAttribute('issue-term', 'title');
    scriptEl.setAttribute('id', 'utterance');
    scriptEl.setAttribute('theme', this.props.theme);
    scriptEl.setAttribute('label', 'Comments :tada: :tada: :tada:');
    this.commentBox.current.appendChild(scriptEl);
  }
  render() {
    return (
      <div id="comments">
        <h2 className="my-0">
          Comments
        </h2>
        <div ref={this.commentBox} className="comment-box" />
      </div>
    );
  }
}

Comments.propTypes = {
  theme: PropTypes.string.isRequired
}

export class utturancesComments extends Component {
  constructor(props) {
    super(props);
    if (typeof(document.getElementById("dark")) != 'undefined' && document.getElementById("dark") != null) {
      return this.state = {
        isDarkTheme: true
      }
    }
    else {
      return this.state = {theme:'icy-dark'}
    }
  }
  render () {
    const isDarkMode = typeof(document.getElementById("dark")) != 'undefined' && document.getElementById("dark") != null
    let uTheme;
    if (isDarkMode) {
      uTheme = 'icy-dark'
    }
    else {
      uTheme = 'github-light'
    }
    return (<Comments theme={uTheme} />)
  }
}

```
Creating a Quote API With Python and Flask
Tags: python, javascript, programming, webdev
Published: 2020-12-21 15:24:32

# Introduction
Hi Every body I just  created a quote API With CRUD operations  and I Want To share it with you if You Want to Use It To Learn Asynchronous Programming or any things I Already Live And You Can Access it from Here : [QuoteApi](https://quoteapibydaddasoft.herokuapp.com/)
## Features
- Authentication System  (unique Username And Email)
- Add and Delete Quote
- Authorization ( You Can't Delete Others Quotes)
- End Point Support 
- Created Using Python and flask and MySQL as the Database
- Use Environment Variables
### Project Repo : 

[Github Link](https://github.com/daddasoft/FlaskQuotesApi)


### Use The API
- Access All Quotes 
```json
https://quoteapibydaddasoft.herokuapp.com/api/quotes

Returned Data Structure :
"author": "",
"body": "",
"category": "",
"createdAt": "",
"id": "",
"updatedAt": ""
```
- Pagination ( with some Helpful information )
```json
https://quoteapibydaddasoft.herokuapp.com/api/quotes?page=1
{
"data": [
{
"author": "",
"body": "",
"category": "",
"createdAt": "",
"id": "",
"updatedAt": ""
}],
"pagination": {
"currentPage": 1,
"nextpage": 2,
"pages": 8,
"prevPage": null
}
}
```
- Get a Random Quotes
```json 
https://quoteapibydaddasoft.herokuapp.com/api/quotes/random

{
"author": "",
"body": "",
"category": "",
"createdAt": "",
"id": "",
"updatedAt": ""
}
```
#### Screenshot

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

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cufr28iwo2vdt6opr573.jpg)
How to Create an Overlay Effect with CSS
Tags: html, css, webdev, tutorial
Published: 2020-12-21 15:18:31

CSS doesn't provide a straightforward way to add an overlay effect. But, we can create one easily with only two main properties, namely, **`z-index`** and **`opacity`**. In this quick post, I will showing you how to create one.

What we need to do is just move the overlay div above your text or image, and then make it partially transparent so that the content behind is visible. First things first, I will add a overlay div and some text inside a wrapper. Like this:

```html
<div class="overlay-box">
  <div class="overlay"></div>
  <h1>Text</h1>
</div>
```

Next, copy this CSS:

```css
.overlay-box {
  position: relative;
  height: 200px;
  width: 400px;
}

.overlay {
  background: red;
  height: 100%;
  width: 100%;
  opacity: 0.7;  /* Must be translucent */
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: -1;  /* Your content must be under the overlay box */
}
```
After adding all this, you should get something like this:

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

***

I hope you were able to learn something new today and liked it. Do share your thoughts on this in the comments below.

Happy Coding!😎
My 100 Days Of Code
Tags: productivity, codenewbie
Published: 2020-12-21 15:18:00

---
series: 100 Days Of Code
---
Hey everyone!
The next few years are going to be life changing for me. 

The key to unlocking it lies in Repetition and Experimentation. There is no way around this. I need to practice consistently & experiment with new concepts to expand my skillset. That's why I'm going to start 100 Days Of Code to see a better version of myself.

I'm nervous excited. I'll have my coding interviews coming in 6 months and I need to start preparing for it. Wish me luck.

## Milestones to achieve:
    1. Leetcode daily challenge
    2. Read Cracking the Coding Interview
    3. Do fun side projects and explore new tech.
    4. Weekly blogs on progress made.

Let's hope I can stay focused for the next 100 days (14 weeks)!

Take care,
@stratospher