teleren/devto huggingface dataset:
Building Responsive Layouts with CSS Grid
Tags: webdev, javascript, css, html
Published: 2024-02-06 00:29:00

## Introduction

Building responsive layouts for websites has become an essential skill for web developers in today’s digital world. With the growing demand for mobile-friendly and dynamic websites, the need for efficient and flexible layout techniques has also increased. This is where CSS Grid comes in. Being the latest addition to the CSS family, it offers web developers a powerful tool for creating responsive layouts. In this article, we will dive into the advantages, disadvantages, and features of building responsive layouts with CSS Grid.

## Advantages

CSS Grid provides a grid-based layout system that allows for more control and precision in creating responsive layouts. It offers a two-dimensional layout which is highly beneficial for complex website designs. With its flexible rows and columns, web developers can easily adjust the layout based on the device or screen size, making it compatible with any device.

## Disadvantages

The main disadvantage of CSS Grid is its lack of support in older browsers. Although it is compatible with most modern browsers, developers may need to use fallbacks or workarounds for older versions, which can be time-consuming. Moreover, the learning curve for CSS Grid can be steep for those who are not familiar with the concept of grid systems.

## Features

### Grid-Based Layout System

CSS Grid has numerous features that make it a powerful tool for building responsive layouts. It provides the ability to create fixed or fluid grids, giving developers more freedom and creativity in design.

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}
```

This code snippet demonstrates how to set up a basic grid layout with CSS Grid, using **grid-template-columns** to define flexible column sizes that adjust based on the container's width.

## Custom Track Sizes

It also has the feature of defining custom track sizes, making it easier to create different layouts for different screen sizes.

```css
.container {
  display: grid;
  grid-template-rows: 100px auto 200px;
  grid-template-columns: 1fr 2fr;
}
```
Here, **grid-template-rows** and **grid-template-columns** are used to define custom sizes for the grid's rows and columns, offering precise control over the layout.

## Conclusion

In conclusion, building responsive layouts with CSS Grid offers numerous advantages, such as flexibility, precision, and compatibility with multiple devices. It may have its limitations, but with the growing support for modern browsers, it is becoming a popular choice for web developers. With its various features, CSS Grid has definitely made it easier to create dynamic, responsive layouts, making it an invaluable tool for creating modern and user-friendly websites.
Software Reusability: Build once, build it well and make it customizable
Published: 2024-02-06 00:17:55

In this podcast episode, Krish compares the Instacart and Wegmans apps to identify commonalities and similarities. He discusses the reusability and integration of backend systems, highlighting the benefits of leveraging existing solutions rather than reinventing the wheel. Krish also explains Snowpal's business model, which focuses on selling software and licenses to other companies. He showcases the integration of multiple products within the Snowpal app and emphasizes the importance of balancing verticals and horizontals in software development.

## Takeaways

- Leveraging existing solutions and reusing backend systems can save time and resources in software development.
- Selling software and licenses can be a successful business model, allowing companies to provide ready-made solutions to other businesses.
- Integrating multiple products within an app can provide a comprehensive solution for users.
- Balancing verticals (specific solutions) and horizontals _(platform layers)_ is crucial for successful software development.

## Chapters

00:00 Introduction and Context

02:02 Comparison of Instacart and Wegmans Apps

13:00 Reusability and Integration of Backend Systems

17:20 Snowpal's Business Model

21:12 Integration of Multiple Products in SnowPAL App

26:10 Reuse of Snowpal's Web Application

28:37 Balancing Verticals and Horizontals in Software Development

29:07 Conclusion

## Podcast

{% embed https://youtu.be/3COl3FqJozs %}

## Transcript

https://products.snowpal.com/api/v1/file/21081d5d-f506-44c2-bfa6-8795d66d2701.pdf
Observability for DevOps and SRE - free certificate course on Feb 8th
Tags: devops, sre, sitereliabilityengineering
Published: 2024-02-06 00:12:07

Join Mike West, Solutions Engineer, and Kyle Champlin, Product Manager, for a hands-on observability workshop for DevOps, SREs and Platform Engineering teams. Walk away from this free, 2-hour session with an Observability certificate to add to your LinkedIn profile, plus high-value knowledge on how to:

- Build dashboards from logs, metrics and traces
- Graphlink directly from a set of unhealthy pods to the Github commit
- Use O11Y GPT for a Regex extract to parse a Nginx log
- Use schema-on-demand to extract values into columns on the fly
- Set up alerts that show customers impacted, then use schema on demand to pull in the technical owner.

Details:
February 8 @ 3 pm PT
[Register here](https://view.observeinc.com/devops-sre-observability-workshop/?utm_campaign=we2401-0009-Observability-Workshop&utm_medium=paid&utm_source=dev&utm_content=sponsoredpost)
What Would You Do If You Knew You Could Not Fail?
Tags: discuss
Published: 2024-02-06 00:00:00

---
published_at : 2024-02-06 00:00 +0000
---
Our psychological barriers often hinder our commitment due to fear. Once this is removed from the equation, what significant steps would you choose to pursue? Share your thoughts on what you'd do if you weren't afraid of failure! 💪🏽 Follow the DEVteam for more discussions and online camaraderie! {% embed https://dev.to/devteam %}
Tim Lehnen and the Drupal Association
Published: 2024-02-09 22:41:53

---
title: Tim Lehnen and the Drupal Association
published: true
date: 2024-02-06 00:00:00 UTC
tags: 
canonical_url: https://www.oliverdavies.uk/archive/2024/02/06/tim-lehnen-and-the-drupal-association
---

Last week on the Beyond Blocks podcast, I spoke with Tim Lehnen - CTO and former colleague at the Drupal Association.

We discussed what the Drupal Association is and what it does, how companies and individuals can contribute and support the Association, some recent and upcoming improvements to Drupal.org, Drupal 7's end-of-life, and more.

[Listen now](https://www.oliverdavies.uk/podcast/9-tim-lehnen)

This Friday, I'm releasing an episode with Ryan Weaver from SymfonyCasts.

P.S. Do you need immediate access to an expert Drupal Developer? [With my Drupal development subscription](https://www.oliverdavies.uk/subscription), make unlimited requests for a fixed monthly price in less time than posting to a job board!
user investment in branching narrative
Tags: gamedev, writing
Published: 2024-02-25 21:28:41

---
title: user investment in branching narrative
published: true
date: 2024-02-06 00:00:00 UTC
tags: [ 'gamedev', 'writing' ]
canonical_url: https://onwriting.games/daily/20240206-747-user-investment-in-branching-narrative/
---

Some time ago I [read a reddit post](https://www.reddit.com/r/truegaming/comments/b4pdhm/the_problem_with_branching_stories/) where the author commented that, for them, games with branches suffer from an inherent design problem:

> ... the knowledge that a game's story responds to your choices makes you less invested in the current story, because there's always the knowledge you can go back and do something else.

I have never experienced this, I disengage from the story **if the writing is bad**.

But with dynamic writing, good story beats, and a good treatment of agency, I don't feel this detachment from the story at all.

In fact, good interactive narrative work, makes want to replay to see what other stories there are besides my first run.

It's possible that there are some players who decide to do **option spamming**.

But those are not the players we have in mind when we write our stories.

What do you think? Is there any truth to the detachment from stories due to the possibility of "rewind"?
Cool Devtool Websites?
Tags: programming, devops, showdev, web
Published: 2024-02-05 23:46:55

We just redid our website for [Kurtosis.com](https://www.kurtosis.com/)! 

We're underway with a lot of user discovery so still experimenting with what words makes sense to users. Would love thoughts on how we did:

- Does the messaging make sense?
- Do you have an idea of what we might be useful for?
- Is it kinda cool? 

Would love any and all feedback! 

If you're interested in chatting on simplifying building your back end for dev and test, come chat with us and/or consider dropping a star on our monorepo <3 

https://github.com/kurtosis-tech/kurtosis
Design Pattern - Compound Components
Published: 2024-02-05 23:32:56

É um padrão avançado de design utilizado para a construção de componentes que trabalham juntos e de forma coesa, promovendo maior flexibilidade, controle e comportamento sobre o componente.Permitindo que se crie um conjunto de componentes que funcionam juntos para formar uma unidade funcional maior, de forma que cada componente individual não tenha conhecimento direto e não esteja acoplado aos demais, mas que juntos funcionam bem. 

Um bom exemplo de utilização de componentes compostos pode ser visto em HTML com os elementos <select> e <option>. Eles não fazem muita coisa sozinhos, mas juntos fornecem uma experiência completa e funcional ao usuário, que ao clicar numa opção, o select tem conhecimento de qual foi clicado, pois os componentes compartilham os estados por conta própria sem precisar configurá-la explicitamente.  

 Aqui está uma visão geral de vantagens e desvantagens do uso dos componentes compostos: 

Vantagens: 

- Separação de responsabilidades: Aplicando esse conceito, é possível separar claramente o relacionamento entre os componentes pais e filhos, gerendo um código mais modularizado e fácil de entender.
- Reutilização: Pelo fato dos componentes estarem devidamentes separados, é capaz de utilizar em vários lugares sem a necessidade de duplicar código ou funcionalidade.
- Manutenibilidade: Por gerar menos duplicação de código, e de menor complexidade e melhor compreensão.  Torna a manutenção mais fácil.

Desvantagens: 

- Curva de aprendizado: Para novos desenvolvedores implementar esse conceitos requer uma certa curva de aprendizado e necessidade de uma documentação clara de como os componentes interagem entre si.
- Possível complexidade excessiva: Em determinados casos, os compound components podem levar a uma hierarquia com complexidade maior, principalemente quando não foram projetados para isso.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeur4vpm45wmpn8yz7mm.png)
COMPENSATION FOR CRYPTO SCAM VICTIMS THROUGH GEARHEAD ENGINEERS ORGANIZATION
Published: 2024-02-05 23:30:13


COMPENSATION FOR CRYPTO SCAM VICTIMS THROUGH GEARHEAD ENGINEERS ORGANIZATION

I understand the frustration and stress associated with lost funds through investment scams. They got me and did away with almost half a million dollars. Luckily, I have some influences around who introduced me to an organization called GearHead Engineers Org. As specialists in crypto recovery, the team of expert professionals is dedicated to helping individuals and businesses reclaim their lost money lost to investment scams. With their proven track record and exceptional customer service, they are the go-to company for fund recovery in Montreal and beyond. We were able to track them down and got the complete amount. Reach out to GearHead Engineers Org via the following contact information.

Website: GearHeadEngineers . org
WhatsApp: +1 (647) 477-2506
Email: gearhead @ engineer . com
Email: info @ gearheadengineers . org
Kafka vs Redis vs Jenkins vs mongodb
Tags: webdev, javascript, beginners, programming
Published: 2024-02-05 23:27:02

While both Apache Kafka and Redis are tools used in the realm of distributed computing, they serve distinct purposes. Kafka is primarily a distributed streaming platform, focusing on real-time data processing and event streaming. It excels in scenarios where a reliable, fault-tolerant, and scalable mechanism for handling large volumes of data in real-time is required.

On the other hand, Redis is an in-memory data structure store often used as a caching mechanism, database, and message broker. It is known for its speed and simplicity, catering to scenarios where low-latency data access is crucial.

Comparing Kafka to Jenkins is not straightforward as they address different aspects of the software development lifecycle. Apache Kafka is centered around data streaming and processing, while Jenkins is an automation server used for continuous integration and continuous delivery (CI/CD). Jenkins facilitates the automated building, testing, and deployment of software, enhancing the development workflow.

In summary, Kafka, Redis, and Jenkins are tools with distinct purposes within the broader field of distributed computing, each catering to specific requirements in data processing, caching, and CI/CD automation, respectively.Apache Kafka and MongoDB serve different purposes in the realm of data management and storage. 

Kafka is a distributed streaming platform designed for real-time data processing and event streaming. It acts as a highly scalable and fault-tolerant system for handling large volumes of data, making it suitable for use cases such as log aggregation, monitoring, and building data pipelines.

MongoDB, on the other hand, is a NoSQL database that focuses on providing a flexible schema and document-oriented storage. It is particularly well-suited for scenarios where structured and semi-structured data needs to be stored and retrieved efficiently.

In summary, Kafka is more aligned with real-time data streaming and processing, while MongoDB is a database system designed for flexible, document-based data storage. The choice between Kafka and MongoDB would depend on the specific requirements of the application, with Kafka being more appropriate for streaming and event-driven architectures, and MongoDB being suitable for document-oriented data storage and retrieval.
Fixing Power BI report's credentials details error in Microsoft Fabric
Tags: beginners, microsoftfabric, powerplatform
Published: 2024-02-05 23:20:41

_After publishing the Power BI report from the [QueenOfTheSky demo](https://github.com/microsoft/FabricCAT/tree/main/QueenOfTheSkies), I encountered an issue in Fabric. Despite being directed to my Power BI workspace homepage, it wasn't clear how to proceed next._

## Issue Summary

Following the steps in the [build Power BI report section](https://github.com/microsoft/FabricCAT/tree/main/QueenOfTheSkies#build-the-power-bi-report), I encountered an error post-publishing. The Power BI desktop app was used to open and fill in the report (.pibt), which was then published. However, upon accessing the report, an error banner indicated a connection issue and provided a link to edit settings. This link redirected me to the Power BI homepage without clear instructions on updating the connection settings.

The solution involves three seperate methods to update the connection settings for the report, identified as QueensOfTheSky_rpt:

1. via the setting menu
2. through workspace's lineage view
3. semantic model using the workspace list view
4. accessing the semantic model settings directly from the report

All methods are detailed below, with steps to guide you through updating your credentials.

## How to Update Your Credentials

### Update your credentials using the settings menu

From anywhere, select the Settings Menu > Power BI Settings > Semantic model tab > Select your report (_QueensOfTheSky_rpt_ in our case) > Datasource credentials


![Through the settings menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u6a8d9vt05un4h2ios6.png)

### Update your credentials using the workspace's lineage view

On your workspace page, select the ellipsis on your report's semantic model card and go to settings. You can now update your datasource credentials.

![Through the lineage view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h44hj288ol04xqi7nlmh.png)


### Using the list view

In your workspace, look for your semantic model (I filtered by "rpt"). Click the ellipsis and select settings.

![Through the list view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6ttwp2gsv3hlzrds5bz.png)

### Semantic model settings from the report

While on your report:

(1) Select the 3 dots > view Semantic model
![Through the report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0aegce0eozf27hlgyc5e.png)

(2) File > Settings
![File settings on the semantic model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdy7a2dg5v5r1k030ied.png)


## That's it for now

Additional guidance might be provided as Microsoft continues to refine and address these navigational challenges.

This guide aims to help you navigate and resolve connectivity issues in Power BI, ensuring a smoother experience with the QueenOfTheSky demo.

_And a big THANK YOU to the contributors who created that cool demo!_

EDIT late Feb : added 4th method
Nearshore vs. Offshore Software Development Outsourcing — 2024
Tags: blog, development, nearshoredevelopers, nearshoreoutsourcing
Published: 2024-06-10 15:21:13

---
title: Nearshore vs. Offshore Software Development Outsourcing — 2024
published: true
date: 2024-02-05 23:03:36 UTC
tags: Blog,Development,nearshoredevelopers,nearshoreoutsourcing
canonical_url: 
---

Nearshore and Offshore software development outsourcing models have both seen significant growth in the last couple of decades with businesses looking to cut costs and leverage the expertise, diverse skill sets and fresh perspectives of third-party developers. Today, many organizations are tapping into a global talent pool to find the best software developers and tech professionals. Nearshore and Offshore outsourcing make it possible for companies to find the skill sets, qualifications, and specializations they need for their software development projects.

The post [Nearshore vs. Offshore Software Development Outsourcing — 2024](https://blog.nextideatech.com/nearshore-vs-offshore-software-development-outsourcing-2024/) appeared first on [Next Idea Tech Blog](https://blog.nextideatech.com).
Next.js Codebase Analysis <> create-next-app <> index.ts explained — Part 1.14
Tags: javascript, webdev, nextjs, opensource
Published: 2024-02-05 23:02:22

In the previous article, I wrote few meaningful comments for a short code snippet from [index.ts](https://github.com/vercel/next.js/blob/canary/packages/create-next-app/index.ts) and talked about Conf package.

In this article, I will write about Typescript prompt.

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

The following code shows the above prompt shown in the above image, but it is not an obvious prompt, it has some code around it for preferences.

```
if (!program.typescript && !program.javascript) {
      if (ciInfo.isCI) {
        // default to TypeScript in CI as we can't prompt to
        // prevent breaking setup flows
        program.typescript = getPrefOrDefault('typescript')
      } else {
        const styledTypeScript = blue('TypeScript')
        const { typescript } = await prompts(
          {
            type: 'toggle',
            name: 'typescript',
            message: `Would you like to use ${styledTypeScript}?`,
            initial: getPrefOrDefault('typescript'),
            active: 'Yes',
            inactive: 'No',
          },
          {
            /**
             * User inputs Ctrl+C or Ctrl+D to exit the prompt. We should close the
             * process and not write to the file system.
             */
            onCancel: () => {
              console.error('Exiting.')
              process.exit(1)
            },
          }
        )
        /**
         * Depending on the prompt response, set the appropriate program flags.
         */
        program.typescript = Boolean(typescript)
        program.javascript = !Boolean(typescript)
        preferences.typescript = Boolean(typescript)
      }
    }
```

Honestly, the original authors have done a pretty good job in explaining what the above code does, I did not add any.
The only thing I was not sure was program.javascript or program.typescript, then I remembered those are options passed in to the CLI as shown

```
npx create-next-app --javascript
```

or

```
npx create-next-app --typescript
```

## Conclusion:
In this article, I explained about how the ? Would you like to use TypeScript? › No / Yes prompt is configured. This means that if you want to add your own prompts, you can do so and update the program[your-key] flag, cannot specifically think of any customisation atm, but knowing this won’t hurt.

I am building a platform that explains best practices used in open source by elite programmers. [Join the waitlist](https://docs.google.com/forms/d/e/1FAIpQLSe2JCZAaIB5oXzNHLTrYJR4LMZ5SEwrGPgmG5DeFWdDhu8-Gw/viewform) and I will send you the link to the tutorials once they are ready.

If you have any questions, feel free to reach out to me at ramu.narasinga@gmail.com
🍿 Lazy loading
Tags: webdev, beginners, react, programming
Published: 2024-02-05 23:01:05

An essential task of bundler(vite, webpack, parcel) is bundling. What does that mean? This means it takes all the files and bundles all of them into one big ass file. What's the problem then? The problem is that the size of that one file will significantly increase. The app will be very slow as the development build is involved. 

So, how to tackle this issue? We need to break down our app into smaller logical chunks. How to make smaller bundles and when to make them? What should be there is a small bundle? If I do logical separation, Over here in [makemytrip](https://www.makemytrip.com/), it is very clear that I can make components just for my `flights`, `Homestays`, `Hotels`, and `Holidays.` 

A bundle should have enough features for the central part of our app. How to do that? There are different names for this concept. This (Lazy loading) process is also known as 

- Chunking
- Lazy Loading
- Code Splitting
- Dynamic import
- Dynamic bundling
- On-demand Loading

These are the same thing.

---

**Problem:** Suppose our app has home, about, and contact components. The home component loads when the initial render happens. Nothing special! But, the app requires a particular functionality: the `about` and `contact` components will be rendered only when requested.

**Solution:** Lazy Loading 🍿


![Problem Visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl2h1xmlyd6g8q67rxyw.gif)

[See the full code → ](https://github.com/jorjishasan/For-Articles/tree/test/Lazy-Loading%20Implementation)

---

## Steps: Implement Lazy loading

1. [lazy()](https://react.dev/reference/react/lazy)
2. [&lt; Suspense &gt;](https://react.dev/reference/react/Suspense)

**Step 1:**
We don't use the traditional import approach when we import those two components(about contact). Rather, we'll do something like this:

```jsx
//app.js
import React, { lazy} from "react";

❌import About from "./components/About";
❌import Contact from "./components/Contact";

✅const About = lazy(() => import("./components/About"));
✅const Contact = lazy(() => import("./components/Contact"));
```
**Step 2:**
&lt;Suspense&gt; lets you display a fallback until its children have finished loading. If you don't use it then react will throw you an error. Wherever we invoke a lazy loading component, we must wrap that into &lt;Suspense&gt; Just like this: 

```jsx
<Suspense fallback={"Loading..."}>
  <About />
</Suspense>
```