teleren/devto huggingface dataset:
How the typeof Operator works in TypeScript
Tags: javascript, typescript, webdev, webdesign
Published: 2022-07-02 13:38:47

In Javascript, we already have a vanilla `typeof` operator which can be used to find the type of anything:
```javascript
let x = "hello world";
console.log(typeof x); // Returns "string"
```

With **TypeScript** being a strongly typed language, `typeof` takes on a slightly different meaning. Although for all the [basic Javascript types](https://fjolt.com/article/javascript-types) `typeof` functionality remains the same, it also gets some additional, useful features. Let's look at how `typeof` works in TypeScript.

## How typeof works in TypeScript
The most basic application of `typeof` in TypeScript is the creation of new basic types. If we are defining our own [custom types in TypeScript](https://fjolt.com/article/typescript-creating-custom-types), we can use `typeof` to copy the type of an existing item. A simple example where we take a `number`, and create a custom type off the back of it looks like this: 
```typescript
let x = 1234;

// Custom type aNumber
type aNumber = typeof x;
```

This can be useful if variable types may vary, and we want to match a specific variable. It can also be useful when creating custom types that have many properties where the properties should match existing variable types:
```typescript
let x = 1234;
let y = "string";

// Custom type aNumber
type myType = {
    name: typeof y,
    age: typeof x,
}
```

As you can see, `typeof` basically gives us a way to differentiate between the **value** and **type** of an existing object. It can also be combined with `ReturnType` quite intuitively, to get the returned value of a function, to ensure type consistency when expecting values from functions:
```typescript
function myFunction(x: string, y: string) {
    return { 
        firstName: x,
        lastName: y
    }
}
type nameType = ReturnType<typeof myFunction>;
```

[I have covered ReturnType in more detail in this article](https://fjolt.com/article/typescript-returntype-utility-type), so check that out if you want to learn more. Similarly, [you can learn more about TypeScript here](https://fjolt.com/category/typescript).
Code Smell 146 - Getter Comments
Tags: javascript, webdev, beginners, programming
Published: 2022-07-02 13:33:26

*Comments are a code Smell. Getters are another code smell. Guess what?*

> TL;DR: Don't use getters. Don't comment getters

# Problems

- Comment Abusers

- Readability

- Getters

# Solutions

1. Remove getter comments

2. Remove getters

# Context

A few decades ago, we used to comment on every method. Even trivial ones

Comment should describe only a critical design decision.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/29cd4411aa32467291998e467e6ef503)
```solidity
pragma solidity >=0.5.0 <0.9.0;

contract Property{
    int private price;   

    function getPrice() public view returns(int){           
           /* returns the Price  */
        return price;
    }
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/bf1ab1d44b078d797796d19554032591)
```solidity
pragma solidity >=0.5.0 <0.9.0;

contract Property{
    int public _price;   

    function price() public view returns(int){        
        return _price;
    }
}
```

# Detection

[X] Semi-Automatic

We can detect if a method is a getter and has a comment. 

# Exceptions

The function needs a comment, that is accidentally a getter and the comment is related to a design decision

# Tags

- Comments

# Conclusion

Don't comment getters. 

They add no real value and bloat your code.

# Relations

{% post https://dev.to/mcsee/code-smell-05-comment-abusers-2ba5 %}

{% post https://dev.to/mcsee/code-smell-68-getters-o12 %}

{% post https://dev.to/mcsee/code-smell-01-anemic-models-4dg2 %}

# Credits

Photo by Reimond de Zuñiga on Unsplash

* * *

> Code should be remarkably expressive to avoid most of the comments. There'll be a few exceptions, but we should see comments as a 'failure of expression' until proven wrong.

_Robert Martin_

{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
What a software developer should know?
Tags: webdev, beginners, programming
Published: 2022-07-02 13:28:41

What is CPU?
What is ram?
What is hard disk?
What is GPU?
What is thread?
What is the event?
What are SOLID principles?
What is OOP?
What are Architectural Styles?
What are Architectural Patterns?
What are Design Patterns?
What is MVC?
What is an IP?
What is a port?
Establishing a socket connection between two devices (telnet)
What is TCP/IP?
What is HTTP?
What is the URL?
What is DNS?
What is a server?
What is a client?
What is a browser?
How does the browser work?
What is HTML?
What is XML?
What is CSS?
What is JavaScript?
What is AJAX?
What is DOM?
What is Shadow Dom?
What is Virtual Dom?
What is DOM manipulation?
What is cURL?
What is the Operating System, what are the differences?
What is Unix?
What is GNU/Linux?
What is a terminal?
What are terminal commands?
What is localhost?
How to write code on server side (localhost)?
What is PHP? (file processing via php interpreter)
What is Apache/Nginx?
What is form? What are HTTP methods?
What is CRUD?
What is a database? What is SQL?
What is Session?
What is a cookie?
What is CORS?
What is RESTful?
What is GraphQL?
What is JSON?
What is RegExp?
What is debugging?
What is an IDE?
What is an editor?
What is modular code?
What is FTP?
What is version control?
What is git?
What is GitHub?
What is a package manager?
What is NPM and Composer?
What is framework?
What is Laravel (or a simpler MVC lib)?
What is Vue/React/Angular?
What is MVVM?
What is SPA?
What is a router?
What is State Management?
What is a domain, how to get it?
How is the domain forwarded? What is NS?
What is a server, how to get it?
What is hosting?
What is SSH?
What is Docker?
What is Kubernates?
What is serverless architecture?
What is Cloud Computing?
House Robber leetcode problem
Tags: dp
Published: 2022-07-02 13:28:33

Question : 
You are a professional robber planning to rob houses along a street. Each house has a certain amount of money stashed, the only constraint stopping you from robbing each of them is that adjacent houses have security systems connected and it will automatically contact the police if two adjacent houses were broken into on the same night.

Given an integer array nums representing the amount of money of each house, return the maximum amount of money you can rob tonight without alerting the police.
Example 1:

Input: nums = [1,2,3,1]
Output: 4
Explanation: Rob house 1 (money = 1) and then rob house 3 (money = 3).
Total amount you can rob = 1 + 3 = 4.

```java
class Solution {
    public int rob(int[] nums) {
        //we can solve it using tabulation dp with memory optimization
        //tabulation is bottom up approach 
        int prev  = nums[0];
        int prevOfPrev = 0;// initialy
        for(int i =1;i<nums.length;i++){
            int take = nums[i];
            if(i>1) take+=prevOfPrev;
            int dontTake = 0 + prev;
            int currentVal = Integer.max(take,dontTake);
            prevOfPrev = prev;
            prev = currentVal;
        }
        return prev;
    }
}
```
Outreachy: Explaining my project
Tags: outreachy, design, uiux, opensource
Published: 2022-07-02 13:23:11

Welcome to blog 3!
So this week's blog is about explaining my project and community to my audience 🤔

## About my community 
**ODK-X**, produces free and open-source software for collecting, managing, and using data in resource-constrained environments. 
A major advantage of ODK-X apps over traditional data apps (like Microsoft Excel) is that they are available offline on mobile phones 🙌

## About my project
- I'm mainly working towards improving the UI and UX of the mobile apps, which means we want to further simplify and enhance the app experience for our users and field workers. 
- We aim to achieve it by making the look and feel of the apps better and making them easier and more intuitive to use.
- The scope of my project also covers helping the developers develop better apps for ODK-X, that is, we aim to create templates, libraries, and a style guide, which the developers can refer to, for creating consistent good looking apps 😎

## My doubts and confusions
Initially, I was confused as to where and how I should start.
- Should I just start creating mock-ups based on my observation?
- Or ask my mentors?

But then we discussed and realized that we are working for the users, so asking the users would be the best thing to do!
And that's what we did; we created a feedback form and circulated it amongst our users and got a lot of good feedback that we can work on 😌

Currently, I'm compiling the feedback and trying to understand the problems and come up with solutions. 
All-in-all, I'm enjoying my project! 🥰
How to define local software development?
Tags: localsoftwaredeveloper, localsoftwaredevelopment
Published: 2022-07-02 13:06:28

Besides [professional](https://www.linkedin.com/in/gjaryczewski/) areas of interest in programming, I am looking for a better approach to [local software development](https://dev.to/t/localsoftwaredevelopment) in my free time. "What do you mean saying: local software development?", you can ask.

It's a great question. I asked many folks and forums, whether this topic is real or imagined by me only? Maybe there is no such specific context? But before I lost interest, I will try again, in other words:

I recognize a specific context of programming, when:

1. an organization has a need of some application - a need which is hidden or published, nevermind - but has not enough resources or no required will to design it in a "canonical way" (by public order, an internal request to local IT, etc.),
2. and there is an employee - a programmer, an administrator, a business employee with entry-level experience in coding, nevermind - who is ready to get this task and design the application using available tools (usually a spreadsheet with macros, a database with form designer, etc.),
3. and as a result, this application becomes part of so-called [shadow IT](https://en.wikipedia.org/wiki/Shadow_IT), a growing and usually uncontrolled collection of tools, which bypasses existing "professional" systems, designed by software houses or installed by IT from public sources,
4. usually developed by copy-pasting, without a coding standard, without environments, with the manual delivery procedure (if that procedure exists at all), with poor or no documentation, out of control in emergency plans, without regular maintenance procedures, etc.

This specific context I called the local software development.

There are so many exciting consequences of this definition, so many built-in troubles... We'll look at some practical approaches in the next posts.
Freelancer Dashboard using notion templates
Tags: notion, discuss, freelance, productivity
Published: 2022-07-02 12:55:52

Created a new notion template called Freelancer Dashboard.


> Now you can buy the template for 2$ 

{% embed https://aravindkumarv.gumroad.com/l/freelanceDashboard %}

You can purchase and get the template directly using https://buy.stripe.com/00gdU29Wy17K4k8289


For more info: {% embed https://youtu.be/i9b2perK-2w %}

Follow for more information on Twitter [@AravindkumarV09](https://twitter.com/@AravindkumarV09)

For any suggestions on the project, mail me on 30lmas09@gmail.com
How to Make a Gaming Website Using Html CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-07-02 12:53:12

{% youtube VJKx9uLEpaU %}

How to Make a Gaming Website Using Html CSS JavaScript

This video will show you how to make a gaming website using html css javascript.

[Live Website](https://codewithsadee.github.io/gamics)
[Github Repo](https://github.com/codewithsadee/gamics)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Starter file](https://drive.google.com/file/d/1-jyTJ6hCNTqyK6Dfh4svmxT8mDRNifjS/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
5:03 - File structure
5:30 - Project initial
10:22 - Header
32:56 - Hero section
40:46 - Brand section
44:38 - Latest game section
55:19 - Live match section
1:04:10 - Featured game section
1:13:27 - Shop section
1:22:08 - Blog section
1:31:00 - Newsletter section
1:36:54 - Footer
1:54:27 - Media queries

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
Typescript Numeric Literal Types How To Find Nth Root of X
Tags: webdev, programming, tutorial, typescript
Published: 2022-07-02 12:48:16

---
series: Typescript Basic Arithmetic with Numeric Literal Types
---

In this post we are going to try to find nth root of x

where x and n are both numeric literal types

to do this, we need to utilize [exponentiation](https://dev.to/tylim88/typescript-numeric-literals-exponentiation-d4o) type with a slight modification:

```ts
type CreateArrayWithLengthX<
    LENGTH extends number,
    ACC extends unknown[] = [],
> = ACC['length'] extends LENGTH
    ? ACC
    : CreateArrayWithLengthX<LENGTH, [...ACC,1]>

type Multiplication<X extends number, Y extends number, Z extends number[] = [], V extends unknown[] = []> = 
    [...CreateArrayWithLengthX<Y>]['length'] extends Z['length']
    ? V
    : Multiplication<X,Y,[1,...Z],[...CreateArrayWithLengthX<X>,...V]>


type Exponentiation<X extends number, N extends number, Counter extends number[] =[], Acc extends unknown[] = [1]> =
    Counter['length'] extends N 
        ? Acc // modified 
        : Exponentiation<X, N, [1, ...Counter], Multiplication<Acc['length'],X> >
```

ok, we have the building block now, let's do it

```ts
type Root <X extends number, N extends number, Counter extends number[] = []> =
    [...Exponentiation<Counter['length'], N>]['length'] extends X 
        ? Counter['length'] 
        : Root<X, N, [1,...Counter]>

type A = Root<4,2> // 2
type B = Root<8,3> // 2
type C = Root<81,4> // 3
type D = Root<625,4> // 5
type E = Root<1024,10> // 2
type F = Root<2187,7> // 3
type G = Root<9261,3> // 21
```

[playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAwgThAhsCBBOdEgOoEtgAWAMhAHYDmhAGgDwBQUjURAogHIDiAKgBJQQAPFKQAmAZyikArgFsARhDgAaBk1QwY-IWXFQppANakA9gHdSAbQC6UALxRrKgHx2o6mBYDkAGzKUCnjaCwrqsnLyqjAD8bhqRUABcsAjIaBhYeIQkFNQ0Ydw8Sg4AdKXuSgCMVk50dKCQUACyUt7AuGDeuADGyLjGpDRUWiES0vKKRQCawzqjsgrKUABaM6Jz43DWro5QAGqruvpGZpY29tYu9vEWpcXwSCjomDj4xH65k05WXr45AUHaNbLH7vf7xGK7eJJZqtdqdHptfqDJSTJQWCpKW5LKxo273VJPDKvbL+WhUJyY0q7aq1erQFgCMD9MhtXpIobBWaSeYTKBsA7rBZFGDGfQoOAC7kbLa2HaoLpdSVHEzmGUOKqXeIisWKEF-QKS-nxJhQGLyrrGphJBlM0gs3BsgZUIpsIroop40WkcU4potNodbqOmjmvX+QJKclQGp1cDQABKxmMwCgg0lYyFfPTPMW2u9imz0rODmqdmutxtzO9DsRAzz4rDhAjfK+jf+kqGluisC9DZ8oINXcSUETyeRfLdGM9OrgNNjDVQrlHwBoABYlAAmFwAem3UA38+gACEl0mVwAOJQAZh3e4PdNgp7H54xq9vUCvh6gABEnyuAGwbgArEob5QLuUBAV+LB-jQFQAAwbuuCHvvecZQAAYrBG4VOeADsSh4e+n4PhwsEAJwbv+GI3uBd4VEAA)

limitation: X and N must be positive integers and only works with positive integer root. X cannot exceed 9,999 because the max tuple size is 9,999

X can exceed 999 if result^(N-1) is less than 1000

Warning, please insert the input one by one or else it will break the playground.
Flutter Basics
Tags: flutter, mobile, development, programming
Published: 2022-07-02 12:44:36

What is Flutter?
Flutter is a mobile UI technology & SDK from Google that enables you to build native apps for multiple platforms (Android & iOS) from a single codebase written in Dart. The current release is at Beta v3 and considered production ready.

Cross-platform app development (read "iOS and Android from the same code-base") is the wet dream of many teams and companies for a long time. I've spent quite some time with projects based on HTML5 + Cordova or Xamarin.iOS / .Android (not Forms), so I have a bit of experience in the area and try to keep up with the trends.

Flutter is in everybody's mouth these days when talking cross-platform app development. Basically, Flutter is Google's approach to the cross-platform topic, based on their own programming language, Dart with a declarative UI SDK. I won't repeat the details of the language or SDK here or its features here. Head over to flutter.dev if you're interested in more.

Apple introduced their own, declarative UI development framework, called SwiftUI, when releasing iOS 13. Thinking declarative UI code often is superior to other approaches (see XAML for WPF, XAML for Xamarin.Forms or Google's argument for the approach in the Flutter docs, ), I gave it quick shot, but became frustrated quickly for all the bugs in the first releases. Hence, it was time to give Flutter a shot for my next iOS side project.
Rubidsoft Theme Development
Published: 2022-07-02 12:37:24

Take a Html Template
break it's Header file named _**head.php**_
break it's Footer file named _**foot.php**_
break it's all section in **blocks** folder
create a layout in _**page.php**_
all common admin and client function is in $common_page object:
1. site_url //variable
2. client_template_name() //return client template name


all important function is in $init object;
list below:

1. frontend_template($file)
2. get_media($file)
casting in java
Tags: beginners
Published: 2022-07-02 12:29:32

In simple language casting means changing one type of data type into another example changing double data type into int.
ie.

public class mk{
public static void main(String[] agrs){
double price = 55;
double finalPrice = 16.55;
System.out.println(finalPrice);
// our result will be 71.55 which is known as Implicit casting
// but now if we change our double type data type into int data type;
ie.
int p = 55;
int fp = p + (int)16.55;
System.out.println(fp);
//our result will be 71 only which is known as Explicit casting.
How to Create PHP Email Contact Form with Attachment, Send Email With Attachment in PHP
Tags: webdev, php, codenewbie, css
Published: 2022-07-02 12:27:15

## PHP Send Email with Attachment
This is a simple contact form tutorial that will show you how to create a [PHP contact form](https://www.hmablogs.com/php-email-contact-form-with-attachment/) and send it to an email with the file Attachment on form submission. Now, the form will allow you to attach multiple file formats that users can attach file formats like PDF, DOC, JPG, JPEG, and PNG files.

We are going to create a contact form with a file attachment option which will send an email to a specific email address on form submission. I divided the code into three parts for better understanding. We will put the HTML code in the first part, then the CSS code in the second file, and at the end, we will put the PHP code.

## Video Tutorial (Step by Step Process)
{% youtube YNJtwMJSySI %}

## How do I create a PHP form email with an attachment?
**Follow these steps to [Send an Email with an attachment](https://www.hmablogs.com/php-email-contact-form-with-attachment/) on Form Submission using PHP:**

1. Build a simple HTML contact form (with optional CSS) and embed it on your website.
2. Host your contact form to any internet web hosting server.
3. Connect your code editor to a remote server to edit the PHP script.
4. Write a PHP script that will effectively handle sending emails.
5. Get the submitted form data using $_POST in PHP.
6. Validate form data to check whether the mandatory fields are not empty.
7. Validate email address using FILTER_VALIDATE_EMAIL in PHP.
8. Check the file extension to allow certain file formats (PDF, Image, and MS Word file)
9. Send an autoresponder to a user, letting them know we’ll handle their request.

## Read Complete Article
{% embed https://www.hmablogs.com/php-email-contact-form-with-attachment/ %}
Tower of Hanoi: Recursion Problem
Tags: java, recursion, coding, algorithms
Published: 2022-07-02 12:15:52

problem: three poles having disk in it , A-B-C, you have to move all disk from A to C using B as helper. 
Rules: 
- arranged in manner that larger at bottom and smaller at top, so smaller should not be lower to larger one.
- print all steps to move all the disk
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ok5ye6ljfjli2q55lji.png)
 
we can also write :
move n-1 discs from A to B using C
move a disc from A to C
move n-1 Discs from B to C using A
```
void TowerOfHanoi(int n, Int A, int B, Int C  ){
if(n>0){
   TowerOfHanoi(n-1, A, C, B);
printf("Moving disc from %d to %d", A, C);
TowerOfHanoi(n-1,B,A,C);
}
}



```

for (n-1) or 1 disk it is easy to move,

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

solution Reference: [Tower of Hanoi Problem - Made Easy](https://youtu.be/q6RicK1FCUs)
GSoC 2022 CircuitVerse | Week 3 Report
Tags: webdev, javascript, beginners, programming
Published: 2022-07-02 12:15:00


It's been a month in the GSoC environment with CircuitVerse and it's great so far.
This week I did the following:
- Fixes the conflicts of `Support Multiple Mentors` [PR](https://github.com/CircuitVerse/CircuitVerse/pull/2096).
- Worked on `Improve Embed Feature` [PR](https://github.com/CircuitVerse/CircuitVerse/pull/2768).
- Reviewed and discussed the UI of all the features.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o3g9owkdgpkh452n4dy.png)
The previous week, I have done with the requested functionality of the PR `Support Multiple Mentors` but after one commit merged into master, there was a lot of `RoboCup` conflicting with the files of this PR. Hence, I solved them and was able to fix all the conflicting files. The PR is almost ready and now we are checking its feasibility with CircuitVerse Mobile-App.
This week, I worked on the PR by Kartikay(contributor) for `Improve Embed Feature`. Check out the description of the feature [here](https://github.com/CircuitVerse/CircuitVerse/issues/1938). I have worked on:
- Improving the existing UI.
- Some typos.
- Implement popup in form of Rails [Component](https://viewcomponent.org/) view.
- Added translation.
- added and transfer the code to project_controller(stimulus).
- Added Advance feature to enable/disable:
 - Zoom-in-out feature
 - Fullscreen button
 - Clock/Time button
 - Display Title
- Added feature to choose different built-in themes for embed circuit.
It looks like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi35g1gdujqzxbdkomo9.png)
> Advance Option
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qeqsamwbpuipnuxdnhs.png)
So, how it is working?
CircuitVerse awesome contributors have made `embed.js` and `embedListener.js` files for tackling with the `embed` feature. So I have made some input fields with default values in component views which are connected to data-controller=projects and in `projects_controller` I have to write code to get the value from those input fields and after the user hits that `Publish` button, the function in controller takes the values from each input and save it to the variable and finally made a `URL` variable along with `query parameters` passed to fetch the values in `embed.js`. The URL looks like this:
```
const url = `${document.querySelector('#url').value}?theme=${theme}&display_title=${displayTitle}&clock_time=${clockTimeEnable}&fullscreen=${fullscreen}&zoom_in_out=${zoomInOut}`;
```
and in `embed.js` I accessed those parameters using this:
```
const params = new URLSearchParams(window.location.search);
```
and to retrieve certain values I use something like this:
`const fullscreen = params.get('fullscreen');`
So that was all about this week's work. I learned a lot and concluded that `anything can done be using javascript. Javascript OP!!!`
### Next Week Plan
- Complete Improve embed PR.
- Start working on `Weekly Contest`.