teleren/devto huggingface dataset:
An Overview of Front-End Development
Tags: fullstackdevelopmentcours
Published: 2022-08-24 07:52:07

An Overview of Front-End Development

A front-end web developer is a person who makes all of the buttons, links, animations, and other elements you see on websites. The front-end developer must translate the client's vision and design concept into code.

The logo, search bar, buttons, overall structure, and user interface were all created by a front-end developer. The appearance and feel of the website are the responsibility of front-end developers. Front-end developers must also ensure that the website looks well on all platforms (phones, tablets, and computer screens).
The website must look nice across all devices, which is another responsibility of front-end developers (phones, tablets, and computer screens).
HTML, CSS, and JavaScript are the key languages you need to be proficient in. You can then focus on frameworks, libraries, and other helpful tools.

HTML
HyperText Markup Language, or HTML. The page's content, such as buttons, links, headings, paragraphs, and lists, is displayed using HTML.
HTML shouldn't be utilized for styling. CSS is used for that purpose.
To begin learning the fundamentals, I advise working through the freeCodeCamp HTML tasks.

CSS
CSS, or cascading style sheets, is an acronym. The style of your website, including its colors, designs, and animations, is controlled by CSS.
You will learn the fundamentals of CSS, responsive design, and accessibility in freeCodeCamp's Responsive Web Design Course. Websites must use responsive design to look nice across all platforms.
Making sure that everyone can use your websites easily is known as accessibility. You don't want to design websites that people using screen readers or other assistive technologies can't utilize.
You'll be able to start creating simple web pages once you've finished the course.
 
JavaScript
Users can interact with the website using JavaScript. You can find JavaScript examples on almost any website, including the freeCodeCamp homepage.
For instance, when I click the Menu button at the top of the page, a dropdown menu of choices is displayed. It toggles back and forth between opening and closing the Menu each time I hit that button.
 
Preprocessors, Libraries, and Frameworks for CSS
You can use different libraries and frameworks once you have a firm grasp of the foundations of CSS. These innovations were made to speed up the process of development.
How Can a Front End Developer Find Work?

After becoming an expert in front-end development's technical components, you must focus on putting together your materials for job applications. There are a tonne of excellent resources that can show you how to get a job as a developer. If you are looking for a complete web development Bootcamp, Learnbay has the best [full stack development course](https://www.learnbay.co/full-stack-software-development-program) which will help you secure a lucrative position in the IT sector.
Releasing Cherrybomb 0.7
Tags: api, programming, beginners, opensource
Published: 2022-08-24 07:18:15

I'm happy to tell you that the [Cherrybomb](https://github.com/blst-security/cherrybomb) version 0.7 open source tool for validating application programming interface (API) specifications is now available.

The tool for validating APIs can now be part of your CI pipeline, Your life will become much simpler as a result.

[Cherrybomb](https://github.com/blst-security/cherrybomb) is a comprehensive, open-source API definition that simplifies the design, construction, and consumption of application programming interfaces (APIs) for software developers. Everything from data formats and request methods to error handling and authentication is covered within the standard.

We wanted [Cherrybomb](https://github.com/blst-security/cherrybomb) to be simple, both to understand and to use, so we created it that way. Since the specification is mostly based on already-established standards like the JSON API and HTTP, it should be easy for developers to adapt to the new environment.

I believe that [Cherrybomb](https://github.com/blst-security/cherrybomb) will make it simpler for developers to construct application programming interfaces (APIs) that are standardized, well-documented, and straightforward to implement. We have high hopes that [Cherrybomb](https://github.com/blst-security/cherrybomb) will emerge as the industry standard for application programming interface (API) development.

Check out the specifications for [Cherrybomb](https://github.com/blst-security/cherrybomb) on GitHub if you want to get started with it.
DATA ENGINEERING TOOLS, PYTHON & SQL
Tags: python, sql, database
Published: 2022-08-24 07:14:00


Data engineers build data pipelines. They’re also the backbone of data infrastructure design and algorithm development. To build such a rich data infrastructure, data engineers require a mix of different programming languages, data management tools, data warehouses, and whole sets of other tools for data processing, data analytics, and AI/ML.
With a detailed focus on Python and SQL, this week's post will illustrate the tools that data engineers use to create effective, efficient data architecture.
Digital Marketing Agency at pixel studios
Tags: javascript, programming, webdev, python
Published: 2022-08-24 07:12:39


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

**A METHOD IN THE MIDST OF THE CRAZINESS OF DIGITAL MARKETING!**

People often think that digital marketing is just one thing, but it's actually a field that involves carefully coordinating a number of different tasks. It is important to choose the right mix of Digital Marketing activities that fit with the brand, offline marketing efforts, customer base, and what competitors are doing. After choosing, adjusting efforts based on results requires a quick response. Even if something works for a competitor, it might not work for a business. Pixel Studios acts as a Digital Marketing Agency in this case.

**HOW WE DEVELOP DIGITAL MARKETING STRATEGY FOR YOUR BUSINESS**.

Every business is different in terms of who it is and where it wants to go. At Pixel Studios, our Digital Marketing Strategy changes to fit the needs of the business at that time. In a nutshell, this is how we do things.

**Industry**.

Learn about the field in which your business works.

**Business Model**

Knowing how your business fits into the industry

**How customers act**

Who are your customers and how do they act around your product?

**Short-Term Goals**

Understanding the short-term goals, like the launch of a product

**What competitors do**

Who your competitors are and how they do business.

**4 levels of Digital marketing impact in pixel studios:**.

At Pixel Studios, we classify Digital Marketing Activities at 4 levels based on the client’s business & 

**Hygiene**

Every digital asset aligns to the brand design & communication forming a strong foundation.


**Discoverable**

The website discoverable in search engines & social media posts discoverable with the right hashtags are some examples.


**Engaging **

The design & copy should not only catch the attention but also make it more compelling to intitate a  Conversion.

**Performing**.

Engagement & Conversion should lead to business results like purchases, downloads, signups thus, ensuring a better ROI.


-------------------------------------------------------------------------------------------------------------------------------
10 Valuable points you should know before buying any hosting plan
Tags: web, hosting, webhosting, webdev
Published: 2022-08-24 07:08:05

1.Reasonable Cost:- Pricing is an important consideration for any business acquisition. When selecting a domain registrar, you should carefully examine the pricing model.

2.Renewal Prices:-When you purchase a domain, it has a limited time validity period after which it must be renewed. Of course, you will not leave the website domain once the initial registration period expires. As a result, while selecting a domain registrar, you must consider the domain renewal fees.

3.Transparent Processes:- As you should have transparency in your work, you must look for the same quality while picking a domain registrar for your website. A good business has nothing to hide from its customers. Choose a registrant that is open about its pricing, policies, and practices.

4.Policy for Domain Expiration:-Once a domain has expired, anyone can buy it and host their own website on it, effectively shutting down your business. If this occurs, you will be compelled to repurchase the domain name at a higher price, or you may lose access to it permanently. Check your registrar’s domain expiration policy before purchasing a domain name.

5.Additional Services:- Your domain-related requirements do not cease with the purchase of a domain name. Web hosting, email hosting, security, email marketing, and other services are essential. In addition to selling domain names, many famous domain registrars provide additional services. Some firms may even give you the domain name for free if you sign up for their other services. Buying all of your web services from a single firm may be beneficial.

6.Data Privacy:-You provide the registrar with specific personal details. As a result, when working with a domain registrar, you must take data protection carefully. Your data should be kept private by the registrar. [Read more](https://yougetserver.com/10-valuable-points-you-should-know-before-buying-any-hosting-plan/#:~:text=Security%20Measures)
Install MongoDB Community Edition on Ubuntu 22.04 lts/pop os
Tags: ubuntu, linux, mongodb, beginners
Published: 2022-08-24 06:56:45

Ubuntu 22.04 doesn't have official MongoDB packages yet, But 20.04 has <span class="emoji-outer emoji-sizer"><span class="emoji-inner" style="background: url(chrome-extension://gaoflciahikhligngeccdecgfjngejlh/emoji-data/sheet_apple_32.png);background-position:16.039952996474735% 53.99529964747356%;background-size:5418.75% 5418.75%" data-codepoints="1f385"></span></span>

* Download libssl1.1_1.1.1f-1ubuntu2_amd64.deb from official repository:
```bash 
wget http://archive.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1f-1ubuntu2_amd64.deb
```
* install it 
```bash 
sudo dpkg -i libssl1.1_1.1.1f-1ubuntu2_amd64.deb
```
* Finally 
```bash 
sudo apt install -y mongodb-org
```

**Start MongoDB community edition**
```bash
$ sudo systemctl start mongod
$ sudo systemctl daemon-reload
$ sudo systemctl status mongod
```
![Mongodb status checking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgwn88soq6pgwo7v1pdf.png)

* Stop MongoDB by-
```bash
sudo systemctl stop mongod
```
🤘 Thank you 

Check my others blog - 
* https://dev.to/siumhossain/how-to-serve-media-files-on-django-production-environment-531m
* https://dev.to/siumhossain/shortnote-redirect-and-catch-errors-in-fetch-hook-nuxt-ssr-33k2
* https://dev.to/siumhossain/how-to-implement-an-infinite-scroll-with-vue-and-nuxt-4d6k
* https://dev.to/siumhossain/generating-sitemap-xml-for-static-and-dynamic-from-multiple-api-endpoint-in-nuxt-js-2cij
* https://dev.to/siumhossain/how-to-serve-media-files-on-django-production-environment-531m
Trying to parse "accept-language" header, beware of extra spaces
Published: 2022-08-24 06:41:51

For some reason i've decided to parse this header myself the other day, shouldn't be that hard i supposed. And it wasn't that hard and everything was working perfectly locally.

Then i deployed this to my prod and things started to act weird. Only one language was detected and so forth. Finally i noticed that in prod my header string looked like this.

`"sv, fr; q=0.9, en; q=0.8, no; q=0.7"` 

and locally it looked like this

`"sv,fr;q=0.9,en;q=0.8,no;q=0.7"`

I'm not sure why and I'm not sure what is more correct. But i just needed to add some trim to my parsing method and now things works.
Match a CSS Class in Cypress
Tags: cypress, javascript, webdev, testing
Published: 2022-08-24 06:32:00

Another "note to self" post. Sometimes it's really hard to figure out how to assert stuff in various JS testing frameworks. Today i just wanted to check if a certain element had a CSS Class, and since i use CSS Modules i can't use "have.class" because i need to match the name. So according to [Cypress documentation](https://docs.cypress.io/api/commands/should#Assert-class-name-contains-heading) this is how you do it. Note that I'm also using Cypress Testing Library, i.e. the "findByText" part of this code.

```javascript
        cy.findByText(/english/i).should(($s) => {
          expect($s).to.have.length(1);
          const className = $s[0].className;
          expect(className).to.match(/LanguageList_highlighted/gi);
        });
```
Tbh it feels a bit complicated and it would of course be nice if you could just do something like `cy.findByText(/english/i).should("match.class", /LanguageList_highlighted/gi)`. If anyone know a simpler way of doing this, let me know.
Decode String - I
Tags: javascript, leetcode
Published: 2022-08-24 06:17:36

Can be done with recursion but for now I will go with Stack..
```
var decodeString = function (s) {
  let stackItem = [];
  for (let i = 0; i < a.length; i++) {
    if (a[i] === "]") {
      let tempNum = "";
      let tempStr = "";
      while (stackItem[stackItem.length - 1] !== "[") {
        tempStr = stackItem.pop() + tempStr;
      }
      stackItem.pop();
      while (!isNaN(stackItem[stackItem.length - 1])) {
        tempNum = stackItem.pop() + tempNum;
      }
      let finalstr = "";
      for (let j = 0; j < tempNum; j++) {
        finalstr += tempStr;
      }
      stackItem.push(finalstr);
    } else {
      stackItem.push(a[i]);
    }
  }

  return stackItem.join("");
};

```
Why people prefer Open Source Software?
Tags: opensource, programming, webdev, tutorial
Published: 2022-08-24 06:15:35

Open source refers to a program in which the source code is available to the general public for use and/or modification from its original design free of charge. Open source software is software that's source code can be modified by anyone. Source code is the part of software programming that computer user don't see.

Why people prefer Open Source Software?

1. Freedom: With the use of Free Open Source Software (FOSS), users can modify the software to suit their own needs. Open source creates a global community of users and developers where you may discuss any issues. The user can modify and control open source software in addition to accessing it.

2. Quality: Numerous users and developers in the open source community are working tirelessly to increase security and propose numerous innovative features. Open source software is developed with user input as well, allowing developers to create anything they like. The open source platform offers superior and cutting-edge software.

3. Flexibility: When a person utilizes platform software, such as Microsoft Windows and Office, they must continuously update both programs. You can run open source software on older technology because it requires fewer resources. Additionally, open source software bugs frequently get resolved right away.

4. Security: Software that is open source is safer than closed source software. A huge community exists within the open source industry, such as the Red Hat Security Response Team, and many other major projects (such as Apache and Mozilla) have their own security response teams, which enhances the security of software. The advantage of utilizing an open source Linux distribution is that the security features, including the Linux Firewall option, are highly outstanding.

5. Support Options:At the moment, open source software makes up 80% of the internet platform.

Large communities exist around open source software, and these groups are free to share their tips and ideas. The majority of Linux distributions, including Ubuntu, openSUSE, ClearOS, etc., have active online communities and forums.

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/channel/UCze04H5oeudQ01G9DDj-frA)
.NET - Create a Simple Scaffolding Tool
Tags: csharp, dotnet, vscode, cli
Published: 2022-08-24 05:53:00

We will use **Text Template Transformation Toolkit** also known as **T4**.

1. Create a console application.
    ```sh
    dotnet new console -o MyTool
    ```

2. Create a template file `ClassTemplate.tt` in the project directory.
    ```cs
    <#@ output extension=".cs" #>
    <#@ template language="C#" hostspecific="true" #>
    <#@parameter type="System.String" name="ClassName" #>
    public class <#=ClassName#>
    {  }
    ```

3. To process the template, we need a templating engine, [Mono.TextTemplating](https://www.nuget.org/packages/Mono.TextTemplating) is an open source implementation for that.
    ```sh
    dotnet add package Mono.TextTemplating
    ```

4. In `Program.cs`, write the code for processing the template.
    ```cs
    var className = args[0];
    var templatePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "ClassTemplate.tt");
    var outputPath = Path.Combine(Directory.GetCurrentDirectory(), className); 
    var generator = new Mono.TextTemplating.TemplateGenerator();

    var session = generator.GetOrCreateSession();
    session.Add("ClassName", className);
    
    generator.ProcessTemplate(templatePath, outputPath); 
    ```
5. Go to the desired directory and run:
    ```sh
    ProjectA> dotnet run path/to/MyTool Person
    ```
    This creates Person.cs in ProjectA directory:
    ```cs
    public class Person
    {  }
    ```

If you want to install and run it as a dotnet tool, read [this](https://dev.to/kazinix/net-create-a-simple-cli-tool-2380).

## Resource
[Microsoft Docs](https://docs.microsoft.com/en-us/visualstudio/modeling/code-generation-and-t4-text-templates?view=vs-2022)
New System Design Problem: Dropbox
Tags: leetdesign, interview, career, system
Published: 2022-08-24 05:50:32

9/100 Days of posting new system design problems 🔥

Sadly, I missed yesterday due to some violent food poisoning but after 24 hours of sitting in bed and drinking water, I'm back at it!

You can learn a lot about how big companies work by studying their infrastructure, and Dropbox is no exception!

Give it a whirl and lmk what you come up with

leetdesign.com/problems/dropbox
Vulnerabilities Issue
Tags: developer, programming, productivity
Published: 2022-08-24 05:49:08

Hi Friends,

Recently we ran ZAP Scanner against the Dotnet application and we are seeing these 2 Vulnerabilities

Remote OS command injection
Path Traversal issue


While checking the fixes, most of the suggested solutions seems to be Input validation.

Since code changes for input validation can cause code redundancy across the entire application, we are checking for alternative fix.

Any idea to resolve this issue.
Tips For Developers Who Want To Build A SAAS Startup
Published: 2022-08-24 05:40:52

Having built Proxies API and made it to 100 paid users for the first time in my startup life, I tried to compile a list of tips for other developers like me who might be thinking of starting something on their own.

Developers are a different beast, and the advice here may not apply to anyone who is not a developer and is a normal human being. 😀

Pick an idea you have used. When you start a startup one of the persistent problems you face is that you don't relate to the problem. If you are not a parent, its almost impossible to relate to any conversations that parents have about their troubles. You just don’t. This lack of empathy in a startup setting adds up to a huge disadvantage and will never allow you to be fully confident in what you are doing.
2. Pick an idea you have already paid for: If you have ever paid for a service, think very carefully about that. Can you code it yourself if you give yourself a few months? It is because developers don’t pay for shit. If an app forced you to do that, then there must a real need for that app.

3. Don’t pick something that needs a pretty UI: My product Proxies API is an API. I can get away with almost no UI. It is such a relief that I don’t have to work with a designer. I find that I am 4 to 5 times faster when I don’t have to deal with UI stuff.

4. Don’t pick anything that you need in-person sales for. Marketing is a developer’s friend. I realized this only later in my life. In-person sales are very weird for the developer personality. My advice. Don't do it. Learn how to market instead.

5. Pick something that is a self-serve model: People signup for a trial and decide to pay or not pay based on their trial experience. This is a beast that you can conquer. You don’t want to be going around talking to actual humans. It is not for us.

6. Try writing: If you can code and write, you will win the world. The whole success of Proxies API is based on constant improvements to code and a little bit of consistent writing over time.

7. Keep it real: Be clear on your motivations. I know that developers are not motivated by the prospect of making millions. But they are excited by the promise of financial freedom. So I was clear on my motivations when starting Proxies API — I didn’t want it to make me millions. I wanted it to give me financial freedom by earning what I earned in my day job. I didn’t need a penny more. By being clear about it, you are not living someone else’s life but your own, and it will give you the necessary fuel to keep going.

Have fun.

The author is the founder of Proxies API the rotating proxies service.
TV Channel Website: Creating Root User
Tags: webdev, tutorial, python, bottle
Published: 2022-08-24 05:18:00

GitHub: [https://github.com/Sokhavuth/TV-Channel](https://github.com/Sokhavuth/TV-Channel)
Vercel: [https://khmerweb-tv-channel.vercel.app/login](https://khmerweb-tv-channel.vercel.app/login)
<br/>

<p>Before building a dashboard, we need to create a rootuser or an administrator (admin) for him/her to supervise the dashboard. We will register the rootuser in the "users" collection in MongoDB Atlas for later use.</p>

<p>To achieve this goal, we are going to create a "User" class in the user.py file inside models folder. This class will be imported into the "Login" class in login.py file inside controllers folder. Doing so, we can instantiate User class and call createRootUser() method in that class to create an administrator or a rootuser.</p>

<p>To make user's password confidential, we could use Python standard library "hashlib" to hash the password.</p>

```py
# models/user.py

import config, hashlib, uuid


class User:
    def __init__(self):
        self.db = config.db
        self.setup = config.settings()


    def createRootUser(self):
        raw_salt = uuid.uuid4().hex
        password = "xxxxxxxxxxxxxxxxxxx".encode('utf-8')
        salt = raw_salt.encode('utf-8')
        hashed_password = hashlib.sha512(password + salt).hexdigest()

        user = { 
            "id": uuid.uuid4().hex, 
            "title": 'Sokhavuth',
            "content": '',
            "thumb": '',
            "date": '',
            "role": 'Admin',
            "email": 'vuthdevelop@gmail.com',
            "salt": raw_salt,
            "password": hashed_password,
        }

        usercol = self.db["users"]
        usercol.insert_one(user)


```

```python
# controllers/frontend/login.py

import config, copy
from bottle import template
from models.user import User


class Login:
    def __init__(self):
        settings = copy.deepcopy(config.settings)
        self.setup = settings()


    def getPage(self):
        user = User()
        user.createRootUser()

        self.setup["pageTitle"] = "Log into Admin Page"
        self.setup["route"] = "/login"

        return template("base", data=self.setup)


```