#javascript operators

[webtutorsblog]

JavaScript Tutorials - Online JS Information's by WebTutor

🚀 Dive into the world of JavaScript with our latest guide on Web Tutor! 🌐

✨ Uncover the secrets of coding magic and boost your web development skills. 💻

🔍 Whether you're a beginner or a seasoned pro, there's always something new to discover.

🚀 Don't miss out – click the link below and elevate your coding game! 👩‍💻👨‍💻 #JavaScriptMagic #WebDevelopment #LearnToCode #WebTutor #CodingJourney

[Link to the page: https://webtutor.dev/js/js-introduction ]

[orcelito]

Working on my javascript for my web page. Turns out I have the perfect kind of setup to accomplish some of the project requirements, specifically with even handlers and user interactions

My website, conceptually, will load a different employee details page depending on what employee name is clicked on. But I need to load it dynamically (instead of hard-coding it) so that the user can add or delete employees & it'll be able to still load the relevant shit.

So! Only one employee details page, but depending on how it's loaded, it'll load a different employee's information. Still working on getting down Exactly how to do it (I'm thinking using URL parameters that'll read a different object depending on what ID is used)

It's entirely doable. In fact, it's probably extremely common to do in web pages. No one wants to hard-code information for every new object. Of course not. And thus the usefulness of dynamic javascript stuff.

I can do this. I can very much do this.

[lackhand]

pipe operator in js

Rescuing from my drafts ca march 2023. This is no longer actually true; my company folded last year and I'm back on my gamedev non-sense (bittersweetly!). More details on that soon.

Long time no post. I'm working in elixir these days; I couldn't sleep and so was catching up on modern JavaScript; I watched nerds snipe in the gutters.

what is pipeline?

You read this; you're adjacent to >=1 programmer. It's bash piping, the output from one function goes to the next.

There's a few ways to spell it, from the explicit:

const $0 = foo(input); const $1 = bar($0); const output = baz($1);

Explicit! Legible!

Cumbersome! Weave-y!

To the Hack-style syntax, where the pipe operator creates a variable within its right hand side's scope (sort of like this:

const output = input |> foo($) |> bar($)

Just sugar on top of the above (+ variable lifetime scopes, whatever)

Nobody can agree on the magical "previous expression result" symbol

when the pipe is a series of 1 arg f()s, the ($) extra characters are gross.

To the F#-style syntax, where the calls have to be arity-1 functions:

const output = input \|> foo \|> bar

Handles the happy path 1-arg f() beautifully

requires lambdas or currying and more care for every other case.

F# wins, right?

The community seems to think so.

But it has wrinkles; every method has to be 1-arg, and the hidden closures to enable that have performance impact.

My modest proposal

I wrote this because I didn't want to post on a six-year-and-counting language proposal, but I also had an idle fancy.

To me, the problem isn't a lack of a pipe operator or other functional support.

It's @#_-+&!ing left-hand assignment and community conventions.

You can even see it in the examples, where we have const foo, a bunch of really relevant details, and then wham, we're back to the start for the next line.

What we need is:

A right-hand assignment operator, so that after calculating a variable you can stick it somewhere. Without further thought, I propose =: but I'm sure there could be improvement.

=: assigns to the RHS, and to the special variable it. By default, assigns to _ (discards) -- in addition to it.

A new keyword & local variable "it". "It" is sort of like "this", with special rules about its meaning scoped to the function in which it appears. Typechecking must respect its most recent assignment (how high of a lift is this?!). Lambdas have their own standalone it (so you need to

A community that accepts using non-descriptive variable names & scoped type checkers for this purpose -- for instance, special syntax around right-assigning to $ such that it's type checkable, variable scoped, etc.

The semicolon "operator".

Then a pipe could be written:

input =:; foo(it) =:; bar(it) =: output

Potentially with parens in certain callsites, simplifying it a bit maybe, etc.

Things to improve:

It doesn't look like a pipe.

But is that so bad, when it makes the whole thing so beautifully explicit?

It breaks LHS/RHS naming and conventions (you're assigning?! To the right hand side??!). Doesn't delete foo[bar] do the same? This seems like a very core, very forgivable case to make the code match the language. I do not usually say "x takes the value seven"; I very often do say "store 7 as 'x'".

Real downsides: so many syntax highlighters, code awareness tools etc would need to understand polymorphic horrible "it". Combined with exceptions, the values of it in a catch clause feel pretty scary.

Still, food for thought.

[cerulity]

All-level Rust

Web servers require layers upon layers of software and hardware. Routing, multiplexing, protocols, everything. Rust is a viable solution to making a web server, because it's safe and fast, and has many crates to help (tokio, warp, ws). You can make a browser in Rust, as well as games.

But at the same time, you can make an operating system with it. The lowest level of access to a computer you can get, creating and dereferencing raw pointers, running on the CPU itself. You can make not only games but game engines. You can make compilers. You can do FFI. You can make FFI. Your entire stack can be made with Rust.

You would make a web server in JavaScript, Java, C#, Go, or maybe even Python. But you wouldn't use any of those to make an operating system, because they require a runtime aren't bare metal enough, or throw exceptions. They are good for making web servers because they abstract away problems like buffer overflows, and they are extendable languages. You would use C, C++, or Zig. They are good for making operating systems because it's easy to dig into memory ((unsigned short*)0xb8000 is the VGA text buffer).

Rust can do both. Sure, you can make a web server in those OS languages, but you need to make sure it's safe as hell. Rust itself is safe as hell.

/rust rant

[jcmarchi]

Next Level CSS Styling for Cursors

New Post has been published on https://thedigitalinsider.com/next-level-css-styling-for-cursors/

Next Level CSS Styling for Cursors

The cursor is a staple of the desktop interface but is scarcely touched by websites. This is for good reason. People expect their cursors to stay fairly consistent, and meddling with them can unnecessarily confuse users. Custom cursors also aren’t visible for people using touch interfaces — which excludes the majority of people.

Geoff has already covered styling cursors with CSS pretty comprehensively in “Changing the Cursor with CSS for Better User Experience (or Fun)” so this post is going to focus on complex and interesting styling.

Custom cursors with JavaScript

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can use an element as our cursor, which lets us style it however we would anything else. This lets us transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

In its most basic form, we just need a div that continuously positions itself to the cursor location. We can do this with the mousemove event listener. While we’re at it, we may as well add a cool little effect when clicking via the mousedown event listener.

That’s wonderful. Now we’ve got a bit of a custom cursor going that scales on click. You can see that it is positioned based on the mouse coordinates relative to the page with JavaScript. We do still have our default cursor showing though, and it is important for our new cursor to indicate intent, such as changing when hovering over something clickable.

We can disable the default cursor display completely by adding the CSS rule cursor: none to *. Be aware that some browsers will show the cursor regardless if the document height isn’t 100% filled.

We’ll also need to add pointer-events: none to our cursor element to prevent it from blocking our interactions, and we’ll show a custom effect when hovering certain elements by adding the pressable class.

Very nice. That’s a lovely little circular cursor we’ve got here.

Fallbacks, accessibility, and touchscreens

People don’t need a cursor when interacting with touchscreens, so we can disable ours. And if we’re doing really funky things, we might also wish to disable our cursor for users who have the prefers-reduced-motion preference set.

We can do this without too much hassle:

What we’re doing here is checking if the user is accessing the site with a touchscreen or if they prefer reduced motion and then only enabling the custom cursor if they aren’t. Because this is handled with JavaScript, it also means that the custom cursor will only show if the JavaScript is active, otherwise falling back to the default cursor functionality as defined by the browser.

const isTouchDevice = "ontouchstart"in window || navigator.maxTouchPoints > 0; const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (!isTouchDevice && !prefersReducedMotion && cursor) // Cursor implementation is here

Currently, the website falls back to the default cursors if JavaScript isn’t enabled, but we could set a fallback cursor more similar to our styled one with a bit of CSS. Progressive enhancement is where it’s at!

Here we’re just using a very basic 32px by 32px base64-encoded circle. The 16 values position the cursor hotspot to the center.

html cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0Jve D0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iYmxhY2siIC8+Cjwvc3ZnPg==") 16 16, auto;

Taking this further

Obviously this is just the start. You can go ballistic and completely overhaul the cursor experience. You can make it invert what is behind it with a filter, you can animate it, you could offset it from its actual location, or anything else your heart desires.

As a little bit of inspiration, some really cool uses of custom cursors include:

Studio Mesmer switches out the default cursor for a custom eye graphic when hovering cards, which is tasteful and fits their brand.

Iara Grinspun’s portfolio has a cursor implemented with JavaScript that is circular and slightly delayed from the actual position which makes it feel floaty.

Marlène Bruhat’s portfolio has a sleek cursor that is paired with a gradient that appears behind page elements.

Aleksandr Yaremenko’s portfolio features a cursor that isn’t super complex but certainly stands out as a statement piece.

Terra features a giant glowing orb containing text describing what you’re hovering over.

Please do take care when replacing browser or native operating system features in this manner. The web is accessible by default, and we should take care to not undermine this. Use your power as a developer with taste and restraint.

[spindlecrank]

It's Not Just An Operator...It's a Ternary Operator!

It's Not Just An Operator...It's a Ternary Operator!

What is the ternary operator? Why is it such a beloved feature across so many programming languages? If you’ve ever wished you could make your code cleaner, faster, and more elegant, this article is for you. Join us as we dive into the fascinating world of the ternary operator—exploring its syntax, uses, pitfalls, and philosophical lessons—all while sprinkling in humor and examples from different…

[roseband]

...

[gagande]

purecode ai company reviews | Conditional Rendering

Conditional rendering in JSX allows you to render components or elements based on specific conditions. This can be achieved using JavaScript logical operators like && (logical AND) or the ternary operator ? : for more concise expressions

[removeload-academy]

Spread Operator in JavaScript | Spread Operator | Memory Allocation in Non Primitive DataType

The spread operator (…) in JavaScript is a versatile and powerful feature that allows you to expand or spread elements in arrays, objects, or function arguments. It’s commonly used for copying, merging, and passing around data structures without modifying the original ones.

[robomad]

Understanding Event Loop in Node.js

Understanding the Event Loop in Node.js: A Beginner's Guide

Introduction Node.js is a powerful runtime environment built on Chrome’s V8 JavaScript engine. It is designed for building scalable network applications. One of the core concepts that make Node.js efficient is its event-driven, non-blocking I/O model, which is managed by the event loop. Understanding the event loop is crucial for writing performant and efficient Node.js…

[webtutorsblog]

Start Your JavaScript Journey with WebTutor

In the world of web development, JavaScript has emerged as an essential programming language. Its versatility, ease of use, and ability to interact with HTML and CSS make it a powerful tool for creating dynamic and interactive websites. In this blog, we will explore the fundamental concepts of JavaScript, from its basic syntax and output to variables, operators, and more. Whether you're a beginner or a seasoned developer, there's something for everyone to learn and apply. Additionally, we'll introduce you to an excellent resource, webtutor.dev, where you can further enhance your JavaScript skills.

JavaScript Output

JavaScript allows developers to communicate with users by generating output in various ways. The most common method of output is using the console.log() function. It prints messages or data to the browser's console, which is useful for debugging and understanding what's happening in your code.

JavaScript Syntax

The syntax of JavaScript is quite user-friendly and similar to many other programming languages. Here are a few key points to remember:

Statements: JavaScript code is made up of statements, which can be declarations, assignments, function calls, loops, etc.

Case Sensitivity: JavaScript is case-sensitive, so variables myVar, myvar, and MYVAR are considered different.

Semicolons: While optional, it's a good practice to end statements with semicolons to avoid potential issues.

Whitespace: JavaScript ignores whitespace, so you can use spaces, tabs, and newlines for code formatting.

JavaScript Comments

JavaScript Comments are essential for code documentation and explanation. JavaScript supports both single-line and multi-line comments. Single-line comments start with //, and multi-line comments are enclosed between /* and */.

JavaScript Variables

Variables in JavaScript are used to store data values. They are declared using the let or const keyword. let allows reassignment, while const creates a constant that cannot be reassigned.

JavaScript Operators

Operators are symbols used to perform operations on variables and values. JavaScript supports various types of operators:

Arithmetic Operators: Used for basic arithmetic operations like addition, subtraction, multiplication, etc.

Comparison Operators: Used to compare values and return true or false based on the comparison.

Logical Operators: Used to combine multiple conditions and determine the overall truth value.

Assignment Operators: Used to assign values to variables.

Ternary Operator: A shorthand way of writing conditional statements.

Conclusion

JavaScript is the backbone of modern web development, enabling you to create dynamic and interactive websites that engage users effectively. By mastering JavaScript's syntax, output, comments, variables, and operators, you will have a strong foundation to build upon. Remember, continuous learning is the key to staying relevant and growing as a developer.

So, start your JavaScript journey today, and do not forget to visit webtutor.dev for an enriching learning experience that will take your skills to new heights. Happy coding!

[gemsmain]

Ran several troubleshooting tasks through the console, and it felt exactly like this meme

[yeana29]

what does the left shift operator do in JavaScript?

In JavaScript, the left shift (<<) operator is a bitwise operator that shifts the bits of a number to the left by a specified number of positions. Each left shift effectively multiplies the number by 2 to the power of the shift amount. It's important to note that the left shift operator only works with integer values.

The syntax for the left shift operator is:

result = num << shiftAmount;

Here's an example:

let num = 5; // Binary representation: 00000101

let shifted = num << 2; // Shifting 2 positions to the left

console.log(shifted); // Output: 20 (Binary representation: 00010100)

Explanation:

The binary representation of 5 is 00000101.

Shifting 5 two positions to the left results in 00010100, which is 20 in decimal.

Keep in mind that left shifting can cause numbers to overflow if the leftmost bits are shifted out of the range that can be represented. It's also important to remember that left shifting negative numbers can lead to unexpected results due to the way negative numbers are represented in binary using two's complement.

In most cases, the left shift operator is used in low-level operations involving binary manipulation and bitwise calculations. It's not as commonly used in high-level JavaScript programming compared to other operations.

-Answer by Chatgpt

[foone]

So a cool thing my granddad* Alan Turing figured out is Turing Equivalence:

Basically he designed a super simple hypothetical computer, and proved mathematically that it can do everything a more complicated computer can do, just maybe slower or faster.

This is normally brought up for the factoid that could run Doom on Xty Million Crabs, but it also applies to programming languages, not just computers.

See, it means that every programming language is equally "powerful", assuming it's Turing Complete (which is basically just "can do the things this minimal computer can do", which is basically every language except a couple simple theming languages and macro scripting systems), it's just easier or harder to do specific things in a given language. But they can still be done.

So this means the C/C++ your OS and browser was written in is just as powerful as everything else. The Java used for Minecraft and Android phones, the Javascript used for webpages, the C# used Unity, the BASIC used on 80s computers, and DickCode, the joke programming language I made as a university student which had only eight operators, but all eight were different ascii penises a la "8==D".

All equally powerful. You could write an OS, video game, or AI bot in any of these. It just might be a little slower or faster and easier or harder to do (especially DickCode, that one is very Hard).

Aren't computers neat?

*not my actual granddad but I am named Turing

[codemerything]

A structured way to learn JavaScript.

I came across a post on Twitter that I thought would be helpful to share with those who are struggling to find a structured way to learn Javascript on their own. Personally, I wish I had access to this information when I first started learning in January. However, I am grateful for my learning journey so far, as I have covered most topics, albeit in a less structured manner.

N/B: Not everyone learns in the same way; it's important to find what works for you. This is a guide, not a rulebook.

EASY

What is JavaScript and its role in web development?

Brief history and evolution of JavaScript.

Basic syntax and structure of JavaScript code.

Understanding variables, constants, and their declaration.

Data types: numbers, strings, boolean, and null/undefined.

Arithmetic, assignment, comparison, and logical operators.

Combining operators to create expressions.

Conditional statements (if, else if, else) for decision making.

Loops (for, while) for repetitive tasks. - Switch statements for multiple conditional cases.

MEDIUM

Defining functions, including parameters and return values.

Function scope, closures, and their practical applications.

Creating and manipulating arrays.

Working with objects, properties, and methods.

Iterating through arrays and objects.Understanding the Document Object Model (DOM).

Selecting and modifying HTML elements with JavaScript.Handling events (click, submit, etc.) with event listeners.

Using try-catch blocks to handle exceptions.

Common error types and debugging techniques.

HARD

Callback functions and their limitations.

Dealing with asynchronous operations, such as AJAX requests.

Promises for handling asynchronous operations.

Async/await for cleaner asynchronous code.

Arrow functions for concise function syntax.

Template literals for flexible string interpolation.

Destructuring for unpacking values from arrays and objects.

Spread/rest operators.

Design Patterns.

Writing unit tests with testing frameworks.

Code optimization techniques.

That's it I guess!

[unsoundedcomic]

That interactive journey was so absolutely unexpected and charming. I don't even know why I checked the website early, but I am so glad that I did. Currently torn between a desire to text my wife (and everyone else I know who reads Unsounded) and tell them to check the website NOW and the desire to just let them find out on their own without any suspicion of something special.

Anyway, I love your freaking webcomic, genuinely #1 in my book and I have read a fair few. Also, while I had strong faith you wouldn't fully wrap Sette with stuff still unresolved, still made me tear up to see her again.

Anyway, this is the Ask section, not the Gush section, so uh... about how many extra hours of work did this take to pull off, if you don't mind my asking?

So glad you enjoyed it! And yeah, Sette's our co-protagonist, and this is a world where Death is not the end. There was no way she was just going to vanish from the story.

I'd say this update took twice the time of a normal page? Drawing all the Boos was a task, but all the javascript is pretty straightforward stuff I figured out a while ago. It's really fantastic what you can do with dead simple javascript and css, I'd love to see artists use them more for storytelling, especially in webcomics. Even if you're only a one man operation, you can manage a lot with relatively little time investment.