teleren/devto huggingface dataset:
TIL: How my complicated alias works
Tags: zsh
Published: 2020-07-12 08:05:12

This post comes from this comment: https://dev.to/nflamel/comment/11o72. You can read the whole thread here:

{% devcomment 11m4e %}

I've had this alias on my dot-files for some time. I use it to open my editor of choice (neovim).

```sh
alias e='${(z)VISUAL:-${(z)EDITOR}}'
```

I didn't know what it was exactly doing until recently. I've had it copy/pasted around my dot-files many times.

EDIT: I mean... I know I always use `e` to open nvim. What I didn't know was why was I using such a complex alias to do it.

## TL;DR:

It uses `$VISUAL` or `$EDITOR` and makes sure that it properly handles any extra parameter given to it. So something line `vim -a -b -c` works.

## Detailed explanation

Got it from here https://github.com/sorin-ionescu/prezto/blob/f4ca9ebfc913453f98ba6912a8c42684fd742cc1/modules/utility/init.zsh#L55

What it does If I'm not mistaken is to alias `e` to either the value of `$VISUAL` or `$EDITOR`. But to only do that it would be enough with:

```sh
alias e='${VISUAL:-${EDITOR}}`
```

There's also this `(z)` that I just learned on ZSH is an expansion flag. Looking into ZSH manual it says:

```
z

    Split the result of the expansion into words using shell parsing to find
    the words, i.e. taking into account any quoting in the value. Comments are
    not treated specially but as ordinary strings, similar to interactive
    shells with the INTERACTIVE_COMMENTS option unset (however, see the Z flag
    below for related options)

    Note that this is done very late, even later than the ‘(s)’ flag. So to
    access single words in the result use nested expansions as in
    ‘${${(z)foo}[2]}’. Likewise, to remove the quotes in the resulting words
    use ‘${(Q)${(z)foo}}’.
```

but I still didn't know what it means... so I tried to do:

```sh
VISUAL='nvim -v' # This just writes the nvim version
alias e='${VISUAL:-${EDITOR}}'
```
If I then I've tried

```
$ e
zsh: command not found: nvim -v
```

That doesn't happen if I try with `(z)` flag on the expansion `alias e='${(z)VISUAL:-${(z)EDITOR}}'`.

Thanks to https://dev.to/nocnica for asking the right question and for suggesting that I extracted the comment into this post.
S3 and Cloudfront for hosting (simple steps)
Tags: aws, serverless, webdev
Published: 2020-07-12 07:47:47

**Storing and Delivering your Content with Speed and Scale.**

To serve your static content of the webpage includes images, videos, music, scripts, stylesheets, etc., we can use amazon's **CloudFront**, a content delivery network.

###What is content delivery network(CDN)?
It is the system of distributed servers, serves the content on it to the users based on their locations. For example, a user from California accessing content on CDN, the content will be served from the user's nearest server, which in the sense speed in delivering the content.

`s3 - Simple Storage service`

Amazon Cloudfront helps to serve the content through its worldwide network of data centers. It's simple to set up the CloudFront along with s3 storage. 

You can also serve your static content through s3, but CloudFront allows us to serve the content from all its edge locations.

####Follow the steps along with me,

> Create an Amazon(AWS) account if you do not have one. It has a free tier to start with.

> Search and select s3 from the list of services.

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

> Create a bucket with the name of your choice.

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

> Upload your static content.
_I  used my HTML file here_

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

{% user sasidharan %}

> After uploading, enable **Use this bucket to host a website** in Properties section.

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

> Now head to Cloudfront by selecting in services and create a distribution by selecting the web.

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

> Select your bucket name in the origin domain name and you can also specify **Origin Path** if you want to serve a subfolder in the bucket. You can also restrict the bucket access as in the image,

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

> In distribution settings, specify the **Default Root Object** like index.html, you can also set alternative domain names for your CloudFront using certificate manager. 

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

{% user sasidharan %}

> You can leave other information as it is or you can change as per your need. Now create your distribution.

Your distribution takes some time to deploy. After that, you can see the deployed indicator.

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

You can now see your content uploaded in s3 using the CloudFront URL.(something similar to this http://d1b31rrh6oyllb5.cloudfront.net/)

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

{% user sasidharan %}

Hope now you can create your own distribution using s3 and Cloudfront.

Comments below!
Master Portfolio 2.0 is out today.
Tags: react, npm, node, javascript
Published: 2020-07-12 07:23:32

If you want to make your portfolio website which contains every bit of information about yourself then go to below github repository and follow instructions.

Github Link: https://github.com/ashutosh1919/masterPortfolio      Website Link: http://ashutosh1919.github.io/

New addition in this version is: 
(1) Automatic data fetching from github profile.
(2) Multiple themes available + Flexibility to add custom theme.
(3) Added new animations.

Don't forget to star the repository if you liked the project.
BSc Vs Self taught?
Published: 2020-07-12 07:11:02

I consider myself a self taught software developer. I did go through school until the last year of my degree but i dropped off due to financial challenges. Ended up with just an Advanced Diploma in CS on my resume. This never stopped me from developing my programming skills for close to 7 years now. Recently a recruiter turned me down due to not having a BSc without even testing me technically, and was advised that i need 10years work experience to be considered for even a senior software engineer role. Should i go back to school just to get a BSc or continue on my path of a self caught software engineer? Need advice, could my path of a self taught guy be suicidal to my career path?
Agent-Hellboy/YouTubeDataApi_Wrapper
Tags: python, opensource, apiclient, wrapper
Published: 2020-07-12 07:09:49

This is a youtube API v3 wrapper that is integrated into any python app basically in the web app which recommends youtube videos.

I have made this repo when I was making a project which helps is mastering a skill through youtube video recommendation and web scrapping. For the video recommendation, I have to parse the JSON data returned by the youtube data v3 API. I thought maybe someone will need this also. That's why i made this repo. link for the project https://github.com/Agent-Hellboy/potency

There is an urgent need for docstring. And also there is a scope for the improvement of the README. I don't think this README is up to the mark. Any Contribution to README and the package is highly appreciated.

please check the issue.
https://github.com/Agent-Hellboy/YouTubeDataApi_Wrapper/issues
YouTube Video | Create a twitch clone using React -5
Tags: react, webdev, showdev, youtube
Published: 2020-07-12 06:58:48

This video is from my YouTube channel — **The Web Dev**. 

Here, we will create a clone of the popular streaming service [https://www.twitch.tv/](https://www.twitch.tv/) using ReactJS.

In this part , we will associate users, to a stream so that the user can add stream.Will also have Delete and Edit button for the logged in user, of that stream.

{% youtube g0hKG097iK4 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Comparing React and Vue - part 1
Tags: react, vue, javascript
Published: 2020-07-12 06:46:27

To help me learn and understand better, I'm going to write a series of posts that compare React and Vue, and how each framework codes some of the most fundamental programming concepts.
This post (and this series) is not an attempt at claiming one is better than the other. They are both very good and popular. The purpose is to increase understanding by looking at similarities and differences.

## For Loops (Iteration) in a VueJS Component
So how do you loop through an array of items in Vue? here's an example from the Vue docs:

```html
<ul>
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
```

```javascript
items: [
  { message: 'Foo' },
  { message: 'Bar' }
]
```

## Iterate through same array in a React Component
```jsx
const items = [
        { message: 'Foo' },
        { message: 'Bar' }
];

function App() {
  return (
    <div>
      {items.map((message, index) => (
        <li key={index}>
          {message}
        </li>
      ))}
    </div>
  );
}
```

## My Takeaways
For beginners who are just starting out with JS frameworks, I can understand why they would like VueJS more. In Vue components, the HTML is neatly separated from the JavaScript and the CSS. Using Vue's directives like `v-for` is semantic and is inside the element that will be repeated. Pretty awesome if you are new to JS frameworks.

For more experienced developers who have been writing vanilla JS for many years, I can understand why they would prefer the **JSX** way with React, writing for loops inside some HTML.

## Conclusion
It's a matter of personal preference and perhaps where you are in your developer journey. For less experienced coders, Vue structures its components in a friendly intuitive way and provides Vue directives out of the box to accomplish array looping.

With no previous experience with JSX, React will require some additional time in the beginning to learn how React renders its components.

I am a fan of both frameworks and looking forward to comparing another simple aspect of programming in my next post. Stay tuned, and thanks for reading.

<span>Photo by <a href="https://unsplash.com/@cdc?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">CDC</a> on <a href="https://unsplash.com/s/photos/computer-programming?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
How to get started with Spring Boot ?
Tags: help, discuss, productivity
Published: 2020-07-12 06:36:44

Hi,

I am a fresher at a company where they work on Java based frameworks like SpringBoot.
I am an experienced developer in MERN stack and Flask based applications. But, I never worked with something related to Java. Are there any go to places to learn SpringBoot ? As I am fairly new to Java as well, I think a more ground up learning will be better for me. 
It'd be great if you can refer something from your experience.
Thanks in advance 😊,
Parallax Scrolling
Published: 2020-07-12 06:30:40

Surfing around the web I've come across sites where when scrolling down the background seems to scroll at a different speed than the rest of the site.  This is a technique called "Parallax Scrolling".  Which can easily be done with only CSS.  First what we can do is outline our HTML with a few layers.
```
<body>
    <div class="parallax">

        <div class="parallax__layer parallax__layer--back">
          <div class="title">This is the background</div>
        </div>
        <div class="parallax__layer parallax__layer--base">
          <div class="title">This is the foreground</div>
        </div>

    </div>
</body>
```
Here we set aside a couple of containers for our text, each with a class "title".  Both of them are nested inside another class, "parallax__layer", then individualized by which layer they are in, in this case base & back.  All of which is nested inside a container that is for all of our parallax scrolling content. Now for a bit of CSS!
```
.parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 1px;
    perspective: 1px;
}

.parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
```
This sets our container & the base for the layers underneath by setting their positions to "absolute".
```
.parallax__layer--base {
    
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.parallax__layer--back {
    -webkit-transform: translateZ(-1px);
    transform: translateZ(-1px);
}
```
Here is where we have the distinction between our layers.  By setting our transform property to different values on the Z axis we can differentiate between the two layers.
```
* {
    margin:0;
    padding:0;
}

body {
    font: 100% / 1.5 Arial;
}
.parallax {
    font-size: 200%;
}
.parallax__layer {
    padding: 100vh 0;
}

.title {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
```
With this last bit of formatting we can set the format of our layers and voila!  Smooth scrolling at different speeds for our site!
What is DDoS Attack: Explained!
Tags: tutorial, ddos, codenewbie
Published: 2020-07-12 06:27:15

{% youtube f7_R7bPG5WQ %}
Did you know, 1.3Tbps DDoS attack pummeled GitHub for 15-20 minutes in 2018.
Let's discuss What is DDoS?

Follow on:
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Introducing Squircley, a simple SVG squircle maker!
Tags: showdev, webdev, design, vue
Published: 2020-07-12 06:10:02

## **[Squircley](https://squircley.app/ "Squircley")** - SVG Squircle Maker

### PRs always welcome on [GitHub](https://github.com/georgedoescode/squircle "GitHub")

---

I love squircles, but I am hopeless at wrangling SVGs in design software. This gave me the idea to make Squircley! It is a simple web editor which produces lightweight SVGs, ready to use wherever you like.

## Stack 

- Vue.js (framework)
- Webpack (tooling)
- PostCSS (styling) 

## Features 🌟

- Teeny tiny SVG file sizes 🔎
- Delicious squircley perfection 👌 - no more intensely staring at that curve wondering if it is even
- Colorful 🌈 - pick from a list of pre-selected colours or input your own
- Multiple Export options 💾 - copy your squircles straight to the clipboard or save them for later

In case you missed it, Squircley is live at https://squircley.app/ with a repo hosted on GitHub at https://github.com/georgedoescode/squircle.

Im always up for making improvements + tinkering so please add any feedback you have / submit a PR / whatever! 

Happy designing / dev-ing 🎨 🤖 ❤️
Wordpress And Laravel Mix
Tags: wordpress, javascript, css, webpack
Published: 2020-07-12 05:57:43

Developing a Wordpress site or theme can sometimes be a frustrating experience, especially if you also have some experience or more comfortable with modern PHP or JS frameworks. As a modern PHP framework, Laravel has the powerful [blade templating engine](https://laravel.com/docs/7.x/blade), a flexible and robust [ORM](https://laravel.com/docs/7.x/eloquent), Laravel Mix and many more out of the box features that make for a great development experience. So, if we want a better development experience for Wordpress, looking for other frameworks for tools and inspirations is a good idea. The Wordpress development team was doing exactly that with their [Gutenberg project](https://developer.wordpress.org/block-editor/developers/platform/) and incorporating React as a supported JS framework. With Laravel Mix we can use CSS preprocessors, Modern JS and live reload.

Learn how to setup Laravel Mix in your project and empower your Wordpress development experience⚡✊

The original article is published here:
[https://yossiabramov.com/blog/wordpress-and-laravel-mix](https://yossiabramov.com/blog/wordpress-and-laravel-mix)
Exceptions versus Syntax Errorspython
Tags: python
Published: 2020-07-12 05:23:13

Exceptions versus Syntax Errors
Syntax errors occur when the parser detects an incorrect statement. Observe the following example:

>>> print( 0 / 0 ))
  File "<stdin>", line 1
    print( 0 / 0 ))
                  ^
SyntaxError: invalid syntax
The arrow indicates where the parser ran into the syntax error. In this example, there was one bracket too many. Remove it and run your code again:

>>> print( 0 / 0)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ZeroDivisionError: integer division or modulo by zero
summary this code some cases mostly use if you have need more detailed information then visit https://www.pythonslearning.com
Top Common Computer Questions Answer | You Should Know 
Tags: computerscience, computersecurity, protectcomputer, computerhack
Published: 2020-07-12 04:27:11

I have been asked a lot of questions about computers and I thought that I would list some of them here.There are never stupid questions. We weren't born knowing everything. Asking questions is one of the ways we learn. 
<a href="https://www.basiccomputerknowledge.in/2020/06/top-common-computer-questions-answer.html">Top Common Computer Questions Answer | You Should Know (DoFollow Backlink)</a>
You should never be afraid to ask questions.Read these Important Top Common Computer Questions Answer You Should Know all the time. We have collected these questions from the various sources and align them according to the Title. If you are wondering about the Computer GK then this post will be very helpful to increase your Computer General Knowledge. ALL EXAMS VERY IMPORTANT COMPUTER BASIC GK QUESTIONS ANSWERS.
RoBeats CS Rewrite
Tags: robeats, game, lua, roblox
Published: 2020-06-10 16:45:55

Hello all!

This is my first post about RoBeats CS, and all of the cool and interesting stuff that is going into it.

First off, I'd like to mention that the game is now open-source on GitHub: https://github.com/RoBeats-CS/robeats-cs

Second, let's talk about all the new stuff that's going into the game! * Everything is getting redone, and that includes the UI.
* The options menu will now be split into subsections.
* The gameplay screen will look comparable to osu!.
* The results screen will have metrics support.
* All those weird bugs in the old version will hopefully disappear.
* Spectating
* And much more!

All the UIs are being written using a technology called Roact, which is a implementation of JavaScript's React framework in Roblox Lua. This will allow the game's codebase to become super-flexible and allow for quick and easy changes once finished.

One major point of concern is spectating. I am happy to say that spectating is now a thing in RoBeats CS (I already implemented it within the game's codebase), but I never added full support for the feature. This means that there won't be any spectating until it is developed enough until it is in alpha.

Lastly, the database performance! If you have played for any extended amount of time, you may have noticed that anything related to the database (e.g. leaderboards, global rankings, skill rating) is slow and unperformant. I plan to fix this by implementing a Redis cache within the web server to speed up response times and avoid re-querying.
Chapter26
Published: 2020-07-12 04:23:51

Suposse you have the following function

ifBothTrue(age >18)(numAccidentes==0){
 println("Discount!");
}

Attempt no1:

def ifBothTtrue(c:=>Boolean)(n:=>Boolean)(codeBlock:=>Unit):Unit{
 if (c && n) {
        codeBlock
   } 

}

You're using by-name, because we need to evaluate that expressión, always (think the case for a loop iteration)

Implicit paremeters: it takes the current val defined in the context with the word 'implicit'.
Some rules are:
-You can only use implicit per function
-If you use implicit, is has to be the last parameter.

You need to supply empy parentheses when you want to use the default values

def fn(a:Int =1)(b:Int =2) = {a+b}
you need to call fn()()

It also valid to use:
def fn(a:Int =1)(b:Int=a) = {a=b}
Data visualization with D3js Choropleth Map
Tags: codepen, datascience, javascript, d3js
Published: 2020-07-12 04:23:14

{% codepen https://codepen.io/thetradecoder/pen/yLeEZKZ %}

Here is my first D3js Choropleth Map project as a learning progress, United States Educational Attainment Presentation.  need your valuable feedback. 

Thank you.
eSlayers part 4 - More user info
Tags: javascript, typescript, nextjs, react
Published: 2020-07-12 04:03:36

New name because I would like this web app to be more than just auto battlers. I figure I could eventually break this out to show stats for many different games. The name is still a WIP (work in progress) but for now, we just keep coding.

Alright, so part 3 was all about transferring logic from the home page into the summoner page.
* I got the summoner name passed into the URL from the home page as a query param.
* Grabbed the query param from the URL within the summoner page component and displayed it on screen
![Display summoner name](https://dev-to-uploads.s3.amazonaws.com/i/kec3dtqmwb2ffwef5x6u.png)

Now I want to start building out the summoner info page with... You guessed it, more summoner info.

I'm going get a few things to display
* Summoner Name (got it)
* League - Tier, Rank, LP, W/L (win rate)
* ~~Match History~~ This will be part 5

How do we get Rank?
Riot API has TFT-LEAGUE-V1 which has a few `GET` requests
![LEAGUE API](https://dev-to-uploads.s3.amazonaws.com/i/nam4xpbr0z54va2raj91.png)

The one we want right now is `/tft/league/v1/entries/by-summoner/{encryptedSummonerId}`

And we get `{encryptedSummonerId}` from our first request in `/tft/summoner/v1/summoners/by-name/{summonerName}`

![Return Values from SUMMONER](https://dev-to-uploads.s3.amazonaws.com/i/31nmdj77jt3o5391kqpj.png)

Got the `{encryptedSummonerId}` and added that to the query param at the end of `/tft/league/v1/entries/by-summoner/{encryptedSummonerId}`.

Here is the response
![Response](https://dev-to-uploads.s3.amazonaws.com/i/nv59svofwj8zsj8m5qqy.png)

From this response, I am going to extract: `tier`, `rank`, `leaguePoints`, `wins`, losses, and create some logic for win rate %.

Looking through what Match History returns and it's a lot of data. Going to leave that for its own blog post and just return the users rank data for now.

So now my summoner page component looks like
![summoner component](https://dev-to-uploads.s3.amazonaws.com/i/axkurvo4ite48u3kk2lo.png)

and my summoner page looks like
![Improved Summoner Page](https://dev-to-uploads.s3.amazonaws.com/i/05ctuavwa1kv4w9peejf.png)

I know there is someone (maybe not) out there thinking my code is cringe, just wait, there will be more cringe before I get to cleaning up the code and making it look nice. I try to get to MVP as quickly as possible and then go back through the code, optimize it, add ESLint, add Prettier, and all the goodies for maintaining quality code.

Parts [1](https://dev.to/rembrandtreyes/creating-an-auto-chess-stats-site-tft-focused-part-1-3d3c), [2](https://dev.to/rembrandtreyes/getting-the-api-to-return-something-anything-ac-slayers-part-2-5c51), [3](https://dev.to/rembrandtreyes/ac-slayers-part-3-transition-to-userinfopage-and-display-name-5bea)

@rembrandtreyes