#like just show me how to make the thing with just html and javascript

[bf-rally]

okay so im back in navbar hell (when i thought i escaped...!!!) but ive managed to get this set up today :D

[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.

[spiders-around]

YOU MUST MAKE A WEBSITE

Oh wow, look at that! YET ANOTHER post urging you to make a webbed site! What a completely new thing that people haven't made a thousand masterposts for already!!

• Making a website might look scary. It is Not.

At first, I too thought making a website was too much work. It really isn't! It turns out that all you need is

an HTML file,

a web hosting service and

w3schools tutorials,

and that's about it!

This post will point you towards these resources, and others I found useful while figuring out how to make a website.

• VERY QUICK EXPLANATIONS:

What's HTML and CSS?

HTML is the content of your webpage, the skeleton of it. What shows up in a webpage is what's written in the HTML file!

CSS is the way the HTML is styled; the colour of the background and the letters, the size of elements, the font, all that!

Do I absolutely NEED JavaScript for a website?

Not at all! You don't need to worry about learning it before getting started.

• What do I make a website for? What do I put in there?

ANYTHING AND ALMOST EVERYTHING. Here's some ideas for pages from a post of mine were I was very normal about websites:

You can make a page that's only pictures of your pets.

You can make an interactive adventure.

You can make your own academic blog full of your own essays or articles.

You can just post a ton of art or make a full music page.

You can make a blog and infodump eternally, give book reccs and reviews. You can host a thousand virtual pets and nothing else.

Upload entire books in a single html file. Make a wikipedia for your ocs. Make a fake site for a random fictional place (restaurant, hotel, whatever). You can make a thousand fanpages/shrines about your favorite media. You can upload your own webcomic and make it all like a fancy website and shit.

I could keep going but, for the sake of "brevity", I won't.

• WEBSITE EXAMPLES!

If I started listing the websites I know, this post would be bottomless. Here's only seven:

https://publictransit.neocities.org/ - A webbed site, for sure

https://ribo.zone/ - A personal site

https://leusyth.neocities.org/ - An art archive

https://solaria.neocities.org/ - Personal website with A Lot of stuff (it'll come up in a bit, because it offers web making resources)

https://hog.neocities.org/ - The Hogsite

https://thegardenofmadeline.neocities.org/ - Another personal site! It also has a web resources page and has made another masterpost like this one (but better)

https://spiders.neocities.org/ - My own website, which must be weird to see in mobile . sorry

• You've convinced me. I want a webbed site. Where do I start?

https://neocities.org/

FIRST OF ALL: Neocities. It is a free web hosting service, and it's the one I and the sites I linked use!

When I first started, my website was a black page with red letters and a drawing, and nothing else! It was like that for a month, till i started picking up on how to do things.

Here's what helped me get an idea of how to make things work:

https://sadgrl.online/learn/articles/beginners-guide-neocities

An absolute beginners guide to neocities -- while when you make an account there you get a tutorial page from the site, this one's extra support for that.

https://www.w3schools.com/

Learn HTML, CSS, JavaScript and MANY other coding things for free. All the tutorial/reference pages have live testing windows for you to mess with!! helped me a LOT while figuring this stuff out!

https://htmlcheatsheet.com/

https://htmlcheatsheet.com/css/

Cheatsheets for HTML and CSS, respectively. It includes a JavaScript one too!

https://sadgrl.online/webmastery/

Sadgrl's webmastery resources! Also includes the next resource listed here:

https://sadgrl.online/projects/layout-builder/

Sadgrl's layout builder; not a lot of customization at a first glance, but I've seen wildly different websites all using it as a base, plus it works using CSS Flexbox, so it generates a responsive layout!

(basically, a responsive layout is one that translates well in different sized screens)

https://www.tumblr.com/fysa/728086939730919424/wikitable-code?source=share

Tumblr user fysa made this layout imitating a wiki page!

https://brackets.io/

At some point, you might want to do things outside the Neocities code editor and get one outside the site. I recommend Brackets, because my old as fuck computer can run that and absolutely nothing else apparently, and it works wonderfully! Though I recommend either turning off the code autocomplete or using it after a good while of already using the Neocities code editor, so you get used to coding on your own.

http://www.unit-conversion.info/texttools/text-to-html/

Turn your text into HTML code! i use this kind of pages for my lengthy blog entries that I don't feel like formatting myself.

https://imagecompressor.com/

COMPRESS YOUR IMAGES.

The heavier an image is, the more your site weighs and the more time your page will spend loading. You don't want that, specially if your site is heavy on graphics. This might help!

https://solaria.neocities.org/guides

Some CSS, JavaScript and Accessibility guides! Worth checking out!

https://eloquentjavascript.net/

This is a free, interactive book for learning JavaScript! NOTE: It is very intuitive, but JavaScript is HARD!! I still haven't learned much of it, and my website does fine without so don't worry if you end up not doing much with it. It's still useful + the exercises are fun.

And now, accessories!

• Silly stuff for your page :]

https://gifypet.neocities.org/

Make a virtual pet, copy the code and paste it in your HTML file! You'll get a little guy in your webbed site :]

https://www.wikplayer.com/

Music player for your website!

http://www.mf2fm.com/rv/

JavaScript silly effects for your site :]

https://blinkies.neocities.org/geoblinkies

Blinkie search engine!

https://www.cbox.ws/

Add a chatbox to your site!!

https://momg.neocities.org/

Infinite gallery of gifs. i've spent hours in there looking at moving pictures and out of them all, the ONLY gif i actually ended up using on my site was a rotating tomato slice. it is still there. trapped.

https://wrender.neocities.org/tarotinstructions

A widget that gives you a random tarot card!

https://www.websudoku.com/widget.php

Sudoku widget!

That's about it for now! I don't know how to end this!!! Remember to have fun and google everything you don't know :]

[kaiasky]

Complete-ish Guide To Settings You Might Want to Change

These instructions will be for desktop, because the settings are easier to find there. You can do the same on mobile, but it might be in different places.

Dash settings

Your dashboard is broken down into several feeds, including "Following" and "For You".

"Following" is primarily the posts of people you follow, "For You" is algorithmic.

If you just joined, "For You" is default, if you're a longtime user it's "Following". You can change this in the settings on the right

A lot of longtime users will tell you that the Following feed is where we spend most of our time. But try out all the feeds, and see what you like most.

The settings that are settings:

To start, click the settings gear under the account icon (the abstract person head).

This should take you to the General tab. Key settings:

Community Labels: By default anything NSFW is silently hidden. You can change how each subtype is handled.

Hide Additional Mature Content: If you have an iPhone disable this or it'll hide every post from you on the off-chance it contains porn.

If you're under 18 as determined by the birthdate you entered on signup, you can't change these. (If you want them on, you'll have to make a new account and lie)

Under the "Dashboard" tab, you can enable timestamps, which is mostly just nice information to have. sometimes a post is from 2010 and you can be like wow.

The next four probably have the biggest impact on your tumblr experience, so I'm gonna do a breakdown.

Best Stuff First reorders your "Following" to have popular posts at the top. Disabling it makes your feed chronological. I like it off, but up to you.

Include Stuff In Your Orbit and Based On Your Likes put various content from "For You" into "Following". Personally, I disable them to keep "Following" purely posts by people I follow, and then switch between feeds to get what I want.

Followed Tag Posts will put content from the "Your Tags" feed into your "Following" feed. Since you can go to the separate tags feed, I usually turn this off (it tends to show me a lot of duplicate posts), but up to you.

Under the "Notifications" tab you can tell Tumblr to stop sending you emails.

I'd recommend disabling all the emails--if you get a bunch of replies, Tumblr will happily send you dozens of emails, and you don't need that.

Notifications is the push-notifications in-app/in-website. The mobile app, for some reason, has a much better interface for controlling these, including the option to only get activity-notifications for mutuals. You can leave these on, or turn them off if you find the flood of notifications is distracting.

Tumblr News is a newsletter, it usually just has content from @fandom and the other staff-run recap blogs.

Conversational notifications sends you more emails.

Under the "Tumblr Labs" tab you can enable a bunch of cool beta tests.

I particularly suggest Reblog Graphs, What you Missed tab, & Popular Reblogs tab, but they're all fun to try out. A lot of these are honestly better than the For You dashboard.

For each blog you have, you can customize it's Blog Settings. Beyond things like setting an avatar or description, there's a few settings that are fun.

Custom Theme gives you your own subdomain at [blogurl].tumblr.com.

This makes your blog easier to search, and a lot of 3rd party tools depend on you enabling it. It also makes it easier to link your posts to people who don't have tumblr accounts.

You can completely customize the CSS/HTML/Javascript. you can go legitimately crazy. It's not a requirement, but if you want unlimited flexibility, go wild.

On the contrary, if you wanna run a more private blog, you can disable this and then hide your blog from search results/non-registered users.

Likes and Following are public by default. I like to turn these off so I don't have to worry about like, "what will people think if they see i'm following [...] or liking [...]". But it's also fair to keep them public if you'd like.

The other Blog Settings are important but pretty self-explanatory I think.

Finally, there's some useful tools I like:

XKit Rewritten - A bunch of scripts (like RES for Reddit). The one I really like is "mutual checker", which shows at a glance which blogs you are in mutuals with. Which is such a good feature it's included in the mobile apps by default i think.

siikr.tumblr.com - Tumblr search is bad, and google's indexing of tumblr blogs is worse. Siikr will find any post you've made on your blog. Because disk space is limited, only use it to search your blog, and if you're tech savvy consider running a local copy from source.

[lcgacyofages]

@uvher | Salty Munday meme: ♥, ☀, ☢, ❥, ❦, ❧, ✖, ❣

// i want allllllll the salt and Tea

the salty af munday meme

♥ What's the WORST thing that has happened to you rp wise?

That is a long ass story from like ten years ago. But basically, I was modding an rpg, decided I couldn't do it anymore due to some family stuff and my recent adhd diagnosis and wanting to get stuff together with that. The admin didn't want to keep the rpg going without me so we announced we were shutting it down with us running it, but other people could still play their characters (it was on tumblr) and THIS ONE PERSON GOT SO BITCHY (they'd been a bit bitchy and manipulative for a while tbqh) about it and basically made it seem like all we wanted was the attention (when they were, uh, the same, and would try to circumvent rules to make their muses super...special?) and then had it be an us vs them but they had a higher charisma than we did because I was too tired to deal with it so lost a few people from that but then found out a year later, a lot of people realized how fucked up they were about things and their group had fallen apart.

☀ What's your rp pet peeve?

Lack of accessibility. Definitely a big one. I have astigmatisms, I have bad eyes. When someone has a dark background and light thin font, I can't read your rules and information. I should not have to copy and paste shit to read your stuff!! Also links that aren't clear?? Also bad take. Then there's the general RP aesthetic with the weird ass use of threshold and that, overly busy textures on the graphics instead of leading the eye to different places. But that's mainly it for that one.

☢ What fads/trends are you so over?

Oh perfect lead into. Please look at RP pet peeve for that. The fucking aesthetic thank you.

❥ Has someone ever ruined an FC or character for you?

Person from first answer ruined Ben Bar.nes for me. Which sucks because he's a great actor and faceclaim but I just can't anymore. It's an extra ick for me when it's a werewolf OC because...They had a werewolf OC. My apologies to the one person who followed me once with a werewolf OC with a Ben Bar.nes FC that I never followed back I couldn't do it.

❦ Has someone been jealous of you?

Probably?? I don't know I don't pay attention to that. I wouldn't be surprised if someone was secretly jealous of my friendship with Law but you know. It is what it is?

❧ Have you ever been jealous of anyone?

I'm human. It happens. But usually I talk sense into myself about how that's silly to be jealous and move on.

✖ How has Tumblr RP changed since you started?

I have been rping on tumblr for ten+ years. It would take too long for me to discuss that. But rules were on blogs, people weren't tied to their rp blogs by their phones and that. Gifs were used, not icons, then it was icons, then gifcons, then banners. Now there's carrds, docs, sites, and it's just...wild. Prefer to be mobile with links to stuff because the tumblr app is crap about showing links on blogs. People used to know html and javascript to make their blogs. Also the aesthetic change is...Something, that's for sure.

[molsno]

if my goal with this project was just "make a website" I would just slap together some html, css, and maybe a little bit of javascript for flair and call it a day. I'd probably be done in 2-3 days tops. but instead I have to practice and make myself "employable" and that means smashing together as many languages and frameworks and technologies as possible to show employers that I'm capable of everything they want and more. so I'm developing apis in java that fetch data from a postgres database using spring boot with authentication from spring security, while coding the front end in typescript via an angular project served by nginx with https support and cloudflare protection, with all of these microservices running in their own docker containers.

basically what that means is I get to spend very little time actually programming and a whole lot of time figuring out how the hell to make all these things play nice together - and let me tell you, they do NOT fucking want to.

but on the bright side, I do actually feel like I'm learning a lot by doing this, and hopefully by the time I'm done, I'll have something really cool that I can show off

[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.

[saphushia]

H-hey um hi, I was uh, well I was just wondering how you did that cool character list cuz I wanted to make one for myself but I'm just like new here n stuff so I was wondering if you could tell me how you did it also your art is funny as shit and I love the style

i'm assuming you mean the character/oc page on my blog? it's a modified version of this page theme by @macfustythemes. you're going to need to know a little bit of html/be willing to do some trial and error in order to use it (more if you wanna actually tweak the layout), so i'd recommend downloading brackets, which is a code editing program that will make things way easier. you'll probably have to send a ticket to support asking them to enable javascript on your blog, as the code is dependent on javascript for its filtering. (it's off by default to prevent ppl from running malicious scripts. in my experience there was very little fuss getting it turned on, just ask nicely)

you can change your theme by either going to your blog and clicking the palette icon that should show up along the top right, or by going to your settings -> select blog on the sidebar -> second option down is 'edit theme.' if you look for themes anywhere but tumblr's inbuilt theme garden, the steps to install them is 'there will be a link to a site that has the entire html code for the theme, copy it and paste it in the right spot in the theme editor' if you want to change the theme of your whole blog there's an option at the very top of the customization sidebar that says 'edit html,' delete everything that's there and then paste the new code to change the theme for the whole blog.

to add a page, scroll all the way to the bottom of the customization sidebar and hit 'add page'. when you're making a new page you can either use a standard layout, which will basically look like a post on your blog (like my tags page), or a custom layout, which will allow you to edit/paste html to change the entire page (like my characters page). if you're using a page theme you will need to copy paste the code you get from the theme source.

if you're looking for either full blog themes or other page themes, i'd recommend browsing @theme-hunter instead of the inbuilt tumblr theme browser. way better imo. here is specifically character page themes, and they also have some tutorials and guides for changing themes/basic html tweaks, though some seem a bit outdated.

also, the talk of html is probably scary if you aren't familiar with it, but i promise it's not that hard. tweaking tumblr themes is actually how i've picked up enough html knowledge to code simple web pages from scratch lmao

[engineeringenigma]

So I work as a programmer, and the languages I use and the manner I use them in get kind of weird:

- I use python, but only to program the one robot that internally runs python. The dev environment is “here’s a box you can put text, see if you get runtime errors”. If you want a proper dev environment, you can copy-paste code from the robot program into an editor of your choice. They do have a top-level graphical interface if you want each line of code to take up 10% of your screen.

- There’s a language that’s not quite C++ that we use for a different control box. That one’s dev environment will tell you if you made an error when you try to download. Specifically it tells you the first error, and you have to fix it and try to download again to get the second error. The download process takes 20 seconds. If you try to compile offline you get separate errors.

- On the more normal side of things, we have an SQL/ajax/javascript/html thing for handling some of our internal processes. As a change of pace my problems for this one are self-inflicted, because I never figured out how to set up a proper dev environment and just edit everything in notepad++. Someone else finally showed me how to do local environment testing so I no longer take our internal website down if I miss a close bracket.

- We do a ton of stuff in .NET framework, because 20 years ago my work was using VB6 and we never bothered to migrate to C#. I actually have a real dev environment for this one with autocomplete and syntax checking, so of course it’s my favorite. My boss wants to switch this all over to javascript so we can do android/linux deployment.

- A different robot has an internal language that’s not quite python. This one also has a graphical interface that I won’t use because I want more information to fit on my screen. This one also only tells you about syntax errors during runtime, but the most noteworthy thing about it is that the command to move the robot in a straight line is bugged. I think they fixed it to the point where you can’t reboot the controller by telling it to move in a straight line, but you can make it slowly drift off into space until it faults.

- The ladder logic we use is actually normal (for AB, not Seimen’s), but I did add basically a secondary control layer built out of function blocks to handle sequencing. It is very well-documented, a fact that no one cares about when they ask what the heck I am doing with so many function blocks.

- The ladder logic was a little too normal (expensive) so they also make us use the budget version. It’s very similar except there are no keyboard shortcuts, everything takes more clicks, and instead of changing code live you have to reboot everything and wait about 30 seconds if you want to change something.

- There’s a language we use for one of our internal products that I created over about three days because I didn’t want to worry about malicious external code or figuring out a compiler. The parser is just squashed into an entirely different program so that program can control stuff in the background. It does not have arrays or loops, and I didn’t give it string handling for about a year. There’s no dev environment because it’s not a real language. Something like a quarter of the stuff we sell now uses it.

- One of the robots requires programming via menus. If you want to add an if statement, the menu shortcut is F1 -> 4 -> 8. The end if is F1 -> 4 -> 0 -> 1. The program to let you type is a paid add-on. Exponents and absolute values are also paid add-ons. You get 200 numerical memory registers and can’t have local variables. There is no else if.

[transienturl]

can't be bothered to make the hypothetical full version of this post but

they say you become an expert at something after roughly 10000 hours of doing it, right. the interesting scenario I'm in is that I have thousands of hours using javascript/typescript (and css/html) to, in sense, solve problems. and also have, extremely optimistically, tens(?) of hours using those technologies to Actually Just Build A Website.

(here's where I would do a thing I was thinking about, which is to break down—possibly in a voiceover video; that could be fun—everything that this PR does, to a hypothetical vaguely-interested layperson audience, and use it as an example of a specific problem that was fun to solve and uses in a vague sense the same technologies one would use to just implement the feature into the site itself but very meaningfully uses mostly different skills. not really motivated to unless it would serve an actual purpose, though, and given that I don't have a solid plan for doing so that I think has a good chance of resulting in a work I'm proud of.)

and isn't that the thing, you know? the fact that I'm not motivated to do pet projects with no audience and whose results would be bad is why I only have experience doing half of what the languages I know can do: I've run into a few audiences of people with interesting problems I can solve... none of which are best solved by me making a website*. like, I'm so completely turned off from the typical web developer impulse to collect one's favorite group of sexy technology stack components and build a slick personal website, then have absolutely fuck all to post on it. if it's just to prove you can do it, sure, go for it, but... I dunno, it doesn't seem to me to ultimately prove your ability to—find a problem and solve it, I guess! the point of a website is to facilitate communication; once you have something to communicate your design and engineering decisions would be based on the specifics of that thing—I dunno, is this silly? do you see what I'm trying to get at?

maybe this comes from or correlates to being a math person, originally. that idea, you know, of: it's satisfying to get it right, to have your work possess a logical throughline. this, because this, because this, because this, because of the question we started out with. I only know how to work on a project if there's a "why"—it can be an important one or a made-up or arbitrary or stupid one, but there has to be one. but I don't have one for, like... I dunno. anything I could put in a portfolio, or just. show someone curious about what I can make.

-

*except for the time that my collaborator sunk hundreds of hours into making the website without consulting me, at which point it was obviously a waste to do anything other than use the result.

[dzinesoniya]

How to Build a Strong Portfolio as a Web Developer

If you're stepping into the world of web development, one of the most important things you can do is create a portfolio that showcases your skills and expertise. A well-crafted portfolio not only helps you stand out but also serves as a tangible way for potential clients or employers to evaluate your capabilities. Whether you’re an aspiring developer or someone looking to switch careers, this guide will help you build a portfolio that reflects your best work. For inspiration, take cues from professionals at a leading web design company in Odisha to see how they present their projects.

Why a Portfolio Matters

In the competitive field of web development, your portfolio is your calling card. It’s not just a collection of projects; it’s a visual representation of your journey, creativity, and problem-solving abilities. A strong portfolio can:

Highlight your technical and design skills.

Provide evidence of your ability to deliver real-world solutions.

Demonstrate your understanding of user experience and design principles.

Attract clients or secure a job.

Steps to Build an Impressive Portfolio

1. Start with the Basics

Before diving into portfolio projects, ensure you have the necessary tools and knowledge. If you’re new, work on foundational skills like HTML, CSS, JavaScript, and frameworks like React or Angular. Employers and clients often look for a solid understanding of these basics.

2. Select Your Best Work

Your portfolio should include a mix of personal, freelance, and academic projects that showcase your strengths. Focus on quality over quantity—it’s better to present a few outstanding projects than a large number of average ones. For example, if you’ve designed a responsive e-commerce site, highlight it by explaining your process and the tools you used.

3. Build Real-World Projects

If you’re just starting out, create projects that mimic real-world applications. Consider redesigning an existing website or developing a small application for a fictional client. These projects will give potential clients an idea of how you approach problem-solving and user needs.

4. Add Context to Each Project

For every project in your portfolio, provide a brief explanation that includes:

The problem you were solving.

Your role in the project.

The tools and technologies you used.

The outcome or result.

This context helps viewers understand your thought process and the value you bring to a project.

5. Focus on Design and Usability

Your portfolio should reflect your skills as a web developer, so design it with care. Ensure it’s visually appealing, easy to navigate, and responsive. If you’re unsure where to start, consider looking at portfolios created by a reputed web design company in Odisha for inspiration.

6. Include a Personal Touch

Your portfolio is also a chance to let your personality shine. Add an “About Me” section where you briefly talk about your background, interests, and what drives your passion for web development. Keep it professional but relatable.

7. Showcase Your Code

Employers and clients often want to see how you code. Include links to your GitHub profile or embed code snippets directly into your portfolio. Highlight clean, organized, and well-documented code to demonstrate your proficiency.

8. Make it Interactive

If possible, allow visitors to interact with your projects. This could include live demos or interactive elements that showcase your development skills. An interactive portfolio leaves a lasting impression and shows that you understand user engagement.

9. Gather Testimonials

If you’ve worked with clients or on team projects, ask for testimonials. Positive feedback adds credibility to your portfolio and reassures potential clients or employers of your reliability.

10. Keep Updating

Your portfolio isn’t a one-and-done project. Regularly update it with new projects, skills, or certifications. This shows that you’re actively growing and staying current in your field.

Common Mistakes to Avoid

Overloading your portfolio with too many projects.

Ignoring the importance of mobile responsiveness.

Failing to proofread for typos and errors.

Using overly complex designs that distract from the content.

Neglecting to include contact information.

Conclusion

A well-designed portfolio is your ticket to landing dream projects or jobs as a web developer. It’s a platform to showcase your skills, creativity, and ability to solve real-world problems. By following the steps outlined above and staying consistent with updates, you can create a portfolio that not only impresses but also opens doors to exciting opportunities. Take inspiration from a professional web design company in Odisha to ensure your portfolio stands out in the competitive landscape.

[anchorandrope]

how did you make the faq? it's so pretty !!!

hiii, tysm <33 it's the FAQ page that matches my theme, lowlife!! - this are the tag page and about page in case you want them 💕 and since hot girls don't gatekeep, here's is a tutorial in case you know literally zero stuff about codes :) - more tutorials.

remember that you must do it from a computer and you need to have the "custom theme" activated (see this if you don't know how). im gonna do this tutorial in a random sideblog from scratch btw.

disclaimer: don't change anything else but what i mention here, especially if you don't know anything about html and css because, in the codes, any mistake can make the whole code not work. don't touch anything else but what is involved in the design!

as you asked for a tutorial on the FAQ, i will do it specifically for that page, but this applies to the others, as this is how to install pages in general. first, go to the bottom of the "edit theme" until you see "add a page", add one and change "standard layout" to "custom layout". fill in the url with what you want the web address to be (i used "faq" like most people but you can use something else ofc) and you will notice that there's an option that says "show a link to this page" - if you turn that on, this page will be accessible from your homepage and will be next to your askbox, archive, etc. otherwise, it will just show through the link. you can leave it unchecked if you don't want a link to this page next to your ask or archive, but remember to add it manually to your main theme otherwise no one will be able to see it!

now, in another window, go to the installation page and copy all the code and paste it into the tumblr page. with "update preview" you will see how it is displayed without the need to save it (if you're still editing - remember to save it at the end lol).

now you're going to be faced with a situation: tumblr doesn't let you use javascript by default and these pages have javascript. i have two solutions for you. one is to follow this tutorial to ask tumblr for permission to use javascript, and the other is to remove it in case they deny it - which is not usually the case anyway - or take too long, etc. (the only thing that will happen is that you will no longer have the dynamism that the base code has, on these pages not much happens if you remove it, but on others you will need to ask for permission).

to do this, remove the scripts tags: in the second and third picture i pointed out with the mouse which ones they are. JUST remove that and save it to check that the page is visible and everything else is in order.

the page should already be installed and working correctly, now let's make it pretty!!!!! for this part, i highly recommend googling at least the basics of html and css, but i'll explain it from scratch anyway. but you can ask me everything you need hehe.

changing the colours: this is done with the hex codes. if you have a profile picture or header, upload it to this website to see what colours it has if you want them to match.

once you have those colours, you will go to the page and change the hex code for them. the choice of colours is up to you, play with them, change them and see what colour is altered in case you don't understand what is what, but the tags are quite understandable (background, body, accent, etc). remember that if you took out the javascript the "night mode" will not work, so in the next two to "root" (which identify day and night mode) you can change them but leave them the same as each other.

once you have the colour palette, scroll down to the body. there where i pointed out, you can change the shape of the profile picture, the defalut mode if you left the javascript on, whether you want the sidebar to be left or right and whether you want the borders to be solid, or with dashes or dots. as the code itself says, depending on what you want, just change the word that is already there for the change you need.

where it says F.A.Q and "a short description can be pasted here" would be your sidebar (the profile picture changes itself automatically in this one, but in others you have to change it manually with a link) - if you want to match all your pages to your main theme, just paste the description you already have.

you can put a link in your bio, just copy that and change the word "don't" to whatever you want the link to be and change the link.

ask guidelines, as well as within the questions themselves, you can use html tags. <b> and </b> it's bold, <i> and </i> it's italics, <small> and </small> its to make it smaller, or <strike> and </strike> it's to "strike out" the word. remember to put the start tag where you want it to start and the end tag where you want it to end (the end tags are the same but with a /). paragraphs are separated by <p> and </p>, and as the code explains, you can put bullet lists and blockquotes or literally any htlm tag (to change colour, ordered lists, etc). you can also add links (same format as explained in the description)!!!

for the questions and answers, change the first five where it says "question #X goes here" and "answer to question #X goes here", leave the rest the same. if you want more than five questions, at the end you will see something to copy-paste or you can use question #2 through #5 (NOT #1) to copy and paste it under #5 and change the numbers, as well as the questions and answers.

for example, here you should add the number 6 after the #'s and the questions and answers. finally, you can change the sentence that appears at the end of the askbox, you can match it with the one you already have or make it a custom one from the FAQ.

save everything and you have your faq page! hope you found the tutorial useful :) <3

[jcmarchi]

HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier!

New Post has been published on https://thedigitalinsider.com/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier/

HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier!

I have to thank Jeremy Keith and his wonderfully insightful article from late last year that introduced me to the concept of HTML Web Components. This was the “a-ha!” moment for me:

When you wrap some existing markup in a custom element and then apply some new behaviour with JavaScript, technically you’re not doing anything you couldn’t have done before with some DOM traversal and event handling. But it’s less fragile to do it with a web component. It’s portable. It obeys the single responsibility principle. It only does one thing but it does it well.

Until then, I’d been under the false assumption that all web components rely solely on the presence of JavaScript in conjunction with the rather scary-sounding Shadow DOM. While it is indeed possible to author web components this way, there is yet another way. A better way, perhaps? Especially if you, like me, advocate for progressive enhancement. HTML Web Components are, after all, just HTML.

While it’s outside the exact scope of what we’re discussing here, Any Bell has a recent write-up that offers his (excellent) take on what progressive enhancement means.

Let’s look at three specific examples that show off what I think are the key features of HTML Web Components — CSS style encapsulation and opportunities for progressive enhancement — without being forced to depend on JavaScript to work out of the box. We will most definitely use JavaScript, but the components ought to work without it.

The examples can all be found in my Web UI Boilerplate component library (built using Storybook), along with the associated source code in GitHub.

Example 1: <webui-disclosure>

Live demo

I really like how Chris Ferdinandi teaches building a web component from scratch, using a disclosure (show/hide) pattern as an example. This first example extends his demo.

Let’s start with the first-class citizen, HTML. Web components allow us to establish custom elements with our own naming, which is the case in this example with a <webui-disclosure> tag we’re using to hold a <button> designed to show/hide a block of text and a <div> that holds the <p> of text we want to show and hide.

<webui-disclosure data-bind-escape-key data-bind-click-outside > <button type="button" class="button button--text" data-trigger hidden > Show / Hide </button> <div data-content> <p>Content to be shown/hidden.</p> </div> </webui-disclosure>

If JavaScript is disabled or doesn’t execute (for any number of possible reasons), the button is hidden by default — thanks to the hidden attribute on it— and the content inside of the div is simply displayed by default.

Nice. That’s a really simple example of progressive enhancement at work. A visitor can view the content with or without the <button>.

I mentioned that this example extends Chris Ferdinandi’s initial demo. The key difference is that you can close the element either by clicking the keyboard’s ESC key or clicking anywhere outside the element. That’s what the two [data-attribute]s on the <webui-disclosure tag are for.

We start by defining the custom element so that the browser knows what to do with our made-up tag name:

customElements.define('webui-disclosure', WebUIDisclosure);

Custom elements must be named with a dashed-ident, such as <my-pizza> or whatever, but as Jim Neilsen notes, by way of Scott Jehl, that doesn’t exactly mean that the dash has to go between two words.

I typically prefer using TypeScript for writing JavaScript to help eliminate stupid errors and enforce some degree of “defensive” programming. But for the sake of simplicity, the structure of the web component’s ES Module looks like this in plain JavaScript:

default class WebUIDisclosure extends HTMLElement constructor() super(); this.trigger = this.querySelector('[data-trigger]'); this.content = this.querySelector('[data-content]'); this.bindEscapeKey = this.hasAttribute('data-bind-escape-key'); this.bindClickOutside = this.hasAttribute('data-bind-click-outside'); if (!this.trigger setupA11y() // Add ARIA props/state to button. // Handle constructor() event listeners. handleEvent(e) // 1. Toggle visibility of content. // 2. Toggle ARIA expanded state on button. // Handle event listeners which are not part of this Web Component. connectedCallback() document.addEventListener('keyup', (e) => // Handle ESC key. ); document.addEventListener('click', (e) => // Handle clicking outside. ); disconnectedCallback() // Remove event listeners.

Are you wondering about those event listeners? The first one is defined in the constructor() function, while the rest are in the connectedCallback() function. Hawk Ticehurst explains the rationale much more eloquently than I can.

This JavaScript isn’t required for the web component to “work” but it does sprinkle in some nice functionality, not to mention accessibility considerations, to help with the progressive enhancement that allows the <button> to show and hide the content. For example, JavaScript injects the appropriate aria-expanded and aria-controls attributes enabling those who rely on screen readers to understand the button’s purpose.

That’s the progressive enhancement piece to this example.

For simplicity, I have not written any additional CSS for this component. The styling you see is simply inherited from existing global scope or component styles (e.g., typography and button).

However, the next example does have some extra scoped CSS.

Example 2: <webui-tabs>

That first example lays out the progressive enhancement benefits of HTML Web Components. Another benefit we get is that CSS styles are encapsulated, which is a fancy way of saying the CSS doesn’t leak out of the component. The styles are scoped purely to the web component and those styles will not conflict with other styles applied to the current page.

Let’s turn to a second example, this time demonstrating the style encapsulating powers of web components and how they support progressive enhancement in user experiences. We’ll be using a tabbed component for organizing content in “panels” that are revealed when a panel’s corresponding tab is clicked — the same sort of thing you’ll find in many component libraries.

Live demo

Starting with the HTML structure:

<webui-tabs> <div data-tablist> <a href="#tab1" data-tab>Tab 1</a> <a href="#tab2" data-tab>Tab 2</a> <a href="#tab3" data-tab>Tab 3</a> </div> <div id="tab1" data-tabpanel> <p>1 - Lorem ipsum dolor sit amet consectetur.</p> </div> <div id="tab2" data-tabpanel> <p>2 - Lorem ipsum dolor sit amet consectetur.</p> </div> <div id="tab3" data-tabpanel> <p>3 - Lorem ipsum dolor sit amet consectetur.</p> </div> </webui-tabs>

You get the idea: three links styled as tabs that, when clicked, open a tab panel holding content. Note that each [data-tab] in the tab list targets an anchor link matching a tab panel ID, e.g., #tab1, #tab2, etc.

We’ll look at the style encapsulation stuff first since we didn’t go there in the last example. Let’s say the CSS is organized like this:

webui-tabs [data-tablist] /* Default styles without JavaScript */ [data-tab] /* Default styles without JavaScript */ [role='tablist'] /* Style role added by JavaScript */ [role='tab'] /* Style role added by JavaScript */ [role='tabpanel'] /* Style role added by JavaScript */

See what’s happening here? We have two style rules — [data-tablist] and [data-tab] — that contain the web component’s default styles. In other words, these styles are there regardless of whether JavaScript loads or not. Meanwhile, the other three style rules are selectors that are injected into the component as long as JavaScript is enabled and supported. This way, the last three style rules are only applied if JavaScript plops the **role** attribute on those elements in the HTML. Right there, we’re already supplying a touch of progressive enhancement by setting styles only when JavasScript is needed.

All these styles are fully encapsulated, or scoped, to the <webui-tabs> web component. There is no “leakage” so to speak that would bleed into the styles of other web components, or even to anything else on the page within the global scope. We can even choose to forego classnames, complex selectors, and methodologies like BEM in favour of simple descendent selectors for the component’s children, allowing us to write styles more declaratively on semantic elements.

Quickly: “Light” DOM versus Shadow DOM

For most web projects, I generally prefer to bundle CSS (including the web component Sass partials) into a single CSS file so that the component’s default styles are available in the global scope, even if the JavaScript doesn’t execute.

However, it is possible to import a stylesheet via JavaScript that is only consumed by this web component if JavaScript is available:

import styles from './styles.css'; class WebUITabs extends HTMLElement constructor() super(); this.adoptedStyleSheets = [styles]; customElements.define('webui-tabs', WebUITabs);

Alternatively, we could inject a <style> tag containing the component’s styles instead:

class WebUITabs extends HTMLElement connectedCallback() this.attachShadow( mode: 'open' ); // Required for JavaScript access this.shadowRoot.innerHTML = ` <style> <!-- styles go here --> </style> // etc. `; customElements.define('webui-tabs', WebUITabs);

Whichever method you choose, these styles are scoped directly to the web component, preventing component styles from leaking out, but allowing global styles to be inherited.

Now consider this simple example. Everything we write in between the component’s opening and closing tags is considered part of the “Light” DOM.

<my-web-component> <!-- This is Light DOM --> <div> <p>Some content... styles are inherited from the global scope</p> </div> ----------- Shadow DOM Boundary ------------- | <!-- Anything injected by JavaScript --> | --------------------------------------------- </my-web-component>

Dave Rupert has an excellent write-up that makes it really easy to see how external styles are able to “pierce” the Shadow DOM and select an element in the Light DOM. Notice how the <button> element that is written in between the custom element’s tags receives the button selector’s styles in the global CSS, while the <button> injected via JavaScript is left untouched.

If we want to style the Shadow DOM <button> we’d have to do that with internal styles like the examples above for importing a stylesheet or injecting an inline <style> block.

That doesn’t mean that all CSS style properties are blocked by the Shadow DOM. In fact, Dave outlines 37 properties that web components inherit, mostly along the lines of text, list, and table formatting.

Progressively enhance the tabbed component with JavaScript

Even though this second example is more about style encapsulation, it’s still a good opportunity to see the progressive enhancement we get practically for free from web components. Let’s step into the JavaScript now so we can see how we can support progressive enhancement. The full code is quite lengthy, so I’ve abbreviated things a bit to help make the points a little clearer.

default class WebUITabs extends HTMLElement constructor() this.tabpanels.length === 0 createTabs() // 1. Hide all tabpanels initially. // 2. Add ARIA props/state to tabs & tabpanels. bindClickEvent(e) e.preventDefault(); // Show clicked tab and update ARIA props/state. bindKeyboardEvent(e, index) e.preventDefault(); // Handle keyboard ARROW/HOME/END keys. customElements.define('webui-tabs', WebUITabs);

The JavaScript injects ARIA roles, states, and props to the tabs and content blocks for screen reader users, as well as extra keyboard bindings so we can navigate between tabs with the keyboard; for example, the TAB key is reserved for accessing the component’s active tab and any focusable content inside the active tabpanel, and the tabs can be traversed with the ARROW keys. So, if JavaScript fails to load, the default experience is still an accessible one where the tabs still anchor link to their respective panels, and those panels naturally stack vertically, one on top of the other.

And if JavaScript is enabled and supported? We get an enhanced experience, complete with updated accessibility considerations.

Example 3: <webui-ajax-loader>

Live demo

This final example differs from the previous two in that it is entirely generated by JavaScript, and uses the Shadow DOM. This is because it is only used to indicate a “loading” state for Ajax requests, and is therefore only needed when JavaScript is enabled.

The HTML markup is just the opening and closing component tags:

<webui-ajax-loader></webui-ajax-loader>

The simplified JavaScript structure:

default class WebUIAjaxLoader extends HTMLElement constructor() super(); const shadow = this.attachShadow( mode: 'open' ); shadow.innerHTML = ` <svg role="img" part="svg"> <title>loading</title> <circle cx="50" cy="50" r="47" /> </svg> `; customElements.define('webui-ajax-loader',WebUIAjaxLoader);

Notice right out of the gate that everything in between the <webui-ajax-loader> tags is injected with JavaScript, meaning it’s all in the Shadow DOM, encapsulated from other scripts and styles not directly bundled with the component.

But also notice the part attribute that’s set on the <svg> element. Here’s where we’ll zoom in:

<svg role="img" part="svg"> <!-- etc. --> </svg>

That’s yet another way we have to style the custom element: named parts. Now we can style that SVG from outside of the template literal we used to establish the element. There’s a ::part pseudo-selector to make that happen:

webui-ajax-loader::part(svg) // Shadow DOM styles for the SVG...

And here’s something cool: that selector can access CSS custom properties, whether they are scoped globally or locally to the element.

webui-ajax-loader --fill: orangered; webui-ajax-loader::part(svg) fill: var(--fill);

As far as progressive enhancement goes, JavaScript supplies all of the HTML. That means the loader is only rendered if JavaScript is enabled and supported. And when it is, the SVG is added, complete with an accessible title and all.

Wrapping up

That’s it for the examples! What I hope is that you now have the same sort of epiphany that I had when reading Jeremy Keith’s post: HTML Web Components are an HTML-first feature.

Of course, JavaScript does play a big role, but only as big as needed. Need more encapsulation? Want to sprinkle in some UX goodness when a visitor’s browser supports it? That’s what JavaScript is for and that’s what makes HTML Web Components such a great addition to the web platform — they rely on vanilla web languages to do what they were designed to do all along, and without leaning too heavily on one or the other.

[unholyverse]

MYSPACE 1.0 THEME REFRESH (originally by conkersradfurday, refreshed by unholyverse)

live previews: 1, 2 / download (pastebin)

hi! i've been using this old theme for years now because other myspace themes don't hit the same, but i've been tweaking a lot of it for personal use. i think it's been long enough since this theme has been abandoned that i can upload something that can handle itself better on modern tumblr.

main features

asks are formatted to look like myspace comments. fun!

four custom links

myspace buttons to follow, message, or block the blog owner

a bunch of info spaces so the world can know what you're about

extra font options

functional search bar (but this is tumblr so...semi functional?)

that web 2.0 ugly goodness

other features + info below the cut

new features

friend space - ever wanna show off your friends? now you can with the friend space to show off your top 8 9 friends on your blog. don't have enough friends? no worries, you can always toggle it off

image space - wanna put a bunch of blinkies somewhere? you'll need to have a bit of html and css knowledge for it, but you can go into the code and add as many images as you'd like. just look for the section and start pasting those images. it's a little tedious but tbh that's just the authentic myspace experience isn't it? but if that's not your thing, you can also toggle it off too.

tweaked/deleted features

had to delete the music player :( sorry but it used flash and i'm not really sure how to make a music player in javascript yet

added username input because it was annoying me that your title could be your name and it didn't make sense in most cases

deleted infinite scroll because the script was super outdated

added the ability to change the "online now!" gif. the original gif will always be in the defaults of the code.

changed the text post header font to verdana because it was impact and you could not fucking read that and it wasn't accurate to a myspace bulletin anyways

deleted the feature that force showed all the pages you made on your blog. so annoying. it will look a little weird if you have asks/submissions deactivated, but i doubt many of you using the theme will have them closed anyways

changed the dead links to redirect to the actual myspace site

extra recommended add-ons

scm music player: a customizable music player with tons of different skins and tons of songs you're able to add

unblue polls by @glenthemes: what it says basically; allows you to customize the colors of tumblr polls on your blog

cursors-4u.com: i love these dinky little cursors they're so fun. great if you really wanna lean into the 2000s aspect of the theme

cursor sparkles: what else is there to say about this they're just fun

notes

i plan on updating the theme semi-regularly if bugs are brought up and stuff (which you can tell me through my inbox)

tip: if your sidebar photo and your quote and info aren't aligning well, try using as a line break in longer sections of text or changing the sidebar photo size from 200px to 180px

hopefully i can work on extra tweaks as time goes on (such as figuring out how to add a footer image to videos, toggle tags, etc)

don't repost/claim as your own because it already isn't mine in the first place

like/reblog if you use!

update log

added a tags toggle + tweaked the video post sizes

made the "is in your extended network" status customizable to add different text. feel free to tell the world how many gas station boner pills you took

added an official theme link

[fahrni]

Saturday Morning Coffee

Good morning from Charlottesville, Virginia! ☕️

It’s been a fun week at work. I’ve been fixing bugs here and there. For some reason I enjoy this type of work. I spent a decent amount of time looking at memory graphs for object retentions problems and fixed a couple of good ones this week. That always feels great!

As for Stream for Mac, I started off the week in a bit of a funk but thanks to some amazing Mac devs I was put back on the right path. Stream for Mac development is moving forward once again. Fingers crossed I can keep up the momentum. 🤞🏼

Nikita Prokopov A.K.A. Tonsky

So all this time I was living under impression that, for example, if the average web page size is 3 MB, then JavaScript bundle should be around 1 MB. Surely content should still take the majority, no?

Some of the examples Nikita gives seem ridiculous. It makes me wonder if backend processing that spits out pure HTML will ever become a thing again?

Harry Cheadle • Eater, Seattle

But Tony Delivers doesn’t need to be anything bigger than it already is, which is one guy on a bike showing up to deliver food, probably smiling, probably asking how you’re doing, a bolt of disarming kindness in a city that even before we all got addicted to screens was known for being standoffish. That seems worth $5.

Tony has become a Seattle hero! I can’t believe he’s able to survive on $5 deliveries but bravo for making your own little niche!

Nish Tahir

I’ve been learning more about common attacks that appear in my Nginx logs to learn more about what happens beyond the log entries.

Nish is geekin’ out again. I wish I had his brain. The things I could accomplish! 🧠

Gunnar Anzinger

Also, do not worry at this time about acquiring the resources to build the house itself. Your first priority is to develop detailed plans and specifications. Once I approve these plans, however, I would expect the house to be under roof within 48 hours.

This piece is ridiculous in all the best ways. The paragraph I chose to feature really hit home. Yes, yes, take your time. We need it in two days. 🤣

Claire Elise Thompson • grist

If you like the idea of a perpetual three-day weekend, you might be one of a growing cadre that supports the concept of degrowth: a school of thought aimed at shrinking economies and moving away from GDP growth as a metric of success, while instead emphasizing universal basic services and social well-being.

With the rise of AI companies believe they can replace us with software for many types of work.

I think that’s cool! Let’s replace workers and figure out a way to allow folks to do whatever they want and still receive a paycheck. Like, perhaps, Universal Basic Income, Single Payer health care, and free university for everyone! Of course the rich people won’t like that idea.

Trust me when I say I could find plenty of things to work on.

Michael Szczepanik

It’s time for the NATIVE mobile development to end.

I don’t agree. I’ve been working on a project that involves React Native and I see the value in it, but that doesn’t mean native development should go away. Your mileage may vary. For me it’s native or bust for my personal projects.

Mike Elgan • Computerworld

More to the point: Most companies cannot show actual monetary benefits from RTO mandates. But most employees can show actual and significant monetary costs from RTO mandates.

This is an interesting take on the cost to employees to return to work. I’ve never thought about it in those terms. For me it’s always been about the flexibility working remotely gives me. I save between 40-60 minutes a day by not commuting, I can have afternoon coffee with my wife, and if I need to work late it’s so much easier to stomach because I’m already home.

If WillowTree asked us all to return to the office full time, I would. I just prefer working from home.

Jacob Phillips • Evening Standard

The Kremlin has said it will use its “entire strategic arsenal” and fire nuclear missiles at London, Washington, Berlin and Kyiv if it is made to give up the areas of Ukraine it has invaded.

We need to get our act together and get more aid to Ukraine. The GOP loves their orange American Dictator who, in turn, loves Putin so they’re keeping aid from Ukraine. What happened to all those Patriotic Republicans with their flags and love of all things military? They’re too cowardly to stand up to Trump. It’s really shameful.

Chris Evangelista • /Film

Stephen King Hates The Only Movie He Ever Directed

I liked Maximum Overdrive for what it was. It’s a popcorn movie. Get your popcorn, soda, find your seat, and sit back to watch the mayhem unfold. It delivered and I had no idea Stephen King directed it.

[captainmdhridoyhossain-blog]

[ad_1] Reactive X has revolutionized the way modern developers think about building apps it allows us to treat all data as a stream as it unfolds through the dimension of time in this lesson I'm going to cover about 25 different ways you can use our XJS so you have a solid Foundation to use it in your own projects for this tutorial I've just created a basic HTML page and imported the rxjs script from a CDN in the head of that page then we'll write all of our custom code in this lesson J's file and import that in the body of the page then Inside lesson Jas I'm creating a helper function that will just append the results from an observable to the browser on the right side here so when you see me use the print function it's to add the values to the browser here on the right the first thing we're going to Talk about is the observable and I think the easiest way to think about it is just an array that gets built over time and you can loop over this array in the dimension of time by subscribing to it the first thing we're gonna do is create an observable from scratch We do this by calling our X dot observable create and then create takes a observer function where we can define what the observable sends to the subscriber to send values you call observer next with the value you want to send and that value can be anything it Could be a string and object or whatever you want then to make the observable start emitting values you call subscribe on it in this case we'll take each value and just print it to the screen if we refresh our page you can see we get hello world print it to the screen so That's pretty cool but we don't normally need to create observables manually like this let's say we wanted to create an observable from click events in the Dom we can call observable from event pass at the document and the event we want to observe in this case clicks so just like Before we subscribe to it but at this time we'll console.log it just to show the full event object each time we click the page we get the mouse event logged along with all of its associated data if you work with asynchronous JavaScript you're probably used to working with Promises and we can convert a promise directly into an observable so here we're just creating a promise with a timeout that resolves after one second the idea here is to simulate an API call or some other asynchronous operation to convert this promise to an observable we just call observable from promise and Pass it the promise this is extremely useful when you're working with a JavaScript library that's built on promises you can also convert the observable back to a promise by calling to promise on it so when we subscribe to this observable we get a one-second delay and then it prints Resolved on the page we can also create a timer by calling observable timer with the amount of milliseconds we want to wind it up for to start the timer we just call subscribe on it and then it will emit a value once the timer runs out so we refresh the page and one Second later our timer runs out if we want a timer that keeps repeating we can use an interval which emits a value after the specified time frame so every 1000 milliseconds we'll get a new value emitted in this case here we'll print out a date with the number of seconds in The minute to show how this works we reload the page and then every second we get a new value emitted from the observable now I'm going to show you one last way to create an observable there's actually more ways than this but I think this covers the basics for now so we'll Do observable of which allows us to pass any static value we want to be observable so we'll go ahead and pass it a string and array a number a boolean and an object this example shows how any type of data can be a stream which is an Important concept to keep in mind when building reactive software the next concept will look at is hot versus cold observables a cold observable is basically just an

observable where the data is created inside of it so this means it won't actually create the underlying data until something subscribes to it inside this observable I'm just generating a random number and then I'll create two different subscribers and you might intuitively think that they should get the same value but what happens is the random number gets generated once the subscription starts so each subscriber gets a different number that's how you know you're working with a cold Observable but you can make an observable hot by simply building that value outside of the observable itself so here we set the random number outside the observable and then pass it in as a variable reload the page and then we'll see both subscribers get the same random number that technically makes our Observable hot but there is a way to do this without decoupling the data from the observable itself so we'll put the random number back in the observable then will create a new hot observable by calling publish on the cold observable this tells it only to emit data once we Called a corresponding connect method on it so we'll build the subscriptions and at this point nothing will happen then call connect on the hot observable and that will trigger these subscriptions to emit data and this time it'll be shared between the two of them and we can Verify this by reloading the page and they should get the same random number the next thing you should know is how to complete an observable when the observable has reached the end of its life cycle it will send a completed signal we can see this with a timer Using the finally operator which will run the code once the observable is completed in this case it will be completed after one second so we subscribe and then we get the all done signal back however there are other observables that won't complete automatically and in some cases this can Result in memory leaks if it's a very data-intensive stream here we have an interval which doesn't complete on its own so what we do is subscribe to it first then set a timeout for three seconds and call unsubscribe this manually forces the observable to send the complete signal there's also more Clever ways to do this which we're going to see a little bit later in the lesson now we're going to look at a whole bunch of rxjs operators starting with map map allows you to transform the emitted value based on some underlying logic in this case we created an observable of Some numbers and we're going to transform them to their logarithm so when we subscribe instead of getting the actual numbers we get the log of that number a more practical example for app developers is when you send an API request that responds in JSON you need to convert the JSON string to JavaScript So what you can do is use the map operator to run json.parse on that string from the API then the observable will you met JavaScript objects that you can actually use in your app the next operator we're going to look at is do this will allow us to execute code Without affecting the underlying observable so we create observable of a couple strings and then we'll print out their names as they first appear then we'll transform them to uppercase and then we'll print them again when we actually run this code you can see that it gives us a glimpse into the Observable data at any given point in time so here we see the value and the upper case value now let's take a look at filter this does pretty much what you'd expect you give it a condition and only values meeting that condition make it through so here we Have an observable of a bunch of positive and negative numbers and we'll filter it to only show the positive numbers so only value is greater than or equal to zero will be displayed and we reload the page and we only see the positive numbers if we flip greater than To less than then we get only the negative numbers displayed using this same example I'm going to show you the first and last

operator the first operator will just take the very first element from the observable in this case the first element is negative three so That's what we see here on the screen we can also do the inverse of this with the last operator and negative two is the last element so we'll see it updated to negative two now let's take a look at D balance and throttle these two operators Allow you to deal with events that you met way more values than you actually need the mousemove event is a perfect example in the Dom so we'll subscribe to the mouse event and then we'll print the type of event here on the screen let's first do this without any throttling or Debouncing you can see it only takes about two seconds to get hundreds of events printed here on the screen we can use throttle to get the very first event and then set a delay before it starts emitting any other events in this case we'll use the throttle time helper and Pass it 1000 milliseconds so now if we mouse over the screen we'll get the first event and then it will wait at least one second before sending any additional events debounce does almost the same exact thing but instead of giving us the first event it gives us The last event so first we mouse over and there's a delay then after that delay it will emit the most recent event debounce is especially useful when you want to make sure the user is stopped doing something such as typing in an autocomplete form or something similar Now we're going to move on to the scan operator this one seems confusing at first but it's actually very simple we're going to do this in the context of a video game so first we're gonna subscribe to the click events in the browser and then for each click we're Gonna assign a random number that's going to represent the score for that click then we'll use the do operator to print that score on the screen and then will you scan to keep a running total of the high score which is just the combined score up all the clicks so scan is just Keeping a running total of each emitted value from the observable it works just like the array reduced function and vanilla JavaScript so we'll go ahead and print out the high score here and we should see it get increasingly larger with each additional click so on that First click the high score and the click score are the same and then the high score gets increasingly larger with each additional click now let's move on to switch map this operator is especially useful when you have one observable that you need a value from before you can get A second observable in this example we have an observable of clicks but we actually don't care about the click data we want to start an interval timer after each click so on the first click the interval should start and then when we get a new click it'll reset the interval back to zero So we'll go ahead and click the page and then we'll let the interval count up to 6 and then click again and it'll reset back to zero switch map is commonly used in app development when you have an observable of say a user ID and then you need that User ID first before querying a database for that users data the next operator is take until this one allows us to complete an observable based on the value of another observable so here we have an interval and a timer the interval is going to emit values every 500 milliseconds until the timer runs Out after 2 seconds this is a clever way to unsubscribe from data without actually having to call unsubscribe on the observable itself so here we get the first few emitted values then the timer runs out and so it logs complete a closely related operator is take while This one will tell the observable to emit values until a certain condition turns true in this example we have a collection of names and we want to stop the observable once it reaches the name of dugg in other words we want it to take values while the name does not Equal done then we'll use the finally operator to verify that

the observable completed successfully so when we run this in the browser we can see we only get the values that came before Doug now let's look at a few ways we can can observables starting with zip zip is Something that might be useful if you have two observables that are the same length and connected in some kind of way so here we have observables yin and yang and we're going to combine them with zip which will combine them into arrays based on their index position in the Observable so peanut butter will be matched with jelly wine with cheese rainbows with unicorns another way to merge observables is with fork join this one will wait for both of the observables to complete and then it will combine the last two values together so I'm going to put a delay on the yang Observable then we'll use the fork join operator to combine them just like zip but at this time we should see a two-second delay and then only the last two values rainbows and unicorns should be emitted this operator is useful if you have a bunch of related API calls And you want to wait for all of them to resolve before sending any data through to the UI now we're going to look at catch for handling errors in this example I create a new observable from scratch but in the middle of it I throw An error when we get errors in the real world we want to be able to catch them and then do some error handling in this case we'll use the catch operator to complete the observable and just print out the error so notice that we get the first three values in the observable but The very last one doesn't get emitted overall the idea is very similar to how promises work in JavaScript we also have a useful retry operator that will rerun the observable as many times as we want when an error is occurred so right after catch we can add retry and in this case We'll retry it twice when we run it this time we'll get the same sequence of events but they'll happen three times the initial run plus the two retries so that's all the operators I'm gonna cover for today there's tons more in rxjs but I think these are some of the most Useful and powerful ones that you'll find we just have one more topic to cover and that's the rxjs subject a subject is just an observable with a few extra bonus features it has the ability to emit new data to its subscribers by acting as a proxy to some other data Source this will make more sense after the next couple samples so here we have a plain observable and we're going to convert it to a subject when we subscribe to it it emits the values just like a normal observable would but the real benefit of Subject is to be able to call next on it so what we do is create a new subject and then we'll create us a couple of subscriptions to it and then we can just call subject next with some value that's not something you can do on a normal Observable then we'll set another next call inside of a timeout so the main benefit of a subject is being able to broadcast new values to subscribers without having to rely on some source data to build on this topic we're gonna look at one last thing and that's Multicast it's used to send values to multiple subscribers but not any related side effects so we create a data source that is the click events happening in the DOM and then we use the do operator to print do one time this is an example of a side effect imagine we had a Hundred subscribers it would run this code for every single one a bomb so if you had a hundred clicks and a hundred subscribers this code would run 10,000 times well we actually want is for it to only run on the 100 clicks coming from the source observable we can do this by Calling multicast on the original observable and have it return a new subject then we can add a couple of subscriptions to the subject then lastly we need to call connect on that subject when we start clicking in the Dom we'll see that we get the values sent to the Subscribers and the side effect only runs once

even though there's multiple subscribers this could be highly beneficial if you have multiple subscribers to a single data source that is running some sort of side effect that's it for my rxjs QuickStart if this video helped you please like and Subscribe and if you want to get the full source code and additional commentary head over to angular firebase com thanks for watching and I'll see you next time [ad_2] #RxJS #Quick #Start #Practical #Examples For More Interesting Article Visit : https://mycyberbase.com/