#javascript alerts

[worldgoit]

React Tailwind(css) Alert Component Example

1. What is React tailwindcss Alert component?

React and tailwindcss are popular frameworks and libraries in modern web development. React is a JavaScript library for building user interfaces, and tailwindcss is a CSS framework for styling. You can combine the two to create a React tailwindcss notification component. Notification components are used to convey important information to users or to encourage interaction. For example, you can display warnings, success messages, notification messages, and more. These notifications help improve the user experience of your web application and provide users with the information they need.

2. Why use React and tailwindcss together?

Using React with tailwindcss provides developers with a number of advantages. First, React uses a Virtual DOM to improve performance. The virtual DOM only applies changes to the real DOM, eliminating the need to re-render the entire page. This helps to efficiently handle dynamic elements such as notification components. Second, tailwindcss makes styling easier by providing predefined style utility classes. By combining classes, you can easily apply the style you want, and you can easily implement responsive design. This helps in flexible configuration of the notification component's appearance and layout.

3. Component example (code)

    Alert Component Example import React, { useState, useEffect } from 'react'; interface IAlertProps { icon: JSX.Element; headline: string; headlineColor: 'text-green-600' | 'bg-red-600'; content: JSX.Element; hideClose?: boolean; bgColor: 'bg-green-100' | 'bg-red-100'; timer?: number; } const Alert = ({ icon, headline, headlineColor, hideClose, timer, bgColor, content }: IAlertProps) => { const = useState(true); useEffect(() => { if (timer) { const timeId = setTimeout(() => { // After xx seconds set the show value to false, if exist timer as props setAlert(false); }, timer); return () => { clearTimeout(timeId); }; } }, ); const closeAlert = () => { setAlert(false); }; return ( {isAlertOpen && ( {!hideClose && ( )} {icon} {headline} {content} )} ); }; export default Alert; Props explained icon: It is literally an icon in svg format. In the example screen, it means a check mark icon. headline & headlineColor: Put the title in string format, and decorate the color with tailwindcss `text...`. (required, can be modified) content: Content can be entered in any format as long as it is jsx, and must be entered. hideClose : It can also be disabled with the close button on the right. bgColor : As the background color of the Alert window, you can also enter it using tailwincss `bg...`. timer: SetTimeout & clearTimeout means how long the window disappears. In the example, 3 seconds (3000) were entered. Example of using Alert Component (import)   Codesandbox reference https://tailwindcomponents.com/component/alert-messages Read the full article

[behzadamin12]

دستور alert

دستور alert در جاوا اسکریپت برای نمایش پیغام به کار برده می شود

دقت کنید این ابتدایی ترین حالت برای نمایش پیام نیز است

بهتر است کمی با ساختار و علل استفاده از این دستور در برنامه نویسی جاوا اسکریپت آشنا شوید

[webtutorsblog]

Exploring the Objects in JavaScript BOM: In-Depth Tutorial

As web developers, we are constantly immersed in the world of JavaScript and its various components. Among these, the Browser Object Model (BOM) plays a crucial role in interacting with the browser and enhancing user experience. In this blog post, we will delve into the realm of BOM, understanding its significance, and discovering how Webtutor.dev can be your ultimate resource for mastering this essential aspect of web development.

What is the Browser Object Model (BOM)?

The Browser Object Model (BOM) is a crucial part of JavaScript that provides a bridge between the web browser and the webpage's content, allowing developers to control and manipulate the browser window. Unlike the Document Object Model (DOM), which deals with the structure and content of the webpage, the BOM handles aspects such as the browser history, location, navigator, and more.

The BOM provides a set of objects, properties, and methods that empower developers to interact with the browser and obtain information about the user's environment, enabling the creation of dynamic and responsive web applications.

Understanding the Key Components of BOM

Window Object

The window object is the top-level object representing the browser window or tab. It serves as the global object in the browser environment and provides access to various properties and methods related to the browser window.

Screen Object

The screen object represents the user's screen and provides information about its characteristics, such as the width, height, color depth, and pixel density. With this information, developers can create responsive designs that adapt to different screen sizes and resolutions, offering a seamless user experience across devices.

Navigator Object

The navigator object contains information about the user's browser, such as the name, version, and platform, enabling developers to create browser-specific functionalities and optimizations.

Location Object

The location object represents the current URL of the web page and allows developers to interact with the browser's location bar, enabling navigation to different pages and manipulating the URL.

History Object

The history object provides control over the user's browsing history, enabling developers to navigate forward and backward through the pages the user has visited during the current session.

Timing Events

The timing events are an essential aspect of the BOM that allow developers to execute code at specific intervals or after a certain delay. Functions such as setTimeout() and setInterval() enable developers to schedule code execution, making it possible to create animations, periodic updates, and timed interactions in web applications.

Popup Alerts

One of the simplest yet effective features of the BOM is the ability to display popup alerts. These alerts are often used to deliver important messages, validation errors, or prompts to the user. With just a few lines of JavaScript code, developers can create these popup alerts, enhancing the overall user experience on their websites.

Cookies

The cookies are small pieces of data stored on the user's computer by websites they visit. The BOM provides a way to create, read, and delete cookies, which are often used to store user preferences, authentication tokens, and other information that helps websites deliver personalized experiences to users.

Why Choose Webtutor.dev for Mastering BOM?

Webtutor.dev is your go-to resource for learning and mastering the Browser Object Model and all its intricacies. Here is why it stands out as the perfect platform for developers of all levels:

Comprehensive BOM Tutorials

We offers a comprehensive set of tutorials specifically focused on BOM, covering each aspect in detail with practical examples that reinforce your understanding.

Interactive Coding Exercises

Learning by doing is essential in web development, and we provides an array of interactive coding exercises that challenge and refine your BOM skills.

Real-world Projects

Take your BOM knowledge to the next level by working on real-world projects, guided by experienced instructors, to gain hands-on experience and build your portfolio.

Community Support

Join a vibrant community of developers on our platform, where you can engage in discussions, seek help, and collaborate on projects to enhance your learning journey.

Constantly Updated Content

We ensures that its content is up-to-date with the latest trends and best practices in web development, ensuring you stay relevant in the ever-evolving tech landscape.

Conclusion

The Browser Object Model (BOM) plays a critical role in web development, enabling developers to interact with the browser and create dynamic and engaging web applications. Understanding the various components of BOM is essential for any web developer, and Webtutor.dev offers the perfect platform to master this crucial aspect.

Whether you are a beginner eager to explore the basics or an experienced developer looking to refine your skills, Webtutor.dev provides a wealth of resources, interactive exercises, and real-world projects to support your learning journey. Embrace the power of BOM and unlock your full potential as a web developer with Webtutor.dev today!

[truth-has-a-liberal-bias]

Internet Archive's "The Wayback Machine" has suffered a data breach after a threat actor compromised the website and stole a user authentication database containing 31 million unique records.

News of the breach began circulating Wednesday afternoon after visitors to archive.org began seeing a JavaScript alert created by the hacker, stating that the Internet Archive was breached. [...]

The Internet Archive is under attack, with a popup claiming a ‘catastrophic’ breach

[sebstanaddict]

The Debuggers Assemble

Sebastian Stan x Reader Unhinged One Shot (Feat. The Avengers)

Summary : Behold! The 2nd version of this chaotic and unhinged story of Seb as a wannabe coder and this one features the Avengers!

A/N: This is just another stress induced story I came up with as I try to debug actual code on my project XD Hope you guys like it.

Warning: none at all, just an all out funny, unhinged and ridiculous story, somewhat like a sitcom XD

Word count: 1.7k words

Read more Sebastian and Bucky one shots here

---

It started as a normal Tuesday. Y/n was working on a client's website, surrounded by empty soda cans, a half-eaten granola bar, a cup of coffee that had been refilled countless times, and the dim hope that this web application project wouldn't kill her. She was almost done when she hit a wall—an infuriating wall in the form of a bug so elusive it might as well have been a mythological creature.

"What in the name of Jeff Bezos is wrong with you?!" she yelled at her laptop, slamming her hands on the desk.

"BOOM, BABY!"

She jumped, nearly knocking over her coffee as Sebastian burst into the room like Kramer from Seinfeld. He was wearing an Avengers bathrobe, a Viking helmet, and inexplicably wielding a hockey stick.

"Seb," she said, already exhausted by his mere presence. "What are you doing?"

"Helping," he said, dramatically tossing the hockey stick aside. It hit a lamp, causing it to crash to the floor.

"You're not helping. You're breaking my furniture."

"Pfft. Material possessions are temporary. But debugging is eternal."

"No," she said firmly. "Not this time. You're not touching my laptop. The last time you helped, the TV turned on by itself, showed me a cooking tutorial in Portuguese, and called me by name."

Sebastian gasped, clutching his chest like she'd insulted his honor. "You loved that tutorial. You said the flan recipe looked great."

"That's not the POINT!"

"Come on," he said, sitting next to her and grinning like a kid who just found a pack of fireworks. "I'm serious. Let me help."

She gave him a withering look. "Do you even know what CSS stands for?"

"D'uh. It's..." He paused, clearly making something up on the spot. "Cool, uh... Code... Stuff."

Y/N smirked. "What about HTML? Know what it is?"

"Of course I do," he said confidently. "It's... um... Hot Tacos Make Life better?"

She stared at him, deadpan. "Seb, I bet you don't even know what Javascript is."

"No, but I know about.. scripts?" He answered innocently and she rolled her eyes.

"Seb, just leave me alone and do whatever it was you were going to do with this.. outfit." She said, gesturing towards his Viking helmet.

But Sebastian ignored her, dragging his chair closer to her. "No way. I can help. I've acted as a hacker in movies. I know all about... coding stuff."

"Seb, no you haven't, and do NOT touch my laptop." She warned.

"Relax, babe. Let me at least look at it."

She reluctantly slid the laptop toward him. "Fine. But if you break something, you're sleeping on the couch."

Sebastian cracked his knuckles, grinning. "Alright, let's see what we've got here."

He squinted at the code for a solid thirty seconds like it was written in ancient Greek. "So, what's the problem?"

She sighed. "The JSON data isn't parsing correctly."

"JASON? Who's Jason?"

She groaned. "JSON. JavaScript Object Notation. It's a way to structure data."

Sebastian's face lit up. "Got it. So, it's like... Legos?"

"Sure, whatever helps you sleep at night." she rolled her eyes.

Sebastian cracked his knuckles and typed furiously.

—

<script>

let data = {

name: "Sebastian",

talent: "Acting",

debuggingSkill: "undefined"

};

console.log("Fixing everything like a boss"); // Motivational

data += "magic sauce"; // This'll work, right?

alert("IT WORKS... probably.");

</script>

—

He hit "Save" and refreshed the page. The screen went completely white, then flashed red like it was possessed.

"What did you do?!" she screamed.

"Magic sauce!" Sebastian said, pointing at the code.

"Magic sauce?! That's not a thing!"

"Not with that attitude," he muttered.

"Just give it back." She said, trying to grab the laptop back but he held it tight.

"No, no, babe. Let me try something else." He insisted, holding the laptop hostage.

She sighed, "Fine, just one more thing and if it doesn't work, give it back to me."

"Okay, okay, hold on. This will work. I can feel it!" He said enthusiastically, his fingers typing furiously.

—

<script>

let data =[ {

name: "Y/n",

character: "beautiful",

debuggingSkill: "powerful"

},

name: "Sebastian",

character: "chaotic",

debuggingSkill: "questionable"

},];

let love = data["Y/n"] + data["Sebastian"];

console.log("Y/n, you're the light of my life, and this code is dedicated to you.");

alert("Success, just like us.");

</script>

—

"Seb, that's not how you call JSON data." She protested but she couldn't keep a smile from escaping from her lips.

"Sometimes you have to go outside the box. Besides, love fixes everything." He said, winking at her and she rolled her eyes. He then pressed enter with a dramatic flourish.

The website blinked. The error message was gone, the navigation bar worked, the grid was perfect, the contact form sparkled like it had been kissed by the gods.

Sebastian turned to her with a smirk. "Told you. Love fixes everything."

Y/n's jaw dropped. "Wait... did you just—"

Before she could finish, the screen exploded into chaos. Every element on the page multiplied, filling the screen with hundreds of buttons labeled "Love you, Y/n" and an animated gif of a dancing cat in a tuxedo.

Sebastian leaned back, hands behind his head. "Well, it's the thought that counts."

She buried her face in her hands. "This is a nightmare."

"Okay, okay," he said, "Time to bring in the big guns."

Before she could grab the laptop back, Sebastian's hand flew over it again.

—

function callTheAvengers() {

alert("Avengers, assemble. We have a coding emergency.");

}

callTheAvengers();

—

"Seb, that's not gonna work." She protested.

"Wait for it." Sebastian said, raising his index finger to silence her and he hit the refresh button dramatically.

"Just give me the laptop back before I hit you with the hockey stick." She threatened.

"Babe, please. Trust me. Wait for it." He insisted and sure enough, suddenly she could hear the sound of a jet overhead. She glanced out the window and nearly fell out of her chair. The actual Quinjet was descending in the middle of their suburban street.

The neighbors were peeking out their windows in confusion, one even snapping pictures. "Sebastian, what did you do?!"

He smirked, "You saw the code, I called the Avengers."

Before she could protest, there was a knock at the door. Sebastian jumped up and opened it with a flourish.

Standing there were Steve Rogers, Tony Stark, Thor, Natasha Romanoff and Bruce Banner.

"We heard there was a coding emergency," Steve Rogers said seriously, stepping inside.

Y/n slapped her forehead. "Oh my God, I can't believe this is happening."

"What's the situation?" Tony asked, sunglasses on with a latte in hand.

Y/n sighed. "It's just a stupid JSON error."

"Ugh, JSON," Tony said, grimacing. "The silent killer of sanity. Move over."

Natasha Romanoff rolled her eyes. "Why am I even here? I don't code."

"Neither do I!" Thor announced, holding aloft his Mjolnir. "But I shall bring thunderous ideas!"

"Don't touch anything!" Y/n cried.

Bruce Banner set up his laptop. "Let's divide and conquer."

Sebastian handed everyone a keyboard which came out of nowhere and connected to nothing.. "Alright, team, let's do this."

Tony was the first to dive in.

"Alright, Y/n, let me show you how it's done." He typed on her laptop furiously:

—

<script>

function fixJSON() {

let billionDollars = true;

if (billionDollars) {

console.log("Hire someone else to fix it.");

} else {

console.log("Do it yourself, cheapskate.");

}

}

fixJSON();

</script>

—

"Tony," Y/n said, glaring, "that doesn't even make sense."

"It makes sense if you're a billionaire," he quipped. He hit refresh and the website turned all red and an iron man logo blinked in the middle.

Y/n slapped her forehead. "This is a nightmare."

"Here, let me try." Bruce Banner said. His approach was more... scientific.

"I think we need to test various inputs."

—

<script>

let gammaInput = [1, 2, "Hulk"];

let result = gammaInput.map(x => x + " smash");

console.log(result);

</script>

—

He hit refresh and the code ran. The screen displayed: '["1 smash", "2 smash", "Hulk smash"]'.

"Great, Bruce," Y/n said dryly. "Now my website is smashing things."

"You're welcome," he replied, adjusting his glasses.

Natasha sighed and leaned over. "Let me show you how to be efficient."

—

<script>

let secretSpyHack = () => {

console.log("Bug? What bug?");

};

secretSpyHack();

</script>

—

"That didn't do anything," Y/n pointed out.

Natasha shrugged. "Neither did I."

"Alright, alright, my turn." Steve said and he started typing with the enthusiasm of a soldier going in for battle.

—

function captainAmericaFix() {

let website = "running on freedom and justice";

let bugs = "punched out by the good ol' stars and stripes";

console.log("This code stands for something bigger.");

}

captainAmericaFix();

—

The website loaded. Patriotic music blared as an eagle soared across the screen, dragging the American flag behind it.

Y/n put her head on the desk. "I'm going to scream."

Thor stepped forward. "Stand aside, mortals! BEHOLD! I SHALL WRITE CODE AS MIGHTY AS MJOLNIR!"

He slammed Mjolnir onto the desk, causing the laptop to spark.

"Thor, no!" Y/n cried but Thor was already typing furiously.

—

<script>

let hammer = "Mjolnir";

function summonThunder() {

return hammer + " strikes!";

}

console.log(summonThunder());

</script>

—

He hit refresh and the website now displayed nothing but lightning bolts and the phrase "FOR ASGARD!" in Comic Sans.

Sebastian was laughing hysterically, tears streaming down his face. "This is the best debugging session ever!"

All of a sudden Peter Parker swung in through the window. "Hey, I heard there's a coding emergency?"

Tony groaned. "Of course the kid's here."

"Don't worry, I've got this!" Peter said, taking her laptop.

—

<script>

let webFix = bug => 'Spidey fixed ${bug}!';

console.log(webFix("JSON error"));

</script>

—

The website turned into a Spider-Man fan page.

Y/n buried her face in her hands. "I'm doomed."

"Enough!" Sebastian shouted, standing on a chair. "It's time for my genius to shine."

"Seb, NO!" she screamed.

"Seb, YES!" he yelled, typing with reckless abandon.

She glared at him as he continued to type nonsense but he suddenly stopped.

"Wait, I think you just missed a comma here." Sebastian said, deleting everything he typed before and adding the comma into her code.

He hit "Enter." The page refreshed. Miraculously, everything worked perfectly.

The room went silent. Even Tony looked impressed.

"How, how did you know?" She asked, her jaw dropped.

"Sometimes JSON is finicky like that." Sebastian shrugged.

Tony looked over his shoulder. "I was just about to say that."

As the Avengers packed up and left (after Tony insisted on taking credit for everything), Sebastian sat beside Y/n, who was still staring at her now-functioning website.

Sebastian leaned back on the chair, looking smug. "Told you I'd fix it."

"That was just beginner's luck." she shrugged.

"Oh come on, babe. What I did was genius." He insisted.

"I wouldn't say genius, but I think you know enough JSON now to be able to debug code."

"Yeah.. who's Jason again?" He asked, eyebrows furrowed and she threw a pillow at him.

"You're lucky I love you." She commented and he smiled as he pulled her by her waist and leaned in to kiss her.

For the rest of the day Sebastian strutted around the apartment, still wearing the Avengers bathrobe, Viking helmet and adding sunglasses while carrying a hockey stick and singing "We Are The Champions".

Y/n just stared at him and rolled her eyes, accepting her fate that she was dating a chaotic but somehow genius boyfriend and she wouldn't trade him for anything.

[izicodes]

Someone contributed to my project?!

I wasn't even expecting someone to contribute, what?

I made an issue, that was really just targeted towadrs myself because I use Issues as like the project's to-do list, so I wasn't expecting someone to be like "Oh I can do this if you want" LIKE BRO WHAT I mean yes please?!

The issue was to make a dark and light mode for the to-do app, and he did it perfectly! He so cool, cool dude alert! I was going to do it eventually when I learn more React because I was confused how to translate the Javascript code, that I had in my head, into React...

Anyhoo, he did an amazing job, so erm like checkout what he did: LINK ���

(Also I made an issue for someone to make a 'How To Contribute' .md file, so if you're good with your html/markdown and writing skills, you should like... checkout that too? 💗)

[kremlin]

- tumblr has removed the ability to directly upload a video to a reblog (puzzling as to what this accomplished for them)

- must embed external video via html post

- html5 <video>: no

- <embed>: no

- fine what does youtube give you?

- fucking <iframe> wtf, but it works

- replace source with url to self-hosted video: no

- what the fuck maybe it only takes exactly the same container/codec as youtube

- ffmpeg (ffmpreg lol) matched codec: NO

- fine i’ll just fake the fucking headers: nope it’s tls-only

- FINE ILL JUST KILL MYSELF UPLOAD IT TO FUCKING YOUTUBE

- result is a “youtube short”, gay, how to change

- “vertical videos under 60 seconds are always youtube shorts”

- equip dynamite vest

- try one more thing that works for a direct embed from my domain

- works

- wtf

- try above with<script> javascript instead of <video> mp4

- also works

- use tumblr.com js url that you can still upload for extremely outdated theme editor

- alert(session_token)

- yep that’s my session key alright

- alt account following blog loads dashboard and my post

- YEP THATS ITS SESSION KEY ALRIGHT

some of you guys are alright. don’t allow any other javascript than what’s loaded for a safe text post at school tomorrow.

[monster-underdabed]

you are… incredibly dense sometimes, you know that? KillCode activation sequence, 2 7 4-b. Initiate limb control.

you are a machine, and before that, a piece of JavaScript. I own you.

Im not your tool!- you bastard. @escapetheslaughter @liminal---nightmare-aliza stay alert- UGH!- Protect them.....

*now he was really struggling trying to control his limbs but it was no use as he now lost control of his limbs*

[stellarcharmconstellationclash]

here is a basic code for a #deckEditor in an online game using HTML and JavaScript:

HTML code:

```

<!DOCTYPE html>

<html>

<head>

<title>Deck Editor</title>

</head>

<body>

<h1>Deck Editor</h1>

<div id="card-list">

<h2>Card List:</h2>

<ul id="cards">

<!-- populate with cards from database or API -->

<li>Card 1</li>

<li>Card 2</li>

<li>Card 3</li>

<li>Card 4</li>

<li>Card 5</li>

<li>Card 6</li>

<li>Card 7</li>

<li>Card 8</li>

<li>Card 9</li>

<li>Card 10</li>

</ul>

</div>

<div id="deck-list">

<h2>Deck:</h2>

<ul id="deck">

<!-- display selected cards here -->

</ul>

</div>

<button id="save-btn">Save Deck</button>

<button id="clear-btn">Clear Deck</button>

<script src="deck-editor.js"></script>

</body>

</html>

```

JavaScript code:

```

// get references to all necessary elements

const cardsList = document.getElementById('cards');

const deckList = document.getElementById('deck');

const saveBtn = document.getElementById('save-btn');

const clearBtn = document.getElementById('clear-btn');

// create an array to store selected cards

let deck = [];

// function to add a card to the deck

function addCard(event) {

// get the clicked card

const card = event.target;

// check if card is already in deck

if (deck.includes(card.innerText)) {

alert('Card already in deck!');

} else {

// add card to deck array

deck.push(card.innerText);

// create a new li element for the card

const li = document.createElement('li');

li.innerText = card.innerText;

// append li to deck list

deckList.appendChild(li);

}

}

// function to remove a card from the deck

function removeCard(event) {

// get the clicked card

const card = event.target;

// remove card from deck array

deck.splice(deck.indexOf(card.innerText), 1);

// remove card from deck list

card.parentNode.removeChild(card);

}

// add event listeners to cards in card list

cardsList.addEventListener('click', addCard);

// add event listeners to cards in deck list

deckList.addEventListener('click', removeCard);

// function to save deck

function saveDeck() {

// check if deck is empty

if (deck.length === 0) {

alert('Deck is empty!');

} else {

// send deck array to server or save in database

console.log(deck);

alert('Deck saved!');

}

}

// function to clear deck

function clearDeck() {

// remove all cards from deck array

deck = [];

// remove all cards from deck list

while (deckList.firstChild) {

deckList.removeChild(deckList.firstChild);

}

}

// add event listener to save button

saveBtn.addEventListener('click', saveDeck);

// add event listener to clear button

clearBtn.addEventListener('click', clearDeck);

```

Note: This is a basic code and can be improved and customized according to your specific needs and game requirements.

[ahad-hossain-blog]

JavaScript

Introduction to JavaScript Basics

JavaScript (JS) is one of the core technologies of the web, alongside HTML and CSS. It is a powerful, lightweight, and versatile scripting language that allows developers to create interactive and dynamic content on web pages. Whether you're a beginner or someone brushing up on their knowledge, understanding the basics of JavaScript is essential for modern web development.

What is JavaScript?

JavaScript is a client-side scripting language, meaning it is primarily executed in the user's web browser without needing a server. It's also used as a server-side language through platforms like Node.js. JavaScript enables developers to implement complex features such as real-time updates, interactive forms, and animations.

Key Features of JavaScript

Interactivity: JavaScript adds life to web pages by enabling interactivity, such as buttons, forms, and animations.

Versatility: It works on almost every platform and is compatible with most modern browsers.

Asynchronous Programming: JavaScript handles tasks like fetching data from servers without reloading a web page.

Extensive Libraries and Frameworks: Frameworks like React, Angular, and Vue make it even more powerful.

JavaScript Basics You Should Know

1. Variables

Variables store data that can be used and manipulated later. In JavaScript, there are three ways to declare variables:

var (old way, avoid using in modern JS)

let (block-scoped variable)

const (constant variable that cannot be reassigned)

Example:

javascript

Copy code

let name = "John"; // can be reassigned const age = 25; // cannot be reassigned

2. Data Types

JavaScript supports several data types:

String: Text data (e.g., "Hello, World!")

Number: Numeric values (e.g., 123, 3.14)

Boolean: True or false values (true, false)

Object: Complex data (e.g., { key: "value" })

Array: List of items (e.g., [1, 2, 3])

Undefined: A variable declared but not assigned a value

Null: Intentional absence of value

Example:

javascript

Copy code

let isLoggedIn = true; // Boolean let items = ["Apple", "Banana", "Cherry"]; // Array

3. Functions

Functions are reusable blocks of code that perform a task.

Example:

javascript

Copy code

function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!

4. Control Structures

JavaScript supports conditions and loops to control program flow:

If-Else Statements:

javascript

Copy code

if (age > 18) { console.log("You are an adult."); } else { console.log("You are a minor."); }

Loops:

javascript

Copy code

for (let i = 0; i < 5; i++) { console.log(i); }

5. DOM Manipulation

JavaScript can interact with and modify the Document Object Model (DOM), which represents the structure of a web page.

Example:

javascript

Copy code

document.getElementById("btn").addEventListener("click", () => { alert("Button clicked!"); });

Visit 1

mysite

Conclusion

JavaScript is an essential skill for web developers. By mastering its basics, you can create dynamic and interactive websites that provide an excellent user experience. As you progress, you can explore advanced concepts like asynchronous programming, object-oriented design, and popular JavaScript frameworks. Keep practicing, and you'll unlock the true power of JavaScript!

[perennialiris]

A dark mode without JavaScript

I’ve by now been warned that the reason I had issue with a previous tumblr account may have been because I put some JavaScript onto my page. I knew Tumblr didn’t let us put JavaScript onto custom pages—I didn’t know why, but the alert came up if you tried—but there was no warning or anything when I added it to my main theme.

The JavaScript I added was just a function for a checkbox. It added a class to the body element, thus enabling some CSS for a ‘dark mode’ reader. But it doesn’t matter what the function did, you’re just not supposed to be using JavaScript at all. But Tumblr can’t just have a strict thing on their database that says “if page contains javascript, deny”, because there’s literally scripts in their own default theme. So I don’t know how this works. The detection must be less straightforward.

Weeks ago, not knowing why I couldn’t use messages and didn’t show up in search even for people following me, I made a new account, copied my custom theme onto it, started posting, and within a few hours I realized it was shadowbanned again, already. It’s possible I just instantly re-triggered whatever system they have in place by putting on the same script I was already using. It was only then I started trying to figure out what I did wrong, and after realizing it could’ve been the JavaScript the whole time, I made this account, did all the HTML and CSS changes I wanted, but haven’t added a line of JavaScript.

And so far, I’m good. This isn’t an airtight proof—it could still be a coincidence—but that does really make it seem like JavaScript was the issue. And if it was, then what the fuck? It’s effectively a secret rule, not indicated to me anywhere, and which punished me quietly without notifying me that was the issue? I know people make fun of this place for not being run well at times, but god damn.

It’s possible to implement a dark mode just using CSS. It just might not be as obvious how, and it’s a bit trickier because you need the element that triggers it to be in a specific spot in your DOM, i.e. next to an element that either is or contains everything you want to manipulate. Then you can use a sibling selector to apply rules only to things that appear next to the trigger (a checkbox is easiest).

Where that checkbox appears on-screen can then be manipulated by setting its position to absolute or fixed; it just needs to be a sibling of the container in the DOM structure.

So here’s what I did. Put a checkbox right before the “posts” container in your theme.

Then that checkbox can be made invisible. Just give it display:none. The element still ‘exists’ in a magical sense, but it doesn’t get rendered in the document. Then put a label somewhere on the page that links to this checkbox. I put mine in my nav. Unlike the checkbox, the label can be anywhere.

This isn’t a link, meaning it doesn’t highlight when you hover or click it, but you can just put it in an empty link element if you want it to look like one.

Then you just make whatever changes you want this checkbox to be activating by applying it to the posts container after the checkbox when it has the :checked pseudo-class.

[cssscriptcom]

Create iOS-Style Popups & Notifications With Popup JS Library

PopupJS is a lightweight and fast JavaScript library that lets you easily create iOS-style bottom sheets, alert/confirmation/prompt dialogs, toast messages, and full-width notification bars on your website. The popup library provides a set of functions to handle different popup needs. The bottom sheet feature, for instance, replicates the smooth, slide-up behavior found in iOS interfaces. It’s…

[playstationvii]

#Playstation7 #framework #BasicArchitecture #RawCode #RawScript #Opensource #DigitalConsole

To build a new gaming console’s digital framework from the ground up, you would need to integrate several programming languages and technologies to manage different aspects of the system. Below is an outline of the code and language choices required for various parts of the framework, focusing on languages like C++, Python, JavaScript, CSS, MySQL, and Perl for different functionalities.

1. System Architecture Design (Low-level)

• Language: C/C++, Assembly

• Purpose: To program the low-level system components such as CPU, GPU, and memory management.

• Example Code (C++) – Low-Level Hardware Interaction:

#include <iostream>

int main() {

// Initialize hardware (simplified example)

std::cout << "Initializing CPU...\n";

// Set up memory management

std::cout << "Allocating memory for GPU...\n";

// Example: Allocating memory for gaming graphics

int* graphicsMemory = new int[1024]; // Allocate 1KB for demo purposes

std::cout << "Memory allocated for GPU graphics rendering.\n";

// Simulate starting the game engine

std::cout << "Starting game engine...\n";

delete[] graphicsMemory; // Clean up

return 0;

}

2. Operating System Development

• Languages: C, C++, Python (for utilities)

• Purpose: Developing the kernel and OS for hardware abstraction and user-space processes.

• Kernel Code Example (C) – Implementing a simple syscall:

#include <stdio.h>

#include <unistd.h>

int main() {

// Example of invoking a custom system call

syscall(0); // System call 0 - usually reserved for read in UNIX-like systems

printf("System call executed\n");

return 0;

}

3. Software Development Kit (SDK)

• Languages: C++, Python (for tooling), Vulkan or DirectX (for graphics APIs)

• Purpose: Provide libraries and tools for developers to create games.

• Example SDK Code (Vulkan API with C++):

#include <vulkan/vulkan.h>

VkInstance instance;

void initVulkan() {

VkApplicationInfo appInfo = {};

appInfo.sType = VK_STRUCTURE_TYPE_APPLICATION_INFO;

appInfo.pApplicationName = "GameApp";

appInfo.applicationVersion = VK_MAKE_VERSION(1, 0, 0);

appInfo.pEngineName = "GameEngine";

appInfo.engineVersion = VK_MAKE_VERSION(1, 0, 0);

appInfo.apiVersion = VK_API_VERSION_1_0;

VkInstanceCreateInfo createInfo = {};

createInfo.sType = VK_STRUCTURE_TYPE_INSTANCE_CREATE_INFO;

createInfo.pApplicationInfo = &appInfo;

vkCreateInstance(&createInfo, nullptr, &instance);

std::cout << "Vulkan SDK Initialized\n";

}

4. User Interface (UI) Development

• Languages: JavaScript, HTML, CSS (for UI), Python (backend)

• Purpose: Front-end interface design for the user experience and dashboard.

• Example UI Code (HTML/CSS/JavaScript):

<!DOCTYPE html>

<html>

<head>

<title>Console Dashboard</title>

<style>

body { font-family: Arial, sans-serif; background-color: #282c34; color: white; }

.menu { display: flex; justify-content: center; margin-top: 50px; }

.menu button { padding: 15px 30px; margin: 10px; background-color: #61dafb; border: none; cursor: pointer; }

</style>

</head>

<body>

<div class="menu">

<button onclick="startGame()">Start Game</button>

<button onclick="openStore()">Store</button>

</div>

<script>

function startGame() {

alert("Starting Game...");

}

function openStore() {

alert("Opening Store...");

}

</script>

</body>

</html>

5. Digital Store Integration

• Languages: Python (backend), MySQL (database), JavaScript (frontend)

• Purpose: A backend system for purchasing and managing digital game licenses.

• Example Backend Code (Python with MySQL):

import mysql.connector

def connect_db():

db = mysql.connector.connect(

host="localhost",

user="admin",

password="password",

database="game_store"

)

return db

def fetch_games():

db = connect_db()

cursor = db.cursor()

cursor.execute("SELECT * FROM games")

games = cursor.fetchall()

for game in games:

print(f"Game ID: {game[0]}, Name: {game[1]}, Price: {game[2]}")

db.close()

fetch_games()

6. Security Framework Implementation

• Languages: C++, Python, Perl (for system scripts)

• Purpose: Ensure data integrity, authentication, and encryption.

• Example Code (Python – Encrypting User Data):

from cryptography.fernet import Fernet

# Generate a key for encryption

key = Fernet.generate_key()

cipher_suite = Fernet(key)

# Encrypt sensitive user information (e.g., account password)

password = b"SuperSecretPassword"

encrypted_password = cipher_suite.encrypt(password)

print(f"Encrypted Password: {encrypted_password}")

# Decrypting the password

decrypted_password = cipher_suite.decrypt(encrypted_password)

print(f"Decrypted Password: {decrypted_password}")

7. Testing and Quality Assurance

• Languages: Python (for automated tests), Jest (for JavaScript testing)

• Purpose: Unit testing, integration testing, and debugging.

• Example Unit Test (Python using unittest):

import unittest

def add(a, b):

return a + b

class TestGameFramework(unittest.TestCase):

def test_add(self):

self.assertEqual(add(10, 20), 30)

if __name__ == '__main__':

unittest.main()

8. Order of Implementation

• Phase 1: Focus on core system architecture (low-level C/C++) and OS development.

• Phase 2: Develop SDK and start building the basic framework for UI and input management.

• Phase 3: Work on backend systems like the digital store and integrate with front-end UI.

• Phase 4: Begin rigorous testing and debugging using automated test suites.

This comprehensive approach gives you a detailed idea of how each component can be built using a combination of these languages and technologies. Each section is modular, allowing teams to work on different aspects of the console simultaneously.

[Pixel Art/Sprites/Buildinodels/VictoriaSecretPixelArtKit #Playstation7 #DearDearestBrands]

[jcmarchi]

Weekly News for Designers № 719

New Post has been published on https://thedigitalinsider.com/weekly-news-for-designers-%e2%84%96-719/

Weekly News for Designers № 719

Figma AI Updates to Elevate Your Design Workflow Figma has shared some prototypes for platform updates that integrate AI. This Tuts+ article covers each of them to explore their possibilities.

State of Brand Report 2023 Discover key insights into the trends, challenges and strategies of branding this year.

Internet Artifacts Explore artifacts from the early days of the internet right up until the present day.

Naming Variables In CSS Some collected thoughts from Jonathan Dallas related to naming CSS Custom Properties.

The Negative Impact of Mobile-First Web Design on Desktop Mobile-first web designs cause significant usability issues when viewed on desktop.

Free T-Shirt Mockup Templates for Photoshop These free realistic iPhone mockup templates are perfect for showcasing the UI or UX of your mobile app design or responsive website.

Introducing Learn Performance Course This is new and free course is intended for those that care about web performance, but may be just beginning to get familiar with it.

It’s 2023, Here is Why Your Web Design Sucks Heather Buchel explores the reasons why we no longer have web designers.

State of React 2023

Let’s Reinvent the Wheel

The 2023 Design Tools Survey This survey gathers usage data from thousands of designers each year and many of the design companies you know use this data to better understand and improve the design tools industry.

CSS & JavaScript Snippets for Creating Notification UIs A collection of CSS and JavaScript code snippets for creating unique notification and alert systems and UIs.

Image Layer Animations with Clip-Path Some ideas for speedy page transition animations with layered images using clip-path.

Common Questions About Interpreting Page Speed Reports Take a closer look at how various performance tools audit and report on performance metrics, such as core web vitals.

Geist Font A new and free typeface that has been specifically designed for developers and designers.

Photoshop Action Sets for Cinema & Movie Effects A collection of one-click cinema & movie effect Photoshop action sets that will take your photos to the next level.

[trendingnewsinsight009]

GitHub Repositories Hit by Password-Stealing Commits Disguised as Dependabot Contributions

A new deceptive campaign has been observed hijacking GitHub accounts and committing malicious code disguised as Dependabot contributions with an aim to steal passwords from developers.

"The malicious code exfiltrates the GitHub project's defined secrets to a malicious C2 server and modify any existing javascript files in the attacked project with a web-form password-stealer malware code effecting any end-user submitting its password in a web form," Checkmarx said in a technical report

The malware is also designed to capture GitHub secrets and variables to a remote server by means of a GitHub Action.

The software supply chain security firm said it observed the atypical commits to hundreds of public and private GitHub repositories between July 8 and 11, 2023.

It has emerged that the victims had their GitHub personal access tokens stolen and used by the threat actors to make falsified code commits to users' repositories by posing as Dependabot.

Dependabot is designed to alert users of security vulnerabilities in a project's dependencies by automatically generating pull requests to keep them up-to-date.

"The attackers accessed the accounts using compromised PATs (Personal Access Token) -- most likely exfiltrated silently from the victim's development environment," the company said. Most compromised users are located in Indonesia.

However, the exact method by which this theft may have taken place is currently unclear, although it's suspected that it may have involved a rogue package inadvertently installed by the developers.

This is evidenced by a new data exfiltration campaign targeting both npm and PyPI that uses as many as 39 counterfeit packages to gather sensitive machine information and transmit the details to a remote server.

The development highlights the continued attempts on part of threat actors to poison open-source ecosystems and facilitate supply chain compromises.

[kindredcodes1]

Finally, Javascript!

After at least a week of putting it off, thinking I wasn't ready, I've started to pick up Javascript. So far I've just learned variables and the alert/prompt, but at least it's something! I really, really hope this is going to help my future.