teleren/devto huggingface dataset:
How To Add HTML Wrapper On Angular Component In Storybook
Tags: angular, javascript, typescript
Published: 2021-08-26 08:53:54

**With Storybook Decorators you can add extra HTML around your Angular Component**

Storybook offers a lot of tooling to document all your JavaScript components visually.  [Getting started with Storybook and Angular](https://storybook.js.org/docs/angular/get-started/introduction)  is pretty easy too. But some features are hidden or not described enough to know them.

So in our team, we were writing an Angular form component with Angular Material. Some of the elements were not getting the proper styling because they didn't have our application's context. We needed A wrapper element.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Storybook Angular Decorators

Storybook Decorators are the answer for creating a bit more markup to add context to your components. 

The Storybook team made it super simple to add decorators.

```typescript
import { Meta, componentWrapperDecorator } from '@storybook/angular';

export default {
   title: 'YourComponent',
   component: YourComponent,
   decorators: [componentWrapperDecorator((story) => `<div class="mat-body">${story}</div>`)],
} as Meta;
```

In our case, we only needed a `<div>` with a class `mat-body` to get the font family of a form correct.

With these decorators, you can add extra context or styling around your components. 

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Thanks!
![hashnode-footer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629789655319/nBF6anHH4w.png)
*I hope you learned something new or are inspired to create something new after reading this story! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.
*

> Did you know that you can create a [Developer blog like this one, yourself](https://hashnode.com/@devbyrayray/joinme)? It's entirely for free. 👍💰🎉🥳🔥

*If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a [DM on Twitter @DevByRayRay](https://twitter.com/@devbyrayray) when you want to keep it private. My DM's are always open 😁*
Interesting Company Blogs
Tags: lists, programming, tech
Published: 2021-09-03 07:12:59

---
title: Interesting Company Blogs
published: true
date: 2021-08-26 08:49:49 UTC
tags: lists,programming,tech
canonical_url: https://dils.blog/interesting-company-blogs/
---

- [Airbnb Engineering & Data Science](https://airbnb.io/)
- [Ambition & Balance - by Doist](https://blog.doist.com/)
- [Atlassian Engineering Blog - Work Life by Atlassian](https://www.atlassian.com/blog/atlassian-engineering)
- [Code as Craft, Etsy's Engineering Blog](https://codeascraft.com/)
- [Engineering@Microsoft](https://devblogs.microsoft.com/engineering-at-microsoft/)
- [Facebook Engineering](https://engineering.fb.com/)
- [Google Developers Blog](https://developers.googleblog.com/)
- [JetBrains Blog | Developer Tools for Professionals and Teams](https://blog.jetbrains.com/)
- [Netflix TechBlog](https://netflixtechblog.com/)
- [Pinterest Engineering Blog – Medium](https://medium.com/pinterest-engineering)
- [Productivity Tips & Workflow Automation Guides | Zapier Blog](https://zapier.com/blog/)
- [Signal v. Noise - Strong opinions and shared thoughts on design, business, and tech. By the makers (and friends) of Basecamp. Since 1999.](https://m.signalvnoise.com/)
- [Spotify Engineering](https://engineering.atspotify.com/)
- [Stack Overflow Blog - Essays, opinions, and advice on the act of computer programming from Stack Overflow.](https://stackoverflow.blog/)
- [Uber Engineering Blog](https://eng.uber.com/)
MySQL query output to csv
Published: 2021-08-26 08:38:24

There are situations when we have to run the select queries on MySQL databases and redirect the output in .cav format. This is required when we have to share the data with the developer or send it to some ETL job for external tables. In addition, if you are running MySQL on AWS RDS you get limited options to get the MySQL query output to CSV. As an alternative, you can use the AWS S3 bucket but again it’s a complex and cost-involved way of getting MySQL query output to CSV. I am going to show you an easy alternative that will work on a normal Linux command prompt. Using this you can fetch a long SQL output in CSV from MySQL RDS or from on promises MySQL Database instance.

 

Step 1: log in to any jump host or bastion host

continue reading :  https://thedbadmin.com/mysql-query-output-to-csv/
5 CSS Properties You May Not Know
Tags: css, tips, beginners
Published: 2021-08-26 08:36:53

## 1. all property

The [all property](https://css-tricks.com/almanac/properties/a/all/) resets every other property (apart from unicode-bidi and direction) properties to their initial or inherited state.

```scss
.-reset {
  all: initial;
}
```

## 2. calc property

The `calc()` function can be used to create values. For example: `width: calc(100% - 50px)` will make element full width minus 50px pixels.


```scss   
width: calc(100% - 1em);
```

## 3. column-count

The `column-count` property specifies the number of columns an element has. `column-count: 3` will spread the elements text (or inline-* elements) into 3 columns.


{% codepen https://codepen.io/gregh/pen/pRoYMv %}

## 4. currentColor

The currentColor keyword represents the calculated value of the elements color property.

```scss
.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}
```

## 5. filter

The filter property applies visual effects to elements. It comes with predefined functions like blur, brightness, contrast, sepia; and you can also apply custom SVG filters.

```scss
.-blur {
  filter: blur(8px);
}

.-brightness {
  filter: brightness(1.5);
}

.-contrast {
  filter: contrast(250%);
}

```

{% codepen https://codepen.io/gregh/pen/GrJNdJ %}

## 6. Links
- [Greg Hovanesyan's Post on css-tricks](https://css-tricks.com/lets-look-50-interesting-css-properties-values/#filter)
Base 64 Encoder-Decoder in Java
Tags: java, encoding, decoding, base64
Published: 2021-08-26 08:35:33

Encoding is a way to encode anything as it is, without any line separation. Where output generated is the character set A-Za-z0–9+/, and the decoder rejects any characters outside of that set.

### Encoding

```java
Scanner sc = new Scanner(System.in);
        String input = sc.nextLine();
        String encodeInput = Base64.getEncoder().encodeToString(input.getBytes(StandardCharsets.UTF_8));
        System.out.println("Encoded output is :"+encodeInput);
```
For Example if we give input *"hey ankur"*
Then the output will be : *aGV5IGFua3Vy*

####Decoding
```java
        byte[] output = Base64.getDecoder().decode(encodeInput);
        String decodeOutput = new String(output);
        System.out.println("The decoded output is :"+decodeOutput);
```
If we gives the same output that is encoded by the base-64 encoder as we write above then the output we will get :
is *"hey ankur"*

##How Base 64 Encoding Works?
Base64 encoding is used when any binary data needs to be transmitted over a media that is designed to handle only textual data. Many communication protocols like SMTP, NNTP were traditionally designed to work with plain text data represented by the 7-bit US-ASCII character set. To transfer non-ASCII or binary data over such communication channels, the binary data is encoded to the ASCII charset using Base64 encoding scheme.

The encoding process converts binary data to a printable ASCII string format. The decoding process converts the encoded string back to binary data. for detailed information [click here](https://www.base64decoder.io/learn/#:~:text=The%20encoding%20process%20converts%20binary,%2B%20%2C%20%2F%20%2C%20and%20%3D%20.)

###Complete java program for Encoding and Decoding using Base 64

```java
package Basic_project;

import java.nio.charset.StandardCharsets;
import java.util.Base64;
import java.util.Scanner;

public class encoder_decoder {
    public static void main(String[]args){
        Scanner sc = new Scanner(System.in);
        String input = sc.nextLine();
        String encodeInput = Base64.getEncoder().encodeToString(input.getBytes(StandardCharsets.UTF_8));
        System.out.println("Encoded output is :"+encodeInput);

        byte[] output = Base64.getDecoder().decode(encodeInput);
        String decodeOutput = new String(output);
        System.out.println("The decoded output is :"+decodeOutput);
    }
}
```
AngularJS & Angular: Stay Ahead of the Game with the Dynamic Duo
Tags: angularjsdevelopmentservices, frontendwebdevelopmentcompany, angularjssolutions, angularjsdevelopmentcompany
Published: 2021-08-26 08:32:36

---
title: AngularJS & Angular: Stay Ahead of the Game with the Dynamic Duo
published: true
description: Angular, like its predecessor AngularJS, is trusted by renowned brands. Find out why Angular is the right choice for your next front end development project.
tags: #AngularJSDevelopmentServices #FrontEndWebDevelopmentCompany #AngularJSsolutions #angularjsdevelopmentcompany
//cover_image: https://direct_url_to_image.jpg
---
JavaScript (JS) is one of the most famous scripting languages ​​used by the JS framework. **AngularJS** can be integrated with other frameworks quickly and easily. It has the potential to easily create various **front-end developments**. Angular JS is now the core development tool for companies and startups.

Angular JS has been around for some time and the best companies in the world- PayPal, Udemy, Amazon, Netflix, and Snapchat have a decent amount of their front-end code written in Angular JS.

##What features do AngularJS offer?
The various features of angularJS are as follows:
1. Data Binding
2. MVC (Model, View, and Controller) architecture
3. Directives
4. Not Browser Specific
5. Codeless
6. Speed and Performance
7. Dependency Injection
8. Deep Linking
9. Routing
10. Productivity

AngularJS is a great cross-functional framework that can speed up your development process. It provides dependency injection and deep linking, and is a solid platform for software development.

Now, let's take a look at the notable reason of choosing AngularJS to help you choose the right **Javascript** framework.

##Why is AngularJS better?
It is a compact framework that can easily develop JavaScript applications. Angular Script code is prone to errors. For JavaScript that is difficult to debug, it is better than other languages, such as JQuery. With the help of AngularJS, you can more easily debug multiple cross-server AJAX requests, set time limits, switch pages, animations, and more aspects of development. Provides a great way to build contemporary "single page" applications (SPA), enabling you to anticipate demand.

**Angular** has become one of the most popular front-end technologies with multiple features. Angular is undoubtedly an amazing and important framework used by many front-end development companies to develop high-quality Web applications.

This infographic in particular is about the Trend-Setting AngularJS Applications in 2021.

<p><img alt="" width="900" height="3360" src="https://1.bp.blogspot.com/-Kh4Bf8ciA-I/YSdORzmYy3I/AAAAAAAACBY/kP9dO4dgoDgjMlzkfYAX_aKYTdBHhWC0QCLcBGAsYHQ/s16000/AngularJS%2B%2526%2BAngular%2BStay%2BAhead%2Bof%2Bthe%2BGame%2Bwith%2Bthe%2BDynamic%2BDuo.png"/></p>

**Reference** - [https://www.heliossolutions.co/blog/angularjs-angular-stay-ahead-of-the-game-with-the-dynamic-duo/](https://www.heliossolutions.co/blog/angularjs-angular-stay-ahead-of-the-game-with-the-dynamic-duo/)
UI Bakery vs Retool. Internal tool builders comparison
Tags: webdev, discuss, showdev, technology
Published: 2021-08-26 08:30:55

🧐 Need the easiest and fastest way to build your #internaltool?

Check out a thorough comparison of 2 powerful #lowcode development platforms – Retool and UI Bakery 🚀


Key features, strengths, pitfalls, pricing details – [inside](https://uibakery.io/post/retool-vs-ui-bakery-2021?utm_campaign=ui_bakery%20-%20article%20-%20blog%20-%20cacq%20-%20retool_vs_uibakery%20-%20views&utm_source=DevTo&utm_medium=general&utm_content=announce).
How to fix Rocky Linux full screen issue on Oracle Virtual Box
Published: 2021-08-26 08:29:48



In this article, we will fix the rocky Linux full-screen issue on the oracle virtual box. Normally after installing rocky Linux on virtual box by default full scree don’t work and some times its annoying because it little hard to work with small screen. Let me give you few simple steps with commands which will fix this issue and you will many option to set screen resolution on rocky Linux.

 

Step 1: login as root and run following commands.

Commands:

yum install dkms gcc make kernel-devel bzip2 binutils patch libgomp glibc-headers glibc-devel kernel-headers -y

Important note : In case if you don;t find the yum packages, configure epel yum repository for centos 8

 

Step 2: Install the virtual box guest addition. You can see the navigation from flowing screenshot

Step 3: restart your rocky Linux virtual machine

Command:

[root@rocky01 ~]# reboot

You are Done !!!

read more : 
https://thedbadmin.com/how-to-fix-rocky-linux-full-screen-issue-on-oracle-virtual-box/
How should I decide whether my Android App needs backend?
Tags: help
Published: 2021-08-26 08:29:12

I am a beginner in Android App Development and I am trying to make a "Photo Editing and Sharing App".This App won't have any user registration and it can save photos in the mobile gallery.And for the sharing part right now I have decided to keep only the option of sharing via email.Given these details do my App needs a backend ?

Thanks in advance.
JavaScript basics logical operators
Tags: javascript, beginners
Published: 2021-08-26 07:49:59

In today's article, we'll be looking at JavaScript logical operators.
JavaScript comes with three logical operators being `and`, `or` and `not`.

Check out the below table of the basic use cases.

| Operator | Logic | Example                         |
| -------- | ----- | ------------------------------- |
| `&&`     | And   | `a = true && b = false`         |
| `\|\|`   | Or    | `a = true \|\| b = false`       |
| `!`      | Not   | `let a = true`<br>`!a // false` |

Let's have a more detailed view of each of these logical operators in JavaScript.

## JavaScript And operator

The `and` operator can be used to assess if two expressions are met.

The syntax is as follows:

```js
expression && expression;
```

Some examples might be:

```js
const a = true;
const b = 5;
a === true && b > 3;
// true
```

The return will always be an evaluation in the form of a boolean. We are returning either true if both expressions are met or false when one or both fails.

The operator is often used with a [if...else statement](https://daily-dev-tips.com/posts/javascript-basics-if-else-statement/) to perform an action based on the logic.

## JavaScript Or operator

Much like the `and` operator, we can also use the `or` operator, which is used by placing two pipes like this: `||`.
This operator is used to evaluate if both or one of the expressions is met.

```js
expression || expression;
```

Let's say we want to check if a is true or b is greater than 3. We don't need both to be truthy, just one.

```js
const a = true;
const b = 1;
a === true || b > 3;
// true
```

The above example will still return true since it will succeed to be correct.

## JavaScript Not operator

This is a bit of a funny one, as it is used to invert the value of a boolean.

So let's say we have a true boolean and want to convert it to false:

```js
let a = true;
!a;
// false
```

However, using this in an if statement will evaluate if the condition is NOT met.

```js
let a = true;

if (!a) {
  // It will never get here now
}
```

However, we mainly use this to convert a value to the opposite boolean value.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Learn React like a Pro
Tags: react, design, webdev, webassembly
Published: 2021-08-26 07:32:54

Hey folks.....

React.js is a world class library which allows the developers to build the complex designs in a minimum amount of time. We all are witnessing the growth of React these days. 

Angular is loosing it's popularity against React.js. Most of the web developers are moving towards using the react.

Why to use React.js ?

1. It has the wide variety of library support
2. More library support allows the users to implement pre-built libraries which decreases the total length of code 
3. Easy to learn as it uses JavaScript
4. Excellent structure with the component and routing management
5. Complex UI can be developed easily 
6. No need to implement Ajax externally as it uses inbuilt Routing functionalities which prevents the page from reloading 
7. Request/Response time is quick 

Learn React like a Pro :-

[note that basic knowledge of HTML, CSS & JavaScript is required to follow these steps] 

1. Start learning React as a language 
-> Link :- https://www.youtube.com/watch?v=Ke90Tje7VS0&ab_channel=ProgrammingwithMosh
 
2. Develop & Run basic web designs built with the use of HTML/CSS

3. Learn the structure of React.js & start adding external library support
-> Suggested libraries for UI development are : MaterialUI, AntUI & Bootstrap

4. Develop a mini project
-> 1. Design the structure & component names
   2. Create the UI according to the selected Page name
   3. Start connecting the components with the use of Routing 

5. Develop the clone of a famous website & Add it into your Resume 

Done !!!!!! I am hoping that it will be useful for you in your journey of learning React.js.
Automatic number-plate recognition in just 15 lines of code
Tags: python, numberplate, machinelearning
Published: 2021-08-26 07:18:22

Automatic number-plate recognition is a technology that uses optical character recognition on images to read vehicle registration plates. 
1. [Plate recognizer API](https://platerecognizer.com/)
2. Python


##Accurate, Fast, Developer- Friendly ALPR
Automatic License Plate Recognition software that works in all environments, optimized for your location. It supports a number of country number plates all over the world.
To see all the countries supported [Click Here](https://platerecognizer.com/countries/)


###To get API Key:
Go to [platerecognizer](https://app.platerecognizer.com/accounts/signup/) and create an account to get your own API KEY.

###Python
1. pip install json 
2. pip install requests

##Code
```python
import requests
import json
from pprint import pprint

#Automatic number-plate recognition API
regions = ['in'] 			#Change to your country
with open('IMAGE_PATH', 'rb') as fp:
    response = requests.post(
        'https://api.platerecognizer.com/v1/plate-reader/',
        data=dict(regions=regions),
        files=dict(upload=fp),
        headers={'Authorization': 'Token YOUR_API_KEY'})
data = response.json()

#print output in JSON Format
pprint(data)

#get number plate value from JSON response
for plate in data['results']:
    plate_data = plate['plate']
print(plate_data)
```

View full project code on my [Github](https://github.com/v-senthil/Number-plate-detection-for-Parking-Assist-and-Road-Safety)
How to upload notes on yourounotes
Published: 2021-08-26 07:04:30

Greeting all

> This blog contents the instruction to upload notes on yourounotes.
you can visit [yourounotes](yourounotes.vercel.app)

### How to upload notes on yourounotes.
Visit [yourounotes](yourounotes.vercel.app)

After scrolling down a bit, you will find the **login** button click on it then you will be redirected to the [login page](https://yourounotes.vercel.app/auth/login)

Fill in the details then you will be redirected to your **dashboard**

For the first time, it will look like this, because you haven't uploaded any notes.

![yourounotes image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6a7lc454quz9bb274vd.png)

As you start to **upload notes**, your notes will be displayed here.

Before uploading to yourounotes website, you have to upload your notes on your Google drive, then get the link from Google drive and make sure that **anyone with the link** can see it.

![yourounotes google drive image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is78c7gm7jr3lmlw74k6.png)

Copy the link then go to **upload notes**.

![yourounotes upload button image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofa2kxxk7apmxk4d4lat.png)

Then you will be redirected to the **upload page**.

![yourounotes upload form image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g16as61ajcj4f563rzl2.png)

Fill in the details, and you can upload **multiple notes** at once, after filling the form hit the upload notes button

**Kaboooom** you have successfully uploaded notes, Go to your dashboard to see when and how many notes you have uploaded.

Thanks for your support

After all, Sharing is caring

> Special thanks to my classmates who help this project reach where it is.

#HappyLearing.
#HappyCoding.


> This is **Shareef**.
> [yourounotes website](https://yourounotes.vercel.app)
> [GitHub repo of youounotes](https://github.com/shareef99/yournotes)
> My [GitHub](https://github.com/shareef99)
> My [Portfolio](https://portfolio.shareef.vercel.app/)
> Twitter [ShareefBhai99](https://twitter.com/shareefBhai99)
> [Linkedin](https://www.linkedin.com/in/nadeem-shareef-7a8394182/)
The Perl Shebang
Tags: perl
Published: 2021-07-04 22:36:55

Often overlooked, the [shebang](https://en.wikipedia.org/wiki/Shebang_(Unix)) of a Perl program is a comment on the first line which tells the (Unix-like) OS how to run the script when invoked directly on the commandline. (It's ignored on Windows, which only looks at the file extension.)

```perl
#!/usr/bin/perl
use v5.16.0;
use warnings;
say "Hello world";
```

```shell
chmod a+x myscript.pl
./myscript.pl
```

But there isn't one right answer for what the shebang should be. `/usr/bin/perl` may be commonly available, but not always, and may not be the `perl` the user prefers.

For Perl scripts that are distributed to users to run how they wish, use `env` to run the `perl` that comes first in PATH:

```perl
#!/usr/bin/env perl
```

Perl scripts distributed on CPAN, however, get installed to a specific `perl` with their dependencies, so their shebang must also point to that `perl`. This is handled by a shebang rewrite step in the installation process, but it doesn't work for an `env` shebang for [historical reasons](https://github.com/Perl-Toolchain-Gang/ExtUtils-MakeMaker/issues/58).

For Perl scripts distributed via CPAN installation, you can use any single-word shebang that ends in `perl`, even just `perl`:

```perl
#!perl
```

While developing and testing, the shebang will not have been rewritten yet, so you can invoke it as `perl script/myscript.pl` to run it with your preferred `perl` and ignore the shebang. If the script depends on modules in `lib/` in the same distribution, it is common to run it during development as `perl -Ilib script/myscript.pl`.

Finally, when you deploy and install a script manually, it should be run with a specific `perl` so that it doesn't suddenly start running with a different `perl` from the one it was deployed for, which may not have the script's dependencies installed or may behave subtly differently.

For Perl scripts deployed to a specific location, use the full path to the `perl` that should run it on that machine:

```perl
#!/usr/bin/perl
#!/opt/perl/bin/perl
#!/home/user/perl5/perlbrew/perls/perl-5.34.0/bin/perl
#!/home/user/.plenv/versions/5.34.0/bin/perl
```

You may also find Perl scripts with flags specified in the shebang with hyphens. This doesn't work with `env` shebangs in many cases, but the two common flags used this way are `-w` for warnings and `-T` for taint mode. `-w` is unnecessary and [discouraged](https://perldoc.perl.org/warnings#What's-wrong-with-w-and-$%5EW); just `use warnings;` instead.