teleren/devto huggingface dataset:
Add clamped sizes to TailwindCSS
Tags: tailwindcss, javascript, webdev, programming
Published: 2024-05-27 07:34:25

Here's a little snippet i use to easily create responsive spacing/text sized.

```js
const remToPX = (rem) => rem * 16
const pxToRems = (px) => px / 16

const formatNumber = (num) => parseFloat(num.toFixed(3)).toString()

const clamped = (minPx, maxPx, minBp, maxBp) => {
  const slope = (maxPx - minPx) / (maxBp - minBp)
  const slopeVw = formatNumber(slope * 100)
  const interceptRems = formatNumber(pxToRems(minPx - slope * minBp))
  const minRems = formatNumber(pxToRems(minPx))
  const maxRems = formatNumber(pxToRems(maxPx))
  return `clamp(${minRems}rem, ${slopeVw}vw + ${interceptRems}rem, ${maxRems}rem)`
}
const MIN_VIEWPORT_WIDTH = 400
const MAX_VIEWPORT_WIDTH = 1000
const clampPx = (minPx, maxPx) => clamped(minPx, maxPx, MIN_VIEWPORT_WIDTH, MAX_VIEWPORT_WIDTH)
const clampRem = (minRem, maxRem) => clamped(remToPX(minRem), remToPX(maxRem), MIN_VIEWPORT_WIDTH, MAX_VIEWPORT_WIDTH)
```

And i use it like so in the `tailwind.config.js`
```js
    fontSize: {
      '32_48': [
        clampPx(32, 48),
        clampPx(38, 56),
      ],
    },
    spacing: {
        '32_60': clampPx(32, 60),
        '32_64': clampPx(32, 64),
    }
```
Which allows me to create responsive spacing based on viewport width like so:

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

It's all based on this excellent work:

[https://github.com/AleksandrHovhannisyan/fluid-type-scale-calculator](https://github.com/AleksandrHovhannisyan/fluid-type-scale-calculator)

Don't forget to like and share please! :D
Day 43/366
Tags: 100daysofcode, 1percentplusplus
Published: 2024-05-27 07:32:53

🚀 **Today's Learning:**

🌟 DSA

- calculate the largest subarray sum
- print the subarray with the largest sum

🌟 Dev

- JWT Authorization

🔍 **Some Key Highlights:**

DSA

To **calculate the largest subarray sum**, we use Kadane's Algorithm. We initialize two variables, `maxCurrent` and `maxGlobal`, with the first element of the array. We then iterate through the array starting from the second element. For each element, we update `maxCurrent` to be the maximum of the current element and the sum of `maxCurrent` and the current element. This step ensures that we are either starting a new subarray at the current element or continuing the existing subarray. We then update `maxGlobal` to be the maximum of `maxGlobal` and `maxCurrent`. By the end of the iteration, `maxGlobal` holds the largest sum of any subarray within the given array.

To **print the subarray with the largest sum**, we use a similar approach with Kadane's Algorithm, but with additional tracking of the start and end indices of the subarray. We initialize variables for the current and global maximums, and for the start and end indices. As we iterate through the array, we update `maxCurrent` in the same way, but also track when we start a new subarray by recording the current index as the start. If `maxCurrent` exceeds `maxGlobal`, we update `maxGlobal` and set the start and end indices to the current tracked start and current index, respectively. After completing the iteration, we print the subarray that starts at the recorded start index and ends at the recorded end index, which represents the subarray with the largest sum.

 #100daysofcode #1percentplusplus #coding #dsa
Salesforce CRM: A Boon for the Developer Community
Tags: salesforce, consultation
Published: 2024-05-27 07:29:57

The developer community thrives on innovation, collaboration, and efficiency. While code is the lifeblood, managing the workflow and fostering a strong developer ecosystem requires robust tools. Here's where [Salesforce CRM](https://cloudprism.in/salesforce-consultation) shines, offering surprising benefits for developers and dev teams.

Streamlined Communication & Project Management

Salesforce CRM excels at organizing and managing interactions. Developers can leverage it to:

Centralize Communication: Consolidate project details, discussions, and file sharing within a single platform. This eliminates information silos and ensures everyone is on the same page.
Task Management: Assign tasks, track progress, and set deadlines for individual developers or teams. This promotes accountability and keeps projects on track.
Bug Tracking & Issue Resolution: Log bugs, report issues, and track their resolution efficiently. Salesforce provides visibility into development bottlenecks and facilitates faster solutions.
Building a Thriving Developer Community

[Salesforce CRM](https://cloudprism.in/salesforce-consultation) goes beyond internal project management. It fosters a vibrant developer community by:

Member Management: Create profiles for developers, categorize them by skills and expertise, and connect them based on project needs.
Knowledge Sharing & Forums: Develop a knowledge base within Salesforce to store code snippets, best practices, and troubleshooting guides. Facilitate discussions and Q&A forums for peer-to-peer learning.
Engagement & Events: Manage developer events, workshops, and hackathons using Salesforce. Track registrations, send invites, and gauge engagement metrics.
Empowering Developers & Innovation

Salesforce empowers developers by:

Customization & Automation: Developers can leverage the Salesforce platform and APIs to build custom applications that streamline workflows and automate repetitive tasks, freeing up time for innovation.
AppExchange Integration: The [Salesforce AppExchange](https://cloudprism.in/salesforce-consultation) offers a vast library of pre-built applications that integrate seamlessly with Salesforce CRM. This allows developers to extend functionalities and cater to specific needs.
Data-Driven Insights: Salesforce provides valuable data on user behavior and app usage within the developer community. These insights can guide future development efforts and prioritize features that resonate most with developers.
Conclusion

[Salesforce CRM](https://cloudprism.in/salesforce-consultation) might seem like a customer relationship tool, but its capabilities extend far beyond. By leveraging its features, developer communities can streamline communication, foster collaboration, and empower developers to innovate and create.  So, the next time you think of Salesforce, consider its potential to supercharge your developer community.
DEVOPSDAYS: LET’S TALK SECURITY
Tags: devops, security, cloud, conference
Published: 2024-05-27 07:27:45


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

Hey, community! We are happy to announce that a new DevOpsDays Ukraine: Let's Talk Security edition will be held on June 4-5.

The virtual conference will be dedicated to DevSecOps, the extension of the DevOps practice that integrates security as a shared responsibility throughout the entire IT lifecycle.

Over two evenings, we'll delve into discussions on culture, automation, and platform design, crafting an action plan to integrate security measures at every stage of development. This approach ensures faster and more secure software delivery.

We're excited with the lineup and just to name a few speakers: Daniel Deogun from Omegapoint, Petro Vavulin from Kyivstar, Michał Brygidyn from Xebia, Anastasiia Voitova from Cossack Labs, and many more!

Check it out & register 👀 https://devopsdays.com.ua/

We look forward to seeing y'all!
Strategies for Success in UK Market place
Tags: success, uk, email, marketing
Published: 2024-05-27 07:09:33

## Understand the Market
Conduct thorough market research to understand the unique needs, preferences, and behaviors of UK consumers. This will help you tailor your products, services, and marketing approaches to resonate with your target audience.

## Localize Your Offerings
Adapt your products, services, and branding to the UK context. This may involve making adjustments to packaging, pricing, language, and cultural references to better align with local expectations.

## Build a Targeted UK Email List
Developing a high-quality email list of potential customers in the UK can be a powerful way to reach and engage your target audience. Work with a reputable data provider to acquire a [UK email list](https://www.saleleads.net/email-list/uk-email-list/) that aligns with your ideal customer profile.  

## Establish a Strong Online Presence
A robust online presence is essential. Ensure your website is optimized for the UK market, invest in search engine optimization (SEO), and use social media platforms to connect with your audience.

## Comply with Regulations
 Familiarize yourself with the legal and regulatory requirements for operating in the UK, including tax obligations, data protection laws, and product safety standards. Ensure your business is fully compliant to avoid potential issues.

## Provide Exceptional Customer Service

 Delivering a seamless and satisfying customer experience is crucial for building brand loyalty and driving repeat business. Invest in training your team, offer multichannel support, and be responsive to customer inquiries and feedback.
What Is The Difference Between Frontend Development And UI Development?
Tags: frontend, javascript, react, opensource
Published: 2024-05-27 07:04:21

Introduction

There is a common misconception about UI developers and Front-End developers that they have identical job responsibilities.

In this blog, I’ve tried to draw the line between them. These two roles are critical but different.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yisbhz2yfbs13851nq3.jpg)
Let us understand the difference between frontend development and UI development.

The term “user interface” refers to all the elements such as (keyboard, mouse, extra controllers, etc.) that a user uses to interact with the website or app using a variety of devices, including desktops, laptops, tablets, and mobile phones.

User interface development, be it apps, websites, games, or even simulators (in fact, especially the simulators), is a complex process that handles elements of design, engineering, and psychology.

A primary objective of a UI developer is to design a user-friendly interface.
Front-End development | Definition

The front-end development aims to deliver a complete product as per certain specifications.

Front-end development is the development of the web or app interface. The Front-End developers are responsible for the interface development and operations, as opposed to the visual interface designed by the UI developer.

Front-end development is responsible for the interface development, opposite to the visual interface designed by the UI developer.

If we were to compare this to printed media, the front-end developer would handle the page proofreading while the UI developer would design the overall layout.

The Front-End developer needs to utilise a lot more programming skills than the UI designer. They have to understand the HTTP protocol, the principles of work of servers and browsers, and the peculiarities of displaying the web on various devices that are currently on the market.

to continue reading further, check out our website blog [here](https://www.incerro.ai/insights/what-is-the-difference-between-frontend-development-and-ui-development)

Conclusion

In conclusion, frontend development and UI improvement are vital elements of net development, every with its personal set of duties, skills, and significance. While frontend improvement includes both building the interface and enforcing functionality, UI improvement is in most cases involved with designing visually appealing and consumer-pleasant interfaces.
Enhance Your Network with High-Quality NIC Cards from GBIC Shop
Tags: niccard, networkinterfacecard
Published: 2024-05-27 07:02:01

Discover the power of seamless connectivity with **[NIC card](https://www.gbic-shop.de/definition-function-and-kinds-of-nic-network-interface-card)** from GBIC Shop. A Network Interface Card (NIC) is essential for linking your computer to a network, ensuring fast, reliable data transmission. Our NIC cards support various speeds, including Gigabit and 10 Gigabit Ethernet, catering to both personal and enterprise needs. With advanced features like reduced latency, improved throughput, and robust security, GBIC Shop's NIC cards elevate your network's performance. Trust in our high-quality, rigorously tested products and exceptional customer service. Upgrade your network infrastructure today with NIC card from **[GBIC Shop](https://www.gbic-shop.de/)**, and experience unparalleled connectivity and performance.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1r7iids8x5mu2lushg9.jpg)
Game Development Diary #7 : Second Course
Tags: gamedev, godot, godotengine, newbie
Published: 2024-05-27 07:00:00

27/05/2024 - Monday

Today is my seventh day developing a video game. That means it’s been one week since I started studying Godot, and I think the progress of the last week has been quite satisfying for me. I will try to remain consistent in the future.

#Today's Progress:

##Learn about gridmap: 
Create a MeshLibrary to start placing meshes in a grid with the GridMap node.

##Use the gridmap:
Learn how to customize a Gridmap to fit my MeshLibrary and start building a level with them both.

##Building Curves With Path3D
Learning how to create 3D paths for the enemy to follow.

##PathFollow3D Enemies
Making an enemy that can walk along my Path3D with a simple script.

##Making a bas efor the gameplay
Connecting the enemies to a home base so they can deal damage at the end of the path.

##Health and Labels
Learn how to track the base’s health and show it to the player with the Label3D node.

##Introducing Properties
Using properties to create setter and getter functions. Ensuring code is run when the base’s health changes.

##Text, Strings and Colors
Learning how to compose complex strings and create colors in scripts to improve the health label.

##Mouse Input and Ray Picking
Learn how to use the Camera3D and the RayCast3D node to find out what objects in the game world the player is clicking on.

##Updating Gridmap Cells
Getting familiar with GridMap functions to change tiles dynamically when the player hovers over them with the mouse.


#Plans for Next Session:
Continue to my GameDevTV's course
How to Use DbVisualizer for Oracle Database Links
Tags: oracle
Published: 2024-05-27 07:00:00

This article provides a brief overview of Oracle database links and their setup using DbVisualizer, focusing on simplifying data management across different systems.

## Creating Database Links
Setting up a database link in Oracle with DbVisualizer involves:

1. Installing Oracle and DbVisualizer.
2. Configuring Oracle database connections in DbVisualizer.
3. Adjusting database settings to use a pluggable database.
4. Creating and granting access to users within Oracle.
5. Initiating the database link through simple SQL commands.

## FAQs on Oracle Database Links

### What defines a Database Link in Oracle?
A database link is a bridge allowing access to data in a remote database as though it were local.

### What is the significance of Database Links?
They are vital for centralizing data management and facilitating robust information sharing.

### How do Database Links improve workflow?
They allow direct, real-time access to remote databases, reducing redundancy and enhancing efficiency.

### What are the main types of Database Links?
Oracle supports both private and public database links to suit different user needs.

## Conclusion
Oracle database links, facilitated by DbVisualizer, are indispensable for modern, efficient data management strategies. For more comprehensive insights into database links, check out  **[Oracle Create Database Link.](https://www.dbvis.com/thetable/oracle-create-database-link/)**
Fotizo - Edit your image with ease.
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-27 06:49:55

*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/awschallenge)*

## What I Built
I build Fotizo, image editor app using React and AWS Amplify. With fotizo currently you can apply blur, saturation, contrast, brightness, and grayscale to your image but the possibilities are endless. I am working on it and after this challenge I will add more edits and customization options to build this editor something similar to canva's photo editor. 

## Demo and Code
You can access the editor here: https://main.d238eid8v6fv55.amplifyapp.com/

and the code for this is available in my github repo: https://github.com/raibove/fotizo-editor



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

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

## Integrations
<!-- Tell us which qualifying technologies you integrated, and how you used them. -->

<!-- Reminder: Qualifying technologies are data, authentication, serverless functions, and file storage as outlined in the guidelines -->

I integrated following AWS amplify technologies:
1. Authentication: To access all the pages apart from landing page, user needs to be authenticated.
2. file storage: The files user upload are stored in S3. And then I apply different filters and process on it. This allows user to share their images with others.
3. Data: I am storing the image edit details in the data so that user can come back and continue editing whenever he wants. 
 
Apart from this I used UI components from `'@aws-amplify/ui-react'` to build all the pages in my app so my submission also qualifies for connected components.

**Connected Components and/or Feature Full**

<!-- Let us know if you developed UI using Amplify connected components for UX patterns, and/or if your project includes all four integrations to qualify for the additional prize categories. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image (if you want). -->

Thank you for reading this, I know there's lot to improve in this project but I was tight on my schedule due to office work, still I am glad that I was able to submit partially baked project instead of not submitting at all.

<!-- Thanks for participating! →
Best digital marketing agency based in Dubai,
Tags: webdev, productivity, html, wordpress
Published: 2024-05-27 06:47:29

[Evox](https://dev.to/pd_tricks/comment/10na9) is a full-service branding & digital marketing agency based in Dubai, focused on branding & design, website design & development, social media management, SEO & more.
With the Evox Brand Specialists & Consultants, - we suggest the path you need to take to make your first steps into evolving your organization into a marketable brand. Evox measures your business worth and analyze strategies to maximize your business presence
devchallenge
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-27 06:43:47

*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/awschallenge)*

## What I Built
I'm building a powerful image generation application with a user-friendly Next.js frontend. Unleash your creativity and turn your words into stunning visuals directly in the browser.

## Demo and Code
code:https://github.com/Mattiullah134/devhack
url:https://master.d23gd4cj77p43p.amplifyapp.com/
Images:

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

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




## Integrations
I'm building an image generation application with a sleek and user-friendly Next.js frontend. This will allow users to create unique and customized images directly through the browser.

I'm crafting a cutting-edge image generation application with a user-friendly Next.js frontend. To empower users with creative control, I'm utilizing a robust backend infrastructure that seamlessly integrates data, authentication, serverless functions, and file storage.

**Connected Components and/or Feature Full**
While I haven't used many Amplify connected components, my project integrates all four key technologies (data, authentication, serverless functions, file storage) for the backend.



<!-- Don't forget
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09xd6j1fi1uekuyvwd4r.PNG)

 to add a cover image (if you want). -->


<!-- Thanks for participating! →
Quad Bike Dubai
Tags: tourism
Published: 2024-05-27 06:32:48

We offer Quad Bike, ATV riding, and Dune Buggy riding as activities. Explore the stunning views of the Arabian Desert’s red dunes with us. Our company gives services during all those magical moments. These are Desert Morning, Desert Sunrise, Desert Sunrise, and Overnight. We have a strong track record of providing high-quality services. Have more fun and enjoyment with us by riding a Quad Bike / ATV and Dune Buggy. We provide the best deals on Quad Bike / ATV rentals and Dune Buggy rentals.
We provide a variety of activities to our customers. The services that we offer throughout the travels that we organize are incredibly intriguing and complete for our clients’ happiness and amusement. The full range of entertainment is available. Our Company offers a pick-up and drop-off service, and we also respect our clients’ requirements and wants. We also offer transportation services depending on the number of visitors. ( https://quadbike-dubai.com/ )
These Off-road services are available in the Sharjah – Dubai Red Dunes. Quad Biking, ATV riding, and Dune Buggy riding are among the activities available in Sharjah – Dubai red dunes. Riding a Quad Bike, ATV, or Dune Buggy with us will provide you with much more enjoyment. Follow us because we explore the desert. You can easily approach us if you require any one of our services. Contact us for an unforgettable experience trip. ( https://quadbike-dubai.com/ )
News posting website with AWS Amplify
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-27 06:30:38

*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/awschallenge)*

## What I Built

**Studious**

Using AWS Gen 2 services, I developed an open-source news, blog, and post creation and publication application Studious. Users who have registered on this website can view news, draft and publish their own local news articles, and build their own. Add a variety of stuff, such as size-based text, urls for photos, etc.

## Demo
[Studious App](https://main.d3w0oxjx7x9ipa.amplifyapp.com/)
[Source Code](https://github.com/lizardkingLK/studious-lamp)

![News List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6vubiyj40b0cutni22h.png)

![News Display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e71cqtezuuo7cx6dep9.png)

## Journey

I developed this application using the next js (pages routes) for react framework.

The following AWS services are used by this application
- Data
- Authentication
- Serverless Functions
- File Storage

**Connected Components and/or Feature Full**

<!-- Let us know if you developed UI using Amplify connected components for UX patterns, and/or if your project includes all four features: data, authentication, serverless functions, and file storage. -->

> This application also uses the Amplify UI React library for the frontend UI Framework, also with the auth and storage connected UI components which speeds up and simplifies development.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

Thanks for reading! 🤝🏿