teleren/devto huggingface dataset:
Open-Source NoCode Form builder
Tags: svelte, tailwindcss, productivity, fouita
Published: 2022-12-29 14:37:50

## A Form builder built with svelte and tailwindcss

Most Form builders offer a powerful way to integrate and manage inputs, but they lack the design customization.

We built this simple form builder that can adapt easily with any website design.

### Open Source

More details on how to install and use can be found on  [Form builder repo
](https://github.com/fouita/form-editor
)

### Demo Link

Try it on [Fouita Form Website](https://fouita.com/explore/form-builder/forms/0x57341/edit)


### Cusomization

```html
<script>
  import FormEditor from "@fouita/form-editor"

  // you can create a button to toggle the editable variable
  let editable = true
  let form =  {
      "name": "My Form",
      "version": "18"
    }

  const settings = {
	  textColor: "250 250 250";
	  bgColor: "0 0 0";
	  outlineColor: "165 180 252";
	  buttonBgColor: "79 70 229";
	  buttonTextColor: "255 255 255";
	  borderColor: "200 200 200";
	  form: formSimple;
	  rounded: "rounded-none";
	  size: "full";
	  rtl: false;
	  transparent: false;
	  btnsPosition: "start"; // start, end, center
  }

  // get updated data
  $: if(form) {
    // form is updated
  }

  function handleSubmit(evt) {
    // send data to your server
  }
</script>

<FormEditor bind:form {editable} {...settings} on:submit={handleSubmit} />
```

Hope you like it,

Any feedback is very appreciated.
How to add an Estimated Reading Time to your Astro Blog with Javascript & Markdown Plugins
Tags: astro, markdown, javascript, webdev
Published: 2022-12-29 14:33:08

First, create the function in any folder. Eg: `./src/utils/readingTime.js`. Now add the following code. 

```js
import getReadingTime from "reading-time";
import { toString } from "mdast-util-to-string";

/** Estimated Reading time */
export function remarkReadingTime() {
  return function (tree, { data }) {
    const textOnPage = toString(tree);
    const readingTime = getReadingTime(textOnPage);
    data.astro.frontmatter.estReadingTime = readingTime.minutes;
  };
}
```

Next, You need to install the following packages:

```bash
npm install reading-time mdast-util-to-string
# or
pnpm add reading-time mdast-util-to-string
```

The above npm plugins are used to convert the markdown to string and then calculate the reading time in minutes. 

Now, open the `astro.config.mjs` file and add the following code. 

```js
import { defineConfig } from "astro/config";

import { remarkReadingTime } from "./src/utils/readingTime";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkReadingTime],
    extendDefaultPlugins: true,
  },
});
```

That's it. Now each frontmatter will include an extra variable called `estReadingTime` which you can use later like:

```md
---
const { frontmatter } = Astro.props;
---

<span>{frontmatter.estReadingTime} min read</span>
```

Done :)

Checkout the Astro & plugin documentation for more detailed instructions and options.
Counting Sort(계수 정렬)
Tags: algorithms
Published: 2022-12-29 14:22:17

## Time Complexity
best O(n)
Worst O(n)
Average O(n)

## Space Complexity
O(max) - because maximum element of number = end of the loop

## Opinion
This Sort just counts numbers

---
{% embed https://youtu.be/n4kbFRn2z9M %}
[https://www.programiz.com/dsa/counting-sort](https://www.programiz.com/dsa/counting-sort)
How to test https on localhost with help of Caddy
Tags: https, webdev, localhost, caddyserver
Published: 2022-12-29 14:20:38

In this post I am going to talk about testing https on localhost. Testing https on localhost is difficult of ssl certificates issue.

If you want to test integration of https cookies, public webhooks etc you need https enabled web endpoint. Also any browser based https flows become difficult while testing on localhost.

Today we are going to use an awesome open source tool [Caddyserver](https://caddyserver.com/).

Assuming we are running a server at localhost:3000

To use CaddyServer with reverse proxy to port 3000 for HTTPS on localhost, follow these steps:
Find install instructions for Caddy on - https://caddyserver.com/docs/install
Once installed open up a terminal and run below command

`caddy reverse-proxy  --to :3000`

CaddyServer will generate a self-signed certificate for localhost and enable HTTPS on port 443.

To access the HTTPS version of your localhost website, enter https://localhost in your web browser. CaddyServer will reverse proxy all requests to port 3000.
What digital marketing do?
Tags: webdev, beginners, productivity, blog
Published: 2022-12-29 14:20:23

<!-- wp:image {"id":88,"width":985,"height":985,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized is-style-default"><img src="https://digitalocean.epizy.com/wp-content/uploads/2022/12/DIGITAL-MARKETING-1024x1024.png" alt="" class="wp-image-88" width="985" height="985"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Digital marketing is a necessary component of any modern business. By using digital channels such as websites, social media, and email, you can reach a wider audience than ever before and generate more leads and sales.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, creating an effective digital marketing campaign can be tricky. There are so many different channels to choose from, and each one has its own set of rules and best practices.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this article, we will explore the basics of digital marketing and look at some tips for designing successful campaigns. We will also take a look at some of the most popular digital channels and discuss how they can be used to grow your business.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The Basics of Digital Marketing:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are four key components of any successful digital marketing campaign: website design, SEO, social media, and email marketing. Let's take a closer look at each one:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>1) Website Design</strong>: </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":89,"width":968,"height":968,"sizeSlug":"medium","linkDestination":"none"} -->
<figure class="wp-block-image size-medium is-resized"><img src="https://digitalocean.epizy.com/wp-content/uploads/2022/12/DIGITAL-MARKETING-300x300.jpg" alt="" class="wp-image-89" width="968" height="968"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Your website is the foundation of your online presence. It is where your customers go to learn more about your company and product/services offerings. A well-designed website will help you build trust with your customers and encourage them to buy from you.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>2) SEO (Search Engine Optimization): </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":90,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://digitalocean.epizy.com/wp-content/uploads/2022/12/DIGITAL-MARKETING1-1024x1024.png" alt="" class="wp-image-90"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>SEO is the process of optimizing your website for Google search engine results pages (SERPs). By ranking higher in SERPS, you can attract more visitors to your site organically (without paying for traffic). In order to rank higher in Google, you must publish high quality content that meets the needs of searchers.<br></p>
<!-- /wp:paragraph -->

**[Read more.](
digitalocean.epizy.com/what-digital-marketing-do/)**
Full-length tutorial on adding automated CI (continuous integration) to your Python projects with GitHub Actions
Published: 2022-12-29 14:03:21

Custom GitHub apps written be me used in the tutorial series:

* [Linting - flake8, mypy, and isort](https://github.com/marketplace/actions/pylinter)
* [Pytest - testing and code coverage](https://github.com/marketplace/actions/pytester-cov)

---

The video series covers CI (continuous integration) with detailed explanations and examples. All of it is automated using GitHub Actions so the CI checks can run on every commit/pull request/push request on your repo.

Topics covered include:

* linting - `flake8`, `mypy`, and `isort`
* testing - `pytest` testing to ensure code runs correctly with new changes
* testing coverage - ensure thresholds are being met with amount of code that is being tested

---

If you find the video helpful you can greatly help me by doing one or all of the following:

* [supporting me on Patreon](https://www.patreon.com/programmingwithalex)
* [subscribing to my YouTube channel](https://www.youtube.com/channel/UC4UApj67YtJq2a2PAzmbQAQ)
* liking and/or commenting on the video
* sharing the video or [channel](https://www.youtube.com/channel/UC4UApj67YtJq2a2PAzmbQAQ) on any platform ([reddit](https://old.reddit.com), [twitter](https://twitter.com/), [discord](https://discord.com/), etc.)
* [following me on GitHub](https://github.com/programmingwithalex)
* starring the GitHub repos
  * [pytester](https://github.com/marketplace/actions/pytester-cov)
  * [pylinter](https://github.com/marketplace/actions/pylinter)
  * [test_repo_pylinter_v1](https://github.com/programmingwithalex/test_repo_pylinter_v1)
  * [test_repo_pylinter_v2](https://github.com/programmingwithalex/test_repo_pylinter_v2)
  * [pytester_test_repo](https://github.com/programmingwithalex/test_repo_pytester)

---

Any questions or requests, just leave a comment.
This Graphic Summarizes My 20 Years of Programming Journey
Published: 2022-12-29 13:54:01

---
title: This Graphic Summarizes My 20 Years of Programming Journey
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-29 13:52 +0000
---

This slide from [Don Syme's talk](https://www.youtube.com/watch?v=Gq41S6TfJK0) has been making the rounds, and... yeah, it paints my programming journey. I wish whoever created this graphic would of beat me over the head in my early 20's; if so, curious where I'd be now.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6p5uekdt2tfnanhsm4o1.png)
Optimize cyclomatic complicity in your javascript code.
Tags: react, webdev
Published: 2022-12-29 13:38:56

Cyclomatic complexity is a measure of the complexity of a program, and it is calculated based on the number of independent paths through the code. High cyclomatic complexity can make code difficult to understand and maintain, and it can also be an indication of potential bugs.

To optimize cyclomatic complexity in JavaScript, you can follow these steps:

    Identify areas of your code with high cyclomatic complexity. You can use a tool like SonarQube or a code analysis plugin for your editor to identify areas of your code with high cyclomatic complexity.

    Refactor your code to reduce the number of independent paths. Here are a few ways you can do this:

    Extract complex logic into separate functions or modules to make the code more modular and easier to understand.
    Use early return statements to exit functions early when certain conditions are met.
    Use conditional statements with fewer branches, such as using a switch statement instead of multiple if-else statements.

Here's an example of how these techniques might be applied to reduce cyclomatic complexity in a function:

Before:

```
function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    if (item.price > 10) {
      total += item.price * 0.9;
    } else if (item.price > 5) {
      total += item.price * 0.95;
    } else {
      total += item.price;
    }
  }
  return total;
}

```
After:

```
function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += getDiscountedPrice(item);
  }
  return total;
}

function getDiscountedPrice(item) {
  if (item.price > 10) {
    return item.price * 0.9;
  } else if (item.price > 5) {
    return item.price * 0.95;
  } else {
    return item.price;
  }
}

```
Get Yesterday Date in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-12-29 13:19:40

Learn to remove one day-to-date in JavaScript using the native date object.

## How to Get Yesterday Date in JavaScript?

The best way to get yesterday’s date in JavaScript is by using the Date object. On an existing `Date`, you can use the `getDate` function to get the day (between 1 and 31), subtract 1 to this number, then use `setDate` to update the date. Here's a short example: `date.setDate(date.getDate() - 1)`.

## Using the JavaScript Date Object

In JavaScript, you’ll often manipulate [the Date object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) to do diverse operations (e.g., subtract days from a date, format a date, etc.).

If you want to get yesterday’s date in JavaScript, you can use a combination of these two `Date` functions:

 1. `yourDate.getDate()`: get the day of the month (you'll get a number between 1 and 31)

 2. `yourDate.setDate()`: update the day of the date to the number passed as a parameter

In practice, let’s say you have this date: `15/11/2022`. The `getDate()` function will return `15`. Then you can subtract one day to this number `15 - 1 = 14`. Finally, use `setDate()` to update the day of the month for your current date object.

Here’s a commented example:

```javascript
// Create a date
const todayDate = new Date()

// Before subtracting 1 day
console.log(todayDate.toString())
// Output: "Tue Nov 15 2022 13:37:12 GMT+0100 (Central European Standard Time)"

// Subtract one day to the current date
todayDate.setDate(todayDate.getDate() - 1)

// After removing 1 day
console.log(todayDate.toString())
// Output: "Mon Nov 14 2022 13:37:12 GMT+0100 (Central European Standard Time)"
```

Now that you know how to subtract days from a date, you can learn [how to add one day to date in JavaScript](https://herewecode.io/blog/add-one-day-to-date-javascript/).

## Bonus: Create a Function to Get Yesterday Date

Now you know how to remove days to a date, let’s make your code fancy!

One way to do that is to create a function that takes a date as a parameter, subtracts one day, and returns it.

Following what we did in the last part, here’s how:

```javascript
// Create a function to make the logic generic
const removeOneDayToDate = (date) => {
  date.setDate(date.getDate() - 1)
  
  return date
}

// Get the current date
const date = new Date()

// Before removing 1 day
console.log(date.toString())
// Output: "Tue Nov 15 2022 13:37:12 GMT+0100 (Central European Standard Time)"

// Call `removeOneDayToDate` with the current date
// and assign the result to a new variable called `yesterdayDate`
const yesterdayDate = removeOneDayToDate(date);

// After subtracting 1 day
console.log(yesterdayDate.toString());
// Output: "Mon Nov 14 2022 13:37:12 GMT+0100 (Central European Standard Time)"
```

---

**Thanks for reading. Let’s connect!**

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. [Join me on Twitter for more.](https://twitter.com/gaelgthomas) 🚀🎒
A lost beginner
Tags: beginners, webdev, help, tutorial
Published: 2022-12-29 13:11:09

## Hi everyone 

I'm curranty learning front-end but it takes so long for me 'cause I try to learn everything, everyone says that I can search google for anything but I just feel FOMO and I don't want to miss anything, and I'm overwhelmed with all of the recourses out there, so what shall I do? and focus on what while I'm learning? and **Thank you** 😊
My Journey in Open Source - expirables
Tags: javascript, github, opensource, typescript
Published: 2022-12-29 13:00:00

[Link to the repo](https://github.com/Cadienvan/expirables)

## What is this?

This is a zero dependency package that provides some expirable implementations of common Data Structures.  
Thanks to the [npm-package-ts-scaffolding](https://github.com/Cadienvan/npm-package-ts-scaffolding) it is importable both via CommonJS and ES Modules.  
It currently supports the following Data Structures:

- [ExpirableMap](./src/Map/README.md)
- [ExpirableSet](./src/Set/README.md)
- [ExpirableQueue](./src/Queue/README.md)
- [ExpirableStack](./src/Stack/README.md)

## How do I install it?

You can install it by using the following command:

```bash
npm install expirables
```

## Tests

You can run the tests by using the following command:

```bash
npm test
```

## Scaffolding

This project was generated using Cadienvan's own [npm-package-ts-scaffolding](https://github.com/Cadienvan/npm-package-ts-scaffolding) so it has all the necessary tools to develop, test and publish a TypeScript package importable both via CommonJS and ES Modules.

## FAQ

### Why are you using timeouts instead of lazy evaluation?

- Lazy evaluation would need to re-implement many methods of the Data Structures and would be much more complex to implement and maintain.
- Lazy evaluation could block the main thread for a long time if the Data Structure is big, and moving it to a Worker would be a lot of work for a small gain.
- Lazy evaluation would require a higher amount of memory to work because it would store all the expired entries until they are evaluated.
- Lazy evaluation would need us to store additional information about the entries (e.g. the expiration time) which would increase the memory footprint of the Data Structure.

## Contributing

If you want to contribute to this project, please open an issue or a pull request.
Importance of Building a Strong Engineering Culture for Startups
Tags: productivity, career, computerscience, engineeringculture
Published: 2022-12-29 12:57:45

## How can a strong engineering culture be key to success for a startup?

As a startup, having a strong engineering culture can be critical for attracting and retaining top talent, promoting innovation, and helping your company succeed. Here are a few ways that building a positive engineering culture can benefit your startup:

**Attract top-notch talent**: Engineers are often drawn to companies that value their skills and offer a positive work environment. By fostering a culture that values collaboration, continuous learning, and problem-solving, you can make your company a destination for top engineers in your field.

**Encourage ownership and responsibility**: When team members feel a sense of ownership and responsibility for their work, they are more likely to be motivated and engaged. A strong engineering culture can inspire team members to take on additional responsibility and ownership of their projects, leading to higher productivity and innovation.

**Promote innovation**: A culture that encourages continuous learning and problem-solving can lead to new ideas and approaches to solving challenges. Encouraging team members to think creatively and come up with new solutions can help your startup stay ahead of the curve and differentiate itself in the market.



## TL;DR
Building a strong engineering culture is an important investment for any startup. By prioritising collaboration, continuous learning, and problem-solving, you can create a positive work environment that attracts and retains top talent, fosters a sense of ownership and responsibility, and promotes innovation. All of these factors can contribute to the long-term success of your startup.

[ShivamBaghla.com](https://shivambaghla.com/), [LinkedIn](https://www.linkedin.com/in/shivam-baghla), [Twitter](https://twitter.com/shivam_baghla)
Jobs to be done
Tags: opportunities, transportation, jobstobedone, storybytes
Published: 2022-12-29 12:53:12


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6i939dyv477ciqgwy4c.png)As the saying goes, “love the problem, not the solution”. We focus on understanding the user’s problem first rather than just jumping to solutions. We do this because we know that users are not just buying a product but are hiring a tool or service to fulfil their job to be done. Functional, social, and emotional dimensions can define a User JTBD (Job to be done). A User’s social and emotional jobs can often be even more potent than available jobs. Take Uber, for example. The functional JTBD centres around providing transportation from point A to point B. But Uber’s more considerable competitive advantages over its alternatives are derived from the emotional and social jobs it solves, such : Emotional: Uber helps me not worry about travelling without any cash on hand. Emotional: Uber enables me to feel confident in knowing when my driver will arrive to pick me up. Emotional: Uber helps me not to stress about coming on time to my destination in a city I’ve never visited before. Social: Uber shows my employer that I travel more economically than by taxi or rental car. Overall, Jobs to be Done is a common framework used in Web and App Studio to dive deeper into users’ motivations, uncover opportunities, and understand the competitive landscape. Before we can get to the launch of the next-gen enterprise software company, we must first understand what JTBD prospective users are looking to address and what offerings attempt to satisfy that JTBD. Through this framework, we build the muscle to innovate. By principle, we focus on first understanding the user’s problem instead of just jumping to solutions. We do this because we know that users are not just buying a product but hiring a tool or service to satisfy their “Job to be Done.”
The most common challenges in mobile app development
Tags: tutorial, mobile, programming
Published: 2022-12-29 12:47:05

Mobile app development can be challenging due to device fragmentation, performance concerns, the need for secure handling of sensitive data, extensive testing requirements, user experience design, integration with other systems, and the need for continuous maintenance and updates.
_Here are the following challenges in building mobile app development_


## Device Fragmentation

One of the biggest challenges of mobile app development is device fragmentation. There are a wide range of devices with different screen sizes, resolutions, and hardware capabilities, making it difficult to ensure that an app works seamlessly on all devices. "Responsive is key here"

## **Performance
Mobile devices have limited resources compared to desktop computers, so it is important to optimize an app's performance to ensure a smooth and seamless user experience.



## Security 

Mobile apps handle sensitive user data, such as personal information and financial transactions, so it is important to ensure that the app is secure and protected against cyber threats.


## Testing

Testing an app on a wide range of devices can be time-consuming and resource-intensive, especially if the app needs to be tested on different versions of the operating system.


## User Experience

Creating a user-friendly and intuitive app is crucial for its success. This can be a challenge because mobile devices have small screens and limited input methods, which can make it difficult to design an app that is easy to use.


## Integration with Other Services and Systems

Mobile apps often need to integrate with other services and systems, such as social media networks, payment gateways, and back-end servers. This can be a complex process that requires careful planning and coordination.


## Continuous Maintenance and Updates 

Mobile apps require continuous maintenance and updates to fix bugs and add new features. This can be a challenge for developers who need to balance the demands of maintaining the app with the need to work on new projects.



## Wrapping up

Mobile app development can be a complex and time-consuming process, and working with a [mobile app development company](www.way2smile.com) can help alleviate some of the challenges. They can help with everything from ideation and design to development and testing, and can also assist with ongoing maintenance and updates.