teleren/devto huggingface dataset:
Controlling the beast
Tags: software, admin, sanga, bestpractice
Published: 2021-03-03 16:15:49

We have all seen these happen too many times:  
Every big project starts as a small one.
and a small project does not need a lot of stuff, right?  
- It doesn't need **TESTING** 🙈
- It doesn't need **SECURITY** 🙉
- It doesn't need **CI/CD** 🙊

![Alt text of image](https://media.giphy.com/media/3o85xDWOG8Sbl9yQzm/giphy.gif)

Well, if you plan for this project to stay grounded and never make the leap to become a production product then you are probably right 🐒

This Byte is about another item that is usually left out until the project is too big and desperately needs it - **CONTROLLING**

## Controlling  
Every system needs a way to control its production product, for instance:
- User's data
- Content served by your app
- Feature flags
- Many more...

## The greedy way
"For now, let's just create admin APIs"  
Well, you do have a way to control but in the cost of:
- Constant manual dev effort (the worst kind of dev effort 😉)
- Inconsistent way of use, the risk of breaking something up is always high
- Obscurity of implementation, APIs that are not consumed by any client can break/change without anyone knowing.
- Centralized knowledge of how to control your system

## The better way
Some call it "Admin Panel", others "Back office", I've heard "Dashboard" and "Console".
>In Sanga we call it Control™

An easy-to-use app that provides a safe and consistent way of using those notorious "Admin APIs".

## Controlling the beast at Sanga
As soon as we felt that those admin APIs are being used more than "just a couple of times" we've built our Control™ using Vue.js.  

As straightforward as it may sound, our "definition of done" for a feature includes the ability to manage the feature through Control™.  
That means that for every feature we:
1. Think what are the possible ways to control this feature
2. Design the relevant admin APIs
3. Enhance Control™ with the ability to interact with these APIs

## Fun fact
Once you have such a capability, new features are being designed with control in place. That leads to some super cool capabilities that otherwise would probably be developed as stiff client-side logic that would be re-written endlessly.

### Thank you for reading, look for our next Byte
_Made with ❤️ by [Sanga](https://www.sanga.app)_
Lambda functions in C++
Tags: cpp, computerscience
Published: 2021-03-03 16:15:03

Hi people,

Similar to other languages, C++ also has lambda expressions. The official documentation defines it as:

`Lambda expression constructs a closure: an unnamed function object capable of capturing variables in scope.` 

Let's first see it in action before going into details: 

```
int a = 4;
auto isEven = [](int a) { return a%2 == 0; };
cout<<isEven(a);
// prints 1 - means the number is even
```

Cool. Isn't it? :wink:
<br/>

In C++, the lambda function has its own complexities. Lambda expressions are useful when a one-liner function is required to be passed to some other function. E.g, transform, copy, remove, etc. I'll try to cover them in upcoming articles. 
&nbsp;

## Structure of a lambda function:

:point_right: **[ ]** contains the variables that the lambda function captures from the current scope. (By default, Lambda function can't use variables from the current scope, for each variable that is used inside the lambda function body we add it inside [ ] separating them by comma. There are some exceptions to it which you can see by referring to the official documentation) 
<br/>

:point_right: **( )** contains the function parameters with their type that the lambda function accepts.
<br/>

:point_right: **{ }** contains function body. In most cases, it only has a return statement.
<br/>

## Another example: 

```
int num1 = 5;
auto add_with_param = [num1] (int num2) {return num1 + num2;};
cout<<add_with_param(12);
// returns 17
```
&nbsp;

## Lambda Capture ways:

:round_pushpin: [&] : Captures all variables from outer scope by reference.

:round_pushpin: [=] : Captures all variables from outer scope by value.

:round_pushpin: [&var] : Capture a particular variable var by reference.

:round_pushpin: [var] : Capture a particular variable var by value.

:round_pushpin: [var1, &var2] : Mixed Capture of different variables in different ways.
&nbsp;


## Other important points:

- If the Lambda function doesn't accept any parameter, ( ) section may be skipped. 

```
int b = 5;
auto isEven = [b] {return b % 2 == 0;};
cout<<isEven();
// returns 0 - means the number is not even
```
<br />

- Any variable or object captured by the Lambda function(by value) can not be mutated inside the Lambda function.
<br />

- After ( ) section in the structure of the Lambda function, its return type may be specified (Optional). If omitted, the return type is implied by the function return statement or void if it doesn't return anything.
<br />

- Lambda functions can work only on C++ 11 and above.


For full reference and more examples, visit [here](https://en.cppreference.com/w/cpp/language/lambda)

If you find anything wrong or if you know some more exciting functions or other stuff related to C++, please drop a comment below so we learn together.

My Profile -

[Github](https://github.com/satyam1203)
[LinkedIn](https://linkedin.com/in/satyam1203)
How to Add a Custom Domain to Your Github Pages?
Tags: webdev, github, beginners, tutorial
Published: 2021-03-03 16:12:17

Link to original article (recommended): https://gabriellazcano.com/blog/how-to-add-a-custom-domain-to-your-github-pages/

I have to admit, I was struggling with getting my Github Pages to use my custom domain. In fact is extremely easy, I have to say I have no idea why I was struggling really.

## Requirements
A custom domain (the provider doesn’t really matter, just make sure you can change the DNS records)
An active Github page, in the form [username].github.io or [project].github.io
## Set DNS records
Every major Domain provider has it’s own way of setting up a new DNS record, but it’s really straightforward. All you need to do is set A & CNAME records for the selected domain.

You have to add 4 A pointing to @ record from this list:

`185.199.108.153`
`185.199.109.153`
`185.199.110.153`
`185.199.111.153`
And then add a `CNAME` record with the name `www` pointing to your [username].github.io page
How did I make my blog with Hugo and Github Pages?
Tags: webdev, showdev, github, go
Published: 2021-03-03 16:08:40

Link to original article (recommended): https://gabriellazcano.com/blog/my-stack/

# Introduction
So I decided to go into blogging, I’ve tried using the common blogging sites but being layed back by the tools they gave me wasn’t appealing at all.

In this post I’m going to be explaining the stack I use to run this site and the things I noticed in the process. I’m going to be updating this page as I’m extending my stack.

# The stack
In this project I used one of the best tools for Static Site Generation, Hugo. It’s crazy fast and you can customize almost everything. I know Hugo isn’t the most famous but it’s definitely one the most reliable. For the time being, I haven’t seen much attention to the framework and I would like to start contributing to making it widespread.

# Set Up
For setting up your own blog there are two ways, using a theme or creating your own. I tried using a theme but in the end it wasn’t fulfilling my needs. I think that the full customization of the themes can be a 2 sided sword, as modifying really anything is extremely difficult. Even more some themes do not have enough documentation and you have to guess how everything works. I get that themes are convenient for starting your site and for people that don’t want to go through the mess but I felt it as I was feeling before choosing Hugo.

I will, in another occasion, of how to set up a theme in Hugo as, as I mentioned before, is extremely convenient.

You can go through the steps of starting your own site, as I did, in the gohugo.io documentation

# Hosting
For the hosting I’m currently using Github Pages. I set it up using a Github Action that automatically builds my site in another branch of the project.

# Custom domain
At first I didn’t know anything about how configuring a custom domain, I thought it was really straightforward and it kinda is but I had a huge problem setting it up. You can see how I did it in this other post

# Wrap Up
I hope you will find this blog post useful and keep it handy for a quick reference. If you want to learn more about Hugo, web development, tips & tricks, please consider checking my other posts 😁

Happy Coding!
Keep your posts consistent with a template.
Tags: meta, productivity
Published: 2021-03-03 16:01:34

---
title: Keep your posts consistent with a template.
published: true
description: We all like code re-use, so let's get meta and do it with posts.
tags: meta, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wyjytksa6f9w24jonqm.jpg
---

If you find yourself writing posts here a lot, you might find yourself struggling to keep a consistent structure.

I mean, you may not _want_ a consistent structure. Your output might be stream-of-consciousness good-time banter, and that's fine.
But if you're making posts as part of a series[^1] or if you have a couple of different streams going - maybe a personal blog post vs. a tutorial - then you could do with templating it.

DEV doesn't explicitly support templates, but since you can leave a post in _draft_ status indefinitely, it's straightforward to emulate.

1. Make a new post, give it an easy-to-locate title like `[TEMPLATE: blog posts]`.
1. Find one of your posts that's in a style you like and copy the content to your new post.
1. Rip all the good stuff out of it and replace it with obvious placeholder text.
1. Save it.

When it comes time to make a new post, copy and paste your template and away you go!

Here's an example, including a few bits to remind me to use numbered bullets if I'm going to refer to something again later, and a common-ish signature[^2].

```
---
title: <TITLE>
published: false
description: <BRIEF DESCRIPTION> 
tags: <TAGS: up to four comma-separated tags, without the hash>
cover_image: <URL: find something on unsplash>
---

## <SUB-TITLE>

<BRIEF DESCRIPTION>

## <SECTION HEADING>

1. <LIST ITEM>
1. <LIST ITEM>
1. <LIST ITEM...>

## Further reading

This was originally posted on [my personal blog](<ORIGINAL BLOG URL>).

If you're interested, I post about <THIS SUBJECT> a lot on [my Twitter](<TWITTER LINK>)

---
Cover image credit: <ADD ME: unsplash user> on [Unsplash](https://unsplash.com).
```

It might seem that this isn't going to save you much time. Well, it might not, for _you_, but depending on how you post it might help a lot. Who am I to guess?

Cover photo by [Francisco Arnela](https://unsplash.com/@kikocho) on [Unsplash](https://unsplash.com)

[^1]: Did you know you could do that? You add a series name to your front matter and it's done by magic. You can find out more in the [editor guide](https://dev.to/p/editor_guide)
[^2]: I don't really recommend - or like - post signatures, but I wanted an example of something that would stay consistent across posts and it's what I came up with at the time.
Vue js: Child component's CSS is overridden by the parent  tag  <h1>
Published: 2021-03-03 15:44:05

Hello , 

First let me show you the parent component : 

````
(...)
<div class="card-header">
                            <h1>
                                <company-edit :id="companyId" :key="companyId"></company-edit>
                            </h1>
</div>

(...)


<style scoped></style>

````
As you can see there is no specific styles.

<company-edit> component : 

````
 <div class="form-group row">
        <label class="col-4 col-form-label pr-0" :for="'companyNameI"> Company name in-				 
                 house</label>
     <div class="col">
            <input (...)

<style scoped></style>
````

The problem is when I put `<company-edit>` inside   `<h1></h1>` tag all the content of the `<company-edit>` is overridden by `H1` style, and all the  form labels are on H1 style!

Is  there a way to "scope" the CSS of child component ?

Thanks
AzureFunBytes Reminder March 4th -  Codespaces, and CLI with @bbenz
Tags: azure, cloud, beginners, tutorial
Published: 2021-03-03 15:26:34

Tricks and tips to make your Azure experience always help.  This time on AzureFunBytes we'll enjoy some command-line goodness with one of my favorite Cloud Advocates, [Brian Benz](https://twitter.com/bbenz).  Whether it's good ol' [Windows CMD](https://cda.ms/20f), bash, or Azure CLI we're always looking for ways to leverage the tools we can use for the cloud.  We will take a look together at how these CLI tools come together to give you an awesome experience on Azure.

Brian also asked me if I'd like to take a look at GitHub Codespaces which I gave a resounding yes to!  The ability to have a dev environment almost anywhere is such a huge win for developers.  GitHub Codespaces can be found right in your [browser, Visual Studio, or even Visual Studio Code](https://cda.ms/20k).  With Codespaces you can set up ssh keys,  get your dependencies, and start committing your new changes to your application.

Join us LIVE at 11 AM PST/ 2 PM EST on Thursday, March 4th, 2021!

{% youtube ca7kY43EYJw %}

Brian will take us through some of the basics and explain how to use these awesome developer and ops tools.

Learn about Azure fundamentals with me!

Watch live on [Microsoft LearnTV](https://docs.microsoft.com/learn/tv/?WT.mc_id=devops-15966-jagord) and take part in the live Q&A and polls right from the browser!

Live stream is available on Twitch at 2 pm EST Thursday. You can also find the recordings here as well:

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes
https://aka.ms/jaygordononyoutube

Useful Docs:

[Microsoft Learn: Azure Fundamentals](https://cda.ms/1WL)
[Microsoft Azure: $200 Free Credit](https://cda.ms/20F)
[Windows Commands](https://cda.ms/20f) 
[PowerShell Documentation](https://cda.ms/20g) 
[Get started with Azure CLI](https://cda.ms/20h) 
[Create virtual machines with the Azure CLI](https://cda.ms/20j) 
[GitHub Codespaces](https://github.com/features/codespaces) 
[GitHub Codespaces Clients](https://cda.ms/20k) 
[Supporting Remote Development and GitHub Codespaces](https://cda.ms/20m)
PHP function
Tags: php
Published: 2021-03-03 15:19:18

 I am currently learning PHP, so I am just playing around with it. I got to function and decided to write this on my own.
I want to take input from the user and pass it on to my defined function.
Kindly see my codes below, it works but I feel something might be missing 

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
</head>

<body>

    <form action="user defined function.php" method="post">

        <input type="text" name="name"> <br>
        <input type="number" name="age"> <br>
        <button type="submit">Submit </button>

    </form>



    <?php
    function myName($name, $age)
    {
        echo  "My is " .  $_POST["name"] . ", and I am " . $_POST["age"] . " years old.";
    }
    myName ("", 0);
 ?>
</body>
</html>
```
Day 65 Of 100DaysOfCode: Implement Clumsiness
Tags: womenintech, 100daysofcode, codenewbie, beginners
Published: 2021-03-03 15:18:31

This is my 65th days of #100daysofcode and #python learning. Today learned more about data visualization from matplotlib. Completed some assignment in datacamp.
# Implement Clumsiness

 
```python
# Simulate random walk 250 times
all_walks = []
for i in range(10) :
    random_walk = [0]
    for x in range(100) :
        step = random_walk[-1]
        dice = np.random.randint(1,7)
        if dice <= 2:
            step = max(0, step - 1)
        elif dice <= 5:
            step = step + 1
        else:
            step = step + np.random.randint(1,7)

        # Implement clumsiness
        if ___ :
            step = 0

        random_walk.append(step)
    all_walks.append(random_walk)

# Create and plot np_aw_t
np_aw_t = np.transpose(np.array(all_walks))
plt.plot(np_aw_t)
plt.show()
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 65 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python3?src=hash&amp;ref_src=twsrc%5Etfw">#Python3</a> <br>Worked on data visualization using matplotlib.<a href="https://twitter.com/hashtag/WomenInTechnology?src=hash&amp;ref_src=twsrc%5Etfw">#WomenInTechnology</a> ,<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> ,<a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/yogjWr5YP9">pic.twitter.com/yogjWr5YP9</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1367130508052766721?ref_src=twsrc%5Etfw">March 3, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
How to disable ESLint for some lines, files, or folders
Tags: beginners, javascript, codenewbie, webdev
Published: 2021-03-03 15:14:15

ESLint - is a very convenient tool to control code quality. But, sometimes it’s necessary to disable it. In this tutorial, you’ll learn how to turn off ESLint for certain directories and files.

## General case

For demo purposes imagine you have a file with a couple of `console.log()` statements that ESLint doesn’t like.

To temporarily turn off ESLint, you should add a block comment `/* eslint-disable */` before the lines that you’re interested in:

```javascript
/* eslint-disable */
console.log('JavaScript debug log');
console.log('eslint is disabled now');
```

Once ESLint sees the `/* eslint-disable */` comment it turns off the parsing.

To turn it back on you should use the block comment `/* eslint-enable */`.

```javascript
/* eslint-disable */
console.log('JavaScript debug log');
console.log('eslint is disabled now');
/* eslint-enable */
```

Now ESLint is enabled once again and will parse the rest of the file normally.

## Disabling specific ESLint rules

To disable not all, but only some specific ESLint rules, you should list them in the same comment. Split the rules with commas:

```javascript
/* eslint-disable no-console, no-control-regex*/
console.log('JavaScript debug log');
console.log('eslint is disabled now');
```

The rules `eslint-disable` and `eslint-enable` should always be placed in the block comments. This doesn’t work:

```javascript
// eslint-disable no-console, no-control-regex
console.log('JavaScript debug log');
console.log('eslint is disabled now');
```

## Ignore a single line

To disable ESLint for a single line, there are 2 options.

To turn off linter for the current line, you add a comment **after** that line:

```javascript
console.log('eslint is disabled for the current line'); // eslint-disable-line
```

To turn off the linter for the next line, you place the comment **before** the line that you want to ignore:

```javascript
// eslint-disable-next-line
console.log('eslint is disabled for the current line');
```

## Ignore multiple files or folders

To turn off ESLint in the whole file, you can add `/* eslint-disable */` in the first line of that file.

Alternatively, you can create a file `.eslintignore` in the root catalog. The format of this file matches the format of `.gitignore` and you can add there not only files but directories too.

```
build/*.js
config/*.js
components/bar/*.js
```

[Learn Full Stack JavaScript](https://js.coderslang.com)
How to create CSS movie tickets | CSS Effects
Published: 2021-03-03 15:06:42

The Movie Ticket is made with HTML and CSS. It is very useful to show sell movie ticket online or to attract viewers.
<a href="https://codewithbishal.com/example/css-movie-cards" rel="nofollow">View it on our website(Responive cards)</a>
View More :
<ul>
<li><a href="https://codewithbishal.com/example/how-to-create-responsive-column-cards" rel="nofollow">How to create responsive column cards</a></li>
<li><a href="https://codewithbishal.com/example/pure-html-budget-calculator-cwb" rel="nofollow">How to create budget calculator using HTML</a></li>
</ul>
At first, on our webpage, there is a preview of our responsive movie ticket, then there are a few QNA and an overview of the blog. There is a button to copy and Download the codes (HTML and CSS). You can also try it on our website.

You can view and copy and download the source code files through the link given below. <a href="https://codewithbishal.com/example/css-movie-cards" rel="nofollow">View and Download Source Code</a>
Improving performance the web application
Published: 2021-03-03 15:01:48

 
Improving performance the web application

**Pagination**: looks simple, but exists many applications no applying pagination in listing the data. Returning all registers generate processement unnecessary in many situations, not is necessary to return all data in one only time.

**Orm**: are tools that abstract communication with databases to the form object oriented, but there are moments where it is necessary to execute complex queries with orm is slow. This moment  use native sql to complex queries is the correct for gain performance.

**Search only the necessary**: one another thing a lot simple, but when one application grows up it’s simple detail makes different. Imagem the scenery: you make one request to one endpoint in api and return many data unnecessary for context present generated process unnecessary. This moment can use one querystring to specifically necessary to return in response. Example: /peoples/?fields=usename,email.

**Static files**: are files that no matter how many times you request the files, the content continues the same. The css, js and image files are good examples. When we speak about static files there are some solutions to improving performance:
 - Minify css and js files this form the file size reduce and it’s allow download more quick.
 - Use CDN, what is it? CDN(content delivery network) where static content is cached and the content is searched in one machine geography more near the person that requested it.
      
**Zip the response**: when we work with applications using http protocol to request something, make requests to the server and the server processes data and returns a response. The response can be zipped making response reduce size and allowing download more quickly.

**Asynchronous process**: are processes that can execute in a moment later, different the processes synchronous that need execute in exactly the moment. Example: imagem that after registering a new user must send the email welcome. This email no need be sent in exactly the moment register user, email can be sent one time later.

**Cache**: is one solution very interessent to improving the performance of the applications due the data stored in memory. Example: one user makes a request to your application, you search the data in the database and store it in cache and after returning a response to the user. In the next request no necessary search data in the database only gets data in cache. It makes response return more quick, because getting data in memory is more quick than getting data in the database.
#CodepenChallenge 'Add To Cart' Button Microinteraction
Tags: codepen, ux, design, webdev
Published: 2021-03-03 14:57:02

<p>This is a micro-interaction of an 'Add To Cart' button; created using web components' custom element, and shadow DOM.</p>

<p>In my opinion, setting the <code>background-color</code> into purple instead of green is better, because green color stands-out more than the purple color. Hence, setting the background color of the button into green color, will stand-out more.</p>

<p>I created the animation effect using <a href="https://greensock.com/">GreenSock</a> Timeline.</p>

<p>The GSAP animation timeline can be found inside this method <code>addToCartAnimation</code>.</p>

<p>The animation will be cleared 3 seconds after the button was clicked (Including the whole animation time).</p>

<p>I created the cart SVG icon using <a href="https://inkscape.org/">Inkscape</a>.</p>

{% codepen https://codepen.io/takaneichinose/pen/VwmxEGO %}