teleren/devto huggingface dataset:
Statements in Programming
Tags: javascript, webdev, beginners, programming
Published: 2022-07-30 18:42:22

**What are Statements?**
A statement is the smallest unit in an imperative programming language. It is formed by a sequence of one or more statement. A statement will have internal components called expression.

A definition is different from a statement in that a statement contains executable code while definitions declare an identifier.

**Types of Statements**
**1. Simple Statements**
•assignment: A:= A+1
•call: CLEARSCREEN()
•return: return 1;
•goto: goto 2
•assertion: assert(ptr != NULL);

**2. Compound Statements**
•block
•if-statement
•switch-statement
•while-loop
•do-loop
•for-loop

**3. Assignments Statements**
An assignment statement sets the value or changes the value stored in the storage locations denoted by a variable name.

Thank you for reading this article.
Programming and Properties of Programming Languages
Tags: programming, webdev, productivity, codenewbie
Published: 2022-07-30 18:31:26

**What is Programming?**
This is the process of writing, testing, debugging and maintenance of the source code of computer programs. It’s purpose is to create a program which will set instructions which that the computer uses to perform specific functions to to exhibit desired behaviors.

**Properties of Programming Languages**

**1. Reliability**
A Programming Language in order to be classified as a Programming Language has to be reliable. A fundamental calculation must be give the sameness answer all the time.

**2. Robustness**
A Programming Language must be robust, it must be able to execute instructions without collapsing.

**3. Usability**
A Programming Language must be usable. Programmers must Ben able to use it for whatever purpose it is meant for without being overly difficult to use.

**4. Portability**
Portability is another great Properties of a Programming Language. A Programming Language must have an engine which does not take up all the resources of the computer only to execute few instructions.

**5. Maintainability**
The Programming Language must be designed in such a way that is maintainable. It should be relatively easy to debug.

Thank you for reading this article!
Running apache flink locally mac m1
Published: 2022-07-30 18:17:00

I have an intel mac m1 air and I want to install and run apache flink locally. Instead of installing correcrt jdk version and flink version, etc. I used docker.

Step 1. Create docker network if it doesn't exist
todo: check if it exists
`docker network create flink-network`

Step 2. Set env variable in terminal 1
`FLINK_PROPERTIES="jobmanager.rpc.address: jobmanager"`

Step 3. Launch JobManager in terminal 1
```
 docker run \
    --rm \
    --name=jobmanager \
    --network flink-network \
    --publish 8081:8081 \
    --env FLINK_PROPERTIES="${FLINK_PROPERTIES}" \
    flink:latest jobmanager
```
Step 4. Set env variable in terminal 2
`FLINK_PROPERTIES="jobmanager.rpc.address: jobmanager"`

Step 5. Launch TaskManager in terminal 2
```
docker run \
    --rm \
    --name=taskmanager \
    --network flink-network \
    --env FLINK_PROPERTIES="${FLINK_PROPERTIES}" \
    flink:latest taskmanager
```

Step 6. Open localhost UI
`http://localhost:8081/#/overview`

Step 7. Submit a job
`./bin/flink run examples/streaming/WordCount.jar`
This step assumes you have downloaded flink, we are not using their runtime execution, but just their examples and submitting jobs.

Step 8. Install maven (mvn), this is needed for scaffolding some stuff later (not sure about this, todo)
`brew install maven`

Step 9. Scaffold sample project
```
 mvn archetype:generate \
    -DarchetypeGroupId=org.apache.flink \
    -DarchetypeArtifactId=flink-walkthrough-datastream-java \
    -DarchetypeVersion=1.16-SNAPSHOT \
    -DgroupId=frauddetection \
    -DartifactId=frauddetection \
    -Dversion=0.1 \
    -Dpackage=spendreport \
    -DinteractiveMode=false
```
My Learnings from API101 Session
Tags: postmanstudent, postmanapi, api101
Published: 2022-07-30 17:27:00

So today in the morning, I attended an amazing session API101 hosted by Postman Student Expert, [_Piyusha Patil_](https://www.linkedin.com/in/piyusha-patil-2251b3205/) and Postman Student Leader, [Rohan Kulkarni](https://www.linkedin.com/in/rohan-k-2502/).

**Here's a quick overview of the session!**

- The session began with an introduction by postman student leaders, followed by a presentation intended to familiarize attendees with API concepts, what's an API, why is to so necessary these days that we have an API for everything. 

- The session mainly focused on the basics of API why should one use it, how it works, and how we can use it most efficiently using Postman. I had literally no idea about API before but through their nicest explanation, I sailed through. 
- After all that, comes the main highlight of the session, doing hands on training with them. We built our own Books database through Postman API. We made our own book collection using Get, Post, Put, Delete request and cherry on top, Postman's incredible UI makes it a cake walk.

Hosts concluded the session by explaining the perks of joining Postman Student Community.

Overall I really enjoyed the session, learning new stuff and more importantly implementing them there on. The hosts were extremely co-operative and interactive which made this session a success.

Cheers Postman!!

**Some Highlights from the session**


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


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk61b97squj1ud6gc30u.png)
Quick Eye Tips for Programmers
Tags: eye, health, programming, coders
Published: 2022-07-30 17:25:26

Staring at the computer all day exposes you to harmful blue light.
Your eyes are poor in blocking it out and lead to eye strain.
It is essential to take care of your eyes and not strain them.

It can be done by following 20–20–20 rule-
take a 20-second break every 20 minutes and look at an object 20 feet away,

Moreover you can blink about 15–20 times a minute. You can also use a
computer glass which blocks the blue rays from digital screens.

As a programmer, you are naturally exposed to the harmful UV
blue light, and it is important to take care of your eyes from the beginning.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur2c8jj9kqjyfh6dacd9.png)
Nx + Pnpm + Netlify
Tags: pnpm, netlify, nx
Published: 2022-08-01 14:05:39

---
title: Nx + Pnpm + Netlify
published: true
date: 2022-07-30 17:02:35 UTC
tags: pnpm,netlify,nx
canonical_url: https://medium.com/@redin.gaetan/nx-pnpm-netlify-c6d4d8982576
---

How to deploy an application from a mono repo

### Context

Hey, you know when you want to develop an app or a website, there is a time to deploy it.

For several months, I only work with Nx workspace. No need, to explain here all the benefits Nx can bring you but I invit you to visit the [web site](https://nx.dev/). In short, it allows you to handle several apps and libs inside the same workspace. You can develop Angular, React and Node projects still in the same workspace.

Last week, I decided to use [pnpm](https://pnpm.io/) instead of [npm](https://www.npmjs.com/). I find it so faster. There is no word to define the pleasure to make an install with it.

Today, I want to deploy one of my application thanks to [Netlify](https://www.netlify.com/). I heard good things about it.

But, netlify does not work natively with pnpm and there some tricks to know for mono repos. I will try to help you to do this. To accomplish this, I suppose you already have a mono repo with an app to deploy and you have create an account on [netlify](https://www.netlify.com/).

### The steps

I guess, you have an architecture as following:

```
- apps
    - my-first-app
    - my-second-app
    - ...
- libs
```

Now, I suppose you want to deploy _my-first-app._

First, you need to add a script into your package.

```
// package.json
"scripts": {
    "build:my-first-app": "nx build my-first-app --outputPath=apps/my-first-app/dist",
}
```

This will corresponds to the standard dist folder for netlify. This needs to be merged on your main branch (or the branch you decide to deploy).

So go to netlify [web site](https://app.netlify.com/) and go to the deploy tab link:

![](https://cdn-images-1.medium.com/max/1024/1*E0w8Tv__I7EeacZmRokoPw.png)

Go to deploy settings:

![](https://cdn-images-1.medium.com/max/1024/1*ah8MZrw4l5wycSvCeeoGyA.png)

Go to Build settings and click on Edit settings:

![](https://cdn-images-1.medium.com/max/1024/1*O1c8iuyQaikUnj7-IwpArA.png)

Fill with the information like below:

![](https://cdn-images-1.medium.com/max/1024/1*TLajE7sOYRqvPAqtm9hEDw.png)

Put this in the Build command field:

```
pnpm run build:my-first-app || ( npm install pnpm && pnpm run build:my-first-app )
```

Click on save. Et voilà (I’m french I can say that too). Trigger a new deploy and it will be ok.

I hope this could help someone.

Thanks for reading.

### Learn more

- [Test your Storybook](https://dev.to/gaetanrdn/test-your-storybook-5amh)
- [Install Jest for Angular](https://dev.to/gaetanrdn/jest-and-angular-install-fg3)
- [TypeScript Function Overloads](https://dev.to/gaetanrdn/typescript-function-overloads-1eeo)
- [Angular for everyone: All about it](https://medium.com/@redin.gaetan/angular-for-every-one-table-of-contents-d24232940dd4)
How to Self-Teach CS
Published: 2022-07-30 16:56:23

There are two types of programmer:

1. Those who understand what's happening under the hood.
2. Those who just get by because they're familiar with a few high-level tools.

Don't know about you, but I do _not_ want to be a _code monkey._

If you want to evolve too, you'll have to self-teach CS.

I summarized the 9 fundamental CS topics every practicing software engineer should know:

{% embed https://www.youtube.com/watch?v=jwpLMo_2qts %}
A Bit About Me…
Tags: beginners, programming, cloud, azure
Published: 2022-07-30 16:36:00

Hello Dear Reader! Welcome to my Blog!

A bit about me: I am a Software Engineer Trainee currently learning Microsoft Azure Cloud Computing and Python. I am also knowledgeable of JavaScript, HTML and CSS, as such I am career switching, pivoting and piroueeting into the world of Tech! 🩰

<img width="100%" style="width:100%" src="https://media.giphy.com/media/TRHmYeW5KOFG/giphy.gif">

Its an exciting place to be! Think James Webb telescope and the beautiful breath arresting photos it was able to capture from space. With that many galaxies, there just may be life out there after all! 👽 😉 Think the metaverse where people will be able to create their own worlds, universes and multiverses (yes I’m a Marvel fan! How could you not be?! 🎞 ) just like they did on the holideck in Star-Trek!!!

Thats what I love about tech — if you can conceive it you can eventually create it! We are now practically living in the future envisioned by sci-fi movies! Thats the great thing about interdisciplinary collaboration and the cross fertilisation of ideas! So many great innovations are rescued from the confines of our imaginations and brought screamingly to life !!!

Pleased to meet you! Welcome to my blog — welcome to my world! You can also connect with me here: [linktr.ee/marshacastello](Https://linktr.ee/marshacastello)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4cdrlf95f2u4xxoa4nh.jpg)
How to run commands in a sub-shell and suppress output in the background that's ZSH & shellcheck compatible
Tags: bash, zsh
Published: 2022-07-30 16:32:00

**TLDR:** This works:

```bash
( (
	bar
	foo

) 1>&- 2>&- & )
```

So, basically, what this does is run a sub-shell then bury your commands in another sub-shell and closes all STDOUT being reported and is sent to the background. I honestly am still not sure how this works!

---------

## &!

Because I use [shellcheck](https://www.shellcheck.net) with my zsh scripts the following flagged an unknown error in shellcheck (_because shellcheck does not support zsh at the moment_) and it wouldn't lint the file:

```bash
() (

	foo
	bar

) &> /dev/null &!
```

Specifically it was the `&!` that wasn't working (_but is a valid ZSH directive to suppress background output_). I would always get job output at the least using most of the suggestions e.g. on Stack Exchange. So, I went down a Googling-rabbit-hole with no answers, until I landed on:

&rarr; [https://www.baeldung.com/linux/run-multiple-commands-in-background](https://www.baeldung.com/linux/run-multiple-commands-in-background)

Which I then had to grok the horrible formatting and came up with the above that is Bash compatible to run commands in the background with no output!

🙌
Laravel 9 - Check Multiple Permissions at Once
Tags: php, webdev, laravel, programming
Published: 2022-07-30 16:21:00


In addition to **`@can`** Blade directive, did you know you can check multiple permissions at once with **`@canany`** directive?

```
@canany(['update', 'view', 'delete'], $post)
    // This user can update, view, or delete
@elsecanany(['create'], \App\Example::class)
    // This user can create
@endcanany
```
Angular Error path.resolve
Published: 2022-07-30 16:16:00

Hi All,
       I am getting error when i run angular locally in localhost:4200.The page is displaying blank and I am getting error
Uncaught TypeError:path.resolve is not  a function.Please help
The error is at path
node_modules/dotenv/lib/main.js
in the line
let dotenvPath = path.resolve(process.cwd(), '.
Let me know the solution.
Thanks
Build a Chat service using GoLang and WebAssembly (part 4)
Tags: webassembly, go, chat, websocket
Published: 2022-07-30 15:32:00

ok, for communicating with server we need a Websocket Server - i prefer we develop our WebSocket server-side with nodejs.

our source code => [Github Link](https://github.com/taherfattahi/golangChatWebAssembly)

**What is WebSocket?**
**Websocket** is a simple to use, fast and tested WebSocket client and server implementation.

The Websocket specification defines an API establishing a connection between a web browser and server. WebSocket is used for creating real-time games, chat applications, displaying stock data, etc.

**NodeJS and WebSocket**
**NodeJS** is a **JavaScript** runtime built on **Chrome’s V8 JavaScript engine**. It is easy to build a **WebSocket** server implementation with NodeJS.

Traditional **HTTP** is dependent on client requests, you have to send your request to the server and then get a response from it but in **WebSocket**, you can send data to the client from the server directly which we call bidirectionally.

**_Let me introduce you to Websockets:_**  An event-driven, web-friendly alternative to **HTTP**. Websockets don't require a client request to fetch data from the server every time.

**Building a WebSocket Server With NodeJS**
As prerequisites, you should have **Nodejs** and **NPM** Installed in your system. If you don’t have it, download and install it from here: https://nodejs.org/en/download/

1) Once you are ready with **NodeJs**, open a terminal and type the following commands:

```
mkdir webSocketServer && cd webSocketServer 
```

2) Create your nodejs project environment:

```
npm init -y
```

3) Next, run the following command to install the **ws** library as a dependency:

```
npm install ws
```

4) Create a javascript file for example “webSocketServer.js” and paste the following code for creating a web server:

```
// Importing the required modules
const WebSocketServer = require('ws');
 
// Creating a new websocket server
const wss = new WebSocketServer.Server({ port: 8080 })
 
// Creating connection using websocket
wss.on("connection", ws => {
    console.log("new client connected");
    // sending message
    ws.on("message", data => {
        console.log(`Client has sent us: ${data}`)
    });
    // handling what to do when clients disconnects from server
    ws.on("close", () => {
        console.log("the client has connected");
    });
    // handling client connection error
    ws.onerror = function () {
        console.log("Some Error occurred")
    }
});
console.log("The WebSocket server is running on port 8080");
```

This code will create a basic WebSocket Server for you and you can provide any port you want while creating the WebSocket server.

5) For testing it, open up a terminal and type:

```
node webSocketServer.js
```

Reference:
1) [piesocket.com](https://www.piesocket.com/blog/nodejs-websocket#:~:text=What%20is%20WebSocket%3F,%2C%20displaying%20stock%20data%2C%20etc.)

---
In part 5 we are going to write our WebSocket client-side service with Golang WebAssembly and connect to WebSocket nodejs server-side😉
Top 3 Ways to Center a DIV with CSS 🚀
Published: 2022-07-30 15:31:18

{% youtube 4NBpuGAfW5A %}

***

🛴 Follow me for more on:
YouTube:        https://bit.ly/3oBQbc0
Facebook:       https://bit.ly/3cp2S5W
Instagram[New]: https://bit.ly/3Ihh2EB

***
Restricted Access to Laravel Controller
Tags: laravel, php, web, programming
Published: 2022-07-30 15:28:40

In web apps, we need to restrict users from certain operations or functions often. Most **Laravel** developers use auth middleware in route.php or api.php files. We can also use the controller constructor to assign the _middleware_. It is more convenient as it restricts the middleware to only specific methods on a _controller_ class. We can do this by following way:
`<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    //
    public function __cinstruct()
    {
        # code...
        return $this->middleware('auth');
    }
    public function index()
    {
        # code...
        return view('home.index');
    }
}
`

If you want to restrict a specific function, you can do this with _only()_ method. Let's say, I need to apply my auth middleware for index method. Then the code will be: 

`<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    //
    public function __cinstruct()
    {
        # code...
        return $this->middleware('auth')->only(['index']);
    }
    public function index()
    {
        # code...
        return view('home.index');
    }
}
`

We can also apply restrictions for all the methods except one. So if I want the middleware to be applicable for all functions except index, the code will be:

`<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    //
    public function __cinstruct()
    {
        # code...
        return $this->middleware('auth')->except(['index']);
    }
    public function index()
    {
        # code...
        return view('home.index');
    }
}
`

Happy Coding!!!
Migrating Next.js plugins from next-compose-plugins
Tags: nextjs, plugins, guide
Published: 2022-07-31 11:52:10

---
title: Migrating Next.js plugins from next-compose-plugins
published: true
date: 2022-07-30 15:25:03 UTC
tags: nextjs, plugins, guide
canonical_url: https://krzysztofzuraw.com/2022/migrating-next-js-plugins-from-next-compose-plugins/
---

I recently updated Next.js to version 12.2.3 and I found out that [next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins) do not work anymore. After peek at GitHub [issue](https://github.com/hashicorp/next-mdx-enhanced/issues/18#issuecomment-859167393) and I was able to copy and paste working solution:

```js
/**
 * @type {import('next').NextConfig}
 */
module.exports = () => {
  const plugins = [withTM, withVanillaExtract, withSentryConfig];
  return plugins.reduce((acc, next) => next(acc), {
    i18n: {
      locales: ["en-US", "nl-BE", "pl-PL"],
      defaultLocale: "en-US",
    },
  });
};
```

It worked fine but I wanted to pass argument to `withSentryConfig` - i turns out that I need to pass it as another argument to `next` function in reduce:

```js
return plugins.reduce((acc, next) => {
  if (next.name === 'withSentryConfig') {
    return next(acc, {silent: true });
  }

  return next(acc);
}, {
  // the rest of next.js config
});
```

## Changelog

1. Update the last snippet after feedback from [Miguel Leite
   ](https://dev.to/miguelacleite/comment/21g7l)
How to reduce cognitive complexity of a function?
Tags: javascript, typescript, codequality, codereview
Published: 2022-07-30 14:40:00

The cognitive complexity of a function increases if:
1. There are multiple nested structures (like “if else” conditions)

2. If there is flow-breaking code (like “for” loops)

The cognitive complexity of JavaScript/TypeScript can be assessed using the **SonarLint** extension in Visual Studio Code.

In order to reduce the cognitive complexity of a function, the developer has to simplify the code using shorthand for collapsing multiple statements into one.

## Ways to reduce the Cognitive Complexity

**1. Move repeated Code/nested if else to a separate function**
In order to simplify nest if else conditions, we can move the repeated code to a separate function. We can also move the nest conditions to a separate function.

```
complexFunction(){
if(condition1){
     if(condition2){
     }
     else{
     }
  }
else{

    }
}

//We can move the nest if to a separate function
complexFunction(){
if(condition1){
    this.anotherFunction()
  }
else{

    }
}

anotherFunction(){
 if(condition2){
     }
     else{
     }
}
```

**2. Use Ternary Operator**
Use ternary operator instead of if-else loop if you have 2 conditions.

```
checkCondition(){
if(condition){
      return true 
    }
else{
      return false
    }
}

//Ternary operator for the above if else condition

checkCondition(){
      return condition? true: false
}
```

**3. Avoid if-else loops for always truthy or falsy conditions**
This is one of the mistakes a lot of newbie developers make. Please avoid using if else loops for statements that always return a constant boolean value (true or false).

**4. Use Array.includes() instead of multiple ‘or’ conditions in if else loops**
Convert all the conditions to a array and then use `.includes()`.

```
//condition with multiple 'or' conditions
if(fruit === 'apple' || fruit === 'mango'){}

//convert to array to use includes
const fruitList = ['apple', 'mango']
if(fruitList.includes(fruit)){}
```

**5. Optional Chaining**
We use `?.` to avoid error in a property located deep in a chain of objects instead of if check.

```
const car= {
  manufacturer: 'Ford',
  model: {
    year: 2012,
    color: 'Red'
  }
};

const carName = car.specs.warranty; 
// this will break the code as specs is undefined

const carName = car.specs?.warranty; 
// this will output undefined
```

**6. Setting default value using selector operator**
In order to set a default value of a variable, we can use the selector operator `||`.

```
 variable = variable || 'default value'
 // this will return default value if variable is false 
   (null or undefined). 
```

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

Follow us on [Instagram ](https://www.instagram.com/commitandpush/)