How You Might Build a Modern Day Webring
Strategy

How You Might Build a Modern Day Webring


I’m sure different people picture different things when they think about webrings, so let me clarify what I picture. I see an element on a website that:

  1. Signifies this site is part of a webring
  2. Allows you to move to the next or previous site of the webring
  3. Maybe has other functionality like going to a “random” site or seeing the complete list

But then another major thing:

  1. Site owners don’t have to do much. They just plop (it?) on the site and a functional webring UI is there.

So like this:

A Calvin & Hobbes webring UI that comes up all the time when you search the web about webrings

How did it used to work? You know what? I have no idea. My guess is that it was an ancient <frameset><frame /></frameset> situation, but this stuff is before my time a bit. How might we do this today?

Well, we could use an <iframe>, I guess. That’s what sites like YouTube do when they give “embed code” as an HTML snippet. Sites like Twitter and CodePen give you a <div> (or whatever semantic HTML) and a <script>, so that there can be fallback content and the script enhances it into an <iframe>. An <iframe> might be fine, as it asks very little of the site owner, but they are known to be fairly bad for performance. It’s a whole document inside another document, after all. Plus, they don’t offer much by the way of customization. You get what you get.

Another problem with an iframe is that… how would it know what site it is currently embedded on? Maybe a URL parameter? Maybe a postMessage from the parent page? Not super clean if you ask me.

I think a Web Component might be the way to go here, as long as we’re thinking modern. We could make a custom element like <webring-*>. Let’s do that, and make it for CSS sites specifically. That’ll give us the opportunity to send in the current site with an attribute, like this:

<webring-css site="http://css-tricks.com">
  This is gonna boot itself up into webring in a minute.
</webring-css>

That solves the technology choice. Now we need to figure out the global place to store the data. Because, well, a webring needs to be able to be updated. Sites need to be able to be added and removed from the webring without the other sites on the webring needing to do anything.

For fairly simple data like this, a JSON file on GitHub seems to be a perfectly modern choice. Let’s do that.

Now everyone can see all the sites in the webring in a fairly readable fashion. Plus, they could submit Pull Requests against it to add/remove sites (feel free).

Getting that data from our web component is a fetch away:

fetch(`https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`)
  .then((response) => response.json())
  .then((sites) => {
     // Got the data.
  });

We’ll fire that off when our web component mounts. Let’s scaffold that…

const DATA_FOR_WEBRING = `https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`;

const template = document.createElement("template");
template.innerHTML = `
<style>
  /* styles */
</style>

<div class="webring">
  <!-- content -->
</div>`;

class WebRing extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    fetch(DATA_FOR_WEBRING)
      .then((response) => response.json())
      .then((sites) => {
        // update template with data
      });
  }
}

window.customElements.define("webring-css", WebRing);

The rest of this isn’t so terribly interesting that I feel like we need to go through it step by step. I’ll just blog-sketch it for you:

  1. Pull the attribute off the web component so we can see what the current site is
  2. Match the current site in the data
  3. Build out Next, Previous, and Random links from the data in a template
  4. Update the HTML in the template

And voilà!

Could you do a lot more with this, like error handling, better design, and better everything?

Yes.



Source link

Image won
Strategy

Image won’t go in section


Image won't go in section

submitted by /u/Jinkroll
[comments]



Source link

Can Someone give me advice on colors please?
Strategy

Can Someone give me advice on colors please?


Can Someone give me advice on colors please?

https://preview.redd.it/htnf5z9o0f061.png?width=1356&format=png&auto=webp&s=5c4ae6af60ce61ebeff64bcbcf816976b2e91d56

Are the colors ok on my registration page? Especially on the image. I can't seem to find a right color for the text. Any help will be greatly appreciated. Thank you.

submitted by /u/Shinhosuck1973
[comments]



Source link

Moving Forward With .NET Events, Event-Handlers, and CustomE...
Strategy

Moving Forward With .NET Events, Event-Handlers, and CustomE…


Introduction

In the previous post on Events, we talked about how we are surrounded by events and how useful they can be when writing loosely coupled code. We saw how we can define events, raise, and finally handle events. If you haven’t already, then I will suggest reading that post for the background and then the topics in this post will be easier to follow.

In this post, we will continue our journey and move forward with learning more about Events implementation in .NET. One of the common requirements when raising events is how can we pass data along with event notifications to event-handlers. A very common way to do it using Custom EventArgs.

Custom EventArgs

The EventArgs class is used in the signature of .NET Events. When we need to pass custom data along then EventArgs class can be extended. The following code shows that we can create a POCO style class for our custom Event data.

.NET Includes a generic EventHandler<T> class which we can use for custom EventArgs.

Raising Event With Custom EventArgs

I’ve updated the code for raising the event in the Printer class and you can see it is not much different besides the fact that we are now populating data for Custom event when raising the event.

Here is the updated code for your reference:

Handling CustomEventArgs

The mechanism for Handling customEventArgs is almost same when dealing with built-in EventArgs. I added a new class called UI and introduce a method Show which uses our custom EventArgs WorkPerformedEventArgs as shown below:

Wiring Event With EventHandler

Again, this part is also not changed and the following code shows how we now have wired the printingCompleted event with event-handler:

With all this being in place, I execute the code and the following result shows the output of execution. You will see in the output that we have now information about the CustomEventArgs data as well on the console window.

Summary

We can pass event-data to event-handlers very easily by using generic EventHandler<T> and a C# POCO class which drives from the EventArgs. I hope this will help you to think about the places in your code where you can use this functionality and it will make your code easier to understand and extend. You can see the source-code on this URL (online C# compiler) Till next time, happy coding.



Source link

r/graphic_design - Software advice? - need to play with dynamic anatomy model
Strategy

Software advice? – need to play with dynamic anatomy model :…


Hi there,

I’m looking for some graphic software where I could upload some anatomy model and move body parts around? I don’t need anything sophisticated but something that would allow any ways to move the body and make some postures.

As reference I am using there is a graphic app for anatomy with human body and i don’t know if there is a way to upload the visual into some app or make it just a picture and add twitches inside the graphic app.

Any suggestions appreciated!! My experience level isn’t very high

I am the most struggle with finding some suitable software app.

r/graphic_design - Software advice? - need to play with dynamic anatomy model



Source link

mediastack | CSS-Tricks
Strategy

mediastack | CSS-Tricks


Have you ever had the idea for a website or new app that involved showing news content? You don’t have to create content yourself to have the right to build an innovative news reading experience. I remember when Flipboard came out. They didn’t (and still don’t) actually produce content — they just made a fantastic experience for reading it, and did very well with that.

Where do you get that news content? mediastack. You’re going to need a great API for delivering news content, and that’s exactly what mediastack is.

You sign up and get an API key. It’s free to use for 500 requests/month, which is enough to prototype what you’re building, particularly if you’re being smart about caching responses. Then, when you need more requests, it scales up very reasonably in price.

Gotta love a good API that does exactly what you need it to do, so you can get to work.

Another thing I like about mediastack is that it’s from apilayer, who have been doing APIs like this for a long time. Their whole business is about providing purpose-built APIs for tasks that developers need to do. I like it when companies are incentivized to do a good job for you because you’re very directly their customer and using their product for exactly what it’s for.



Source link