teleren/devto huggingface dataset:
[html css jquery] How to do tabs panel for switch content
Published: 2023-04-26 06:54:16

Here is an example of creating a simple reusable universal tabs panel.

**codepen**: https://codepen.io/ktr92/pen/VwEpyyY

**Result**:

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

**Solution**
HTML:

```
<div class="tabs" data-tabs="tabs_id">
  <div class="tabs__header" data-tabsheader="tabs_id">
    <div class="active" data-tabsbutton="tabs_id">1 tab</div>
    <div data-tabsbutton="tabs_id">2 tab</div>
    <div data-tabsbutton="tabs_id">3 tab</div>
  </div>

  <div class="tabs__content active" data-tabscontent="tabs_id">
    <p>Tab 1 content</p>
  </div>

  <div class="tabs__content" data-tabscontent="tabs_id">
    <p>Tab 2 content</p>
  </div>

  <div class="tabs__content" data-tabscontent="tabs_id">
    <p>Tab 3 content</p>
  </div>
</div>
```

CSS (minimal, without design styling):

```
[data-tabscontent] {
  display: none;
}

[data-tabscontent].active {
  display: block;
}
```

JS (jquery):

```
$(function () {
  $("[data-tabsheader]").on(
    "click",
    "[data-tabsbutton]:not(.active)",
    function () {
      $(this)
        .addClass("active")
        .siblings()
        .removeClass("active")
        .closest("[data-tabs]")
        .find("[data-tabscontent]")
        .removeClass("active")
        .eq($(this).index())
        .addClass("active");
    }
  );
});
```
Being a Developer Advocate: Week 30+31
Tags: devrel, learninpublic
Published: 2023-04-26 06:46:23

Lots of public speaking and events in the last two weeks as I post this a little earlier than Friday.

One thing that stood out for me for making a successful event of any kind:

> Preparation!

To iterate on this I had one successful (imho) Twitter space appearance and we hosted our first office hours. Than we had a Panel Discussion where we just sponsored and let someone else organize.

For the Twitter space the host [Emmanuella Orioma](https://www.linkedin.com/in/emmanuella-orioma-a37ba4125)
send me questions beforehand so I could prepare. She also had an agenda mapped out. Everything went smooth beside some Twitter hiccup. For the office hour I also prepared some demos and had an agenda. Unfortunately no one showed up, but that is the topic of another day 😋

The panel discussion on the other hand went ok-ish with a weak beginning and a stronger end once the panelists warmed up. But it was a strong contrast to the panel discussion we had at our hackathon where we spend hours preparing on how that should go down.
[html scss] The equivalent to “background-size: cover” for <img> elements
Published: 2023-04-26 06:44:39

Content images must be made using `<img>` tags to be able to add “alt” attribute and other advantages. But if you use images of different sizes in the same container, it might not look good. And in that case we need to fill the container with the image.

**codepen example**: https://codepen.io/ktr92/pen/xxygMrR

**Before / After:**

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

**Solution**

HTML markup:

```
<div class="image">
  <img src="path/to/image" alt="">
</div>

```
SCSS mixin:

```
img {
  max-width: 100%;
  max-height: 100%;
}

@mixin imagecenter(
  $padding: 100%, // image aspect ratio. It is a square image by default (value = 100%)
  $fill: width // whether images are horizontal or vertical (height or width respectively)
) {
  display: block;
  height: 0;
  padding-top: $padding; 
  position: relative;
  overflow: hidden;

  img {
    position: absolute;

    left: -9999px;
    right: -9999px;
    top: -9999px;
    bottom: -9999px;
    margin: auto;

    @if $fill == width { 
      width: 100%;
      max-height: initial;
      height: initial;
    } @else {
      height: 100%;
      max-width: initial;
      width: initial;
    }
  }
} 
```

Usage:

```
.image{
    @include imagecenter(69.5%, width);
}
```
Making Developers the Protagonists: 2023 RT-Thread Global Tech Conference Registration Opens.
Published: 2023-04-26 06:10:54

The RT-Thread Global Tech Conference (RGTC) is an annual event that brings together developers from around the world to focus on the latest developments in RT-Thread basic software technology and innovative practices. Our goal is to help developers perfect their skills, encourage the use of technology to create value, and provide a platform for communication and collaboration.

In 2022, the RGTC lasted for six action-packed days, with two sessions: one in China from May 27th to May 29th and a global session from June 1st to June 3rd. With over 60 presentations and more than 20,000 attendees, it was a resounding success.

In 2023, we’re continuing our commitment to collaborating with developers to help them gain knowledge, exchange information, and share best practices. The conference will be held online from June 1st to June 3rd and is completely free to attend. Don’t miss out on this amazing opportunity!

Time: June 1- June 3, 2023, Online & Free
Free Register: https://bit.ly/404xwI5
Apply to become the Speaker: https://forms.gle/Him9DYyy3YMnURp98


1st Round of the 2023 RGDC Giveaway

We’re giving away Ten RISC-V Instruction Desk Mats to the Random Registration. Now register for the 2023 RT-Thread Global Tech Conference to get the chance to win the RISC-V Instruction Desk Mat: https://bit.ly/404xwI5

Winners will be announced during the conference!
Modularization in Android using the MVVM Architecture approach for beginners.
Published: 2023-04-26 06:03:17


Hi Nerds, today we’re going to learn about Modulization in Android using the MVVM architecture but before we go deeper let’s define some terms.

## What is modularization and its benefits?

From the Android documentation, Modularization is the practice of organizing a codebase into loosely coupled and self-contained parts. Each part is a module. Each module is independent and serves a clear purpose. By dividing a problem into smaller and easier-to-solve subproblems, you reduce the complexity of designing and maintaining a large system.

Some o the benefits of modularization are scalability, Testability, encapsulation, and improved build time. You should consider modularization for your app if you want to enjoy such benefits.

## MVVM Architecture definition

Model-view-viewmodel is a software design pattern consisting of three layers:

Model (in our architecture combined with Clean Architecture refers to a domain model representing real state content).
View (activities, fragments, it displays data received through view-model).

View Model (the View Model represents an abstraction of the view, it receives data from the Model, performs necessary UI logic, and then exposes appropriate data to the View, alongside that, View Model manipulates the Model based on actions on the View. The View has a reference to a View Model but View Model doesn’t know anything about the View).
Let’s get deeper now.

The below image explains the modules of an e-commerce application.

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

In this blog, we’re going to set up an Android project using Jetpack Compose(Material 3) from scratch and push it to GitHub.

Go to AndroidStudio and create a new Android project, choose Empty Compose Activity (Material 3), click next, and give it a name of your choice.

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

Wait for the grade to finish synching and make your first module. In this project, we’re going to have three modules. i.e Common, Data, Domain, and Presentation.

Go to File>New>Module. Create a new module under Android Library as shown in the below image. For our case here I’ll repeat the process until I have the 3 modules.

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


After creating the modules now you can add all the required dependencies and create a GitHub repository and push your code.

That’s all for today on modulization in Android. Thanks for reading and please follow me for more content.

Follow me.
 [Twitter](https://twitter.com/mwania_josphat) 
[ Github](https://github.com/josphatmwania)
Weekly web development resources #146
Tags: webdev, javascript, react, git
Published: 2023-04-26 05:39:52



______


##[Gradient Style](https://gradient.style)
[![Gradient Style](https://wweb.dev/weekly/content/146/gradient-style.jpg)](https://gradient.style)
A small tool to generate wide gamut color 4 compliant CSS gradients.

______


##[Precedent](https://precedent.dev/)
[![Precedent](https://wweb.dev/weekly/content/146/precedent.jpg)](https://precedent.dev/)
An opinionated collection of components, hooks, and utilities for Next.js projects.

______


##[Soft Serve](https://github.com/charmbracelet/soft-serve)
[![Soft Serve](https://wweb.dev/weekly/content/146/soft-serve.jpg)](https://github.com/charmbracelet/soft-serve)
A self-hostable Git server for the command line

______


##[ChatPDF](https://www.chatpdf.com/)
[![ChatPDF](https://wweb.dev/weekly/content/146/chat-pdf.jpg)](https://www.chatpdf.com/)
A tool to chat with PDF files and efficiently analyze your documents. 

______


##[Featurevisor](https://featurevisor.com/)
[![Featurevisor](https://wweb.dev/weekly/content/146/featurevisor.jpg)](https://featurevisor.com/)
A tool to manage feature flags and remote configuration declaratively from your git workflow.

______


##[The “const” Deception](https://www.joshwcomeau.com/javascript/the-const-deception/)
[![The “const” Deception](https://wweb.dev/weekly/content/146/the-const-deception.jpg)](https://www.joshwcomeau.com/javascript/the-const-deception/)
An article that explains the difference between assignment and mutation in JavaScript.

______


##[AutoFocusDOF](https://github.com/ektogamat/AutoFocusDOF)
[![AutoFocusDOF](https://wweb.dev/weekly/content/146/autofocus.jpg)](https://github.com/ektogamat/AutoFocusDOF)
An autofocus DOF component for React Three Fiber.

______


##[Pattern Club](https://patternclub.io/)
[![Pattern Club](https://wweb.dev/weekly/content/146/patternclub.jpg)](https://patternclub.io/)
A curated gallery of patterns, textures and visuals by designers & illustrators.

______


##[Yet Another React Lightbox](https://yet-another-react-lightbox.com/)
[![Yet Another React Lightbox](https://wweb.dev/weekly/content/146/lightbox.jpg)](https://yet-another-react-lightbox.com/)
A modern React lightbox component that is performant, easy to use, customizable and extendable.

______


##[Gut](https://gut-cli.dev/)
[![Gut](https://wweb.dev/weekly/content/146/gut.jpg)](https://gut-cli.dev/)
A user-friendly Git CLI for Windows, Mac, and GNU/Linux with intuitive commands and streamlined workflows.

______


##[txt-shuffle](https://github.com/brunoimbrizi/txt-shuffle)
[![txt-shuffle](https://wweb.dev/weekly/content/146/txt-shuffle.jpg)](https://github.com/brunoimbrizi/txt-shuffle)
A JavaScript library to create customisable text shuffling animations.

______

_Enjoyed this newsletter? You can support me by:_

💸 booking a [sponsored post](https://wweb.dev/sponsorship)

🥷 donating via [Sponsor Ninja](https://app.sponsor.ninja/projects/63d7dd38d907a8ed61dca67f)

🚀 helping me grow by sharing it with your friends and colleagues


Cheers,
Vincent from [wweb.dev](https://wweb.dev)
NUMA Awareness Allocation and Affinity
Tags: opengauss
Published: 2023-04-20 04:52:49

Non-Uniform Memory Access (NUMA) is a computer memory design used in multiprocessing, where the memory access time depends on the memory location relative to the processor. Under NUMA, a processor can take advantage of NUMA by preferring to access its own local memory (which is faster), rather than accessing non-local memory (meaning that it will prefer **not** to access the local memory of another processor or memory shared between processors).

MOT memory access has been designed with NUMA awareness. This means that MOT is aware that memory is not uniform and achieves best performance by accessing the quickest and most local memory.

The benefits of NUMA are limited to certain types of workloads, particularly on servers where the data is often strongly associated with certain tasks or users.

In-memory database systems running on NUMA platforms face several issues, such as the increased latency and the decreased bandwidth when accessing remote main memory. To cope with these NUMA-related issues, NUMA awareness must be considered as a major design principle for the fundamental architecture of a database system.

To facilitate quick operation and make efficient use of NUMA nodes, MOT allocates a designated memory pool for rows per table and for nodes per index. Each memory pool is composed from 2 MB chunks. A designated API allocates these chunks from a local NUMA node, from pages coming from all nodes or in a round-robin fashion, where each chunk is allocated on the next node. By default, pools of shared data are allocated in a round robin fashion in order to balance access, while not splitting rows between different NUMA nodes. However, thread private memory is allocated from a local node. It must also be verified that a thread always operates in the same NUMA node.

**Summary**

MOT has a smart memory control module that has preallocated memory pools intended for various types of memory objects. This smart memory control improves performance, reduces locks and ensures stability. The allocation of the memory objects of a transaction is always NUMA-local, ensuring optimal performance for CPU memory access and resulting in low latency and reduced contention. Deallocated objects go back to the memory pool. Minimized use of OS malloc functions during transactions circumvents unnecessary locks.
DB System and ExaCS Internals - 25-Apr-2023 presentation
Published: 2023-04-26 04:39:37



[](
      <style>
        .libutton {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 7px;
          text-align: center;
          outline: none;
          text-decoration: none !important;
          color: #ffffff !important;
          width: 200px;
          height: 32px;
          border-radius: 16px;
          background-color: #0A66C2;
          font-family: "SF Pro Text", Helvetica, sans-serif;
        { Abhilash Kumar Bhattaram : </style> <a class="libutton" href="https://www.linkedin.com/comm/mynetwork/discovery-see-all?usecase=PEOPLE_FOLLOWS&followMember=abhilash-kumar-85b92918" target="_blank">Follow on LinkedIn</a>) }

BCOUG presentation on DB System  and ExaCS - 25-Apr-2023
Slide Decks used for presentation below.

https://github.com/abhilash-8/SlideDecks/blob/main/BCOUG_DBSys_ExaCS-25-Apr-2023.pdf



#oracle #oci #oracledatabase #exadata #exacs #curl #api #oraclecloud #oracledba #nabhaas
How to Configure robots.txt File in Magento 2
Tags: webdev, magento, magento2tutorials
Published: 2023-04-26 04:29:38

Magento 2 is a hearty internet business stage that offers various elements and functionalities to arrange Magento 2 and deal with it. 

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

One of the fundamental components of a web-based store is the robots.txt record, which assumes an essential part in guiding web search tools on the most proficient method to slither and list the webpage's pages. 

The robots.txt record is a basic text document that lives in the root registry of a site and illuminates web crawler bots which pages or segments of the webpage ought not be crept or indexed.In this blog entry, we'll clarify **_how to configure the robots.txt file in Magento 2._**

For more info, visit **_https://webguru.dev/how-to-configure-robots-txt-file-in-magento-2/_**
50 berufliches Vorwärtskommen: Laster.
Tags: deutsch, career, motivation, discuss
Published: 2023-04-26 04:27:00

Moin Moin,

nicht nur lästern ist ein Laster ( := eine schändliche Gewohnheit ). Interessanterweise haben die beiden Wörter den selben Ursprung. Laster kann es viele geben. Künftig gehe ich gegebenenfalls noch auf einige ein. Grundsätzlich gilt, dass alle Laster im Zusammenhang mit niedriger [emotionaler Intelligenz→](https://dev.to/amustafa16421/comment/25k2n) bzw. sozial Kompetenz stehen. Aus dem Bekanntenkreis oder auch aus Berichten und Beiträgen aus dem Netz, geht immer wieder die Wichtigkeit von emotionaler Intelligenz hervor (1). Klar kann es auch Unzufriedenheiten mit den fachlichen Kompetenzen von Kollegen geben. Sind diese jedoch angenehm vom Charakter, so wäre eine Fortbildung eine mögliche Lösung für das Problem. Bei mangelnder emotionaler Intelligenz, stellt sich die Frage, ob man den Aufwand an nachträglicher Erziehung tatsächlich leisten möchte.

Ich denke, dass fortan emotionale Intelligenz / Sozialkompetenz eine größere Wichtigkeit als bisher in Bewerbungsverfahren erhält und erhalten sollte.
Wie siehst du das?


Beste Grüße,
Mustafa

Austausch mittels E-Mail: mustafa.kevin.dwenger@posteo.de
Betreff: Austausch

(1) Kannst du das, anhand deiner Erfahrungen, bestätigen?
TextGPT: A Profitable Weekend Project
Tags: chatgpt, ai, hackathon, product
Published: 2023-04-26 04:20:22

Hey everyone, Franco here and I want to share with everyone the story of how my weekend project, [TextGPT](http://textwithchatgpt.com/), turned into a profitable business opportunity.

For years, I've been toying with the idea of a SMS-based application. I find SMS to be so frictionless and easy to adopt. A few weeks ago, I had the idea of building an SMS-based AI chatbot that would be easy to use and highly effective. I wanted to create a chatbot that could be accessed through a messaging app without the need to download an app or visit a website. With the help of OpenAI's GPT architecture, I was able to build TextGPT in just a weekend.

The stack is simple, using [Remix](https://remix.run/) I can manage both the front and backend from a single codebase. [Supabase](https://supabase.com/) handles auth with OTP and database storage. [OpenAI](http://openai.com/) does the magic. Lastly, [Twilio](https://twilio.com/) manages all the sms traffic.

After I launched TextGPT, I started promoting it on social media and within my network. To my surprise, the response was overwhelmingly positive. People loved the idea of being able to communicate with an AI chatbot through SMS. They've called it "their friendly bot", "midnight therapist", "venting partner", and more.

As the word about TextGPT spread, I started receiving inquiries from folks that wanted to "white label" TextGPT and put their own spin on it. They saw the potential of using TextGPT to create their own personalize sms experience.

In just over 30 days, TextGPT has generated over $800 in revenue and has over 1000 users. It's been amazing to see how my weekend project has turned into a profitable business opportunity.

Overall, I'm thrilled with the success of TextGPT and I'm excited about the future possibilities that it holds. This experience has taught me that even the smallest weekend project can turn into a profitable business opportunity if you have the right idea and are willing to put in the work. So if you have an idea for a project that you're passionate about, go ahead and give it a try - you never know where it might take you!
Full-Stack nightmare resolved with Amplify
Tags: aws, community, awscommunitybuilder, webdev
Published: 2023-04-26 04:20:11


Hello everyone! My name is Mailing Delgado and I want to share one of my challenging experience as a Full-Stack Developer. I personally love mostly the Front-End and usually this is what consumes me the most. I love to design my page play around with color, typography, etc. First I start creating my design in Figma and then after a few weeks of designing and planning I start to code. By the time that I try to bring my design to life it takes forever. And then preparing my Back-end consumes me even more when I start creating my UML Database Design and I start creating my relationships between tables and I feel that it will never end. Using multiple tools and having 1,000 of windows opened in my browser and programs. It gets supper overwhelming.

Fortunately this nightmare ended by having my All-in-1 tool that thanks to the AWS Community Builders I discovered when I participated in the Amplify Hackathon. This amazing tool has everything you need to develop your Full-Stack app. 
AWS Amplify Studio is a visual development tool which has the following features: 


- Hosting: CI/CD using AWS CloudFormation

- Backend: 
  - Authentication: Amazon Cognito
  - Data model: that uses AWS AppSync and GraphQL API to access the data which is stored in Amazon Dynamo DB.
  - Storage: Amazon S3

- Frontend: bring your design to life by connecting Figma with Amplify just cloning the template and editing the components as you want.
- Connect your Frontend with the backend by running a command in the terminal and... Boom! Here you got an app developed fast and easy. 

If you are a beginner and don't know where to start don't worry here is the link for the step by step tutorials and the amazing documentation that will get you set! 
[AWS Amplify Docs](https://aws.amazon.com/amplify/getting-started/?nc=sn&loc=5)

In conclusion, building a Full-stack app can be a daunting task, but thanks to AWS Amplify, the process has become a lot easier. As a developer, it's important to deliver quality projects in a shorter timeline. This was my challenge, but AWS Amplify made it possible for me to create my app without worrying about the complexities of infrastructure and backend development. What I appreciated most about AWS Amplify was the smooth integration with my existing workflow, and the clear documentation that made it easy to get started. With a plethora of services such as authentication, APIs, storage, and hosting, AWS Amplify provided me with all the tools I needed to build a complete app. If you're a developer looking for a way to enhance your productivity and create efficient full-stack applications, I highly recommend giving AWS Amplify a try!

If you like this post please give it a heart, comment below and share!

You can connect with me through [LinkedIn](https://www.linkedin.com/in/mailing-delgado-medina/) and follow me on [GitHub](https://github.com/MailingDelgadoMedina)
Blessings!
Migrate AngularJS 1.3.2 to Angular
Published: 2023-04-26 04:07:38

Hi,

I have started a new Job and i am beginner in Angular.
I have a challenge to solve. I have an application in AngularJs and it needs to be upgraded to Angular. Since the support has ended and i cant get to install the AngularJS 1.3.2 with node.js npm.

I have researched online and found an article where the solution is to use ngUpgrade to run AngularJS and Angular side by side on the same Application.

Can i install and run AngularJS without migrating to Angular using ngUpgrade? I just want to install and run AngularJS and make very few updates and i may not need to upgrade to Angular if i can accomplish that task.

I would really appreciate your help on this.
Thank You!