teleren/devto huggingface dataset:
The art of the minimal example
Tags: discuss, webdev, node, javascript
Published: 2020-12-18 08:55:49

---
title: The art of the minimal example
published: true
description: 
tags: discuss, webdev, nodejs, javascript
canonical_url: https://blog.markjgsmith.com/2020/12/18/the-art-of-the-minimal-example.html
---
I’ve been putting together a [Portfolio](https://blog.markjgsmith.com/portfolio) of my work this past week. It’s been really interesting re-visiting the web development, workflow/automation and devops/sysadmin projects I’ve been involved with over the years. One thing that stood out was all the minimal examples I’ve built in order to either learn a technology or debug a feature.

Creating minimal examples is particularly enlightening, it’s actually quite a skill to be able to extract just the code you need to demonstrate a problem you are experiencing. It’s useful because you get rid of much of the complexity of the code you are working on and can focus in on discovering the root cause of an  issue.

Stackoverfkow even has a special  [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)  page which has guidelines on how to create one. For stackoverflow questions you would likely have just a few small snippets of code to demonstrate an issue

I’ve included a [Minimals](https://blog.markjgsmith.com//portfolio#minimals) section in my portfolio, that links to many of the repos I’ve created over the years when I was looking to learn a particular feature or troubleshooting an issue I was experiencing. These aren’t strictly speaking minimal examples in the stackoverflow sense of the term, they tend to be a little bit more involved. In my case they are often small apps that implement just the feature I was exploring or debugging. They get rid of the complexity of the surrounding code, making it easier to reason about. I find myself often revisiting these minimals when I need to implement similar functionality somewhere else.

The ability to easily create runnable minimal examples I feel is one place [NodeJS](https://nodejs.org) really shines, especially when you are building [Express](https://expressjs.com) based web applications. This makes it easier to debug complex problems and communicate your findings to others you are working with. 

Related post: [Reasons to use NodeJS for developing your backend systems](https://blog.markjgsmith.com/2020/12/04/reasons-to-use-nodejs-for-developing-your-backend-systems.html)

—-

Thanks for reading!

[@markjgsmith](https://twitter.com/markjgsmith)

*[I’m currently available for hire](https://blog.markjgsmith.com/about)* - Consider hiring me!

If you liked this article you might like adding my [blog feed](https://blog.markjgsmith.com/feed.xml) to your RSS reader, reading my [daily linkblog](https://links.markjgsmith.com) or signing up for my [weekly newsletter](https://markjgsmith.substack.com). :)

*Originally posted on [blog.markjgsmith.com](https://blog.markjgsmith.com/2020/12/18/the-art-of-the-minimal-example.html)*
Digital Images
Published: 2020-12-18 07:26:54

Digital Images are made up of tiny particles called pixels i.e atoms are the building blocks of matter and as is the case with pixels forming an Image. If an image is 20 pixels by width and 30 pixels by height then obviously picture is made up of 60 tiny pixels and that's how you represent an image digitally.
![alt text for accessibility](https://live.staticflickr.com/65535/50729689733_5d50b431bc_b.jpg)
Consider this diagram as an image and those square shaped grids are called pixels. We can represent every pixel of an image with (x, y) values as you can see in the image. Now, How can we represent coloured pixels ?.  Based on Sir Issac Newton's colour prism experiment , a white light is broken down into pure colours namely violet, indigo, blue, green, yellow, orange, red (VIBGYOR). Sometimes I think why indigo is a colour, it lies in between violet and blue. I think Newton thought of 7 planets in the universe at that time and hence added indigo to make 7 colours.

 ![alt text for accessibility](https://live.staticflickr.com/65535/50732133966_76ae76dcea_b.jpg)

There are many ways to represent an image digitally but one of the most popular way is using RGB colour scheme. Before proceeding to RGB colour scheme remember one pixel should only consist of one colour. Here RGB stands for red, green and blue and it is obvious  that you might be thinking of "How the other colours are displayed ?". Every colour is defined as a particular combination of red, green and blue and the numbers vary from 0 to 255 for example black is obtained by mixing zero proportion of red, green and blue i.e RGB(0,0,0). You can see this table for reference [RGB colour codes](https://www.rapidtables.com/web/color/RGB_Color.html).

There are many operations we can perform to pixels one is to change colour of a particular pixel, convert image into a grayscale image etc. We can alter colour of every pixel by changing the numbers of RGB. To convert image into a grayscale image we have to get RGB values of particular pixel and average three numbers and set that value to each of RGB and this process has to last for all the pixels image has.
Fix Brew (Homebrew) on M1 Macs
Tags: brew, homebrew, m1, mac
Published: 2020-12-18 08:19:03

You upgraded to a shiny new M1 Mac (MacBook, MacBook Pro or Mac Mini) but now brew is broken on your new ARM machine. You can easily fix this:

Depending if you use zsh or bash you need to put the following in either `~/.zshrc` or `~/.bashrc`:

```
alias brew='arch -x86_64 brew'
```

*If you haven't installed Rosetta 2 on your machine yet, you will automatically get an installation prompt the first time you run brew.*

This will emulate brew (for now) using Rosetta 2 until brew [officially supports ARM on Mac](https://github.com/Homebrew/brew/issues/7857).
MagePack Magento Performance optimization 
Published: 2020-12-18 08:05:16

# Content breakdown before / Magento bundling enables 

![Magento JS Bundling Before Optimisation](https://dev-to-uploads.s3.amazonaws.com/i/8faxabtxx6otlolx074k.jpg)

Really sucks: 4.830 MB of JS


# Install Magento Extension
```
composer require creativestyle/magesuite-magepack
bin/magento setup:upgrade --keep-generated
bin/magento setup:di:compile
bin/magento config:set dev/js/enable_magepack_js_bundling 1
bin/magento config:set dev/js/enable_js_bundling 0
```
# Install node.
```
# Debian/Ubuntu
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
#Centos 
curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -
sudo yum install nodejs
```
Only NodeJS can save Magento from the fiasco. 

# Install Mage Pack 
```
sudo npm install -g magepack --unsafe-perm=true --allow-root
```

if You are on centos you will suffer. I can't without the pain with Magento2.

If you having *error while loading shared libraries: libXcomposite.so.1: cannot open shared object file*

Run:

```
sudo yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y
```

# Run generate 
```
magepack generate --cms-url="9CMS_PAGE_URL9" --category-url="9CATEGORY_PAGE_URL9" --product-url="9PRODUCT_PAGE_URL9"
```

# Run bundle 
```
magepack bundle
```

# Clear magento cache 
```
bin/magento c:C

```
Result Content Brake Down
⭐️An introduction to Proxies (FOR NOOBS)⭐️
Tags: programming, productivity
Published: 2020-12-18 07:28:30


This is for those who dont have any idea what proxy is
PROXY SERVERS
What is a proxy server? A proxy server is essentially a private version of a VPN, VPNs often track what you search and it can be used against you. Proxies have thousands of uses but some on this site will include: Changing your location for botting specific area locations, SE-ing from a different country/area, ordering country specific items, Checking accounts, and much more.
How to use a Proxy
There are lots of different ways to connect to a proxy and it depends on the operating system you run. If its windows you can either use the inbuilt proxy connector or find one that is better suited to the task which you take on (Like a proxy switcher or manager). Proxies can be bought from sites, or for free (are always bad and suck
Paid Proxies : High Speed
Free proxies : Used by everyone so less speed on site you are checking
6 practice projects beginners can build that are not todo apps
Tags: codenewbie, 100daysofcode, beginners
Published: 2020-12-18 07:23:40

When picking up new tools, some learn best by building something with them. That applies to both frameworks and design tools. Tutorials encourage you to explore the thing, not just read about it in theory. Like driving, theory is important, but you have to follow it up with experience to really know it well.

One popular project for this is the todo-app. It covers the basic actions of listing, creating, deleting, and checking off entries. The interface can be simple, or you can spend a lot of time making it look impressive. Building or designing a todo-app teaches you a lot about the framework or design tool you’re looking into.

After the fourth time building todo-apps, they feel a bit uninspired. Instead of copying straight from that exact example, put your own twist on the idea. Here are a few projects that are similar in size that would mix it up a little:

---

## A note-taking application

As you’re learning, you are picking up new tricks, be it code snippets or design tricks. Instead of having to find them again every time, build a tool to keep all those tricks handy.

## A personal learning diary

Document your progress by keeping short entries in your own little diary. For a twist, you could try to password-protect your personal notes. Having to set passwords and unlock notes make this interface more interesting.

## A movie tracker

Build a database of all the movies you have watched and the ones you want to watch. You can add a date and a star rating, maybe a comment as well. You might even find a movie API that you can get posters, descriptions, and cast lists from.

## An expense tracker

Keep a list of all the things you spend money on. Give the entries categories like food, entertainment, and education. That way, you can see how much you spent on each category in a given month.

## A wish list

Save a list of all the gifts you’d like to receive and the ones you’d like to give. Add a URL to the product as well so that you never forget where you found that thing you want to get for Aunt Mary.

## A recipe book

Store your favorite recipes in your own app instead of having to look them up in cookbooks or on the internet. You can add lists of ingredients, pictures of the food, and instructions on how to prepare them.

---

Doing any of these forces you to transfer what you’re learning. You have to understand what’s going on to “flag an expense as problematic” instead of “checking off a todo”.

What are your go-to ideas you build when you’re learning something new?

– Dom
Basic Practice to the unit testing
Tags: unittesting
Published: 2020-12-18 07:03:56

UNIT TESTING is a kind of software testing where singular units or segments of a product are tried. The intention is to approve that every unit of the product code proceeds true to form. Unit Testing is finished during the turn of events (coding period) of an application by the designers. Unit Tests confine a segment of code and check its rightness. A unit might be an individual capacity, technique, method, module, or article. 

In SDLC, STLC, V Model, Unit testing is the first degree of testing done before mix testing. <a href="https://www.testingxperts.com/blog/unit-testing">Unit testing</a> is a WhiteBox testing procedure that is normally performed by the engineer. However, in a commonsense world because of time crunch or hesitance of designers to tests, QA designs additionally do unit testing. 

Why Unit Testing? 

Unit Testing is significant in light of the fact that product engineers once in a while take a stab at saving time doing negligible unit testing and this is fantasy in light of the fact that wrong unit testing prompts significant expense Defect fixing during System Testing, Integration Testing and even Beta Testing after application is fabricated. On the off chance that legitimate unit testing is done in the early turn of events, at that point it sets aside time and cash eventually. 

Here, are the vital motivations to perform unit testing : 

Unit tests help to fix bugs right off the bat in the improvement cycle and save costs. 

It encourages the designers to comprehend the code base and empowers them to make changes rapidly 

Great unit tests fill in as venture documentation 

Unit tests help with code re-use. Move both your code andyour tests to your new undertaking. Change the code until the tests run once more.
Convert Excel Chart to Image in Java
Tags: java, convert, image
Published: 2020-12-18 07:00:48

In some cases, when we create a chart in an Excel document but don't want the detailed data to be seen by others, we can convert just the Excel chart to image for better sharing. In this article, you will learn how to do this with Free Spire.XLS for Java.

**Installation**
**Method 1:** Download the [Free Spire.XLS for Java](https://www.e-iceblue.com/Download/xls-for-java-free.html) and unzip it. Then add the Spire.Xls.jar file to your project as dependency.

**Method 2:** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
        <repository>
            <id>com.e-iceblue</id>
            <name>e-iceblue</name>
            <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
        </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.xls.free</artifactId>
        <version>3.9.1</version>
    </dependency>
</dependencies>
```

**The example Excel file:**
![](https://dev-to-uploads.s3.amazonaws.com/i/hnl4hjirdqlbep4gljkz.jpg)

**Code Snippet**
```java
import com.spire.xls.Workbook;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class ChartToImage {
    public static void main(String[] args) throws IOException {
        //Load the Excel file
        Workbook workbook = new Workbook();
        workbook.loadFromFile("ColumnChart.xlsx");

        //Save the first chart in the first worksheet as image
        BufferedImage image= workbook.saveChartAsImage(workbook.getWorksheets().get(0), 0);
        ImageIO.write(image,"png", new File("ChartToImage.png"));
    }
}

```

**The output image:**
![](https://dev-to-uploads.s3.amazonaws.com/i/pu7s0hi0i5yw5vqdbcpy.jpg)
Which Package/Library you are missing in Go, which you know from eg Python, C#, Java?
Tags: go, reddit
Published: 2020-12-18 06:30:31

---
title: Which Package/Library you are missing in Go, which you know from eg Python, C#, Java?
published: true
description: 
tags: #go #reddit
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ter2zql7t9g6brjwf4kj.jpg
---
What is your answer on "Which Package/Library you are missing in Go, which you know from eg Python, C#, Java?"

https://www.reddit.com/r/golang/comments/kfdawb/which_packagelibrary_you_are_missing_in_go_which/
The beginners guide to RESTful API
Tags: api, beginners, javascript, webdev
Published: 2020-12-18 06:25:34

Today hundreds of companies use REST APIs to create web services. It's the most logical, efficient and widespread standard. So in this article we will take a deep look into it. 

<hr>

### Overview

# API

It stands for Application Programming Interface, a software intermediary that allows two apps to talk to each other. 

<hr>

### Types by use Cases

<h4>APIs</h4>  

It can be classified according to the systems for which they are designed. 

Here are they : 

- Databases
- Operating Systems
- Remote
- Web

<hr> 

### What is it then? 

# RESTful API

It is an architectural style and approach to communications often used in web service development. 

### Architectural Constraints

There are 6 architectural constraints that make any web service. The only optional constraint is the last one: 
- Uniform Interface
- Stateless
 -Cacheable
- Client-Server
- Layered System
- Code on Demand (optional)

### Why REST? 

- Client and server are separated
- Visibility, readability and scalability
- Independent of platforms and languages

## How it works? 

RESTful API uses existing HTTP method, providing a meaning for the request you're making, to obtain resources from the server: 
- **GET** - To retrieve a resource
- **PUT** - To update a resource
- **POST** - To create a new resource

### Format

JSON - JavaScript Object Notation is a common format to send and request data through REST APIs. It's object looks like: 

```JSON
/* Each property and value must be wrapped with double quotation marks */
{
  "property1": "value1", 
  "property2": "value2", 
  "property3": "value3"
}
```

<hr>

Thanks For Reading 

Previously at ->  [Emma's Blog](https://blogemma.netlify.app/)
How to build reusable layouts in React JS  with Router
Tags: react, javascript
Published: 2020-12-18 06:21:50

This is a common problem I couldn't do the common layout when I started to learn React. The problem is getting bigger as the scope of work increases. That is why there is a need for a common layout and we will use it again and again. Let's get started

Here is a simplified implementation of what I did.


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

This layout component will accept to get props such as title, description, className, children by default use some property here but we will be able to pass these properties from any other bases where we use this layout and that way we can dynamically display these content. We put inside single div and title, description these are headings but they will have the entire content. So with the   last name of let's say let's asset class name as well so you might want different layout for different pages. Here classname send as props and content avaiable in children props . So this our layout now we should be able to use this layout any of the pages.Let's try in the Home page to begin with.

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

So let's say load from home page then we can use layout instead of using the div all we can do in layout. Now pass the title,desciption and send the content at the moment let's send anything let's just leave empty.Now if you go to the home page you can see we have the target achieve

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

So this way you can use this component and use any other component as your need For example if you don't send anything as props then you'll see the default title and description of what we have given 

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

The similar way I use on another page before we do that let's further to go on and make it.

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

Here the code base whatever pass as props to get it and show output will be shown as we send.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6zek6d22wwwedr0yiawi.png)
RouterJs file here
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/378epcn5ein0aej9acc9.png)

If I made a mistake forgive me for seeking advice on how to do a better way thank you guy's and let's make it easy.

https://github.com/Julfikar-Haidar
Hire Magento Developers, Certified Ecommerce Experts | M-Connect Media
Published: 2020-12-18 06:09:35

Looking to hire Magento Development service which can transform your online store by deploying modern techs that make you a leader in your industry? Well, hiring a skillful development agency is a tedious but most important process. You need to consider two things before hiring any developer agency for your requirements. First, look at their past work and experience portfolio, and second, are they Certified <a href="https://www.mconnectmedia.com/magento-developers-for-hire">Hire Magento Developers</a>? Because you don’t want to hire some immature guys who don’t even know what they are doing. You need to hire Magento programmers who can work extensively on your project and completes it within the deadline. And Mconnect is one such Magento Developer agency you should hire.
 
The new technological inventions are happening every day in the field of online shopping. It is essential to adopt such modern techs to stay ahead in the competition. Even if you want to start from scratch, the adroit Magento developers will help you to be profitable in your eCommerce operations. And not only that, they can handle your small to large scale multiple eCommerce projects with ease. A Certified and dedicated team of Magento developers will make your online store’s usability and functioning smooth and zealous. They can perform any integration, customization, programming, and other tasks with such ease. And all this helps you to achieve your business goals fervently.

<strong>Why Hire Magento Development Service from Mconnect Media?</strong>
<li>Our full-stack developers are adroit to build your Magento 
    store from scratch.
<li>We are capable and competent enough to manage small to large scale projects.
<li>Our Magento wizards are experts in handling complex projects with ease.
<li>We have sound knowledge about all the ins and outs of Magento development.
<li>We can perform various tasks and provide support for your various needs.
<li>The unique solutions from Mconnect developers will fulfill your goals of operating a profitable business.
<li>A dedicated team of Certified Magento Developers will take care of all your needs.
<li>Benefits of hiring the whole development team.
<li>The adroit team consists of website designers, developers, coders, QA, and project managers.
Day 18 of JavaScriptmas - Array Previous Less
Tags: javascript, scrimba, 24daysofjavascriptmas
Published: 2020-12-18 05:50:41


Day 18 is to check the previous index of the array is less than the current index of the array. 

For example, an array of `[3, 5, 2, 4, 5]` will return `[-1, 3, -1, 2, 4]`. 

From the array above if the previous index (`3`) less than the current index (`5`) return the previous index (`3`), but if previous index (`5`) is not less than current index (`2`), return `-1`;

These are the solution in JavaScript
### **1st - Using Unshift**
```javascript
function arrayPreviousLess(nums) {
    let result = [];
    for (i=nums.length-1; i >= 0; i--) {
        (nums[i] > nums[i-1]) ? result.unshift(nums[i-1]) : result.unshift(-1);
    }
    return result;   
}
```
When using Unshift, it starts from the last index and insert value on the beginning of the array on each iteration.

Meanwhile....
### **2nd - Using Push**
```javascript
function arrayPreviousLess(nums) {
    let result = [];
    
    for (i=0; i < nums.length; i++) {
        (nums[i-1] < nums[i]) ? result.push(nums[i-1]) : result.push(-1);
    }
    
    return result;   
}
```
When using Push, it starts the index from 0 and insert value on the last of the array on each iteration.