teleren/devto huggingface dataset:
Building a React Directory Structure Generator CLI Tool With Bash
Tags: bash, react, tooling, tutorial
Published: 2021-01-11 14:21:56

 
I had quite a journey learning bash scripting and sharing what I've learned with you in the process, from basic commands to bash files and conditionals (I'll share the list of these tutorial at the end of this thread below).
 
There are a lot still that we can learn but I'll dedicate an intermediate series for this separate from the first one. Currently, It's time to create a project .. a real world project that can be used in actual situations. That's why I've learned bash in the first place, simply **to automate tasks** and be more productive.
 
The project that I'll be building is a React directory structure generator following the [atomic pattern](https://andela.com/insights/structuring-your-react-application-atomic-design-principles/). Each part of the project will build a functional tool and then we will pile up feature and make some refactoring each time.
 
After this 14 minutes video, you will be able to run the following commands:
- `structg.sh generate atomic`
generates the new folder structure
- `structg.sh generate <page|atom|molecule|organism>`
generates new component & style file in its respective folder and adds boilerplate code in the component file.
 
{% youtube f7SBhNblPso %}
 
Check out previous bash tutorials:
- [Bash commands for beginners](https://youtu.be/-JY9DDLHaD8)
- [Bash commands chaining, redirecting and nesting](https://youtu.be/UXM8KNTC3aY)
- [Bash shell file walk-through](https://youtu.be/H_bU7u2dvT8)
- [Bash scripting: passing arguments & user input](https://youtu.be/H_bU7u2dvT8)
- [Bash scripting: variables & string manipulation](https://youtu.be/GuX72I8f71g)
- [Bash scripting: If conditions](https://youtu.be/BdU5SflFHKk)
MathJax not working when appending MATHJax symbol using JQuery in HTML DOM
Tags: mathjax, html, jquery, dom
Published: 2021-01-11 14:07:19

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>


why not parse MATHJax symbol in JQuery when append symbol form object to DOM (HTML)

const ques=
 [

 {
   que:" \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\] ",
...................
.................
..............


...............
 const que = ques[index];
$(".question").html(que.que);
................

while parsing directly it is worked fine.
UI Dev Newsletter #39
Tags: webdev, html, css, javascript
Published: 2021-01-11 14:02:27

- [State Of CSS 2020 Report](https://bit.ly/38xLwBQ)
A quick overview of a few major CSS trends from the State Of CSS 2020 survey.


- [The Art of Building Real-life Components](https://bit.ly/3nsF9Ek)
Ahmad Shadeed describes in details how to recreate the Facebook Messenger's sidebar card and its versions.


- [What Can You Put in a CSS Variable?](https://bit.ly/3nCfDMO)
Will Boyd shows different examples of CSS Variables usage.


- [Drawing Decorative Lines with CSS](https://bit.ly/2XuI70u)
Rik Schennink shows different ways how to create lines in CSS, including pseudo elements and SVG.


- [Lists](https://bit.ly/3nxg4rN)
Jeremy Keith writes about listitis and accessible lists.


- [Case Study: lynnandtonic.com 2020 refresh](https://bit.ly/3i35HL5)
Lynn Fisher explains the process of the creation of new fancy features on the homepage.


- [So you wanna create an eco-friendly website](https://bit.ly/38uPdZ7)
Eric Bailey tries to answer how you make a website or web app not-awful in ecology.


- [HTML CSS Easy steps to create a web template from scratch](https://bit.ly/3nz3LLE)
Complete easy to follow guide to create your own web template using HTML and CSS Quick Crash course for beginners.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
🎉 Element UI for Vue 3.0 is coming!
Tags: javascript, vue, opensource, typescript
Published: 2021-01-11 14:02:08

>Element Plus, the first UI component library written in TypeScript + Vue 3.0 Composition API, is released today!

[Element UI](https://github.com/ElemeFE/element), which was born on 13th March 2016, has grown up from [an internal component library of Ele.me](https://medium.com/@leopoldthecuber/element-a-vue-js-2-0-ui-toolkit-for-web-f6ed9d953758) to one of the most popular open-source UI component libraries in the Vue ecosystem within 4 years.

Till now, Element has gotten **48,800** Github Stars and **1,000,000** NPM downloads per month. More than 530 contributors from the community have made 4400 commits to participate in the maintenance with our team.

![Element team 40000 Github Star celebration](https://dev-to-uploads.s3.amazonaws.com/i/bcb93vm16ufoo33s7r04.png)
*Element team 40000 Github Star celebration

## Element Plus for Vue 3.0

Vue has released it's 3.0 version in September 2020. To support the latest Vue 3.0 syntax, it's a great opportunity for Element UI to make a new major release with a lot of inner changes and improvements. 

After 23 alpha versions of heavy developing, we are glad to announce that Element Plus for Vue 3.0 Beta is available **TODAY**!

![Element Plus](https://dev-to-uploads.s3.amazonaws.com/i/6shy8cr5g1prad3nyx90.png)

[Element Plus](https://github.com/element-plus/element-plus) for Vue 3.0 is a brand new project using TypeScript + Composition API. We have rewritten almost every line of code using the Vue 3.0 way, mainly including:

- Use TypeScript for a better development experience, and provide a complete type definition
- Use Vue 3.0 Composition API to simplify and reuse the logic
- Use Teleport, a new feature introduced in Vue 3.0  to refactor the components
- Use [Day.js](https://github.com/iamkun/dayjs), a lighter and better date-time library
- Use Lerna to manage sub-projects
- Core dependencies upgrade such as Popper.js, Async-validator
- Improve i18n support for 52 languages

Something more:

- Cool design language
- Optimized component API
- More customization options
- More detailed and friendly documentation

## Get Started
There are many ways to try Element Plus for Vue 3.0 today.

- Manual installation `npm install element-plus`, check our website [installation guide](https://element-plus.org/#/en-US/component/installation) for details
- We have provided a [Webpack scaffold](https://github.com/element-plus/element-plus-starter) that you can use directly
- Also, a fresh and cool [Vite scaffold](https://github.com/element-plus/element-plus-vite-starter) is available
- Via [Vue CLI plugin](https://github.com/element-plus/vue-cli-plugin-element-plus)

Do you like [Element Plus](https://github.com/element-plus/element-plus)? Feel free to give us a [Star](https://github.com/element-plus/element-plus/stargazers) ❤️ to support us.

During the past 4 years, your favor and support, which make Element UI better and better, are much appreciated. Element UI cannot thrive without the community, you are warmly welcomed to join us on Github and make Element UI great.
Clean Up Your useEffect, But Not Too Much
Tags: react, javascript, webdev
Published: 2021-01-11 14:00:15

Like a lot of developers, I love to write code that is to the point and stripped of all the fluff. Something about getting code down to its smallest form is really satisfying. Although, at a certain point, conciseness and maintainability are tugging on opposite ends of the same strand.

Where this has particularly bitten me is with the cleanup function of a `useEffect`.

## The Scenario

We start with a really simple useEffect. 

```javascript
useEffect(() => thing.register(), []);
```

Nothing special, right? Well, let's say later on we come back in here and decide brackets would look nicer, so it gets changed.

```javascript
useEffect(() => {
  thing.register();
}, []);
```

Except... we have a problem now. These do not behave the same way. What we forgot is that `thing.register()` actually returns an `unregister` function that needs to be called in the effect cleanup. So what we should have done was this:

```javascript
useEffect(() => {
  // now works the same as the implied return
  return thing.register();
}, []);
```

## Conciseness vs. Maintainability

Let's consider this setup though. 

Will we (or anyone else on our team) remember in 6 months that `register()` returns an `unregister` function that `useEffect` will call in its cleanup? We can only hope. The implied return in that first example makes it even more "magic."

Instead of hoping we remember that, let's instead create an intermediate variable to make it more clear.

```javascript
useEffect(() => {
  const unregister = thing.register();
  return unregister;
}, []);
```

It's not as concise as the original, but I could come back after a long period of time and know exactly what that code is doing. 

## Summary

- After refactoring, consider the impact to the maintainability of your code.
- Make it clear when a `useEffect` has a cleanup function to avoid future defects.
How did I earn $255.75 in 42 minutes?
Published: 2021-01-11 13:52:14

As an experiment I wanted to test myself and see how much money I could generate with my Instagram followers. I have a relatively large account in a particular niche that has not been tapped so far.

## Create a product
In my case I was quite clear about the product. Since my followers are people who like the world of fitness, hypertrophy and nutrition my idea was to create a bodybuilding guide based on my own experiences.

I decided to start with the abs, which is perhaps the most interesting muscle for the public, and create a guide entitled "How to define and mark your abdomen by being a normal person". An extensive guide with details on exercise and nutrition made by a normal person for normal people.

## Sell the guide
Once the "dirty" work of creating and layouting the guide elegantly was done, it was time for the selling part. Communication would be simple. I would upload a couple of Instagram stories linking directly to the product, but I needed a platform on which to sell it.

For this second part I decided to use [Crator](https://crator.me) which allows me to create a profile and sell digital content in very few steps. Also, instead of putting a fixed price I decided to put a variable price with a minimum of 3 euros, but with which the user, if he wanted, could pay more.

## Sales
Everything was ready, we just had to publish the stories and see what happened. I expected some sales, but not that many, actually. In less than 45 minutes I generated 255.75 as you can see in the following images.

![Total sales in the first 45 minutes](https://dev-to-uploads.s3.amazonaws.com/i/j609slggk5ozc4fg2qe9.png)
![First sale, 43 minutes ago](https://dev-to-uploads.s3.amazonaws.com/i/v41w64pd1jkh2jyx62cv.png)

During the day some sales kept coming in, making a total of 389.23 euros in the 24 hours that the story lasted.

## Lessons learned

I think this is an exceptional case. Previously I had tried to sell something to my followers with very different results. In this case I think that the content, price and speed in buying and receiving the product immediately has made the results so good.

Another fundamental factor has been to know my audience. All my fans are interested in the sport and with time and experience I have seen that by far what they are most looking for are abs and fat loss. In addition, it has been a good idea to approach the product from the point of view of "a normal person". 

There are many fitness accounts selling products from their point of view of a professional who focuses all his life on getting a certain physical aspect, in my case, I am a normal worker who likes sports, no more.
Launching Gravitee.io v3.5
Published: 2021-01-11 13:48:57

The latest version of the Gravitee.io API platform is now available 🚀 

- In API Management you can upgrade your existing APIs to use policy studio.
- In AM you can now use flows to build your own authentication and authorization journey.

Deep dive into the technical detail of the new release and learn more in our latest blog on the 🆕 v3.5 💫:

https://www.gravitee.io/article/launching-gravitee-io-v3-5
How moving online helped us scale regional meetups
Tags: eventsinyourcity, ruby, agile, productivity
Published: 2021-01-11 13:48:29

One of the group of development offices of Evrone around the world is located in Voronezh. We have a large, active technical community, and we wanted to create an alternative to the big conferences for developers. So we came up with Meta/Conf, which is a series of IT meetups that allow us to get together, discuss technologies, and find like-minded people. Instead of "industry celebrities'', we strive to attract practicing, but not so well-known, developers, to discuss current issues and technologies.

In 2019, all of our events were held offline, but we still gathered participants from several neighboring regions. However, 2020 had a very strong impact on the event industry and we had to digitalize. We were able to turn crisis moments into growth points, figure out how to host the event online, and scale a series of small regional meetups into a more extensive online conference.

[Find all the details in the full article](https://evrone.com/metaconf-2020)
Big Tech 0wns web development
Tags: webdev, bigtech
Published: 2021-01-11 13:42:05

Web development is based on free software by developers like you and me, isn’t it? At first glance, this seems to be the case. Let’s take a look at the main tools modern web is mainly developed with nowadays:

1. Visual Studio Code
2. TypeScript
3. React
4. npm
5. GitHub
6. Chrome

Most of the tools are Open Source projects (VS Code only in parts, npm is proprietary). So where are the big companies? Well, all six tools and sites are owned by Big Tech:

1. Microsoft
2. Microsoft
3. Facebook
4. Microsoft
5. Microsoft
6. Google

The tools we use all day rise and fall with the benevolence of companies typically seen as enemies of Free Software by the majority of Open Source developers.

Especially GitHub and npm are irreplaceable because of their large data collection. If Microsoft decides to pull the plug from one moment to the next, the access to the vast collection of free code will be gone at least for some time and the build processes of millions of programs will break.

Of course, these services can and would be replaced by others, but it would take some time until dominant services will emerge and web developers would need to find an interim way of accessing their externalized source code.
I'm clicking on a checkbox label and another checkbox is selected! I have the solution.
Tags: html, javascript
Published: 2021-01-11 13:33:02

You're workin' the checkboxes doing a fancy layout with your `label` element like this:

```html
<label for="input-id">
<input type="checkbox" id="input-id" />
```

Now when you're clicking the label the input is selected. 

Really nice! And very accessible. 

**BUT! Remember.** If you add more checkboxes. Maybe with complicated names and ids. Make sure you don't have the *same id on multiple checkboxes*. 

In that case the *first* checkbox with that ID will be selected. 

That can be very confusing and lead you to question how React.useState works and other stuff. 

Now you know!
C++ - Functions 
Tags: cpp, functions, callbyvalue, callbyreference
Published: 2021-01-11 13:26:34

In simple words as we all know Function mean is how to operate or work . Similarly in computer programming languages 
functions do the same thing . 

Lets discuss about the functions in context of c++. In c++ , Functions are the code snippets which perform a particular task. Now a question arrives why do we need functions ? As we can perform different tasks without the functions too .Here comes the properties of function :

1) Code re-usability :- Suppose we have to do a same task n number of times so to write a same lines of code again and again make it more complex . So Programming languages offers a option to call the function whenever you need it   

2) Code optimization :- By using the functions , Our program has less lines of code as compare to without using it,hence it makes it clean to read. 

Declaration of a function :-

return_type function_name(data-type parameter)
{
//some lines of code
}

Example:- 
include<iostream>
using namespace std;
void func() // function declaration 
{   
static int i=0; //static variable 
int j=0; //local variable 
i++;
j++;
cout<<i<<endl<<endl<<j;
}
int main()
{
func(); // function calling 
func();
func();
}

There are two ways to pass values or data to function

Call by value :- The original value you pass in this case is not modified because when you pass the value , it is locally stored in stack in a function and if you change the value of function parameter ,it is changed for current function only .

Example :

include<iostream>
using namespace std;
void func(int data);
int main()
{
int data=5;
func(data);
cout<<Value of data is : "<<data<<endl; 
return 0;
}
void func(int data)
{
data=7;
}

output is :- 5 

Call by reference :- In call by reference , original value gets changed as we pass the reference(address)

Example :- 

#include<iostream>
using namespace std;
void swap(int *x ,int *y)
{
int swap;
swap=*a;
*a=*b;
*b=swap;
}
int main()
{
int a=600,b=200;
swap(&a,&b);
cout<<a;
cout<<b;
return 0;
} 

output is :- a = 200 , b=600
Ensure Node.js version is consistent on Azure services and devops pipelines
Tags: azure
Published: 2021-01-11 13:06:54

---
title: Ensure Node.js version is consistent on Azure services and devops pipelines
published: true
tags: #azure
canonical_url: https://darraghoriordan.com/2020/11/08/node-js-version-azure-devops-app-service/
---

I got caught out with Microsoft recently setting the default version of Node.js from 12 to 14 on Azure pipelines linux build agent images (ubuntu-latest). Here are some tips for ensuring node versions are set correctly in some of the popular Azure PaaS offerings.

<!-- end excerpt -->
## In your package.json

You should ensure that the versions of Node.js you know that your code works with are specified to npm.

This is achieved using the engines section in your `package.json`.

```
{ "engines": { "node": "12.x" } }
```

A mistake I made here was that I only has a greater than requirement. So when node 14 came along it broke on of the packages in my project. This was tricky to figure out, but if I had set the engines to also have a max version, npm would have highlighted that issue immediately.

Note, this will just warn you if the version of node being used doesn’t match. That would be enough to highlight an issue in the deploy or build log.

If you want you can also set `npm config set engine-strict true` in your npm config and now your scripts will fail to start or operate if the Node.js versions don’t match.

## In Azure Pipelines tasks

There is a task that you can add to a job that tells Azure Pipelines which version of Node.js to use. I had this on one job but not all of them. Make sure that you put this task on all of your jobs because each one runs on a different environment.

```
jobs:
  - deployment: DevDeploy
    displayName: MyDevDeploy
    environment: my-dev-environment
    pool:
      vmImage: ubuntu-latest
    strategy:
      runOnce:
        deploy:
          steps:
            - task: NodeTool@0
              inputs:
                versionSpec: '12.x'
              displayName: 'Ensure node version available'
```

## In App Services

If you use Azure App Service for hosting you should tell it the correct version of node to use. You can do this in the gui for app services.

[![App services node configuration](https://darraghoriordan.com/static/3fa2bea1544e31d4f0104c15e0c96276/fcda8/node-config.png "App services node configuration")](/static/3fa2bea1544e31d4f0104c15e0c96276/e51a6/node-config.png)

## Summary

There can be difficult to find bugs in your npm packages caused by Azure upgrading the default version of Node.js in build agents and on any of their PaaS systems. You can mitigate it by specifying the exact versions your code is designed to work with.

Hope that helps!
Solving Perl Weekly Challenge 095 -- Palindrome Number and Stack
Tags: raku
Published: 2021-01-11 13:04:08

---
title: Solving Perl Weekly Challenge 095 -- Palindrome Number and Stack
published: true
description: 
tags: raku
//cover_image: https://direct_url_to_image.jpg
---

Two basic tasks from [Perl Weekly Challenge 095][pwc-095]. Palindrome number is also on leetcode: [leetcode/palindrome-number][leetcode-palindrome-number]. For languages that coerce values to Int / Str automatically, these two tasks does not require too much code.

## TASK #1 › Palindrome Number

Submitted by: Mohammad S Anwar

You are given a number $N.

Write a script to figure out if the given number is Palindrome. Print 1 if true otherwise 0.

Example 1:

    Input: 1221
    Output: 1

Example 2:

    Input: -101
    Output: 0, since -101 and 101- are not the same.

Example 3:

    Input: 90
    Output: 0

## Solution #1 > Palindrome Number

It is pretty straightforward: simply convert the input number to string, then check whether that string is palindromic. Based on the example, all negative numbers are non-palindromic. I wonder numbers with decimal points are considered.

Let's say we are only dealing with integers. Here's the implementation in Raku.

```raku
sub is-palindrome-number (Int $n --> Bool) {
    return "$n" eq "$n".flip;
}
```

The operation of flipping a string corresponds to the `flip` subroutine from `Str` in Raku. To convert a number `$n` to string, either `$n.Str` or `"$n"` would do. The part where it says `(Int $n --> Bool)` is the signature of this subroutine. It means that the subroutine takes one `Int` argument, and returns a `Bool` (Boolean values. `True` or `False`.)

## TASK #2 › Demo Stack

Submitted by: Mohammad S Anwar

Write a script to demonstrate Stack operations like below:
push($n) - add $n to the stack
pop() - remove the top element
top() - get the top element
min() - return the minimum element

Example:

    my $stack = Stack->new;
    $stack->push(2);
    $stack->push(-1);
    $stack->push(0);
    $stack->pop;       # removes 0
    print $stack->top; # prints -1
    $stack->push(0);
    print $stack->min; # prints -1

## Solution #2 > Demo Stack

If we are just defining a class with the abovementioned methods, they can all be delegated to one subroutine in Raku. Let's use this `IntStack` as an example, which is stack that can hold a bunch of integers.


```raku
class IntStack {
    has Int @!store;

    method push(Int $n) {
        @!store.push($n);
    }
    method pop(--> Int) {
        @!store.pop;
    }
    method top(--> Int) {
        @!store.tail;
    }
    method min(--> Int) {
        @!store.min;
    }
}
```

Which can be used like this:

```raku
    my $stack = IntStack.new;
    $stack.push(2);
    $stack.push(-1);
    $stack.push(0);

    $stack.pop;
    say $stack.top;  #=> -1

    $stack.push(0);

    say $stack.min;  #=> -1
```

----
本文為《[解 Perl Weekly Challenge 095 -- 回文數與堆疊][gugod-pwc-095]》之英文版

[leetcode-palindrome-number]: https://leetcode.com/problems/palindrome-number/
[pwc-095]: https://perlweeklychallenge.org/blog/perl-weekly-challenge-095/
[gugod-pwc-095]: https://gugod.org/2021/01/pwc-095/