teleren/devto huggingface dataset:
I'm building a Canva for back-end
Tags: startup, opensource
Published: 2022-07-10 08:33:45

## The story of Canva

I'm not sure if I have to introduce Canva or not, but just in case you haven't heard about it, it's what made everyone a designer!

Yes, that's what I said! It made everyone a designer.

Before Canva, we had softwares like Adobe Photoshop, and some other giants like that in the market, and if you were curious enough, designer or not, you had tried playing with them to create some digital arts of some sort.

Fast-forward a few years, Canva literally gave all of us the confidence to become a designer, where we can.

We **all had cool ideas** in mind, but not all of us knew all the necessary techniques to implement them; Canva gave us a chance to implement those ideas.

## Like Canva, but for back-end

We, humans, are creative and **have so many ideas**. However, the technical challenges prevent us from implementing what we have in mind.

Implementing an idea as a web or mobile application, requires a deep understanding of so many technologies that makes it impossible even for the best of us to turn those ideas into applications.

I personally have been enjoying the freedom Canva has given me, and I wanted to give the same freedom to everyone trying to turn an idea into an application.

I knew that there are great products for building a UI without knowing how to code at all, which are at the same time flexible enough to be extended with your custom code.

So, I decided to do the same for the back-end or business logic of the applications. A platform, you can use without any coding experience which at the same time *works perfectly for developers*.

Fast-forward a few months, [DoTenX](https://dotenx.com), the platform I had in mind is in pre-alpha and many people are using it, with their valuable feedback and sometimes harsh criticism, we're moving towards our closed alpha soon.

## Unlike Canva

Canva is great in what it does, but we all know it has clear limitations, which indeed totally fit the purpose of the platform.

Unlike Canva, I wanted to give the users the power to actually build whatever they could do if they wanted to implement the application from scratch, still without worrying about many things distracting them from coding.

In [DoTenX](https://dotenx.com), you can easily extend the platform with custom code. It's also massively scalable, and it's is based the event-driven architecture.  

[DoTenX](https://dotenx.com) is actually very powerful when it comes to event-driven architecture and e.g. you can implement scenarios like starting a Workflow whenever a file is stored on your application user's Dropbox or when they receive an email from a certain person.

---
If you're interested to see under the hood, you can take a look at the source code here:
https://github.com/dotenx/dotenx

Also, we post the updates, tutorials, guidelines and videos frequently on Discord.

https://discord.gg/7Zr5UYXDxU
19. Leetcode solution in JavaScript
Tags: javascript
Published: 2022-07-10 08:40:16

```
var removeNthFromEnd = function(head, n) {
    let fast = head, slow = head
    for (let i = 0; i < n; i++) fast = fast.next
    if (!fast) return head.next
    while (fast.next) fast = fast.next, slow = slow.next
    slow.next = slow.next.next
    return head
};





```



#leetcode
#challenge
here is the link for the problem: 
https://leetcode.com/problems/remove-nth-node-from-end-of-list/submissions/
234. Leetcode solution in CPP
Tags: cpp
Published: 2022-07-10 08:38:19

```
class Solution {
 public:
  bool isPalindrome(ListNode* head) {
    ListNode* slow = head;
    ListNode* fast = head;

    while (fast && fast->next) {
      slow = slow->next;
      fast = fast->next->next;
    }

    if (fast)
      slow = slow->next;
    slow = reverseList(slow);

    while (slow) {
      if (slow->val != head->val)
        return false;
      slow = slow->next;
      head = head->next;
    }

    return true;
  }

 private:
  ListNode* reverseList(ListNode* head) {
    ListNode* prev = nullptr;

    while (head) {
      ListNode* next = head->next;
      head->next = prev;
      prev = head;
      head = next;
    }

    return prev;
  }
};

```



#leetcode
#challenge
here is the link for the problem: 

https://leetcode.com/problems/palindrome-linked-list/description/
How To Use Mdi Font With Next.js
Tags: react, nextjs, mdi, icon
Published: 2022-07-10 08:32:32

1.Install mdi font into your project from their official web site or simply run this command in terminal

using **npm**
```js 
npm install @mdi/font
```

using **yarn** 
```js
yarn add @mdi/font
 ```

2.Import the css file from node_modules in your main.css or global.css file 

```css
@import url("@mdi/font/css/materialdesignicons.css");

```

3. In your component or pages use like this

```html 
<span className="mdi mdi-cube"></span>
```

There your just need to change the class name to use different icon.

That's it.You have done with setup for using mdi icon.

Thanks For Reading.
You should (probably) fire your Kafka developer
Tags: discuss
Published: 2022-07-10 08:27:18

We've all seen some of our fellow colleagues entering euphoria and la-la-land as we mention technologies such as ...

* Kafka
* Pulsar
* ActiveMQ
* Solace
* Etc ...

However, the dirty secret of our industry is that 99.999999999999% of the times some developer implements a message broker, the result becomes 1,000 times more unnecessary complexity, implying your project becomes undeliverable, and your employer ends up _wasting money for nothing_.

> Say after me; We don't need a message broker!

I have seen the same thing happen over and over again. Some developer with a hole in his CV is given the task of solving some problem. The problem could easily have been solved with a MySQL database and a couple of CRUD endpoints, but because the developer is trying to fill holes in his CV, he ends up implementing it using 37 micro services, with cross process communicating, through some _"hot and cool message broker thing"_, orchestrating this architectural nightmare from an astronaut's perspective. Using a message broker when you don't need it, is like building a space shuttle to go shopping at SafeWay.

> Kafka is MADNESS unless you need it, and you almost never need it!

Kafka, Solace, ActiveMQ, and all associated technologies results in added complexity, and unless you _absolutely_ need it, this added complexity is literally like _stealing from your employer_. Your employer pays you for your time. You wasting time configuring Pulsar when it is not needed, ensures your employer is literally flushing his money down the toilet, while you mess around with 100+ YAML files, each 1,000 lines of code, forcing you to spend 3 weeks simply to read the documentation before you can apply things correctly. And yes, simply configuring Pulsar to run correctly easily takes a month, even for a senior developer.

For the record, I don't mean to pick on Pulsar specifically here, it's an amazing piece of tech, however just like all the other message broker implementations, is is almost _never, ever, ever, ever, ever, ever, ever, ever needed_!

The above implies that unless you _really_ need a message broker, you have effectively stolen your salary from your employer, by wasting your time doing unnecessary things. Quite frankly, I find it fascinating that employers even pay people such as this ...

> You should be ashamed of yourself, and somebody should fire you!

For the record, I will be sending this article to your manager ... ;)
Single class per file
Published: 2023-07-07 08:17:00

---
title: Single class per file
published: true
date: 2022-07-10 00:00:00 UTC
tags: 
canonical_url: https://timwise.co.uk/2022/07/10/single-class-per-file/
---

Reasons you should prefer a single `class` / `interface` / `record` / `enum` / `struct` per file in C# projects.

## Congitive load

Multiple types per file increases the cognitive overhead of remembering where everything lives.

When working on a project, having to remember where each thing is hidden and how things are organised is extra mental load that can be eliminated by following the simple rule of “every class gets a file” regardless of how trivial or short they may be.

## Reduced dependence on IDE support

IDEs that can jump to a definition are not the only tool we use to inspect and navigate code.

By hiding multiple types in a file where the name doesn’t match you make it harder to operate in a codebase without a full IDE.

You might be an IDE-only developer but not everyone operates that way, and you might be missing out on some other excellent tools out there.

## Git merge conflict avoidance

You are more likely to run in to merge conflicts if you put types all together in one file as multiple developers work on a project. Especially when things get moved / renamed / refactored.

## Simple refactoring

Putting multiple things in a file breaks refactoring tool flows (resharper) which assume they can rename files to match types.

## Can be applied consistently

Having multiple types per file requires you to make constant judgement calls about what goes together in one file and what is separate. Different developers will inevitably make different judgement calls.

This problem can be entirely eliminated by sticking to class-per-file.

It is impossible to come up with a concrete rule for exactly what goes together in a file and what is separate, whereas the rule of one-class-per-file is trivial to apply consistently.

## Avoid need for additional naming

If you have one class in a file you can name the file the same as the class. If you have two types in a file what do you name the file?

If you have two types in a file you now have to come up with a _third_ name that covers both things, or use the name of only one of the things, which is then misleading / surprising. By having a class per file you eliminate this entirely.

---

There's an [updated version of this on my blog](https://timwise.co.uk/2022/07/10/single-class-per-file/
), see the "originally published at" link at the top of the post.
GetSecondLargest Number in a given array -Hackerrank Solution
Published: 2022-07-10 08:10:45

function getSecondLargest(nums) {
    // Complete the function
    let largestNum=nums[0];
    let secondLargestNum=nums[0];
    for (let i=0; i<nums.length; i++){
        if(nums[i]>largestNum){
            largestNum=nums[i];
        }
    }
    for (let j=0; j<nums.length; j++){
        if(largestNum>nums[j] && nums[j]>secondLargestNum){
            secondLargestNum=nums[j];
        }
    }
    return secondLargestNum;
}
Starter for bootstrap + react + sass + typescript + vite
Tags: webdev, typescript, react, beginners
Published: 2022-07-10 07:51:32

This is a guide on how to setup a project using vite + react + typescript + sass + bootstrap.
Here we introduce two ways to archive such a project.

One is prepared and easy to start and the other is manual and needs step by step setup.


## Easy to start one

The prepared one is located at [https://github.com/calidion/Vite-React-Typescript-Sass-Bootstrap-Starter](https://github.com/calidion/Vite-React-Typescript-Sass-Bootstrap-Starter)

You can check updates and send pull requests.


```bash
gh repo clone calidion/Vite-React-Typescript-Sass-Bootstrap-Starter {your-project-name}
cd {your-project-name}
yarn
yarn dev
```

## Step By Step Setup

### Create a vite + bootstrap + typescript project with vite built in tool

```bash
yarn create vite
```

then you should fill in your project name with prompt:

```bash
? Project name: › vite-project
```

after filled in your project name, you should choose the framework you would like to use with prompt like this:

```bash
? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit
    svelte
```

here we choose `react` and more specifically `react-ts` as we will see the following variants selection section after `react` chosen.

```bash
? Select a variant: › - Use arrow-keys. Return to submit.
❯   react
    react-ts
```

Now we have a react + typescript project ready.

Then we start to add support for
bootstrap and sass.

### Install bootstrap

Add dependency to `package.json`

```bash
yarn add bootstrap
yarn add @popperjs/core
```

### Install node.js types

```bash
yarn add --dev @types/node
```

### Install sass support

```bash
yarn add --dev sass
```

### Change `.css` files to `.scss`

Change `index.css` to `index.scss`
Change `App.css` to `App.scss`

### Change `.css` imports to `.scss`

#### Change `main.tsx`

```ts
import './index.css'
```

to

```ts
import './index.scss'
```

#### Change `App.tsx`

```ts
import './App.css'
```

to

```ts
import './App.scss'
```

### Import Bootstrap JS when needed

```ts
import { Tooltip, Toast, Popover } from 'bootstrap';
```

Normally you don't need import bootstrap package. But when you need `Tooltip`, `Toast`, `Popover` to work properly, you need to import them into your react components.

### Start to dev

```bash
yarn dev
```
and open the url, you will see a page similiar to the following picture:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m84fxfwc382p71ekck84.png)
Jump game leetcode problem
Tags: dynamicprogramming, java, leetcode
Published: 2022-07-10 07:37:47

You are given an integer array nums. You are initially positioned at the array's first index, and each element in the array represents your maximum jump length at that position.

Return true if you can reach the last index, or false otherwise.

 

Example 1:

`Input: nums = [2,3,1,1,4]
Output: true
Explanation: Jump 1 step from index 0 to 1, then 3 steps to the last index.`

Solution: Dp memoization (top down approach)

```java
class Solution {
    public boolean canJump(int[] nums) {
        
       // we will solve it using dp
        boolean[] dp = new boolean[nums.length];
        /*
        Fill the dp indices with true , as true will tell us that this
        index has not been explored. And if after the exploration this index is still true it will mean that we can reach the last index from current index*/
        Arrays.fill(dp,true); 
        return solve(nums,0,dp);
    }
    public boolean solve(int[] nums,int index, boolean[] dp){
        // base cases
        if(index == nums.length-1) return true;
        if(index>=nums.length) return false;
        if(dp[index]==false) return false; // this means that this index has been explored and it does not lead to the last index
        
        // at given index i we jump to i+1 or i+2 .... till i+k <=i+nums[i];
        /*
        Example :[2,3,1,1,4] 
        if i =0, nums[i] = 2
        we can jump to i+1 i.e. 0+1 (less than i+nums[i] which is 2) or 0+2 (which is equals to 2) */
        for(int i = index+1;i<=index+nums[index];i++){
            if(dp[i]){ // traverse only if its true, means its has not been traversed 
                dp[i] = solve(nums,i,dp);
                // even after traversal if it comes as true , it will mean that last index is reachable from this index.
                if(dp[i]) return true;
            }
           
          
        }
        return false; // return false if the last index is not reachable.
    }
}
```
What is the difference between a for loop and an iterator in Python?
Tags: python, iterator
Published: 2022-07-10 07:11:56

Iteraor and for loop doing that exact same thing just with a little change.

before going to explain, first let me clear about iterator waht it is....

Iterator:

Basically Iterator is an object that contains a countable number of values. It means having multiple values/ objects so we can use iterator to traverse all the values.

**In Python, Iterator object having two mendatory methods __iter__() and __next__().**

List, Tuples, Dictionary, Sets all are iterable objects and we can iterate and travese all the values.


**For loop implements iterator in the background**.
Before For loop starts, It will create iteratator object and iterator/ traverse all the elements until the **StopIterator exception** arise.


```
# get the iterator 
iterator_object = iter(some_iterable_object) 
 
while True: 
	try: 
		# get the next item         
		item = next(iterator_object) 
        # do whatever you need to do with this item 
	except StopIteration:   
		break

```


So, For loop in nothing but an implementation of Iterator in an infinite while loop.
Rename WooCommerce tabs
Tags: wordpress, woocommerce
Published: 2022-07-10 06:43:07

Sometimes the default names of tabs are not fitted to our vision. So how to rename WooCommerce tabs? It's easy!

Put this code into your `functions.php`:

{% gist https://gist.github.com/texe/693c69cae45ae4c0d604febcdefc583d %}

If you don't have Reviews tab and/or Additional information tab in your store, just delete these lines:

```php
$tabs['reviews']['title'] = __( 'Ratings' );
$tabs['additional_information']['title'] = __( 'Product Data' );
```

If you leave these lines, you will see Additional information tab and Reviews tab in your store.



If you want more tips follow me on Twitter or visit my blog:

* [Chris Texe](https://twitter.com/TexeChris)
* [WordPress blog](https://madlon.eu/blog)
GSoC 2022 CircuitVerse | Week 4 Report
Tags: webdev, javascript, beginners, programming
Published: 2022-07-10 06:38:53

This week I was focused on:
- Getting my ongoing PR to merge i.e. "Improve Embed Feature" and "Support Multiple Mentors".
- Finalizing the idea for Weekly Contest.

### Completing `Improve Embed Feature`
So in a meeting with Aboobacker(mentor), we concluded that in Embed we should not implement a feature of `landing subcircuits` for now because of the migration of the simulator from `CircuitVerse` repo to its own new repo `cv-simulator-frontend`. 
So I clean-up the PR and it finally got merged.

> As always my best part:

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

In this PR I learned:
- Rails View Component.
- Query-Parameter Parsing.

### Completing `Support Multiple Mentors`

This PR was awaiting approval of Mobile Feasibility as it contains the code for API as well which is mainly used in CircuitVerse Mobile App to interact with Database. Ruturaj(PR author) had coded the API very neatly. After some cleanups, the PR got finally merged. These functionalities are still unreleased in Production but will be released soon.

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

### What Else
I also worked on one bug issue and made a PR for it, [here](https://github.com/CircuitVerse/CircuitVerse/pull/3232).

It was basically the broken pagination in the project comment section.

### What Next

- In the weekly project meeting, we concluded that the `weekly contest` feature should be planned very properly as it can bring new creative users to CircuitVerse. So this week I will be working on PoC (Proof of Concept) for the Contest.
- In the coding part, I will be working on my PR `Assignment Restriction` that is now under the scope of my GSoC project.

### Conclusion

By far, this week was also great. Comparatively, I coded less this week and researched more.
Implementing a custom native calendar using UICalendarView in iOS16 and Swift
Tags: swift, uicalendarview
Published: 2022-07-10 06:19:21

It was WWDC22 week, and I was browsing through my Twitter feed to get some updates about the latest Apple APIs. A person tweeted, “No matter how experienced you are as an iOS developer, you’ll always look it up how to set up a date formatter.” So I humorously replied to the tweet by saying, “Dates are hard 😜 .”

After a while, something struck my mind, and I was curious to know if Apple had made improvements to the existing date picker. To my surprise, Apple introduced UICalendarView to create custom calendar views from iOS 16.

At that moment, I could realize how easy it would become for an iOS developer to implement and customize calendar views. Previously, we used third-party calendar components, which came with issues and bugs. Let’s see how to implement a custom native calendar using UICalendarView in iOS 16 and Swift.

## Setting up UICalendarView

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

UICalendarView belongs to the UIKit framework and comes with a simple initializer.

```
let calendarView = UICalendarView()
let gregorianCalendar = Calendar(identifier: .gregorian)
calendarView.calendar = gregorianCalendar
```

**Note:** Apple tells us that it is necessary to mention the calendar type explicitly while creating a UICalendarView object. In our example, it will be gregorian calendar.

**API availablility:** UICalendarView is available from iOS16.0+, iPadOS16.0+, and macCatalyst16.0+

## Customizing UICalendarView

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgjyq0jwbhe91vk8icbb.png)
 
UICalendarView supports various customizations like setting the background color, setting the view’s corner radius, changing the calendar’s tint color, and many more.

```
calendarView.backgroundColor = .secondarySystemBackground
calendarView.layer.cornerCurve = .continuous
calendarView.layer.cornerRadius = 10.0
calendarView.tintColor = UIColor.systemTeal
```



For further reading visit https://ohmyswift.com/blog/2022/06/12/implementing-a-custom-native-calendar-using-uicalendarview-in-ios16-and-swift/
Beginner to Advanced Challenge - project 8 & 9
Tags: javascript, typescript, beginners, beginner2advanced
Published: 2022-07-10 05:33:46

You can find the challenge list [here](https://github.com/florinpop17/app-ideas).

## CSV to JSON Converter

The eighth project in the beginner category in the `#beginner2advanced` challenge is a simple CSV to JSON converter app built with Typescript:

![csv_to_json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7f4zopi6vsxm08irxuop.gif)
 

The link to the CSV-to-JSON app can be found here: [https://github.com/zt4ff/app-ideas/tree/main/beginners/csv2json](https://github.com/zt4ff/app-ideas/tree/main/beginners/csv2json)

## Dollar to Cents Converter App

The ninth project is similar to the CSV-to-JSON app but we are converting dollars to cents in this case. 

![dollars_to_cents](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysokb1iyh38oh8mbv1h1.gif) 

The link to the code can be found here: [https://github.com/zt4ff/app-ideas/tree/main/beginners/dollar2cent](https://github.com/zt4ff/app-ideas/tree/main/beginners/dollar2cent)

Please leave a star in the repository so other people can find it and participate.
CSS: Changing the opacity of the background-image only
Tags: css, beginners
Published: 2022-07-10 05:32:00

* Add a opaque background
```
body::before{
  content: " ";
  background-image: url();
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.5;}
```

* Adding text on top of the opaque image
**HTML**:

```
<body>
    <div class="overlay">
        <div class="header">
            <h1>Hello World</h1>
        </div>
    </div>
</body>

```

**CSS**:

```
body {
    margin: 0;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: url('https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg');
    background-position: center;
    height: 450px;
    width: 90%;
    margin: 0 auto;
}

.overlay::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    height: 450px;
    width: 90%;
    left: 5%;
    background: rgb(0, 0, 0, 0.6);
}

.overlay * {
    position: relative;
}

h1 {
    color: #fff;
    z-index: 2;
}
```