teleren/devto huggingface dataset:
Learn to build responsive website from Kevin Powell!
Tags: webdev, beginners, tutorial, css
Published: 2024-01-11 10:33:58

[@kevinpowell Youtube Tutorial - Build a responsive website with HTML & CSS](https://www.youtube.com/watch?v=h3bTwCqX4ns&list=PL4-IK0AVhVjNDRHoXGort7sDWcna8cGPA&index=2)
[Frontend Mentor Landing Page](https://www.frontendmentor.io/challenges/manage-landing-page-SLXqC6P5)


![Manage Landing Page design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nolzoy3l83mhui1gggy.jpg)

Had been go thru Scrimba's The Frontend Developer Career Path Module 5 solo project to build responsive website but understand of theory only is not enough! So i found Kevin video and it is good!

I am halfway of this tutorial but I just want to share a few thing that put a lightbulb above my head.

```css
:root{
 --color-setup
 --font-family-setup
 --font-weight-setup
 --font-size-setup
}

/* CSS RESET */

/* General styling */

/* Button */

/* Navigation */

/* Utility classes */
}
```
First is the setup of the CSS file. Setting of the initial setup is something I learn and I think it make life easier! Setup the `root` and then link to `utility classes`. So we can add the `class` on element when working on html to match the design.  

Then the use of `@media (max-width: 50em)` for small screen size design. Focus to work on mobile design first, afterward only shift to desktop version.

On Javascript, use `.setAttribute()` and `.toggleAttribute()` method to add `data-*` attribute on element for CSS design such as click on the hamburger icon and popup of the navigation menu. 

The tutorial show how Kevin's planning and process to build up the website. It is something I think I need to learn more from expert. 

Thanks for your time to finish read about my post. Feel free to share your idea and thought! 😸

```js
let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
};

const {first, second, third, forth} = life

function capital(word) {
  return word[0].toUpperCase() + word.slice(1)
}

console.log(`${capital(first)}, ${capital(second)}, ${capital(third)}, ${capital(forth)}!`);
```
Andrew Tan
Navigating Diversity: Tailoring API Documentation for a Global Audience.
Published: 2024-01-11 10:31:35



In the ever-evolving landscape of technology, creating an API that resonates with a diverse global audience is not just a challenge, but an imperative. During my journey of building an API specifically designed for international students, I discovered the pivotal role that understanding the audience plays in ensuring widespread adoption and user satisfaction.

## The Diverse Tapestry of Users
International students, by nature, bring a myriad of backgrounds and technical proficiencies. Some approach the API as developers, seeking to seamlessly integrate it into their projects, while others have a more academic focus, utilizing the API for research and educational purposes. Recognizing this spectrum of users, I understood the need for documentation that could cater to both the tech-savvy and the less technically inclined.

## Tailoring Documentation for Developers
Concurrently, recognizing that not all users approach the API with a developer's mindset, I crafted a second layer of documentation tailored specifically for academic purposes. This segment offered simpler, more direct guidance, focusing on the essential functionalities relevant to research and educational applications. Clear, jargon-free language and user-friendly examples ensured that even those less versed in technical intricacies could harness the power of the API for their academic pursuits.

## The Power of Inclusive Documentation

The experience of tailoring documentation for this diverse audience underscored the significance of inclusivity in the tech world. In a global context, where language, technical proficiency, and usage intentions vary widely, documentation serves as the bridge that connects users with the capabilities of the API.

By adopting an inclusive approach, not only did user satisfaction increase, but the API garnered adoption across a broader spectrum of users. This not only contributed to the success of the project but highlighted the transformative impact that understanding and addressing the unique needs of a diverse audience can have on the acceptance and utility of technological solutions.

In conclusion, building an API for international students was not just about lines of code; it was about weaving a narrative that spoke to the varied experiences and requirements of the global community. In a world where technology acts as a unifying force, crafting documentation that embraces diversity is not just a best practice – it's a prerequisite for success.
Monatize your GPT with Buildship templete
Published: 2024-01-11 10:26:21

Hello Builders and Creators, Check out this new ready-to-use Template by BuildShip as the GPT store is about to launch by OpenAI, now you can easily monetize your GPTs with Stripe! 💸✨

  Why use this template-

💳 Easy Implementation and Powered by Stripe:
Trust in the security and reliability of Stripe's payment system and Accept payments with ease. and this is very easy to Implement👩‍💻. No complex coding required! This Buildship template is designed for simplicity, making it accessible for creators of all skill levels.


✅ Monetize Your GPT with Global Reach: Now your GPT-powered projects can earn you some serious cash. This new Buildship template lets you seamlessly integrate Stripe for a smooth and secure monetization process.

Connect with users worldwide and turn your global audience into loyal supporters. Whether it's content, services, or anything in between, this Buildship template opens up new possibilities for monetizing your GPT creations.

 Not only this you can also do a lot more with this template, this concept of adding actions with BuildShip can be used beyond Stripe, you can also use it to trigger an action in an external database or third-party tool.

Ready to turn your GPT project into dollars? 🌟 what's on your mind, what are you going to create?
Hover Effect Pricing Section JS & Bootstrap 5.3
Published: 2024-01-11 10:20:50

<p>Hover Glassy Effect Body And Border Pricing Section Vanilla JavaScript. </p>

<ul>
<li>Customizable Dashboard For Change Colors</li>
<li>Vanilla JS &amp; Pure HTML SASS</li>
<li>Easy To Use</li>
<li>Clean Code And Commented Codes</li>
</ul>

{% codepen https://codepen.io/yasindehfuli/pen/abMOmBN %}
The Ever-Evolving World of Tamildhool Serials
Tags: tamildhool, tamil
Published: 2024-01-11 10:16:17

The Ever-Evolving World of Tamildhool Serials


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/307eb7y3oao18b58i421.jpg)
Tamil television serials have undergone a remarkable transformation over the years, transitioning from conventional family dramas to exploring a diverse array of themes and narratives that captivate audiences. **[Tamildhool](https://tamildool.cyou/)** has played a significant role in this evolution, offering a digital platform that provides easy access to these evolving serials.
Tamildhool: Facilitating Access to Rich Storytelling
Tamildhool has revolutionized the viewing experience for Tamil serial enthusiasts by providing a comprehensive online repository of episodes and series. This platform's user-friendly interface has made it effortless for audiences to engage with their favorite shows at their convenience, ensuring that the charm of Tamil serials remains easily accessible.
Diverse Themes and Unmatched Appeal
The success of Tamil serials stems from their ability to embrace diverse themes, from traditional narratives to modern-day issues. This variety has broadened their appeal across different audience segments. **[Tamildhool](https://tamildool.cyou/author/sun-tv/)**'s role in curating this diverse range of serials has contributed significantly to the enduring popularity of Tamil television content.
Navigating Controversies: Tamildhool's Role
While Tamil serials have faced criticism for certain portrayals and storylines, Tamildhool remains the primary platform for enthusiasts. Despite occasional controversies, the platform continues to offer a vast collection of serials that cater to varying tastes, keeping audiences engaged and connected.
Impact Beyond Entertainment
**[Tamil Dhool](https://tamildool.cyou/)** serials often serve as a mirror to societal norms and facilitate discussions on significant social issues. Tamildhool's global accessibility ensures that these narratives transcend boundaries, fostering cultural exchange and awareness beyond geographical constraints.
The Future Landscape: Tamildhool's Contribution
As technology advances and streaming platforms become more prevalent, the future of Tamil serials appears promising. [Tamildhool](https://tamildool.cyou/author/vijay-tv/)'s role in providing easy access and its contribution to expanding the reach of Tamil serials globally will continue to shape the evolving landscape of this industry.
Conclusion
Tamildhool serials, with their captivating storytelling, emotional depth, and cultural significance, continue to enthrall audiences across the globe. Platforms like Tamildhool play a pivotal role in ensuring easy access to these serials, further cementing their place in the hearts of Tamil-speaking viewers. As the industry navigates challenges and embraces innovation, the legacy of [Tamildhool](https://tamildool.cyou/author/zee-tamil/) serials remains a testament to their enduring popularity and impact on the entertainment landscape.
Информационное Издание "Бизнес с Китаем": Уникальная Площадка для Российско-Китайских Связей"
Published: 2024-01-11 10:15:52

Новое сетевое издание "Бизнес с Китаем" обеспечивает уникальную платформу для установления коммуникаций между Россией и Китаем в области предпринимательской, просветительской и культурной деятельности.

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

Оно публикуется на двух языках - русском и китайском, что делает его доступным для широкой аудитории, заинтересованной в сотрудничестве и обмене знаниями и опытом между двумя странами.

Сетевое издание "Бизнес с Китаем" зарегистрировано в Федеральной службе по надзору в сфере связи, информационных технологий и массовых коммуникаций Российской Федерации, предоставляет широкий спектр информации для тех, кто заинтересован в деловых связях между Россией и Китаем, образовании на международном уровне, а также в изучении культуры обеих стран и включает пять разделов: бизнес, образование, культура, мероприятия, туризм. Это создает уникальную площадку для обмена идеями, партнерством и взаимодействием в различных сферах деятельности.

Раздел "Образование" предлагает возможности обучения без границ между Китаем и Россией, "Бизнес" связывает две страны для взаимовыгодного сотрудничества, "Культура" строит мосты между Россией и Китаем, "Туризм" объединяет бизнес и здоровье, а раздел "Мероприятия" освещает события в Китае и России.

Издание "Бизнес с Китаем" - полезный ресурс для широкого круга лиц: от предпринимателей, ищущих партнеров в Китае и России, до студентов, планирующих обучение в китайских вузах, и всех, кто интересуется китайским языком, культурой обеих стран, а также деловыми и оздоровительными поездками в Китай. Сетевое издание "Бизнес с Китаем" приглашает всех, кто участвует в деловой деятельности или интересуется развитием с Китаем в области бизнеса, образования, культуры, мероприятий и туризма, стать частью этой уникальной платформы для установления новых и интересных партнерских отношений.
   - Сайт: https://hbh.ru/
   - Контактные данные для прессы: https://hbh.ru/kontakty/
   - Электронная почта: hochu@hbh.ru
   - Телеграм: https://t.me/hbh_ch

В редакции издания всегда рады расширению взаимодействия с широким кругом представителей России и Китая, а также - установлению новых, интересных партнерств!
Best Flutterflow Development Agency
Tags: flutter, flutterflow, appdevelopment, lowcode
Published: 2024-01-11 10:14:25

Making clients happy in app development is a big deal. We have

🌟 5 Stars ratings on Clutch, 🌟 😮 
🌟 Top-rated plus category on Upwork  🌟 😮
🌟 100% Job success rate    🌟 😮

 Curious how we turned our projects into client success stories? it's not just about being good at the technical stuff. There is a lot more…

 Here's how we do it:

- 🗣️ Talk Clearly:
Tell clients exactly what to expect in terms of the project and keep them in the loop. This avoids confusion and keeps them happy.

- 📋 Follow a Clear Plan:
We've got a plan for every step of making the app – from gathering ideas to testing it out. We share updates regularly so clients always know what's happening.

- 🕵️ Check for Mistakes:
We're super careful about checking for mistakes in the app. Testing is like making sure everything works smoothly so clients get what they wanted without any surprises.

- 💼 Our Team Knows Their Stuff:
Our team really knows how to make apps using Flutter/FlutterFlow. They're experts and always keep learning to stay on top of the game.

- 🎧 Listen and Improve:
We like to hear what clients think, whether it's good or not so good. This helps us get better. We're always trying to make things even more awesome.

In a nutshell, keeping clients happy in app development means talking clearly, having a solid plan, checking for mistakes, having a smart team, and always finding ways to get better.

Following these things helps us build great apps and be known for doing a fantastic job in the world of app making.

If you or your clients want the Best Flutter/Flutterflow developers or want to Hire Flutterflow/flutter development agency

Connect with us (www.flutterflowdevs.com/contact)
Glassy Scroll Mega Menu Bootstrap v.5.3 JS
Published: 2024-01-11 10:13:44

<p>Mega Menu With Glassy Scroll, Vanilla JavaScript, And Pure HTML. SASS Bootstrap.</p>

<ul>
<li>Customizable Dashboard For Change Colors</li>
<li>Vanilla JS &amp; Pure HTML SASS</li>
<li>Easy To Use</li>
<li>Clean Code And Commented Codes</li>
<li>Fully LTR</li>
<li>Glassy Effect</li>
</ul>

{% codepen https://codepen.io/yasindehfuli/pen/gOEPqWK %}
How to Implement 2D Scrollable TableView in Flutter
Published: 2024-01-11 10:09:32

`TwoDimensionalScrollView` is a widget that combines the `TwoDimensionalScrollable` and `TwoDimensionalViewport`. 

It creates an interactive scrolling pane for content in both vertical and horizontal dimensions. 

However, using it directly is a bit challenging. 

In this tutorial, we’ll explore this package to implement a very simple Tableview and we’ll see how we can customize it.

**_Let's have a look at what we’re going to implement…_**


![Table showing TwoDimensionalScrollView is a widget that creates an interactive scrolling pane of content in both vertical and horizontal dimensions.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn3lyt4puqmd0o09c3qy.gif)

## Table of Contents

- Introduction
- Implementation
  - Add the dependency
  - Adding TableView to a screen
  - TableSpan
  - Add a border
  - Add colour
  - TableSpan.extent
  - Void Function(PointerEnterEvent)? onEnter
  - Void Function(PointerExitEvent)? onExit
  - RecognizerFactories
  - Add a Padding
- Pinning the rows and columns
- ScrollableDetail
- cacheExtent
- DiagonalDragBehavior
- Conclusion

Mastering the art of implementing a 2D Scrollable TableView in Flutter can significantly enhance your app's user interface.

This is just the tip of the iceberg! 

It’s just a brief overview that only scratches the surface of what you can achieve with this powerful Flutter feature. 

To dive deeper into detailed guides for advanced techniques, and code snippets be sure to check out the Full Article on **[ Canopas Blog. ](https://blog.canopas.com/how-to-implement-2d-scrollable-tableview-in-flutter-a8b0fe703614)**

Follow **[Canopas](https://blog.canopas.com/)** for our latest technical blog posts!
Building Bridges, fostering learning #DEVResolutions2024
Published: 2024-01-11 10:07:41

## Personal Aspirations:

1. **Aspiration:** To contribute to opensource more than I did last year
2. **Why it Matters:** OSS is driving the world, also its my way of giving back :) 

## DEV Community Contributions:

1. **Contribution Goal:** Participate in hackathons and hactoberfest for starters
2. **Collaboration Plans:** I have my teammates that are working on various projects, I will start there.
Equal heights
Tags: jquery, javascript
Published: 2024-01-11 10:07:01

---
title: Equal heights
published: true
description: Set an equal height for the different children boxes
tags: jQuery, JavaScript
# cover_image: https://i.stack.imgur.com/eejiz.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-11 09:56 +0000
---

I was working on a landing page website project. There's something I need to evaluate regarding the design of their Figma.

Since the boxes have their different parent and that parent is only displayed as "flex". The only thing that comes to my mind is manipulating them using a script or jQuery. jQuery because that is one library they use from their previous projects and as a developer I need to adapt their environments. 

I tried this script.

```javascript

  function cBoxItemHeight() {
    function getMaxHeight(className) {
      let max = 0;
      document.querySelectorAll(className).forEach(function (el) {
       
        if (el.scrollHeight > max) {
          max = el.scrollHeight;
        }
      });
      return max;
    }
    function setHeight(className, height) {
      document.querySelectorAll(className).forEach(function (el) {
        el.style.height = height + "px";
      });
    }
    let max = getMaxHeight(".s4__text-coating");
    setHeight(".s4__text-coating", max);
  }
  $(window).resize(function () {
    cBoxItemHeight();
  });
  cBoxItemHeight();

```

It will save you in the meantime. Hard code it later when you need to think about Vanilla JS. It also helps to follow the design in Figma when resizing the browser.

If you have any ideas. Code your power below.
🔐 Introducing My Secure Password Generator App VUE JS + Bulma
Tags: webdev, vue, bulma, security
Published: 2024-01-11 10:03:04

Hello everyone on dev.to! I'm excited to introduce my latest creation: an app for generating secure passwords!

Technologies Used:

    Vue JS: For a smooth and responsive user experience.
    Bulma: For a clean and modern design.

Key Features:

    Secure Password Generation: Get robust and secure passwords with just one click.
    No Saving: Your security is my priority! The app never saves the generated passwords.

Currently, the app is available only in Italian, but I'm working on implementing English language support. In the meantime, I've developed this app in my free time, aiming to make it as intuitive as possible.

I hope you find it useful! Let me know what you think and if you have any suggestions for improvement. Thank you so much for your support! 🚀✨

[https://generatore-password-pci.vercel.app/](https://generatore-password-pci.vercel.app/)
بهترین مارک سیم برق و کابل ساختمان
Published: 2024-01-11 10:01:50

شناخت بهترین مارک سیم برق و کابل ساختمان برای افرادی که می‌خواهد دست به خرید سیم برق و کابل ساختمان بزنند بسیار اهمیت دارد. بدون شناخت ویژگی‌های مهم سیم و کابل و بهترین مارک آنها نمی‌توان به‌درستی دست به خرید بهترین مارک سیم برق و کابل ساختمان زد. بسیار مهم است تا خریداران با انواع برندهای سیم و کابل آشنا شوند و سپس اقدام به خرید کنند. [در مقاله امروز به معرفی بهترین مارک سیم برق و کابل ساختمان خواهیم پرداخت تا با آگاهی بیشتری برای خرید این محصولات اقدام کنید.
](https://cablebargh.com/blog/P45330-best-brand-electrical-wire-and-cable/)

نکات مهم در هنگام خرید بهترین مارک سیم برق و کابل ساختمان
در هنگام خرید انواع سیم و کابل باید به فاکتورهای مختلفی توجه کرد؛ زیرا امروزه تولیدکننده‌های بسیاری به تولید این محصولات پرداخته‌اند؛ اما کالای همه این تولیدکننده‌ها از کیفیت لازم برخوردار نیست. لازم است تا خریداران به فاکتورهای مهمی به جز برند تولیدکننده سیم برق و کابل ساختمان توجه داشته باشند تا محصول بهتری را خریداری کنند. 
منبع: [cablebargh.com](https://cablebargh.com/)
Generating PDFs with spatie/browsershot in Laravel
Tags: laravel, webdev, pdf, php
Published: 2024-01-11 09:54:46

The `spatie/browsershot` package provides an easy way to generate PDFs from HTML in Laravel applications. With just a few lines of code, you can convert blades, DOM elements, or external URLs to PDFs. 

{% youtube 320vwRDqi9w %}
[Laravel PDF Export Tutorial](https://www.youtube.com/watch?v=320vwRDqi9w)


## Installation

You can install the package via Composer:

```bash
composer require spatie/browsershot
```

This will install the package and its dependencies. 

## Usage

To generate a PDF from a blade template, you can do:

```php
// Load the template 
$template = (new \Spatie\Browsershot\Browsershot())
    ->bodyHtml('<h1>Hello World</h1>') 

// Save as a PDF 
$template->savePdf('hello-world.pdf');
```

You can also pass a view to convert the rendered HTML to PDF:

```php
$pdf = Browsershot::html('hello-world-template', ['name' => 'John'])
    ->savePdf('report.pdf');
```

To generate a PDF from a URL:

```php
Browsershot::url('https://www.example.com')
    ->savePdf('example.pdf');
```

There are many other options like setting paper size, margins, landscape/portrait orientation, and more.

## Headers and Footers

You can add custom HTML headers and footers to the PDF using the `headerHtml` and `footerHtml` methods:

```php
Browsershot::url('https://www.example.com')
    ->headerHtml('<p>This is my header</p>')
    ->footerHtml('<p>Copyright 2021</p>')
    ->savePdf('example.pdf'); 
```

## Additional Options

Here are some other useful options:

- `setNodeBinary` - Set a custom Node binary to use for PDF generation 
- `setNpmBinary` - Set a custom NPM binary to use for PDF generation
- `setOption` - Customize the underlying wkhtmltopdf options
- `showBackground` - Show background graphics and colors
- `landscape` - Orient page landscape 
- `margins` - Set margins (in mm)
- `pages` - Convert only specific pages 

Here you can more about
[PDF generation via browsershot.](https://qirolab.com/posts/effortless-pdf-generation-in-laravel-a-guide-to-using-spatiebrowsershot-package-1704922615)


## Demo Project

For a full demo project showing PDF generation via browsershot, check out [this example Laravel app](https://github.com/qirolab/laravel-pdf-tutorial-using-spatie-browsershot).

So in summary, the spatie/browsershot package provides a simple Laravel interface to generate PDFs from HTML, CSS, and web URLs. It can be used for many use cases like generating invoices, reports, receipts, and more.

<a href="https://www.buymeacoffee.com/qirolab" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Payfederate - New Year’s Resolutions for Compensation
Tags: compensation, paytransparency
Published: 2024-01-11 09:46:37

Join Payfederate for the "[2024NewYearEvent](https://payfederate.ai/2024newyearevent/)," a premier gathering for compensation professionals committed to embracing New Year's resolutions. This event, slated for January 16th, 2024, is designed to tackle the evolving landscape of compensation, emphasizing the necessity for equitable and transparent practices. It underscores the significance of refining compensation strategies, conducting precise cross-industry and cross-company comparisons, and ensuring fairness in compensation to foster a culture of trust.

At the core of the event is the introduction of the Payfederate platform, hailed as a groundbreaking tool dedicated to advancing pay equality and transparency. The occasion will showcase a Visionary Leader boasting over three decades of diverse industry experience and expertise in compensation planning, business, and people strategy. The platform is positioned as the linchpin for prioritizing people in compensation practices, laying the foundation for a fair and inclusive approach.