teleren/devto huggingface dataset:
What compiling code means: explain like I'm Five
Tags: programming, computerscience, javascript, webdev
Published: 2022-04-14 09:07:20

Computers can only understand `machine code`, which is a `low-level programming language*`, generally being made up entirely of numbers.

Most of the time when people talk about `machine code`, they refer to it as `binary code**` (a number system with base 2 - either a 1 or 0). So we can say that machine code is made out of `sequences of ones and zeros`. Below there's a snippet of some binary code:

```javascript
01101000 01100101 01101100 01101100 01101111 
00100000 01110111 01101111 01110010 01101100 
```

We need to comunicate with computers, so in order to do so, we need to speak their language. But writing `machine code` is very impractical, so we had to come up with languages that resemble our own language. We call these languages `high-level programming languages`. Some examples are: Python, Ruby, C# or Java.

Now the problem is that computers do not understand these languages directly, so we need a `translator` that can explain our instructions to the computer. This is how `compilers` and `interpreters***` were born. They are programs that `translate` the code we write using high-level languages, into machine code.

`Compiling` means that after we finished writing our code, a `compiler` (a program) takes our code and looks at it, making sure it has been written acording the rules of the programming language we used (it checks for syntax errors). If no mistakes are found, the code can be effectively translated into machine code and a file containing compiled code is generated.

We hear people saying that the code `doesn't compile`. This means that while checking the code, the compiler found errors and the translation into machine code wasn't succesful. Usually, the programmer will see some error messages that will help them debug the code. Only after all errors are fixed, the code will compile.

**IMPORTANT**
Just because the code compiles, that doesn't mean the program works. This is because a compiler can't catch logical errors. It might sound counterintuitive, but think about it like writing an English text with no grammatical errors or typos, so the words are correct on their own, but when read together they make no sense. 


(*) Low-level programming languages are languages that sit close to the computer's instruction set. An instruction set is the set of instructions that the processor understands. 

(**)  Machine code can be represented using other number formats, like hexadecimal. These formats are easier to read by humans but the computer can't understand them, so in the end they also get converted to binary.

(***) Interpreters are also used to translate source code into machine code but they work differently from compilers.
Comparison of Reactjs & Angular
Published: 2022-04-14 09:07:01

There are lot of framework & front-end development libraries persisting in the market, [React & Angular](https://www.divami.com/blog/difference-between-react-js-and-angular/) are the most debated java script framework libraries. They Both are high in demand.

**React **
React is an open-source front-end development library that is built-in  with JavaScript to make user interface components. 

**Angular**
While angular is typescript-based programming platform, the components in this is based on web application framework which allows you to create highly scalable web applications

Major Differences can be seen in 



- Language
- Architecture
- Directives
- Componentization
- Document Object Model
- Productivity & Development Speed
- Toolset

Both the framework have grown into enormous and well-developed open source libraries and frameworks. To choose which is best for your project read more
Why JIT was introduced?
Tags: webdev, javascript, es6
Published: 2022-04-14 08:45:19


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swxhckgf1eefmxsp61hp.jpeg)
As we know that there are two ways of translating in programming which is "Compiler" and "Interpreter". There are pros and cons in each of these ways of handling the translation. 

Interpreter as compared to Compiler, has quickly get up and running ability which makes it faster. But the JavaScript Interpreter trade-off was to interpret the code over and over again in case of looping.

To get the best of both worlds, browser mixed the compilers in and added a new part in JS engine named as "𝐦𝐨𝐧𝐢𝐭𝐨𝐫" or "𝐩𝐫𝐨𝐟𝐢𝐥𝐞𝐫".
What monitor does is that it watches the code entirely as it runs. It keep tracks of things like how often the function has been executed. In case of repeated functions, that function is considered as "𝐰𝐚𝐫𝐦𝐬". That warmed function then get it off the "𝐛𝐚𝐬𝐞𝐥𝐢𝐧𝐞 𝐜𝐨𝐦𝐩𝐢𝐥𝐞𝐫" to create compiled version of it.

The baseline compiler will do it in chunks. Each operation in the function is compiled into one of more "𝐬𝐭𝐮𝐛𝐛𝐬". Stubb will be specific to whatever types are being used to either sides of that operator and stored. In case of repeated operation with same operator and same type of either side of operator, the stored stubb will be used instead of reading the block of code again. This will save in translation time and help speed things up.

As one of the characteristics of compiler is that it takes time to think the best way to communicate with the machine which we referred as "optimization". The baseline compiler will make some optimizations but it does not wants to take up much of the time as the code is executing as the same time. If the code is very hot, it will take worthwhile in optimization.

In case of a very hot function, the monitor send that function to "𝐨𝐩𝐭𝐢𝐦𝐢z𝐢𝐧𝐠 𝐜𝐨𝐦𝐩𝐢𝐥𝐞𝐫" and this will create the faster version of that function. The optimizing compiler makes assumptions. For example: if the optimizing compiler assumes that all of the objects that are created by a particular constructor had a same shape, so the object has the same property names and they have been added in the same order. So the optimizing compiler uses the information that the monitor has been gathering to make such judgements and if something has been true in the past of code, it continues to consider it to be true.

The compiled code needs to be validated and if it's not true, the JIT assumed it as wrong assumption and dumped the optimized code. At this point, it goes back to the compiled version and do "𝐫𝐞-𝐨𝐩𝐭𝐢𝐦𝐢𝐳𝐢𝐧𝐠".

There could be a possibility of running cycle between the optimizing and re-optimizing in case of wrong assumption, so JIT keep tracks of how many times they have optimized a function, and it's not working out then it will mark it to not to optimize the function and move on.

This is JIT in nutshell. Thankyou for reading it out till the end. This is my first blog and I'll be looking for more blogs in future.
Excellent Web Services!
Tags: webdev, web, freelance, node
Published: 2022-04-14 08:12:53

Hello viewers,
             I'm a web designer and developer. I have launched a new Freelancing team for Web services. I can provide you excellent websites and other Web Services at an affordable price. If you have any need of any web services contact me!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bidn0eyyn0cpfowc48zx.png)
Learn More: https://ashwinv007.github.io/WAREGRAM-WEBSITE/index.html

Share your suggestions, opinions and tips too!
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-04-14 08:00:26

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259b9b89f4.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ What do you call optimistic front-end developers?

___A:___ Stack half-full developers.
 -->
Checking Syntax of Perl
Tags: perl, beginners
Published: 2022-04-14 07:40:50

Perl can check the syntax using "-c" option.

```
perl -c script.pl
```

Are you surprised to hear that Perl has syntax checking?

This means Perl is not interpreter language line by line. 

Young people maybe don't know this because there is not the correct knowledge of Perl and appropriate interest to Perl.
Unit testing in go with MySQL
Tags: mysql, unity3d, programming, go
Published: 2022-04-14 07:25:04


Tests are stories we tell the next generation of programmers on a project. — Roy osherove

Unit test is the first most essential part of software testing, which focuses on small elements of software design.

Always put testing as a priority in the queue. After all, QUALITY is everyone’s responsibility.

Suppose you are developing a [music app](https://dev.to/canopassoftware/ios-dev-import-music-from-users-device-using-document-picker-53aj), your APIs are in [golang](https://blog.canopas.com/golang-gorm-with-mysql-and-gin-ab876f406244) and you want to test those APIs.

I have divided the process of writing the unit test into some small parts for easy understanding.

For a step by step guide, [check out the original post](https://blog.canopas.com/unit-testing-in-go-with-mysql-8db449d86722).
Connecting to machine without static IP
Tags: ddns, ssh, sshd, remote
Published: 2022-04-14 07:20:27

So I needed to access a computer without static IP from internet. Here's the way to accomplish it.

1. Get [no.ip](https://www.noip.com/) ddns account. Create a ddns host and preferably create `AAAA` record which allows both IPv4 and IPv6.
2. Hopefully your router has ddns support. Thankfully [google fiber](https://fiber.google.com) had it. It will be buried under "advanced" but most likely it should be there. Goto step 4.
3. If the router doesn't have ddns support, you can install the [ddns client](https://github.com/ddclient/ddclient), don't install [no.ip client](https://askubuntu.com/a/459213/66023). Configure it using [this article](https://medium.com/@nobuto_m/minimal-dynamic-dns-configuration-for-no-ip-com-with-ddclient-cb7c038a74be). Note, ubuntu package installation will ask most of these questions.
4. Add the no.ip configurations in your router. By this point you should reach your router from outside world but not actually reach your machine.
5. In router configuration, find a way to forward a port. Here we will forward ssh port to outside.

## Advanced/Anxious steps ##

1. In `sshd.conf` add an additional port to run ssh server on.

    ```conf
    port 22
    port 10101
    ```

2. We will use port 22 from connecting to the computer from within network but when we want to access computer from outside of network we will use `10101` port instead. You might ask why not just use router to do this redirection from 22 to 10101 or other port number? Read on :).

3. Create [duo account](https://duo.com/). Setup your machine to use [duo](https://duo.com/docs/duounix). Steps differ if you are targeting unix/windows. You can instead use [google authenticator](https://ubuntu.com/tutorials/configure-ssh-2fa#1-overview) but I am not fan of adding 6 digits for each login. AFAIK Microsoft authenticator doesn't support non-windows systems otherwise Microsoft Authenticator also uses passwordless 1 tap authentication.

4. Now use [Match](https://man7.org/linux/man-pages/man5/sshd_config.5.html) clause in sshd_config to make sure all external accesses are guarded by duo_login. This tells sshd that if connection is coming from the port 10101, make sure public key matches and duo_login is satisfied and password authentication is not allowed.

    ```conf
    # sshd.conf
    ...
    # put at the end of file
    Match LocalPort 10101
    AuthenticationMethods "publickey,keyboard-interactive"
    PasswordAuthentication no
    ```
5. Restart sshd service

    ```bash
    service sshd restart
    ```

Hope you find it useful!
✌
Simple Form
Tags: rails
Published: 2022-04-14 07:18:32

Simple form is one of the tools in ruby on rails that helps in simplify form making it much more easier to code.

## Without simple form
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxlks22mmzr76m9lrq7w.PNG)

## With simple form

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qivm950o4rcdyu7uawa.PNG)

It basically cut half of your code and the form doesn't look bad at all. However, it is much more easier to handle complex form with form helper rather than using simple form as it is much easier to see and understand your code.

You could also integrate the form with bootstrap to make the form much more good looking!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubkj7tcjqy8bf2ki0tfi.png)

Learn more about simple form:
1) https://github.com/heartcombo/simple_form
2) https://www.youtube.com/watch?v=NfZk74R2Oi4&t=5s
NodeJS vs Golang | Choose the Best Backend for your project
Tags: nodejsvsgolang, bestbackend, choosegolangornodejs
Published: 2022-04-14 07:14:41

This is an interesting comparison between the two best technologies in the backend development sector. NodeJS is an effective backend framework backed by JavaScript support libraries whereas Golang is an emerging programming language backed by Python and C++. 

Golang is has gained a great importance in the business world in no time by offering great features and functionalities that helps in developing quality solutions. Talking about NodeJS, it is an all-round backend technology which has brought a great pace and ease in the development process. This comparison will add value to your knowledge and would help you choose the best one for your backend development purpose. Discover the Full Article- https://www.andlearning.org/nodejs-vs-golang-which-is-best-for-backend/
Kumpulan Tulisan Penadiksi
Tags: penadiksi, writing, menulis
Published: 2022-04-14 07:01:10

1. Cerpen Sepotong Daging ([Read](https://www.penadiksi.com/2021/08/cerpen-sepotong-daging-nurhalimah.html))
2. Membangun mental penulis ([Read](https://www.penadiksi.com/2022/01/membangun-mental-penulis-kelas-menulis.html))
3. Setan Sang Penyesat ([Read](https://www.penadiksi.com/2021/01/setan-sang-penyesat-materi-khutbah-jumat.html))
4. Bahasa, Ejaan, Huruf ([Read](https://www.penadiksi.com/2022/01/bahasa-ejaan-huruf-dan-kata-baku-materi.html))
5. Imbuhan Dalam Penulisan ([Read](https://www.penadiksi.com/2022/01/imbuhan-dalam-penulisan-materi-3-kelas.html))
6. Kategori kata dan klitik ([Read](https://www.penadiksi.com/2022/01/kategori-kata-dan-klitik-materi-4-kelas.html))
7. Tips memilih judul ([Read](https://www.penadiksi.com/2022/03/tips-memilih-judul-dan-menyelipkan.html))
8. Said bin Amir Al Jumahi ([Read](https://www.penadiksi.com/2022/02/said-bin-amir-al-jumahi-sahabat-yang-membeli-akhirat-dengan-dunia.html))
9. Krisis metode pembelajaran ([Read](https://www.penadiksi.com/2022/03/krisis-metode-pembelajaran-hari-ini.html))
10. Seputar tema ([Read](https://www.penadiksi.com/2022/03/seputar-tema-dan-writers-block-materi-8.html))
NgRx Tips and Tricks
Tags: angular, ngrx, learning
Published: 2022-04-14 06:23:52

---
title: NgRx Tips and Tricks
published: true
description: Learning how to use NgRx in the right way
tags: angular, ngrx, learning
cover_image: https://raw.githubusercontent.com/StacyCash/blog-posts/main/angular/ngrx-tips-and-tricks/cover-image.jpg
---
In my day job we use Angular to build our front end application. When we started to rewrite it in 2020 we decided to use NgRx to manage our state. Great choice, and it's made our lives so much better.

But... Are we using it right?

I had the pleasure of hosting a wonderful session by [Marko Stanimirović](https://twitter.com/MarkoStDev) last week at [Angular Global Summit'22](https://geekle.us/angular).

There are things in here which I wish I knew earlier - and will be looking to see if we can make our app even better! One of the first things that I am going to start to look at is the way that we use actions!

If you use NgRx then I can't recommend this talk enough! You can find a version of the talk [here](https://www.youtube.com/watch?v=FFXOrWDuZks&t=7342s)!
How to make a full page transition in React?
Tags: react, javascript, webdev, programming
Published: 2022-04-14 06:14:31

Hi devs!

Today I need your help to create a cool full page transition, components by components, in React. 

Here a example : https://cryptogang.agency/

As you can see, as soon as you scroll down or up, the components appear and disappear. I think we have to play with event listener but my brain can't find any logic.

Thanks in advance!
Angular Routing #4
Tags: angular, typescript, webdev, uiweekly
Published: 2022-04-14 05:45:24

## Angular Route Guards
We use the Angular Guards to control, whether the user can navigate to or away from the current route.

Uses of  Angular Route Guards

- To Confirm the navigational operation
- Asking whether to save before moving away from a view
- Allow access to certain parts of the application to specific users
- Validating the route parameters before navigating to the route
- Fetching some data before you display the component.

Types of Route Guards

- CanActivate - If a Route can be accessed or not?
- CanDeactivate - If Current Route can be leaved or not?
- Resolve - Load or perform some operations before entering Route
- CanLoad - This guard works similar to CanActivate guard with one difference. The CanActivate guard prevents a particular route being accessed. The CanLoad prevents entire lazy loaded module from being downloaded, Hence protecting all the routes within that module.
- CanActivateChild - This guard determines whether a child route can be activated. This guard is very similar to CanActivateGuard. We apply this guard to the parent route. The Angular invokes this guard whenever the user tries to navigate to any of its child route.

## Implementing RouteGuards
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
 
@Injectable()
`export class ProductGuardService implements CanActivate {
 
  constructor(private _router:Router ) {      
  }      
 
  canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): boolean {
      console.log("canActivate");      //return true    
     //remove comments to return true              
     alert('You are not allowed to view this page. You are redirected to Home Page'); 
     this._router.navigate(["home"]);             
     return false;     
} }`
Python filter() Method Explained
Tags: python, beginners
Published: 2022-04-14 05:40:40

Filtering a list in Python is definitely possible using things such as loops, for loops, or even list/set/dictionary comprehension. However, Python provides the `filter()` method that is a more clean and efficient way to filter an iterable, much more efficient when it's a large dataset.

The `filter()` method takes two arguments: 
- a function object
- an iterable or multiple iterable

The function passed to the `filter()` method will perform some action on each element of the iterable passed as an argument. The filter function will return to all values from the iterable for which the return condition in the function argument is `True`.

In the following example, we want to return the values from the list that are equal to `banana`.

### Example

```python
>>> fruits = ["lemon", "orange", "banana"]
>>> def check_banana(fruit):
...         return fruit == "banana"
...
>>> new_fruits = filter(check_banana, fruits)
<filter object at 0x7f080634b400>
>>> new_fruits = list(new_fruits)
>>> new_fruits
['banana']
```

Notice that you have to convert the returned filter object into an iterable so you can work with it easily.

It's also possible to use `filter()` with lambda functions. 

```python
>>> new_fruits = filter(lambda fruit: fruit == "banana", fruits)
>>> new_fruits = list(new_fruits)
>>> new_fruits
['banana']
```

You can learn more about the method [here](https://docs.python.org/3/library/functions.html#filter).

*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
Testing library awaiting queries
Tags: testing
Published: 2022-04-14 05:29:39

So far, we have mainly used [direct queries to find elements](https://daily-dev-tips.com/posts/testing-library-query-selectors/).
Sometimes you could have a query that we need to be waited for.

Some examples might be:

- Element fades in
- Element only shows after user interaction
- Element might disappear after a user action

## Using the findBy queries

The easiest way to deal with this is using the findBy queries.
They are a combination of `getBy` and `waitFor`.

Let's say we have some user interaction on a button.
Once we click, we need to wait for the element to re-render with the new text.

```js
const button = screen.getByRole('button');
button.click();
await screen.findByText('Clicked once');
button.click();
await screen.findByText('Clicked twice');
```

As you can see, the two latter ones have a check based on the awaiting promise.

Remember that the testing library is only the selector helper, so we still need to use some testing library, Jest, to check if this is true.

```js
const button = screen.getByRole('button');
button.click();
expect(await screen.findByText('Clicked once')).toBeInTheDocument();
button.click();
expect(await screen.findByText('Clicked twice')).toBeInTheDocument();
```

## Using waitFor

Sometimes we cannot leverage `findBy` queries, maybe because we need to await some function to execute.

Or perhaps we have to await some time to pass before we can do the next thing.

This is precisely where the `waitFor` function comes in handy. We can wrap some code with this.
For example, wrapping a promise with `waitFor` will wait until the promise throws a rejection.

```js
await waitFor(() => {
  expect(mockCall).toHaveBeenCalledTimes(1);
});
```

In the above example, we wait for an API to be called, and only once it's called once will we pass this step.

We can also pass some options to this `waitFor`:

- `container`: The HTML element, by default, the global document
- `timeout`: Default 1000ms
- `interval`: Default 50ms
- `onTimeout`: Prints the container and error in the console, but you can override this
- `mutationObserverOptions`: The actual behavior that checks for changes

## Using the waitForElementToBeRemoved

As we now have seen the `waitFor` in action, we can also leverage `waitForElementToBeRemoved`.

As the name suggests, it can wait for elements to be removed.
It has the same call signature and options as `waitFor`.

It can take one, or multiple elements will wait to be removed.

```js
waitForElementToBeRemoved(document.queryByRole('button')).then(() =>
  console.log('Button no longer in DOM')
);
```

Or in the case of multiple:

```js
waitForElementToBeRemoved(document.queryAllByRole('img')).then(() =>
  console.log('All images are gone')
);
```

And that's how we can wait for elements to show up, be modified, or be removed from the DOM.

### 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)