teleren/devto huggingface dataset:
Worst Advice Ever *
Tags: beginners, webdev, productivity, programming
Published: 2024-01-10 22:44:09

0] Build scalable tech
1] Raise VC money
2] Join startup incubator
3] Hire people
4] Hand code Landing Page
5] Pay designers
6] Write unit tests
7] Code from scratch
8] Outsource
9] Quit main job
10] Partner up
11] Invest in an expensive .com domain
12] Make it free for users first
13] Don't use nocode, it won't scale
14] Find a co-founder
15] Build an app for both IOS and Android at once
16] Add dark theme switch
17] Make it perfect before launch
18] Be in a bunker while building
19] Don't do marketing before launch
20] Keep it all secret, so nobody can copy it

* for MVP Stage
Breaking Free from Proprietary Clouds (Snowflake, RedShift, BigQuery): Top Open Source Alternatives to OLAP Databases
Tags: dataengineering, datalakehouse, datawarehouse, starrocks
Published: 2024-01-10 22:37:13

While cloud-based OLAP databases like Snowflake, RedShift, and BigQuery offer convenience, they often come with vendor lock-in and escalating costs. Fortunately, a thriving landscape of open source alternatives empowers you to take control of your data warehouse and unlock significant cost savings. Here's a look at some of the leading contenders:


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


**ClickHouse: Enterprise-Grade Performance and Scalability**

- Unleash lightning-fast queries: Achieve millisecond-level response times, even with billions of rows.
- Columnar storage for efficiency: Optimize performance for analytical workloads with column-based data organization.
- Handle diverse data types: Seamlessly analyze structured, semi-structured, and geospatial data.
- Scalability without limits: Effortlessly scale horizontally to handle ever-growing datasets.


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



**StarRocks: Blazing Fast Analytics for Massive Datasets**

- MPP architecture for parallel processing: Distribute workloads across multiple nodes for unparalleled speed and scalability.
- Seamless integration with data lakes: Query data directly from your data lake, eliminating data movement.
- Compatible with popular BI tools: Connect with Tableau, Power BI, and more for seamless visualization and analysis.

**DuckDB: Lightweight and Embedded Analytics**

- Ideal for smaller datasets and embedded use cases: Delivers fast performance for smaller-scale analytics or integration within applications.
- Zero-configuration setup: Get started quickly without complex installation or configuration.
- SQL support for familiarity: Use familiar SQL syntax for querying and data manipulation.

Choose Your Open Source Adventure:

The right open source OLAP database for you depends on your specific needs and infrastructure. Evaluate factors such as:

- Data volume and query complexity
- Performance requirements
- Scalability needs
- Cloud or on-premises deployment
- Integration with existing tools and technologies
- Explore these open source options to harness the power of analytics without compromising cost, flexibility, or control.
How to Connect the DHT22 to the Raspberry Pi Pico - Measure Temperature and Humidity in MicroPython
Tags: micropython, raspberrypi, beginners, tutorial
Published: 2024-01-10 22:35:30

{% embed https://www.youtube.com/watch?v=sW4udbEBtTc %}

The DHT22 is a very powerful environmental sensor used in DIY projects for the Raspberry Pi, Arduino, and various other microcontrollers. It measures humidity and temperature accurately, all at a low price.
In this tutorial, we show how to connect it to the Raspberry Pi Pico W in MicroPython to start getting readings very simply!
Before reading the remainder, be sure to subscribe and support the channel if you have not!

Where to Buy ShillehTek DHT22 with Wires:

[ShillehTek DHT22 Temperature and Humidity Sensor with Wires](https://www.amazon.com/dp/B0CN5PN225?maas=maas_adg_4E08C3F31914587A609A105F484955EE_afap_abs&ref_=aa_maas&tag=maas)

**Subscribe:**
[Youtube](https://www.youtube.com/@mmshilleh)

**Support:**
https://www.buymeacoffee.com/mmshilleh

**Hire me at UpWork to build your IoT projects:**
https://www.upwork.com/freelancers/~017060e77e9d8a1157

**Step 1-) Physical Connection**

You will only need 3 jumper wires to make the connection, the ShillehTek DHT22 from Amazon comes with wires packaged, as do most versions of this device.

**Step 2-) Thonny and MicroPython Setup**

You should have Thonny set up with your Pico W and MicroPython as a pre-requisite. The first thing you have to do is download the DHT library by going to Tools > Manage Packages, and searching DHT. Download the dht package.


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


Once you have that you can run the following code by creating a Python file on your device and pasting it in and running:
 
You can find the code on our GH page.
https://github.com/shillehbean/youtube-p2/blob/main/dht22.py

The code is simply creating a dht22 object from the library and utilizing the method.measure() to take measurements every time interval. If you want to increase the interval you can change the time.sleep() value. It is an incredibly simple library so there is not that much depth to it other than what is shown in this example.
Hope it worked for you, do not forget to support ShillehTek and by subscribing to our channel in the video above! Thanks all.
authentication && authorization
Tags: node, express, javascript, backend
Published: 2024-01-10 22:32:42

Projenizin gereksinimlerine uygun kimlik doğrulama ve yetkilendirme çözümünü seçerken şu faktörleri göz önünde bulundurabilirsiniz:

Güvenlik Gereksinimleri:

Projenizin güvenlik gereksinimleri nelerdir? JWT gibi token tabanlı çözümler genellikle daha güvenlidir, ancak her durumda uygun olmayabilir. Özellikle oturum (session) yönetimini gerektiren durumlar düşünülmelidir.

Proje Türü:

Web uygulaması mı, API mi yoksa her ikisi mi? Web uygulamaları genellikle oturum yönetimini kullanabilirken, API'lar genellikle token tabanlı kimlik doğrulama ve yetkilendirmeyi tercih eder.

Kullanıcı Deneyimi:

Kullanıcı deneyimi önemli mi? Bazı kimlik doğrulama yöntemleri, kullanıcıya şeffaf bir şekilde oturum açma imkanı sağlayabilirken, diğerleri daha teknik ve token bazlı olabilir.
Entegrasyon Gereksinimleri:

Dış sistemlerle (OAuth, SAML, LDAP gibi) entegrasyon gerekiyor mu? Projede kullanılacak kimlik doğrulama çözümü, entegrasyon gereksinimlerini karşılamalıdır.
Skalabilite Gereksinimleri:

Proje büyüdükçe veya birden çok sunucu kullanıldığında, kimlik doğrulama çözümü sağlıklı bir şekilde ölçeklenebilmelidir. Stateless (durumsuz) çözümler genellikle ölçeklenebilirlik açısından avantajlıdır.

Dökümantasyon ve Topluluk Desteği:

Kullanmayı düşündüğünüz kimlik doğrulama çözümüne ait dökümantasyon ne kadar iyidir? Topluluk desteği var mı? İhtiyacınız olduğunda sorularınıza hızlı cevap alabileceğiniz bir ekosistem önemlidir.
Proje Takımının Deneyimi:

Proje ekibinizin hangi kimlik doğrulama yöntemleri konusunda deneyime sahip olduğunu düşünmelisiniz. Takımın bilgi düzeyi, belirli bir kimlik doğrulama yöntemini uygulama kolaylığını etkileyebilir.

Uyumluluk ve Standartlar:

Projede kullanılacak kimlik doğrulama çözümü, uygulamanızın özel gereksinimlerini karşılamak ve güvenlik standartlarına uygun olmak zorundadır.
Bu faktörleri değerlendirdikten sonra, projenizin özel gereksinimlerine en iyi şekilde uyan bir kimlik doğrulama ve yetkilendirme çözümünü seçebilirsiniz. Unutmayın ki her projenin ihtiyaçları farklıdır, bu nedenle genel bir "one-size-fits-all" çözümü olmayabilir.
Making sure you get JSON in your LLM response
Tags: ai, llm, openai, javascript
Published: 2024-01-10 22:28:13

Using language models to return JSON is very useful. 

For OpenAI you can just pass the `response_format: { type: "json_object" }` such as:

```javascript
const completion = await openai.chat.completions.create({
    messages: [
      {
        role: "system",
        content: "You are a helpful assistant designed to output JSON.",
      },
      { role: "user", content: "Who won the world series in 2020?" },
    ],
    model: "gpt-3.5-turbo-1106",
    response_format: { type: "json_object" }, // <==== here
  });
```

For other models its not always reliable. It might say "Here is the JSON object you wanted... ".  Or even add things at the end like. "I hope this helps!" 😡

Here is a function that will make sure you only get the JSON.


```javascript
function parseJSONFromString(input: string): any {
    // Regular expression to find a JSON object or array
    const regex = /(\{.*\}|\[.*\])/s;

    // Extract JSON string using the regular expression
    const match = input.match(regex);

    // Check if a match was found
    if (match) {
        try {
            // Parse and return the JSON object/array
            return JSON.parse(match[0]);
        } catch (error) {
            // Handle parsing error (invalid JSON)
            console.error("Invalid JSON:", error);
            return null;
        }
    } else {
        // No JSON object/array found
        console.warn("No JSON object or array found in the string.");
        return null;
    }
}

// Example usage
const exampleString = "here is your JSON object: { \"key\": \"value\" }";
const result = parseJSONFromString(exampleString);
console.log(result);
```
Show GitHub Demo easily using Repo-To-Demo Web extension
Tags: webdev, github, repotodemo, demopage
Published: 2024-01-10 22:19:57

Excited to share my first Web Extension, 'Repo To Demo'! 🚀 It's an extension designed to generate a GitHub page (Demo page) link from the repo page of the project you open if the developer forgets to include the demo link in the description.

Install it now from the Microsoft Edge Extension store: 
https://microsoftedge.microsoft.com/addons/detail/repo-to-demo/mgkcmnnniboofieefkkggjeilelmjolf?fbclid=IwAR0F4RKaMTZrZB4nyJYQlL4h6BDYLVPJ6Re36bOLTCQWrmQUI5eFbi4ccJY

The link to the code to download the extintion manually from github:
https://github.com/ahmedMbassiouny/Repo-To-Demo

![Demo Video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d05y3kjbhkxm71uw7qu5.gif)

Your feedback means a lot to me, so feel free to share your ideas and suggestions. Thanks! 🙌

My LinkedIn account:
www.linkedin.com/in/ahmed-bassiouny-3267b1229
Struggling to Learn React? Here's a Simple 3-Step Process to Master It
Published: 2024-01-10 22:14:46

Struggling to learn React?

Feeling stuck while others seem to breeze through?

**If so, you're not alone.**

But there's good news—there's a way forward.

Follow these **three simple steps** to master React:

**Step 1: Understand Javascript first:** You can't conquer React without understanding some Javascript concepts first (promises, rest/spread, ...). I personally learned through the [You-Dont-Know-JS](https://github.com/getify/You-Dont-Know-JS) series and [FrontendMasters](https://frontendmasters.com/).

**Step 2: Just learn client-side React:** Many online tutorials are overloaded with complexities like Redux, bundlers, and even Typescript. Focus on learning React itself using resources like [Pure React](https://www.purereact.com/), [The Joy of React](https://www.joyofreact.com/), and [Complete Intro To React](https://frontendmasters.com/courses/complete-react-v8/).

**Step 3: Practice with projects:** Solidify your understanding through hands-on projects. Find them on platforms like [FrontendMentor](https://www.frontendmentor.io/) or [iCodeThis](https://icodethis.com/).

These 3 steps will exponentially accelerate your learning process.

Want more of these? Find me on [X/Twitter](https://twitter.com/_ndeyefatoudiop) or on [Substack](https://frontendjoy.substack.com/).
Happy New Years (published 30/12/23)
Published: 2024-01-10 22:11:16

It's almost time for me to shoot off for a weekend of New Years festivities, so just a quick update. Some things I've got done today:

Structured the HTML on my writing page in order to pull in and display my posts nicely.

Wrote a function to format the dates in the API response properly (this meant changing them from ISO8601 into a simple date format).

Started looking at how Wordpress can permanently host my custom blog so that I don't have to fire up the MAMMP server every time I want my portfolio website to be able to pull the posts in.

That's it for today! Looking forward to 2024.
Level Up Your Next.js Skills: Tips and Techniques for Developers
Published: 2024-01-10 21:55:23

Next.js has quickly become one of the most popular React frameworks for building production web applications. Here are some pro tips and techniques to level up your Next.js development skills.

## Leveraging Built-in Routing

Next.js offers file-system based routing by default. Some best practices are:

- Place pages in the `pages` folder to create routes. For example, `pages/about.js` -> `/about`

- Use dynamic routes like `pages/[slug].js` to match parameters.

- Split larger page components into smaller reusable components in the `components` folder. 

## Static Site Generation (SSG) 

Next.js allows generating static websites at build time for blazing fast performance.

- Use `getStaticProps` and `getStaticPaths` in page components to fetch data and render HTML.

- Statically generate listing pages like blogs, news while using SSR for forms.

- Use `revalidate` option to incrementally update static pages.

## Server Side Rendering (SSR)

Next.js pre-renders pages on each request for faster initial page loads.

- Use `getServerSideProps` to fetch and render data on the server-side.

- Make sure to optimize queries and limit DB calls in `getServerSideProps`.

- Use SSG and SSR together to get best of both approaches.

## Optimization Techniques

Some ways to optimize Next.js apps:

- Use `next/image` for optimized image loading and resizing. 

- Add `next-sitemap` and `next-seo` for better SEO.

- Use `next-bundles` to analyze code splitting and bundles.

- Enable compression, etags, immutable headers.

- Use API routes to handle data fetching.

With these techniques, you can build high-performance Next.js apps following best practices. Let me know what other tips you have!
Como usar Flex-Box?
Tags: css, frontend, webdev
Published: 2024-01-10 21:14:28

O Flex-Box é um modelo de layout web do CSS que pode facilitar o processo de estilização tornando os elementos filhos flexíveis dentro do elemento pai o que facilita processos que antes eram bem mais complicados de serem feitos como:

- Centralizar
- Alinhamento
- modelagem

Para usar o Flex Box usamos a propriedade display com o valor flex de seguinte maneira:

`display: flex`

Agora vou listar algumas outras propriedades fundamentais para usar o flex box e uma breve descrição:

- `flex-direction:` - muda a disposição dos elementos filhos dentro do elemento pai.

- `justify-content:` - essa propriedade ela faz o alinhamento do eixo principal que é definido com o `flex-direction:`.

- `align-itens:` - já essa cuida de alinhar o eixo secundário que no caso é o oposto ao principal.

- `flex-wrap:` - ela vai definir a questão de quebra de de linha no caso quando os elementos filhos ultra pação o espaço do elemento pai ele é redirecionado para a próxima linha.

Estas propriedades devem ser implementada no elemento pai já as que vou citar agora deve ser colocadas no elemento filho:

- `flex-shrink:` - ela possibilita o elemento diminuir de tamanho de acordo com o limite especificado.

- `flex-grow:` - semelhante ao anterior ela possibilita o elemento aumentar de tamanho.

- `order:` - ira alterar a ordem do elemento de acordo a posição definida.

- `flex-self:` - esse vai sobrepor a propriedade `align-itens` do elemento pai para a definida pelo elemento filho.

Para finalizar vou colocar as propriedade com seus valores mais comuns:

- `flex-direction: row | row-reverse | column | column-reverse`

- `justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly`

- `align-itens: stretch | flex-start | flex-end | center | baseline`

- `flex-wrap: nowrap | wrap | wrap-reverse`

- `flex-shrink: 1 | 2 | 3 | ...`

- `flex-grow: 1 | 2 | 3 | ...`

- `order: 1 | 2 | 3 | ...`

- `flex-self: stretch | flex-start | flex-end | center | baseline`

Esse foi o básico de flex-box **Obrigado pela atenção!**
How to create range in Javascript
Tags: javascript
Published: 2018-01-05 16:44:08

---
title: How to create range in Javascript
published: true
description: 
tags: Javascript
---

`range` is a function that basically takes in a starting index and ending index then return a list of all integers from start to end.

The most obvious way would be using a for loop.

```javascript
function range(start, end) {
    var ans = [];
    for (let i = start; i <= end; i++) {
        ans.push(i);
    }
    return ans;
}
```

As a fan of FP, let's come up with an recursive solution. So the base case is obviously when the start and end are the same, the answer would simply be `[start]`.

```javascript
function range(start, end) {
    if(start === end) return [start];
    // recursive case
}
```

Now take the leap of faith, assume that `range(start, end)` will *just work*. Then how do we solve the problem `range(start, end)`? Simple! Just do `[start, ...range(start + 1, end)]`.

So combining both, we get

```javascript
function range(start, end) {
    if(start === end) return [start];
    return [start, ...range(start + 1, end)];
}
```

A lot more elegant than the for-loop solution in my opinion. But we could even go further if we use `new Array(n)` which creates an array with n elements.

If we have an n element list, we could build a range from it by mapping each element to its index, i.e. `arr.map((_, i) => i)`.

However, according to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Description, `map` will not call for unassigned element. This mean we need to initialise the `new Array(n)` before mapping. One standard technique is to use `fill`. The final result is the following.

```javascript
function range(start, end) {
    return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start);
}
```

We could also make use of [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) to create range:

```javascript
function range(start, end) {
  return Array.from({ length: end - start + 1 }, (_, i) => i)
}
```

Thank you Step for mentioning about efficiency when handling large ranges, which essentially build a huge array. We could have a more efficient way of doing this by using generators.

```javascript
function* range(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}
```

We could use this generator in a `for...of` loop (which would be very efficient) or use an array spread to retrieve all values (note that this essentially builds the array which is essentially the same as the non-generator approaches.)

```javascript
for (i of range(1, 5)) {
    console.log(i);
}
/* Output
 * 1 2 3 4 5 */

[...range(1, 5)] // [1, 2, 3, 4, 5]
```

Since I always try to avoid for loops, we could also define the generator recursively as follows.

```javascript
function* range(start, end) {
    yield start;
    if (start === end) return;
    yield* range(start + 1, end);
}
```

Could you think of some cooler method to achieve this?
Welcome to WhileXLoop - Where Tech Tales Unfold
Published: 2024-01-10 21:04:13

Greetings, tech enthusiasts!

We're thrilled to welcome you to the inception of WhileXLoop, your go-to destination for a riveting journey through the ever-evolving world of technology. In this space, we aim to unravel the stories, insights, and innovations of brilliant minds shaping the tech landscape.

### What's WhileXLoop All About?

WhileXLoop is not just a blog; it's a platform where tech narratives come to life. Our mission is to bring you exclusive interviews, thought-provoking discussions, and in-depth explorations into the minds of tech visionaries, coders, and startup founders. We believe in the power of storytelling to inspire, educate, and connect the diverse community that orbits the tech universe.

### Why "WhileXLoop"?

The name WhileXLoop embodies the iterative and dynamic nature of technology—symbolizing continuous learning, growth, and the never-ending loop of innovation. Here, we're set to loop you into the latest trends, breakthroughs, and untold tales that spark the fire of curiosity in every tech aficionado.

### What to Expect:

- **Exclusive Interviews**: Dive into the minds of tech trailblazers as we unravel their stories, experiences, and insights.

- **In-Depth Analyses**: Explore deep dives into emerging technologies, industry trends, and the implications of the ever-shifting tech landscape.

- **Community Spotlights**: Celebrate the achievements of our diverse tech community members, from seasoned professionals to budding enthusiasts.

- **Interactive Discussions**: Join the conversation! Engage with our community through comments, polls, and interactive discussions.

### Get Involved:

We invite you to be a part of this exciting journey. Share your thoughts, experiences, and tech tales with us. Whether you're a coding maestro, a startup enthusiast, or just someone intrigued by the digital realm, WhileXLoop is your space to connect, learn, and be inspired.

Stay tuned for our upcoming interviews, deep dives, and more. The tech adventure begins here at WhileXLoop!

Let's loop into the future together.

VulcanWM

Founder, WhileXLoop
How to create static website form with FabForm
Tags: webdev, website, forms, tutorial
Published: 2024-01-10 20:57:06

Here is how you create a Static Website Form with FabForm

1. **Sign Up and Create an Account:**
   - Go to [fabform.io](https://fabform.io/) and sign up for an account.

2. **Create a New Form:**
   - After signing in, create a new form and configure the form fields.

3. **Find the Endpoint URL:**
   - In the form settings or dashboard, find the endpoint URL provided by fabform.io for your form.

4. **Build HTML Form:**
   - Open the HTML file of your static website where you want to add the form.
   - Create an HTML form element with the appropriate input fields. Use the `action` attribute to set the endpoint URL obtained from fabform.io.

   ```html
   <form action="https://fabform.io/f/YOUR_FORM_ENDPOINT" method="POST">
       <!-- Your form fields go here -->
       <label for="name">Name:</label>
       <input type="text" id="name" name="name" required>

       <label for="email">Email:</label>
       <input type="email" id="email" name="email" required>

       <!-- Add more fields as needed -->

       <button type="submit">Submit</button>
   </form>
   ```

   Replace "YOUR_FORM_ENDPOINT" with the actual endpoint URL provided by fabform.io.

5. **Style Your Form (Optional):**
   - Style your form using CSS to make it visually appealing and consistent with your website's design.

6. **Test Your Form:**
   - Save the changes to your HTML file and test the form on your static website. Submit a test entry to ensure the data is being sent to fabform.io.

7. **Manage Form Entries:**
   - Log in to your fabform.io account to manage form entries, view submissions, and export data if needed.

By using the form's endpoint URL directly in the HTML form's action attribute, you can collect form submissions without using the embed code.