teleren/devto huggingface dataset:
Build 7 Real-Time Salesforce(LWC) Projects
Tags: salesforce, lwc, apex
Published: 2023-01-08 06:34:40

---
title: Build 7 Real-Time Salesforce(LWC) Projects
published: true
description: 
tags: #salesforce, #lwc, #apex
//cover_image: https://direct_url_to_image.jpg
---

The salesforce market is looking for a skilled resource, but developers need to gain practical skills in LWC. This course will help anyone who wants to practice LWC or is looking for a job but needs to showcase the projects. 

AVAIL 58% off from the below URL

https://www.udemy.com/course/zero-to-hero-with-real-time-salesforcelwc-projects/?couponCode=LWC_PROJECTS

In this course, we will build 7 projects that can be used in your day-to-day life.

1. BMI Calculator App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpuwbubod4zpdj92iehj.png)

2. Alarm Clock App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8rasbgezz2m1fesbfs6.png)

3. Currency Converter App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zohsy8fcjrh4in06auz3.png)

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

5. Employee Survey App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa0649khm8zm9v0xeyue.png)

6. Note-taking App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wf4hkvb6bb3nidm4p5i.png)

7. Personal Portfolio
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u88etq4nu8gf586u7bk3.png)
Docker and Docker Containers Explained
Tags: cloud, docker, devops, programming
Published: 2023-01-08 06:13:00

### Let's first start with Docker

Docker is a powerful tool for building, distributing, and running applications in containers.

- To get started with Docker, you'll first need to install it on your machine. You can find installation instructions for Docker here: https://docs.docker.com/engine/install/

- Once you have Docker installed, you can begin using it to create and run containers. Containers allow you to package your application and its dependencies together, making it easy to deploy and run your application in any environment.

- To create a Docker container, you'll need a Dockerfile. A Dockerfile is a simple text file that specifies the commands to be run to build a Docker image.

- You can use the docker build command to build a Docker image from a Dockerfile. For example: docker build -t my-image .

- Once you have a Docker image, you can use the docker run command to create and start a container from the image. For example: docker run -it my-image bash

### Docker Containers

1. Docker containers are a lightweight and portable way to package and run applications. They allow you to package your application and its dependencies together, making it easy to deploy and run your application in any environment.

2. Containers are created from Docker images, which are executable packages that include everything your application needs to run. You can build your own images, or you can use pre-existing images from a registry like Docker Hub.

3. To create a container, you can use the docker run command. This command creates a new container from an image and starts the container running. For example: docker run -it my-image bash

4. Containers are isolated from one another, so you can run multiple containers on a single machine without them interfering with each other. This makes it easy to scale your applications and run multiple instances of them on the same host.

5. Containers are also ephemeral, meaning that they are created, run, and then discarded when they are no longer needed. This makes them very lightweight and easy to manage.

6. In addition to running containers, Docker also provides tools for managing and deploying containers at scale. You can use Docker Compose to define and run multi-container applications, and you can use Docker Swarm to create a cluster of Docker engines for deploying and scaling your applications.

7. That's a quick overview of Docker containers! If you want to learn more, check out the official Docker documentation: docs[.]docker[.]com. There are also plenty of online resources and tutorials available to help you get started with using containers.

#webdevelopment #docker #containers
Help Me with Ubuntu Terminal...
Tags: solidity, multisigwallet, truffleframework, ubuntu
Published: 2023-01-08 05:46:04


Hi Guys, I need help with this.

So I am learning blockchain development by myself,
I am following a video tutorial about creating an ethereum wallet.
In this video tutorial the application which I used is windows terminal, running ubuntu and using truffle framework.
In the middle of the video, the instructor suddenly opens a tab on the left side (as you can see from the photo below), without giving any explanation about how to open the tab. I heard him pressing his keyboard and suddenly the tab on the left just popped up in a split second. So, I was assuming that he was using the shortcut key to open that tab. And also I already search on Windows Terminal settings and I can't find the shortcut key he used to open the tab, even more I tried it one by one, I mean all of the shortcut keys that I can find in Windows Terminal Settings. And I already googled about it and I can't find any answers related to it.

I know this is a silly thing, because I understand it just a basic thing in how to operate windows terminal. But since, I am self-learning about Blockchain development and I am just following the tutorial video. So, I am stuck in this step. 

I really need to know, How to open this tab, it would be a major help to me if you guys can tell me how to open the tab, Thanks in advance.

Note:
Video Tutorial source: Eat The Blocks, 6-Figures Blockchain Developer
Instructor: Julien Klepatch
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tb82fksv9ushn14wm2u.png)
Transform Your Input Fields with HTMLInputElement setSelectionRange()
Tags: webdev, javascript, programming, html
Published: 2023-01-08 05:42:05

Hello all JavaScript enthusiasts! Are you tired of your users having to manually highlight text in input fields? Fear not, for the HTMLInputElement.setSelectionRange() method is here to save the day!

This handy method allows you to programmatically set the text selection range in an input field. It's as easy as calling the method on an input element and passing in the start and end indices for the selection range.

```
const input = document.querySelector('input');
input.setSelectionRange(0, 3);  // Highlights the first 4 characters

```
But wait, there's more! The setSelectionRange() method also accepts an optional third argument, the "selection direction". This allows you to specify whether the selection should be forward (from start to end) or backward (from end to start).

```
input.setSelectionRange(3, 0, 'backward');  // Highlights the last 4 characters

```
So go ahead and give your users a break from all that tedious highlighting. With the HTMLInputElement.setSelectionRange() method, you can programmatically highlight text in input fields with ease!
149. Max Points on a Line
Tags: java, leetcode, problemoftheday, 100daysofcode
Published: 2023-01-08 05:37:58

**Problem Statement:**
Given an array of points where points[i] = [xi, yi] represents a point on the X-Y plane, return the maximum number of points that lie on the same straight line.


**Example 1:**
**Input:** points = [[1,1],[2,2],[3,3]]
**Output:** 3

**Example 2:**
**Input:** points = [[1,1],[3,2],[5,3],[4,1],[2,3],[1,4]]
**Output:** 4
 

**Constraints:**

- 1 <= points.length <= 300
- points[i].length == 2
- -104 <= xi, yi <= 104
- All the points are unique.

**Solution:**

**Algorithm:**
1. Create a variable max to store the maximum number of points on the same line.
2. Traverse through the points array and for each point, traverse through the points array again and for each point, traverse through the points array again and for each point, check if the three points lie on the same line.
3. If the three points lie on the same line, increment the count variable.
4. Update the max variable with the maximum of max and count.
5. Return max.

**Code:**
```
public class Solution {
    public int maxPoints(int[][] points) {
        int n = points.length;
        if (n < 3) {
            return n;
        }
        int max = 0;
        for (int i = 0; i < n; i++) {
            int[] p1 = points[i];
            for (int j = i + 1; j < n; j++) {
                int[] p2 = points[j];
                int count = 0;
                for (int k = 0; k < n; k++) {
                    int[] p3 = points[k];
                    if ((p2[1] - p1[1]) * (p3[0] - p1[0]) == (p3[1] - p1[1]) * (p2[0] - p1[0])) {
                        count++;
                    }
                }
                max = Math.max(max, count);
            }
        }
        return max;
    }
    
}

```
**Complexities:**
  1. - Time complexity:
          _O(n^3) where n is the length of points array._
  2. -  Space Complexity:
          _O(1)_
Introduction to Tailwind CSS
Tags: tailwindcss, webdev, javascript, beginners
Published: 2023-01-08 01:50:53

## Introduction

Have you ever heard of <code>Tailwind CSS</code>? It is a utility-first CSS framework that is quickly gaining popularity among front-end developers. In this post, we will discuss what Tailwind is, how it works, and some of the advantages it offers.

## What is Tailwind CSS?

<code>Tailwind CSS</code> is a CSS framework that provides a set of CSS classes that you can use to style your HTML elements. Instead of writing custom CSS styles, you can simply apply the appropriate classes to your HTML elements to achieve the desired design.

For example, to give an element a width of 50%, you can use the w-1/2 class. To give it a margin of 1rem, you can use the m-1 class. The class names in Tailwind are based on a set of predefined design tokens that can be easily customized to fit your project's design system.

## How Does Tailwind Work?

Tailwind works by applying a series of utility classes to your HTML elements. These classes are designed to be as unopinionated as possible, allowing you to easily customize the design of your elements.

To use Tailwind, you will need to include the Tailwind CSS file in your project and apply the classes to your HTML elements. You can also customize the design tokens to fit your project's needs by modifying the configuration file.

## Advantages of Using Tailwind CSS

There are several advantages to using Tailwind CSS in your project:

Rapid development: With Tailwind, you can quickly prototype and iterate on your design without the need to write custom CSS.

Declarative syntax: The class-based syntax of Tailwind makes it easy to see which styles are being applied to an element at a glance.

Modular design: Tailwind's utility-first approach encourages a modular design, which makes it easier to reuse styles across your project.

Easy customization: Tailwind's design tokens and configuration file make it easy to customize the framework to fit your project's needs.

## Conclusion

Tailwind CSS is a powerful utility-first CSS framework that can help you rapidly develop and customize your project's design. Its declarative syntax and modular design make it a great choice for any front-end developer.

I hope this post has helped you understand what Tailwind CSS is and why it is a valuable tool for front-end development. If you have any questions, feel free to ask!
Vertical & Horizontal Stacks Components with React & FlexBox
Published: 2023-01-08 04:54:56

[✨ **Watch on YouTube**](https://youtu.be/iVYo-gqyi90)  |  [🐙 GitHub](https://github.com/RodionChachura/react-toolkit)  |  [🎮 Demo](https://reactkit.radzion.com/stacks)

Most web layout is a combination of grids and stacks of elements that we create with either CSS grid or flexbox. In this post, I want to share how to write significantly less CSS by leveraging `Stack` components.

```tsx
import styled, { css } from "styled-components"
import { getCSSUnit } from "lib/ui/utils/getCSSUnit"

interface Props {
  gap?: React.CSSProperties["gap"]
  alignItems?: React.CSSProperties["alignItems"]
  justifyContent?: React.CSSProperties["justifyContent"]
  wrap?: React.CSSProperties["flexWrap"]
  children: React.ReactNode
  fullWidth?: boolean
  fullHeight?: boolean
}

const formatFlexAlignment = (
  value:
    | React.CSSProperties["alignItems"]
    | React.CSSProperties["justifyContent"]
) => {
  if (value === "end" || value === "start") {
    return `flex-${value}`
  }

  return value
}

const stackCSS = css<Props>`
  display: flex;
  ${({ gap }) =>
    gap &&
    css`
      gap: ${getCSSUnit(gap)};
    `}
  ${({ alignItems }) =>
    alignItems &&
    css`
      align-items: ${formatFlexAlignment(alignItems)};
    `}
  ${({ justifyContent }) =>
    justifyContent &&
    css`
      justify-content: ${formatFlexAlignment(justifyContent)};
    `}
  ${({ wrap }) =>
    wrap &&
    css`
      flex-wrap: ${wrap};
    `}
  ${({ fullWidth }) =>
    fullWidth &&
    css`
      width: 100%;
    `}
  ${({ fullHeight }) =>
    fullHeight &&
    css`
      height: 100%;
    `}
`

export const VStack = styled.div`
  ${stackCSS}
  flex-direction: column;
`

export const HStack = styled.div`
  ${stackCSS}
  flex-direction: row;
`

interface StackProps extends Props {
  direction: React.CSSProperties["direction"]
}

export const Stack = styled.div<StackProps>`
  ${stackCSS}
  flex-direction: ${({ direction }) => direction};
`
```

Here we have three components: `VStack`, `HStack`, and `Stack`. While the first two have fixed directions, the Stack component receives a direction as a property. It could be helpful for responsive views, but I rarely use it since `flex-wrap` is enough in most cases.

Both vertical and horizontal stacks have shared styles except `flex-direction` property. These components have only optional properties and don't rewrite flexbox attributes unless there is a prop for it. To set types for` gap`, `alignItems`, `justify-content`, and `wrap`, we leverage React's`CSSProperties`. Often we want to make the stack take full width or height. Safaris don't support end and start values yet, so we have a `formatFlexAlignment` helper that will add a flex prefix to them.

In my product at [increaser.org](http://increaser.org/), I use these components all the time. `VStack` has 443 occurrences, and `HStack` 201.
Migrate Static Website From Gatsby to NextJS. Is It Worth It?
Published: 2023-01-08 04:53:45

[✨ **Watch on YouTube**](https://youtu.be/syJcgh3JBkw)

Let me share my experience and thought process behind moving a static website from Gatsby to NextJS so you can find interesting bits for your project.

I started writing blog posts on Medium in 2017. The platform is good enough to get going, but if you want to customize your posts, promote something and truly own your content, you need a dedicated blog. I did basic research, and at that time, Gatsby was an obvious choice for starting a static website with React.

I had a blog on Gatsby for two years while not working actively on content. Yet recently, I got back to consistent content creation and wanted to bring the UX/UI of the blog to the next stage. Yet I wasn't sure continuing with Gatsby would work long term. Its plugins always had troubles, and the GraphQL setup didn't feel intuitive.

Yet my blog had more than one hundred posts, and I wanted to test it on something smaller. Luckily I had another gatsby website - [booksconcepts.com](http://booksconcepts.com/) with highlights from nonfictional books bringing around 6 thousand monthly visitors from Google.

The main difference between NextJS and Gatsby is the data layer. NextJS allows you to do it any way you like through either getStaticProps or getServerSideProps, while Gatsby makes you use a GrahQL layer. To move markdown files, I had to write a few small functions that read files from a local folder and convert them to the Book format. We don't need plugins to parse markdown files - it's enough to use a single function. The only time-consuming part of migrating to NextJS was image optimization. Gatsby does this at the build time, while NextJS requires a server. I solved it well enough with a bash script and a few React components, which you can learn about in the video in the description.

Migrating BooksConcepts was a minor success, but as I headed toward [radzion.com](http://radzion.com/)'s blog, I reasoned it would take too much time to make it worth it. NextJS doesn't allow storing images outside the public folder, while my current setup keeps markdown and image files together. So I would need to write a sophisticated migration script or do it manually. In the end, I decided to upgrade the UX/UI of the current website and decouple Gatsby and the representation lawyer as much as possible.
Easy Way to Bootstrap React App in 2023
Published: 2023-01-08 04:53:12

[✨ **Watch on YouTube**](https://youtu.be/gLFvg_U3OgM)  |  [🐙 GitHub](https://react-toolkit.radzion.com)

In the last six years of making front-end at startups and for my apps, I had to start quite a few React projects from scratch. In this video, I want to share a setup I'm currently using so you can find interesting bits for your new project. I'm using NextJS for most cases, except if it's a tool or a web3 app that won't have much content, then CRA will be enough. Then I go to the react-toolkit repo and copy the lib directory. It has components, hooks, and utils that most front-end apps would need. When you work with specific technology for years, you start noticing patterns you can extract and use in other projects. That's how I build up react-toolkit. Once I see a component that doesn't drug the business logic of the current project and might be helpful in other situations, I would copy it to the lib folder.

The most prominent part of the toolkit is the UI folder with all kinds of components, ranging from Text and Buton to Combobox and Countdown. These components support dark and light modes, similar to Notion's color palette. Then we have a setup for managing local storage, small hooks, and utils.

I don't use libraries for managing state since react-query takes care of the state coming from the server, and React's context is good enough for the app's state. For analytics, I use [Amplitude](https://youtu.be/H3OtvSmuBV8), and to track errors - [Sentry](https://youtu.be/irBmT1SXuW0).

The easiest way to deploy both NextJS and a SPA React would be Vercel. It would take care of continuous deployment, hosting, and image optimization for NextJS projects. Yet if it's a fully static website, and I don't want to overpay for Vercel, I would go with my old terraform config for hosting a single page application on S3 and CloudFront.
The Crucial Concept of the Temporal Dead Zone: Don't Get Caught Off Guard in Your Next Interview!
Tags: javascript, react, tutorial, interview
Published: 2023-01-08 04:50:24

Have you ever been coding along, minding your own business, when suddenly you get a pesky ReferenceError that just won't go away? "But I already declared that variable!" you cry out in frustration. Well, my fellow programmer, you may have stumbled upon the mysterious and often misunderstood phenomenon known as the temporal dead zone (TDZ).

But fear not! The TDZ is actually a pretty simple concept once you wrap your head around it. Essentially, it's a period of time in which you can't access a variable that you've declared with the let or const keywords. This is because, in ES6, these declarations are not "hoisted" to the top of the scope like var declarations are.

So what does this mean in practical terms? Let's take a look at an example:

```
console.log(x);  // ReferenceError: x is not defined
let x = 5;

```
In this code, we're trying to log the value of x to the console before it's even been declared. If we were using the var keyword, this would work just fine. But because we're using let, we get a ReferenceError. This is because the TDZ prevents us from accessing the x variable until it's actually been declared.

But what if we want to use the value of x before it's been declared? In that case, we can use the let keyword inside of a block (enclosed in curly braces) to "hoist" the declaration to the top of the block:

```
{
  console.log(x);  // undefined
  let x = 5;
  console.log(x);  // 5
}

```

In this example, the declaration of x is "hoisted" to the top of the block, and we're able to access it without any issues.

So there you have it, a crash course on the temporal dead zone in ES6! Just remember: if you're getting a ReferenceError and you're sure you've declared your variable, check to make sure you're not trying to access it in the TDZ. Happy coding!
Laws of Logic in Discrete math
Published: 2023-01-08 04:49:17

Identity Laws `p ^ T = p`

Domination Laws `P ^ F = F`

Idempotent Laws `p ^ p = p`

Double negation Law `not(not p) = p`

Associative Laws `(p ^ q) ^ r = p (p ^ r)`

Commutative Laws `p ^ q = q ^ p`

Negation Laws `p ^ not p = F`
Introducing the AWS Transfer Family Service
Published: 2023-01-08 04:26:12

**Are you tired of slow, insecure data transfer processes? 💤 The AWS Transfer Family is here to help!** 🚀

<u>What is the AWS Transfer Family</u>, you ask? It's a group of services that enables you to quickly and securely move data to and from the cloud. 🌩️ The family includes AWS Transfer for SFTP, AWS Transfer for FTP, and AWS Transfer for FTPS.

But what makes the AWS Transfer Family so great? 🤔 For starters, it's **super easy to use**. Setting up and managing your data transfer process is a breeze, thanks to the **user-friendly interface** and **integration with other AWS services** such as Amazon S3 and Amazon EC2. 💻 This saves you time and resources, so you can focus on running your business.

But that's not all! The AWS Transfer Family is also extremely **secure**. 🔒 All data transfer activities are encrypted, ensuring that your sensitive information is always protected. Plus, you have the option to enable **multifactor authentication** for an extra layer of security. 🛡️

But how does it all work? 🤔 It's actually quite simple. First, you choose the service that best fits your needs - SFTP, FTP, or FTPS. Next, you set up your server and configure your data transfer process, including the location of your Amazon S3 bucket. Finally, you can test your data transfer by uploading and downloading files to and from your S3 bucket. 📤📥

Checkout this cool animated video to see how it works!


{% embed https://youtu.be/or7WC2SuECM %}


Want to see the AWS Transfer Family in action? 💪 Check out our demo of how to set up an SFTP server and test the data transfer process:


{% embed https://youtu.be/ln3Dcm6g9Tw %}



And that's it! You've successfully set up an SFTP server using AWS Transfer Family and tested the data transfer process. 🎉 As you can see, it's a quick and easy way to move data to and from the cloud. 🌩️ So why not give the AWS Transfer Family a try today? 🚀

🙏Thank you for following along with the tutorial so far. If you found this blog to be helpful, please be sure to follow me and consider subscribing to my YouTube channel. Good luck 👍 on your cloud journey!