Category: Frontend & JavaScript

Mastering CSS Media Queries: Optimizing for Retina & Touch Devices

Learn how to use advanced CSS media queries to optimize sliders for Retina iPhones, high-DPI devices, and hybrid touchscreens.

When building responsive websites, CSS media queries are your best friend. They let you fine-tune layouts for different devices, screen sizes, resolutions, and input types. But sometimes media queries can look complicated — especially when dealing with device widths, pixel ratios, and hover/pointer detection.

In this post, we’ll break down three CSS media queries that are often used to optimize sliders (.ftslider) for iPhones, high-density screens, and hybrid touch devices. By the end, you’ll understand exactly what each query targets, why it’s written that way, and how it affects your design.

Targeting iPhone X–Style Devices

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) 
and (-webkit-min-device-pixel-ratio: 3) {
  .ftslider { height: calc(90vh - 85px); }
}

The above @media query targets iPhone X–style devices (and similar), because:

  • min-device-width: 375px – the device width is at least 375px.
  • max-device-width: 812px – the device width is at most 812px.
    • This matches iPhones in the 375×812 portrait range (like iPhone X, XS, 11 Pro, etc.).
  • -webkit-min-device-pixel-ratio: 3 → ensures the device has a Retina 3x screen density.

Handling High-Resolution Displays (Cross-Browser)

@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (min-resolution: 458dpi),
only screen and (min-resolution: 3dppx) {
  .ftslider { height: calc(90vh - 85px); }
}

This @media query targets high-resolution displays (3x pixel density or higher), but in a cross-browser compatible way:

  • -webkit-min-device-pixel-ratio: 3 – WebKit (Safari, Chrome).
  • -o-min-device-pixel-ratio: 3/1 – Opera (old syntax).
  • min-resolution: 458dpi – very high DPI screens (approx 3× standard 96dpi).
  • min-resolution: 3dppx – modern way to express “3 device pixels per CSS pixel”.

Hybrid Devices: Hover + Coarse Pointer

@media only screen and (hover: hover) and (pointer: coarse) {
  .ftslider { height: calc(85vh - 55px); }
}

It targets devices that support hover and use a coarse pointer (e.g., touch + stylus hybrids).

Why This Matters

  • Better UX: Users on high-DPI devices get clean, non-clipped layouts.
  • Cross-platform support: Android, iOS, tablets, and hybrid devices all behave predictably.
  • Future-proofing: By writing broad yet precise queries, your design adapts to new device types.

Conclusion

Media queries may look intimidating at first glance, but each one has a specific purpose. In this case, they ensure sliders adapt smoothly across iPhones, high-DPI displays, and hybrid touch devices.

When building responsive designs, don’t just think in terms of width and height – consider pixel density, hover ability, and pointer type. That’s the key to delivering a seamless user experience on any screen.

Install React JS with Laravel Breeze

Guide to installing Laravel Breeze with React JS scaffolding via Inertia for building modern applications.

In this React JS tutorial, we learn to install Laravel Breeze with React JS over Laravel Application. Laravel Breeze come equipped with out-of-the-box scaffolding for new Inertia applications, making them the quickest and easiest way to get your Inertia project off the ground with React Js.

For this post, we are using Laravel Breeze. This minimal implementation includes login, registration, password reset, email verification, password confirmation, and a basic “profile” page for updating user information.

Laravel Breeze comes equipped with simple Blade templates styled with Tailwind CSS. However, if you prefer to scaffold your application using React JS and Inertia JS, Laravel Breeze can do that too.

In addition to being an excellent starting point for a new Laravel project, Laravel Breeze is also a great choice for projects that want to elevate their Blade templates using Laravel Livewire.

Install laravel project and setup database

First install a fresh new Laravel application from the composer using the following command,

composer create-project laravel/laravel inertia-react

It will create the laravel project folder named inertia-react .

Now, you have to connect the laravel app to the database. Go inside this folder and open .env to change the database connection details as follows,

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_password

After changing the connection details, run all migrations for the project using the following command,

php artisan migrate

Install Laravel Breeze over Laravel

Once you ready with the Laravel installation, you can proceed with Laravel Breeze installation using Composer using the following command,

composer require laravel/breeze --dev

Once you’ve installed the Laravel Breeze package using Composer, it’s time to run the breeze:install Artisan command as follows, 

php artisan breeze:install

This command will publish all the necessary authentication resources, including views, routes, controllers, and more, directly to your application.

Laravel Breeze publishes its code directly to your application, giving you complete control and visibility over its features and implementation. This allows you to easily customize and tailor the authentication experience to fit your unique needs.

If you want to use an Inertia stack with React JS in your Laravel Breeze application, simply specify “react” as your desired stack when running the breeze:install Artisan command as follows, 

php artisan breeze:install -react

Once the scaffolding is installed, be sure to compile your application’s frontend assets to ensure proper functionality:

npm install && npm run dev

With the initial setup complete, it’s time to test your application’s authentication functionality. Simply navigate to the /login or /register URLs in your web browser to get started.

All of Laravel Breeze‘s routes are defined in the routes/auth.php file, making it easy to modify or customize the authentication routes as needed.

JavaScript and it’s Lexical Structure

Dive into the building blocks of JavaScript, including unicode, case sensitivity, semicolons, and more.

To understand the structure of JavaScript, you need to learn the following building blocks of it: Unicode, case sensitivity, semicolons, comments, white space, literals, identifiers, and reserved words.

Nowadays, javascript are used in every websites in a different forms. Frameworks like ReactJS, NextJS, NodeJS, VueJS, etc. become more popular to meet the market demand of rapid development. In such cases, understand the lexical structure of it becomes more important for every developer, who works with it.

Unicode

You can use Unicode in JavaScript. So, you can use Emojis as variable names and write identifiers in any language, for example, Japanese or Chinese, with some rules. 

If you want to know whether your Unicode variable is acceptable or not, you can check it at https://mothereff.in/js-variables.

Case sensitivity

JavaScript is case-sensitive like many languages. So, a variable name written in a lower case format is different from the same variable name written in a camel case format.

Semicolons

JavaScript has a very C-like syntax, and you might see lots of code samples that feature semicolons at the end of each line.

Semicolons are not mandatory in JavaScript, and it does not have any problem that does not use them. Many developers, coming from languages that do not have semicolons, also started avoiding using them in JavaScript code.

It goes to personal preference and your programming behavior. If you are using those languages where semicolons are mandatory, you can use the same behavior for your JavaScript code.

Comments

Using comments helps us to understand code and its purpose. Each programming language has its own set of syntax when it comes to writing comments.

You can use two kinds of comments in JavaScript:

Single-line comments: Single-line comments begin with //. It will ignore all the things immediately after // syntax until the end of that line. It is also known as inline comments.

// Single-line comment

Multi-line comments: Multi-line comments begin with /* and end with */. You can write as many lines as you want in between these syntaxes.

/* Multi-line
Comment */

Usually, most developers use /* and */ syntax to writing multi-line block comments as JavaScript does not give any error. But the standard way to use multi-line comments in JavaScript is to use block comments as follows;

  1. Start with /** in a blank line.
  2. End with */ at the end line.
  3. Use * at the beginning of each line between the start and the end.
/**
 * Multi-line comment as
 * block comments
 */

White space

JavaScript does not consider white space meaningful like Python. You can add spaces and line breaks in any fashion.

In practice, you will most likely keep a well-defined style of indentation and adhere to what people commonly use.

Literals

We define as literal a value that is written in the source code, for example, a number, a string, a boolean, or also more advanced constructs, like Object Literals or Array Literals:

Identifiers

An identifier is a sequence of characters to identify a variable, a function, or an object. There are specific rules for identifiers as follows,

  • It should start with a letter (it could be any allowed character like emoji 😄 or Unicode words), the dollar signs $, or an underscore _.
  • It can contain digits.

Reserved words

You cannot use reserved JavaScript words as identifiers. Some of the reserve words are as follows,

break
do
instanceof
typeof
case
else
new
var
catch
finally
return
void
continue
for
switch
while
debugger
function
this
with
default
if
throw
delete
in
try
class
enum
extends
super
const
export
import

These reserved words are JavaScript functions or variables, which are used for different operations using JavaScript.

Getting started with ReactJS

Set up a local environment and learn the fundamentals of ReactJS for modern web development.

Setting up a local environment is recommended way to learn ReactJS because the local setup allows you to complete the tutorial using your choice of editor, use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Let’s start with creating a new ReactJS application.

Create React App

Creating React App is a comfortable environment for learning and building an application in React.

There are few prerequisites for creating a React app as follows,

  • Node.js >= 14.0.0
  • npm >= 5.6

If above requirements are satisfied, you can run the following command to create a new react application,

npx create-react-app my-react-app

You can change my-react-app to anything you want to name your app.

The create-react-app command will set up everything you need to run a React application. Now you are ready to run your first real React application! Go to your application directory using the following command,

cd my-react-app

Now, run the following command inside your application directory to run your application,

npm start

It will compile your application and open it in the new browser window or tab. If not, you can open your browser and write localhost:3000 in the address bar. Your application will look like screenshot below,

React App

If you check your command window, it will show the following output,

compiled react app

You can see that command window is also providing command to create a production build for your application.

Using React JS in the HTML File

Learn how to use ReactJS directly in HTML files, including prerequisites and setup steps.

Now that we know what React JS is, we can start with different usage of ReactJS. If you don’t know what React JS is, read the Getting Started with ReactJS.

In this article, we will learn to use React JS directly in the HTML file. There are some prerequisites to adding React JS script inside the HTML code. We need to include the following three javascript in the head section of the HTML file.

The first two allow us to write ReactJS code in our JavaScripts, and Babel Js will allow to write JSX syntax and ES6 in older browsers.

Follow the below steps to add react JS compnent to the HTML file.

Add the DOM container to mount ReactJS Component

Embedding React JS in HTML differs slightly from what we have done with React Js App. In a standard React Js app, the root element in the index.html is the container that mounts the React Js app. Similarly, we need any element to mount our react JS component in HTML file as below,

<div id="example"></div>

In above code, we have added an element with id example in HTML file.

Add required JS files to run ReactJS

We want to run a React app in an HTML file, where no node_modules to provide React Js dependencies. Therefore, we must add React dependencies by including React script tags in the HTML document as below,

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

In above code, we have included the required React JS scripts, which are required to execute the React JS code.

React Js code returns JSX. So, we also need Babel JS to transform that JSX as below,

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Write ReactJS code in HTML

Now, our HTML file is ready for react JS code. But, we have to add our react JS code in text/babel script tag as babel can transpile our react JS code as below,

<script type="text/babel">
  function Hello() {
    return <h1>Hello World!</h1>;
  }
  ReactDOM.render(<Hello />, document.getElementById('example'))
</script>

Example

The complete code of using React JS in the HTML file is as follows,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }
      ReactDOM.render(<Hello />, document.getElementById('example'))
    </script>
  </body>
</html>

This way, we can use ReactJS for testing purposes. But for production use, we have to set up a React environment.