DEV Community: Vuk Maric

Mastering Advanced JavaScript Techniques for Web Development

Vuk Maric — Fri, 09 Feb 2024 10:30:58 +0000

Introduction

JavaScript is like a treasure trove for web developers, offering a myriad of advanced techniques to level up your coding game. While you may have nailed the basics, diving into these advanced concepts can unlock a whole new world of possibilities, making your code cleaner, more efficient, and downright impressive. So, let's embark on this journey and explore ten JavaScript techniques that will take your web development skills to the next level.

1. Closures: Unlocking Hidden Powers 🚀

Closures are like secret compartments in JavaScript, allowing functions to retain access to variables from their parent scope even after the parent function has finished executing.

function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

In this example, createCounter returns a function that, when called, increments and returns the count variable. Despite count being defined within createCounter, the returned function maintains access to it via closure, allowing it to persist between function calls.

2. Promises: Embracing the Future 🌟

Promises are the superheroes of asynchronous programming, bringing order to the chaos of callback hell. They let you handle asynchronous operations more elegantly.

function fetchData() {
  return new Promise((resolve, reject) => {
    // Simulated async operation
    setTimeout(() => {
      resolve('Data fetched successfully!');
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // Output: Data fetched successfully!
  })
  .catch(error => {
    console.error(error);
  });

Here, fetchData returns a promise that resolves with the fetched data after a simulated async operation. The .then() method is used to handle the resolved value, while .catch() is used to catch and handle any errors that may occur during the operation.

3. Asynchronous Functions (async/await): Making Async Code Readable 📚

Async functions and the await keyword offer a cleaner and more synchronous-like syntax for handling asynchronous operations. Say goodbye to callback spaghetti.

async function fetchData() {
  try {
    const data = await fetch('https://api.example.com/data');
    const json = await data.json();
    console.log(json);
  } catch (error) {
    console.error(error);
  }
}

In this example, fetchData uses await to pause execution until the promise returned by fetch() resolves with the fetched data. This makes asynchronous code appear synchronous and easier to understand.

4. Functional Programming: Embrace the Zen 🧘‍♂️

Functional programming concepts like higher-order functions and immutability can make your code more predictable and easier to reason about. Let's keep it functional.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

In this example, the map function is used to transform each element of the numbers array by doubling its value. This functional approach avoids mutating the original array, promoting immutability and making the code more predictable.

5. ES6 Features: A Modern JavaScript Renaissance 🎨

ES6 brought a plethora of new features to JavaScript, making our lives as developers much easier. Let's sprinkle some ES6 magic.

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, Alice!

Here, template literals allow us to interpolate variables directly into strings using ${} syntax, making string concatenation more concise and readable compared to traditional methods.

6. Generators: Unleash the Power of Pausing ⏸️

Generators allow you to pause and resume the execution of a function, opening up a world of possibilities for lazy evaluation and asynchronous control flow. Behold the power of generators.

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const sequence = generateSequence();
console.log(sequence.next().value); // Output: 1
console.log(sequence.next().value); // Output: 2

Generators use the yield keyword to pause execution and yield a value. Each time next() is called on the generator object, execution resumes until the next yield statement is encountered.

7. Memoization: Because Every Millisecond Counts ⏳

Memoization can turbocharge your functions by caching the results of expensive computations, saving precious time and resources. Let's speed things up.

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = func(...args);
    }
    return cache[key];
  };
}

In this example, memoize creates a higher-order function that caches the result of func based on its input arguments. Subsequent calls with the same arguments retrieve the cached result instead of recomputing it, improving performance.

8. Currying and Partial Application: Mix and Match Functions 🍱

Currying and partial application allow you to transform functions into versatile building blocks, enabling greater flexibility and reusability. Let's spice things up.

function add(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = add(5);
console.log(add5(3)); // Output: 8

In this example, add is curried to accept its arguments one at a time. This allows for partial application, where a new function (add5) is created by fixing one of the arguments of add.

9. Error Handling Strategies: Surviving the Jungle 🌿

Effective error handling is crucial for building robust JavaScript applications. Let's navigate through the jungle of errors with grace.

try {
  // Risky operation
} catch (error) {
  console.error('Something went wrong:', error);
}

The try...catch statement allows us to handle errors gracefully by attempting a risky operation within the try block and catching any resulting errors in the catch block.

10. Module Bundlers and Build Tools: Tools of the Trade 🛠️

Modern JavaScript development often involves working with tools like webpack and Babel. Let's wield these tools like seasoned warriors.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Here, a basic webpack configuration is provided, specifying the entry point (./src/index.js) and output file (bundle.js) for the bundled JavaScript code.

By mastering these advanced JavaScript techniques, you'll be equipped to tackle even the most challenging web development tasks with confidence and finesse. So, go forth and unleash the full potential of JavaScript in your projects! Happy coding! 🚀🎉

Deezer Now Playing Card

Vuk Maric — Fri, 09 Feb 2024 00:11:35 +0000

Learn how to create a Deezer Now Playing Card API using PHP.

Introduction

Deezer offers a powerful music streaming platform, and as a developer, you can tap into its capabilities by creating a Deezer app. In this guide, we'll walk you through the steps to set up a Deezer app and obtain an access token using PHP. This access token will allow you to access a user's listening history, a useful feature for music-related applications.

If you'd like to see the showcase for the card, visit this GitHub repo.

Step 1: Create a Deezer Developer App

Before you can interact with Deezer's API, you need to create a developer app on Deezer's developer platform. Follow these steps:

Log in to your Deezer account or create one if you don't have one.
Go to the Deezer Developer Portal and log in with your Deezer credentials.
Click on 'My Apps' and then 'Create an App.'
Fill in the required information for your app, including the name, description, and website.
Accept the terms and conditions, and click 'Create App.'

You will be asked to enter the Terms Of Use for your app when registering. Don't be alarmed, below is a link to the template for Terms of Use: Terms of Use TEMPLATE.

Step 2: Obtain the App ID and Secret

After creating your Deezer app, you'll receive an App ID and App Secret. These are essential for authenticating your app with Deezer's API. Keep them safe and do not share them publicly.

Step 3: PHP Script to Get an Access Token

<?php
$app_id = 'YourAppID';
$app_secret = 'YourAppSecret';
$my_url = 'https://your-redirect-url.com/callback.php';
session_start();
$code = $_REQUEST['code'];
if (empty($code)) {
    $_SESSION['state'] = md5(uniqid(rand(), TRUE));
    $dialog_url = 'https://connect.deezer.com/oauth/auth.php?app_id=' . $app_id  . '&redirect_uri=' . urlencode($my_url) . '&perms=email,offline_access,listening_history' . '&state=' . $_SESSION['state'];
    header('Location: ' . $dialog_url);
    exit;
} else {
    if ($_REQUEST['state'] == $_SESSION['state']) {
        $token_url = 'https://connect.deezer.com/oauth/access_token.php?app_id='
            . $app_id . '&secret=' . $app_secret . '&code=' . $code;
        $ch = curl_init($token_url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $response = curl_exec($ch);
        if (curl_errno($ch)) {
            die('cURL error: ' . curl_error($ch));
        }
        curl_close($ch);
        parse_str($response, $token_data);
        if (isset($token_data['access_token'])) {
            $access_token = $token_data['access_token'];
            $token_data = ['access_token' => $access_token];
            file_put_contents('token.json', json_encode($token_data));
            echo 'Access token obtained successfully and stored.';
        } else {
            echo 'Access token not found in the response.';
        }
    } else {
        echo 'The state does not match. You may be a victim of CSRF.';
    }
}
?>

Step 4: Fetching User's Listening History

<?php
$token_file = 'token.json';

if (file_exists($token_file)) {
    $token_data = json_decode(file_get_contents($token_file), true);

    if (isset($token_data['access_token'])) {
        $access_token = $token_data['access_token'];

        $api_url = "https://api.deezer.com/user/me/history?access_token=" . $access_token;

        $ch = curl_init($api_url);

        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        $user_info_response = curl_exec($ch);

        if (curl_errno($ch)) {
            die('cURL error: ' . curl_error($ch));
        }

        curl_close($ch);

        $user_history = json_decode($user_info_response, true);

        $jsonFileName = 'Track.json';
        $newTrackData = [
            "data" => $user_history['data'][0],
            "date" => date('d-m-Y H:i')
        ];

        if (file_exists($jsonFileName)) {
            $jsonData = file_get_contents($jsonFileName);

            $storedTrackData = json_decode($jsonData, true);

            if ($storedTrackData !== null) {
                if ($storedTrackData['data']['id'] === $newTrackData['data']['id']) {
                    $date1 = $storedTrackData['date'];
                    $date2 = $newTrackData['date'];

                    $dateTime1 = DateTime::createFromFormat('d-m-Y H:i', $date1);
                    $dateTime2 = DateTime::createFromFormat('d-m-Y H:i', $date2);
                    $interval = $dateTime1->diff($dateTime2);
                    $totalMinutesPassed = $interval->days * 24 * 60 + $interval->h * 60 + $interval->i;

                    if ($totalMinutesPassed > 10) {
                        $data = [
                            "data" => null,
                            "date" => date('d-m-Y H:i')
                        ];
                        echo json_encode($data);
                    } else {
                        echo json_encode($storedTrackData);
                    }
                } else {
                    file_put_contents($jsonFileName, json_encode($newTrackData));
                    echo json_encode($newTrackData);
                }
            } else {
                file_put_contents($jsonFileName, json_encode($newTrackData));
                echo json_encode($newTrackData);
            }
        } else {
            file_put_contents($jsonFileName, json_encode($newTrackData));
            echo json_encode($newTrackData);
        }
    } else {
        echo "Access token not found in the JSON file.";
    }
} else {
    echo "Token file not found.";
}
?>

Make sure to replace 'YourAppID', 'YourAppSecret', and 'https://your-redirect-url.com/callback.php' with your actual Deezer app ID, app secret, and redirect URL respectively. Also, replace 'token.json' and 'Track.json' with appropriate file paths as per your project structure.

Since the Deezer API does not allow directly fetching info from the user's player, we need to approach this from a different angle.

Fetch the user history:

$api_url = "https://api.deezer.com/user/me/history?access_token=" . $access_token";

Then use the last entry (meaning the newest song that the user has listened to):

$newTrackData = [
    "data" => $user_history['data'][0],
    "date" => date('d-m-Y H:i') // Use 24-hour format

 (H:i)
];

And to make sure the last track isn't infinitely returned to the user, the PHP script stores the fetched track to the Track.json with the date it is obtained on. This allows us to check if the same song is being returned even after 10 minutes and then stop returning the track to the user, meaning the player is not playing anything anymore.

if ($totalMinutesPassed > 10) {
   //rest of code...

This is the workaround that I did for this purpose so the Deezer users can have somewhat the same API as Spotify users. I realize that this will not always work as intended but in most cases, it will. This script is also run by a cron job on the hosting server. The script runs every minute to ensure that the info is always up to date!

Conclusion

Congratulations! You've learned how to create a Deezer developer app, obtain an access token, and use PHP to access a user's listening history. This knowledge opens up a world of possibilities for creating music-related applications and enhancing the user experience.