teleren/devto huggingface dataset:
Backup G Suite Email
Published: 2023-08-22 12:58:56

## Backup G Suite Email- The Best Strategy

**G suite email backup** is an indispensable practice to summon bolstered data safety into action. But once we have a G suite mail backup within vicinity, have we mastered the art of augmenting data safety? Most of us feel highly satisfied by backing up data onto a local hard drive but it is prone to encounters with corruption and data theft. Even if we secure ourselves from losing our vital data to malicious elements by using an effective antivirus tool, the basic problem still remains, which is a hard disk having a limited time span. To be really on the safer side we need additional backups, and how they come to our rescue in times of need has been detailed below. 

## Backup plan will reap you rich dividends in the long run

This is the most practical backup plan that is bound to serve you well in the long run. We are not advising against having the local drive as your primary backup location, but you can bolster data safety by situating another copy of G suite mail backup on an external hard disk. After letting prudence take charge, you can complement it by storing another copy of backup onto an off-site location most preferably a cloud based data storage service. These three backup locations come together to form a dependable environment of thriving data safety.

## Let’s shift our focus to space management

We know how space constraints are putting a lot of strain on modern day businesses. Data storage costs have spiked up and putting a lid on them is becoming increasingly difficult. But you can be a little proactive and get yourself a G suite email backup tool that presents some degree of data compression without making inroads into data integrity. You can further boost savings in space by employing Selective Backup on offer from an all-endowed tool named Mail Backup X. This tool offers high degree of data compression while keeping data integrity intact. Moreover, this tool allows a user to perform Selective Backup, where he/she can wield the power of choice to zero in on important mails and include them in backups while discarding the unnecessary mails that can be regarded as sheer bloat ware.

## Why Mail Backup X is your best bet to give your data management strategy the fuel it requires for prospering in all dimensions?

Undoubtedly, to [backup G suite email](https://www.mailbackupx.com/g-suite-backup/) with this tool is a convenience-rich exercise, but there’s more in store for you such as seamless email archiving and instant data recovery. This tool makes it all possible while keeping things simple. This tool is perfect fusion of sophistication with simplicity, where you get to make the best possible use of latest technology. 

## Get the free demo today 

If you want to get into the thick of things without wasting a second, then do download the free demo of this tool, which will present you full experience of the excellence of this tool in giving you that extra edge in data management.
[1][DEV NOTE] Initial turbo project and add tailwindcss library
Tags: nextjs, tailwindcss, turbopack, react
Published: 2023-08-22 12:58:17

> This is dev note for this project: [turbo - nextjs - prisma - postgres blog
](https://github.com/CodeForStartup/nextjs-prisma-postgres)

  
## Prepare environments


ENV: node v16.20.1
In this project, I use pnpm. So that we need to install pnpm by:
  
`npm install pnpm -g`



## Init project

Firstly, we need to create project by this command:
`pnpm dlx create-turbo@lasted`

Enter project name: "codeforstartup" 


![Create turbo project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scfl44pfe0o8r62zi8ce.png)


## Start project

`turbo dev`



## Add `tailwindcss`

### Add `tailwind-config` package
1. Under `packages` folder, create `tailwind-config` folder.  
2. Under `tailwind-config` folder create:  
File `packages/tailwind-config/package.json`
```
{
  "name": "tailwind-config",
  "version": "0.0.0",
  "private": true,
  "main": "index.js",
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}
```

File `packages/tailwind-config/tailwind.config.js`
```
const colors = require("tailwindcss/colors");

module.exports = {
    content: [
        // app content
        "./app/**/*.{js,ts,jsx,tsx}"
        // include packages if not transpiling
        // "../../packages/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};
```

Nice. You added `tailwind-config` successfully. Now we need to install it by:
`pnpm install`


### Install `tailwindcss` and `tailwind-config` for web app

To config tailwindcss for web app, we need to install following package:
`pnpm add tailwindcss postcss autoprefixer --filter web
`

To install tailwind-config package for web, we can use this command:
`pnpm add --save-dev tailwind-config@workspace --filter web`

Create `apps/web/postcss.config.js`: 

```
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
```

Create `apps/web/tailwind.config.js`:
```
const sharedConfig = require("tailwind-config/tailwind.config.js");

module.exports = {
    presets: [sharedConfig],
};
```
Create `apps/web/app/global.css`
```
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
```
In the `apps/web/app/layout.tsx`, import this line:

```
import "./global.css";
```

Now, we install tailwind css successfully for turbo project.


## Reference

[1] For more detail, you can referent this Pull request: [[feat] Add tailwind css package](https://github.com/CodeForStartup/nextjs-prisma-postgres/pull/4)
[2] [Turbo official example](https://github.com/vercel/turbo/tree/main/examples/with-tailwind)
[3] [Create new turbo project](https://turbo.build/repo/docs/getting-started/create-new)
[4] [Install package for turbo project](https://turbo.build/repo/docs/handbook/package-installation)
Sass Placeholder and Mixins: Your Toolkit for Smarter SCSS Styling
Tags: sass, css, scss
Published: 2023-08-22 12:58:08

A placeholder in Sass is a special kind of selector, it's a cross over between a mixin and a class selector - in my opinion - and are not included in the CSS output. In this blog I will outline the uses of placeholders, their powerful features and also some of the drawbacks.

The first time I came across placeholders was when one of my developer colleagues suggested to use it when we were building a static HTML/CSS components for a client. We researched about placeholders and decided to adopt it in our SCSS markup.

## Placeholders and usage
A placeholder is represented by a percentage symbol `%` and is typically written like this:

```sass
%example-placeholder {
    padding: 20px;
    font-size: 18px;
    line-height: 28px;
    background-color: #fff;
  }

// then we can apply it in our css class

.class-one {
  @extend %example-placeholder;
  border: 1px solid #2596be;
}
```

In the above example we created a placeholder with a set of css properties and applied it to ~~`.my-class`~~ `.class-one` by using the `@extend` rule.

Let's add another class before we see how the CSS output looks like.

```sass
// scss file

%example-placeholder {
  padding: 20px;
  font-size: 18px;
  line-height: 28px;
  background-color: #fff;
}

.class-one {
  @extend %example-placeholder;
  border: 1px solid #2596be;
}

.class-two {
  @extend %example-placeholder
}

```

Here we have two classes, one with a placeholder and the other without. Let's have a look the CSS output.

```sass
// css output
.class-two, .class-one {
  padding: 20px;
  font-size: 18px;
  line-height: 28px;
  background-color: #fff;
}
.class-one {
  border: 1px solid #2596be;
}
```

We can learn that from the CSS output that a placeholder's properties is applied to classes that share it.

> Placeholders are not included in the compiled css output, only its properties for its respected class.

We can even use a palceholder inside another placeholder like so:

```sass
%placeholder-one {
  margin-top: 24px;
  background-color: red;
}

%placeholder-two {
  @extend %placeholder-one;
  display: flex;
  flex-direction: column;
}

```

## Powerful combination of placeholders and mixins

We can use mixins inside placeholders to create some easy responsive styling. Let's look at an example.

```sass
// define some mixins for responsive design
@mixin tablet {
  ...properties for tablet screens
}
@mixin desktop {
  ...properties for desktop screens
}

// define placeholders with mixins

%p-default {
  font-size: 16px;
  line-height: 24px

  @include tablet {
    font-size: 20px;
    line-height: 28px;
  }

  @include desktop {
    font-size: 24px;
    line-height: 32px;
  }
}

// apply placeholder

.blog-summary {
  @extend %p-default;
}

.nav-link {
  @extend %p-default;
}
```

This way it is the combination of placeholders and mixins that allow us to re-use the same block of properties in a more efficient way.
Customize Odoo Without Limits: Services to Extend Odoo's Functionality
Published: 2023-08-22 12:53:15

Odoo is an open-source ERP platform that offers incredible flexibility and customization potential at a fraction of the cost of proprietary solutions. With the help of an experienced Odoo development company, you can customize and extend Odoo to your business’s specific needs without compromising the core structure. Here’s an overview of [**Odoo development services**](odoo development services) to unlock powerful capabilities and unlimited functionality.

### Module Development

While Odoo comes packed with thousands of modules to activate various features, you may find certain capabilities missing for your workflows. With custom module development, you can add entirely new apps and programs tailored to your requirements.

Experienced Odoo experts can build modules for CRM, inventory and warehouse management, manufacturing, eCommerce, HR, accounting, and more. The modules integrate seamlessly with your platform while giving you specialized tools that match your needs.

### Customization

Even with existing Odoo modules, you may want to tweak and optimize the software for enhanced performance. Odoo development enable you to customize everything from interfaces to workflows to reporting.

You can modify forms, list views, menus, and more to suit your preferences. Odoo developers can also optimize internal processes, approval cycles, data structures, and automations to streamline operations and increase productivity.

### Third-Party Integrations

To get the most out of your ERP, you need it to communicate with other systems used across your organization. Custom integrations allow you to unify data between Odoo and third-party apps such as shipping solutions, payment gateways, marketing tools, and more.

[**Odoo experts**](https://www.biztechcs.com/blog/odoo-experts-roundup-and-their-insights/) can build custom APIs and bi-directional connectors to enable cross-platform data sharing. This delivers an automated flow of information between Odoo and external programs for greater visibility and efficiency.

### Migrations and Upgrades

As your needs evolve, Odoo developers can assist in migrating your data or upgrading to newer Odoo versions smoothly. They can customize the latest features to work with your existing setup so you can benefit from improved capabilities.

Odoo erp software development also ensure optimal configuration for your workflows rather than a one-size-fits-all approach. Expert guidance enables you to scale Odoo as your business grows.

With unmatched Odoo expertise and development talent, a custom Odoo solution can be tailored to fit your business needs precisely. Any industry or any size business can benefit from leveraging Odoo's adaptable open-source framework and amplifying it with [**Odoo customization**](https://www.biztechcs.com/blog/odoo-customization-for-your-business/). By tapping into Odoo's potential and expanding it with specialized custom capabilities, companies can build a highly agile and future-proof digital platform to drive long-term success.
Supercharge Redux with ‘immer’: Using ‘immer’ to update Redux state in a more readable and safer way.
Published: 2023-08-22 12:41:29

Using immer in Redux reducers can significantly improve the readability and maintainability of your code, while also helping to avoid potential issues that can arise when not using it. Here are some reasons why using immer is considered better:


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

1/Immutability Made Simple: One of the core principles of Redux is immutability, which helps ensure predictability and efficient state management. While the old way of updating the state using spread operators `({ ...state, counter: state.counter + 1 })` achieves immutability, it can become cumbersome and error-prone, especially when dealing with nested objects and arrays. immer simplifies the process by allowing you to directly modify a draft state while maintaining immutability.

2/Clarity and Readability: With immer, your code becomes more concise and expressive. The syntax closely resembles that of mutable updates, making it easier to understand what changes are being made to the state. This is particularly helpful when dealing with complex state structures or a series of updates.

3/No Need for Manual Cloning: When using the traditional approach, you need to manually clone nested objects and arrays to ensure immutability. With immer, you can update nested properties directly within the draft state, saving you from writing repetitive cloning code.

4/Avoiding Accidental Mutations: Without immer, it's possible to accidentally mutate the state, leading to unpredictable behavior in your application. With immer, you work on a draft state that is a copy of the original state, so you don't have to worry about unintentional mutations.

5/Performance Optimization: immer is designed to optimize the performance of updates. It creates a proxy layer over the draft state and applies updates lazily, only modifying the necessary parts of the state when changes are made.

6/Simplifying Complex Reducers: Reducers that handle complex state structures or deeply nested objects can become difficult to manage using the traditional approach. immer simplifies these scenarios by allowing you to directly modify the draft state in a natural and intuitive way.

While not using immer might not cause immediate issues, as your application grows, the codebase becomes more complex, and more developers get involved, the risk of introducing accidental mutations and decreasing code readability increases. Using immer helps mitigate these risks and leads to cleaner, more maintainable Redux code.
How can I write my first program in Go
Tags: go, programming, tutorial, cloud
Published: 2023-08-22 12:40:18

Writing a "Hello World" program is a traditional way to start with a new programming language. Here's how you can write and run a "Hello World" program in Go:

1. **Installation**
   If you haven't installed Go (often referred to as "Golang"), visit the official Go website for installation instructions: https://golang.org/doc/install

2. **Writing the Code**
   Create a new file called `hello.go` using your favorite text editor and enter the following code:

   ```go
   package main

   import "fmt"

   func main() {
       fmt.Println("Hello, world!")
   }
   ```

3. **Explanation**:
   - `package main`: This defines the package name of your program. Every Go executable program starts with the `main` package.
   - `import "fmt"`: This includes the `fmt` package, which contains functions for formatting and printing strings.
   - `func main()`: The `main()` function is the entry point of the program. When you run the program, this is the first function that gets executed.

4. **Running the Code**:
   Navigate to the directory containing your `hello.go` file in your terminal or command prompt, then type the following command:

   ```bash
   go run hello.go
   ```

   After running the above command, you should see the output:

   ```
   Hello, world!
   ```

5. **Building the Code** (Optional):
   If you want to compile the code into a binary instead of just running it, you can use the following command:

   ```bash
   go build hello.go
   ```

   This will produce an executable in the current directory (e.g., `hello.exe` on Windows or just `hello` on macOS/Linux). You can then run this executable directly to see the output.

Congratulations! You've just written and run your first program in Go.

Thank you for reading. I encourage you to follow me on Twitter where I regularly share content about JavaScript and React, as well as contribute to open-source projects and learning golang. I am currently seeking a remote job or internship.

Twitter: https://twitter.com/Diwakar_766

GitHub: https://github.com/DIWAKARKASHYAP

Portfolio: https://diwakar-portfolio.vercel.app/
SourceAI: AI-Driven Code Generation
Tags: webdev, javascript, beginners, programming
Published: 2023-08-22 12:29:30

## Introduction:
Welcome to the future of code generation! Introducing SourceAI – an AI-powered code generator that opens the doors of programming to all, regardless of experience. With a clear vision, straightforward interface, and remarkable speed, SourceAI harnesses the prowess of GPT-3 and Codex to bring you next-generation code development. Dive into this blog to discover how SourceAI is transforming programming into an accessible endeavor for everyone.

**Effortless, Fast, and AI-Powered:**

**1. Easy Accessibility:**
[SourceAI](https://www.aiforme.wiki/ai/tools/SourceAI) breaks down barriers. It's designed for everyone, even those who aren't developers. With an intuitive interface, generating code becomes simple and approachable, aligning with our mission to democratize programming.

**2. Accelerated Development:**
Time is precious, especially in development. [SourceAI](https://www.aiforme.wiki/ai/tools/SourceAI) saves you hours by enabling one-click code generation. Bid farewell to painstaking coding processes and unlock newfound efficiency.

**3. AI's Unprecedented Power:**
Powered by GPT-3 and Codex, SourceAI is at the forefront of AI technology. This translates to code generation that's not only accurate but also advanced, propelling software creation into the future.

## SourceAI's Mission:

At [SourceAI](https://www.aiforme.wiki/ai/tools/SourceAI), we envision a world where software creation is for everyone. We're more than just a team of developers – we're a group of empathetic and forward-thinking individuals on a mission to accelerate human progress by making programming accessible to all.

**A Vision Beyond Boundaries:**
Software is the driving force behind progress in every industry. Yet, only a fraction of the population are engineers. By granting non-engineers the ability to create software, we exponentially increase the impact of software on human advancement.

**Unleash Your Creativity:**
With [SourceAI](https://www.aiforme.wiki/ai/tools/SourceAI), coding is no longer confined to developers. Anyone can create software by describing it in plain text. Our standalone system, based on the GPT-3 language model, translates your descriptions into functioning code in various languages – English, French, German, Spanish, and more.

**Speed Meets Quality:**
Software development is complex and time-consuming. SourceAI transforms the landscape. Developers can generate source code in seconds, significantly reducing development time while maintaining quality.

**Conclusion:**
[SourceAI](https://www.aiforme.wiki/ai/tools/SourceAI) marks a pivotal shift in the realm of code generation. With its easy accessibility, blazing speed, and the remarkable power of GPT-3 and Codex, programming is now within everyone's reach. Join us in this mission to democratize programming and embrace an era where software creation is limitless, efficient, and imaginative. Experience the future of coding with SourceAI and redefine the boundaries of possibility.
How ChatGPT Can Improve Your Productivity As A Developer
Tags: chatgpt, developer, development
Published: 2023-08-22 12:24:55

In this constantly changing world, competition is the only thing that never changes, particularly in the IT industry. A plethora of new technologies have superseded conventional methods for software development. The most difficult role across all of these evolutions is that of the developer.

**What is ChatGPT?**

OpenAI created the language model known as ChatGPT. On the GPT-3.5 architecture, it is based. "Generative Pre-trained Transformer," or GPT for short, describes the design and training process of a deep learning model.

**How can ChatGPT Benefit Developers?**

1. Code Assistance
2. Research
3. Debugging Aid
4. Documentation Companion
5. Idea Generation and Planning
6. Collaboration and Teamwork
7. Accessibility and Inclusivity
8. Rapid Prototyping
9. Code Refactoring and Optimisation
10. Personal Productivity Assistant

**How to Efficiently Use ChatGPT for Development?**

1. Know the benefits and limitations of ChatGPT
2. Use Specific Prompts
3. Leverage its Code Auto-completion
4. Test and Verify the Generated Code
5. Use ChatGPT as a Learning Tool
6. Integrate into an IDE or Code Editor
7. Combine it with Other Tools
8. Utilize it for Troubleshooting
9. Collaborate and Share Knowledge
10. Ensure Data Security and Privacy
11. Provide Feedback to Improve the Model
12. Practice Responsible AI Use

As a potent language model created by OpenAI, ChatGPT, in conclusion, has the potential to greatly increase a developer's productivity over the course of the software development lifecycle. Developers can effectively include ChatGPT into their workflow to expedite jobs, retrieve pertinent data, and improve their coding experience by being aware of its capabilities and limitations. Take care to utilize this fantastic instrument to its fullest. So, [this article](https://www.stillbonarticles.com/how-chatgpt-can-improve-your-productivity-as-a-developer/) will help you to Improve Your Productivity As A Developer.
How to get svg from the site
Tags: beginners, tutorial, design, frontend
Published: 2023-08-22 12:20:16



If you see the use tag inside the svg - it means that the picture is used by reference, i.e. it is rendered once in the house and then in all other places it is used by reference, how to pull it out:

**1. Open the DOM tree**

![DOM tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/247hpy9fkloj6hbuz3yw.png)

**2. Find the link that uses the image** (in our case `xlink:href="#svg-icon-logo"`) 

![svg-icon-logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smyragdqzc3bvc1xk9oa.png)

**3. Press ctrl+f and paste** this `#svg-icon-logo` ID into it
**4. Find the symbol tag** with the same id, expand it and see the part of our svg

![guts of our svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h4jguzmicig56fh3jvm.png)

**5. Copy this element**

![copy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgs3bkqvulh4poxxboy6.png)

**6. Create a file** with the extension .svg, open it with Notebook
**7. Take a standard svg tag** from any other svg

![standard svg tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mm0o58744zme0pi9h1zq.png)

**8. Plug in the data** from symbol, replace the properties `width="16" height="17" viewBox="0 0 16 17"` in the svg tag with those specified in symbol, in our case it is `viewBox="0 0 0 465 146"`, the last two digits are width and height.

**9. Get svg** 

![get svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhi2h9v6h8a3vf26gp8v.png)

**10. Be sure to check** that all quotation marks in tags are not inverse, but regular `""`.

![fin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jznivvy0pt3819tenkq5.png)