Maps in SASS

03/10/2021

What is Maps in SASS and learn how to use in SASS

Maps in SASS / SCSS hold key-value pairs, and it enables users to lookup value with the help of key. Defining it is similar to defining a variable; it starts with $ following which we type the Map name. Within braces, we add key: value pairs. For example:

$font-weights: (

"regular": 400,

"light": 300,

"bold": 700

);

This is a typical example that depicts Maps. In order to change the font weight of an element, we have defined font weights and within it, we have multiple key-value pairs which can be called in order to apply respective font weights to the text elements of the HTML. Kindly observe the syntax on declaring the variable and various key-value pairs which can be extended to any use cases for your project.

Try experimenting with font-family, define variables and add several key-value pairs for each text element such as paragraphs, heading 1, heading 2 and so on. Now that we have defined the maps, the next step is to call maps so that the respective CSS property applies to the text elements.

Calling Maps in your files

It’s easy to leverage SASS Maps by calling the map-get(variable, value) function. In place of the variable, we can add here font-weight and the corresponding value will automatically suggest based on the key-value name we define in the variable.

body{

font-weight: map-get($font-weights, regular);

}

Equivalent CSS Code

body{

font-weight: 400;

}

In the next tutorial, we will be learning variables in SASS. You’ll learn how to create a variable in SASS/SCSS, how to use it for referencing, and the best practices while using variables in SASS.

Learn SASS in 9 easy tutorials!

03/10/2021

by Dinesh Kumar R with No Comment SASS

Getting Started with SASS. Learn SASS from this series of tutorials

What is SASS?

SASS is one of the most powerful, stable and professional CSS supersets in the World.

What does SASS means?

Sass fullform is Syntactically Awesome Stylesheet
Sass is an extension to Cascading Style Sheets (CSS)
Sass is a powerful CSS pre-processor
Sass is fully adaptable with all versions of CSS
Sass diminshes css repetition and therefore increases productivity
Sass was developed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
Sass is opensource.

Why Use Sass?

CSS Stylesheets are getting bigger, more complex, and cumbersome to manage. This is why a CSS pre-processor can help in making the CSS stylesheet smaller, less complex and easier to manage, thereby making the life of the designer easy and empowers them to leverage advanced styling concepts in their website and web development projects. Sass is enriched with features that are not presently available in the normal CSS stylesheets. Features like variables, nested rules, mixins, imports, inheritance, built-in functions, and other vital features make SASS one of the most powerful CSS preprocessors in the world.

What you should know before learning SASS?

Before getting started with an SASS preprocessor one should have at least intermediary expertise or exposure in HTML and CSS. Without the knowledge of HTML or CSS, it is not possible to learn SASS and implement it in your projects. So, if you want to learn GTML and CSS you can check out tutorials from W3Schools and learn the basics and intermediate level. Once you have intermediary knowledge in HTML and CSS, you can easily learn SASS from these easy tutorials

Learn the benefits of SASS:

CSS Compatible:

SASS is compatible with all versions of CSS. Compatibility makes programmers integrate with the project seamlessly.

Feature Rich:

SASS is full of unique and problem-solving features which makes it a one-of-a-kind CSS preprocessor in the World.

Most Approved:

SASS is approved globally by several companies and programmers. Many developers use SASS as the standard preprocessor of CSS.

Community:

SASS has enormous community support which includes thousands of developers and thousands of web companies.

Extensions:

SASS has two extension formats

.sass – Older SASS extension and uses indented syntax. After processing, it changes to standard CSS.
.scss – Sassy CSS and is a relatively new extension. All proper CSS stylesheet is also a valid SCSS stylesheet.

How to process SASS

It’s not possible to integrate SASS or SCSS stylesheets directly into the website or web application projects. SASS or SCSS is processed to become a valid CSS file and then integrated into the project. There are several ways to go about processing SASS or SCSS to CSS. We are going to discuss only the free tools/plugins to process SCSS

Desktop Application:

There are several paid desktop applications that help in processing SASS or SCSS to CSS; however, there is one free application that does the job well and is available in all operating systems, i.e., Scout-App. You can install the Scout-App from the following URL.

https://scout-app.io/

VS Code Extension:

The easiest way to process SASS or SCSS is to use open source Text Editor – Microsoft Visual Studio Code and use the available Live SASS Compiler and Live Server extensions in the Extension Store. After typing the valid SCSS or SASS styles, you can click the Watch SCSS button in the bottom part of VS Code. Every time, we add a new line of SCSS, the extension processes it and creates equivalent CSS in the .css file that the extension self creates. We can directly add the generated .css file to our web project.

Get SASS VS Code Extension

You’ll learn SASS features such as Maps, Variables, mixins, nesting, partials, functions, theming, extensions and operators in the next tutorial

Easy hack to Install Android Studio in Windows 10

22/09/2021

by Dinesh Kumar R with No Comment Android Development

In this tutorial, you’ll learn how to Install Android Studio in Windows 10

Android Studio is an open-source official Integrated Development Environment for Android Operating System. It is built on JetBrains’ IntelliJ IDEA. One can use both Java and Kotlin inside Android Studio to build Android Applications.

Features of Android Studio

1. Android Emulator is in-built in Android Studio.

2. Gradle-based support system, which is a build automation tool.

3. Lint tools for catching performance issues, flags bugs and other critical errors.

4. Wizards to create app templates easily.

5. Layout Editor, which is easy to use, enables developers to create complex layouts easily with easy drag and drop and coding screens.

6. Layouts are easily viewed post creation in run time.

7. Android Wear apps are built quickly with Android Studio.

8. Google Platform with Firebase Cloud Messaging and Google App Engine support.

9. Android Studio is supported in all major Operating Systems such as Windows, Mac and Linux.

Requirements for Installing Android Studio

1. Memory Requirement: 4 GB RAM Minimum | 8 GB RAM Recommended

2. Disk Space: 2 GB Disk Space Minimum | 4 GB Disk Space Recommended

3. Operating System: Windows 7, 8 or 10. 64 Bit for Android Emulator

4. JDK Requirement: Java Development Kit 8

5. Screen Resolution: 1280 * 800

Install Android Studio in Windows 10

Ensure that the system meets the requirements for installing Android Studio.

1. If the system meets the criteria, we can first install Java 8. One can download the Java 8 from the official website given below.

https://www.oracle.com/in/java/technologies/javase/javase-jdk8-downloads.html

We can choose the correct version based on the Windows version. On clicking the link, we need to signup with Oracle. Enter the details, verify the email, and we can download the Java installation file.

2. After downloading, proceed with installation by clicking next.

3. Next, we must add the path in the environmental variable. To open it in Windows 10, Click Start and type Environmental Variables. Please open it and click Environmental Variables. In the top section, click New. Enter Variable name as “JAVA_HOME” and value as C:\Program Files\Java\jdk1.8.0_281

Install Android Studio in Windows 10 — Environment Variables Settings

4. Now, we can download the Android Studio from the official website given below.

https://developer.android.com/studio

5. Click Next and complete the installation.

Now you’ve learnt how to Install Android Studio in Windows 10. In the following tutorial, we will discuss the Android Studio File Structure and User Interface basics. Learn about Web Development in 2021. If you’re looking to build Mobile Applications for Business, check this out.

Contact Form Spambot Prevention using Google Recaptcha

Learn to create PHP Contact Form with Google Recaptcha with easy steps in 2021

19/09/2021

by Dinesh Kumar R with No Comment Bootstrap

Is your website contact form spammed by bots? Learn to implement PHP Contact Form with Google Recaptcha.

Hello everyone! By now, you would have gotten irritated with spam coming to your inbox from your contact form. Here is a quick tutorial on avoiding bot spams from your contact form by implementing Google Recaptcha version 2.

Contact form creation

Name
Mobile
Email
Message

In this tutorial, we will guide you on how to create a simple contact form using Bootstrap 5 with the following fields:

We will use the post method. First, we will have to create an HTML file using Bootstrap 5. We can use the Bootstrap 5 started template for designing the contact form using the following link

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Create a file contact.html using any of the Text Editors

Paste the started template in the contact.html file.

Create fields based on your design requirement, or you can copy our code for design layouts. Also, embed the g-Recaptcha class in a division just above the submit button.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Contact Form with PHP, Bootstrap, Recaptcha</title>
    <script src="https://google.com/recaptcha/api.js"></script>

    <style>
        .margintop {
            margin-top: 25px;
            margin-bottom: 25px
        }

        body {}

        .card {
            -webkit-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.6);
            -moz-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.6);
            box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.6);
        }
        .g-recaptcha{
            margin-top: 25px;
            margin-left: auto;
            margin-right: auto
        }

    </style>
</head>

<body>
    <div class="row container margintop">

        <div class="col-md-4 offset-md-5 margintop">
           <form method="post" action="contact.php">
            <div class="card" style="padding: 10px;background-image: linear-gradient( 109.6deg,  rgba(116,18,203,1) 11.2%, rgba(230,46,131,1) 91.2% ); ">
                <h1 class="margintop" style="text-align:center; color: white">Contact Form</h1>
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="Name" name="name" placeholder="John Doe">
                    <label for="name">Name</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="mobile" class="form-control" id="mobile" name="mobile" placeholder="+91 9876543210">
                    <label for="mobile">Mobile</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="email" name="email" placeholder="johndoe@gmail.com">
                    <label for="email">Email</label>
                </div>
                <div class="form-floating">
                    <textarea class="form-control" placeholder="Leave a comment here" id="message" name="message" style="height: 100px"></textarea>
                    <label for="message">Message</label>
                </div>
                <div class="g-recaptcha" data-sitekey="Include Site Key from Google Recaptcha"></div>

                <p class="margintop" align="center">
                    <button type="submit" class="btn btn-warning">Submit</button>

                </p>
            </div>
            </form>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
</body>

</html>

Creating PHP form to Capture and Validate Data

Create the PHP file called contact.php

Create variables name, email, mobile, message and other variables as required to send the email.

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $mobile = $_POST['mobile'];
    $message = $_POST['message'];

    $email_from ='Your Name';
    $email_subject = "New Message from Website Name";
    $email_body = "Name: $name.\n".
                  "Email: $email.\n".
                  "Mobile: $mobile.\n".
                  "Message: $message.\n";    
    $to = "info@yourdomain.com";
    $headers = "From: $email_from \r \n";
    $headers .="Reply-To: $email \r \n";
    $secretKey = "Google Recaptcha V2 Secret";
    $responseKey = $_POST['g-recaptcha-response'];
    $userIP = $_SERVER['REMOTE_ADDR'];
    $url="https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
    $response = file_get_contents($url);
    $response = json_decode($response);
    if ($response->success){
    mail($to,$email_subject,$email_body,$headers);
    echo '<script>alert("Thank you! We will contact Soon");  window.location = "contact.html";
          </script>';
    }
?>

Getting Recaptcha Site Key & Secret Key

Go to the Google Recaptcha Website using the link: https://www.google.com/recaptcha/admin/create

Enter details and select Recaptcha V2 since Google Recaptcha without checkbox doesn’t serve the purpose.

contact form with google recaptcha — contact form with google Recaptcha

Copy the Recaptcha site key and paste it inside the Recaptcha Button.

Now copy the secret key and paste it inside the secret key variable.

Contact form with Google Recaptcha Implementation

Include form tag before the start of the field. Name your PHP form, and action tag, call the contact.php file.

If the website user checks the Recaptcha, it will pass various parameters to the Google Recaptcha API. The PHP form will send all details filled in the contact form to the email if API returns success.

Now we have successfully integrated the Recaptcha V2.

By successfully integrating Google Recaptcha V2 on your contact form you can prevent spambots in your website contact form. You can feel free to use this code to create a contact form with Google Recaptcha on your websites. Check the tutorial on Materialize CSS

Ampersand Tutorials

All posts by : Dinesh Kumar R