#d3 rewrite designs

[descendantofthesparrow]

D3 screenshot redraw- Hades Lair

-

when u see your dad's 'bachelor' pad for the first time and it's just a hole.

featuring brown hair/eye'd Mal!(aka no magic Mal)

[dritashoppe]

Nodebox network data

#Nodebox network data software#

#Nodebox network data license#

#Nodebox network data license#

The dagre-d3 library acts as a front-end to Dagre, providing actual rendering using D3.ĭash Cytoscape : a Component Library for Dash aimed at facilitating network visualization in Python, wrapped around Cytoscape.js.ĭracula Graph library : a JavaScript library released under the MIT License to display and layout interactive connected graphs and networks, along with various related algorithms from the field of graph theory. D3 combines visualization components and a data-driven approach to DOM manipulation.ĭagre-d3 : a JavaScript library released under the MIT License to lay out directed graphs on the client-side. It includes graph theory algorithms, from BFS to PageRank.ĭ3.JS : a JavaScript library for manipulating documents based on data using HTML, SVG, and CSS. It is used in commercial projects and open-source projects in production and designed for users first, for both front-facing app use-cases and developer use-cases. The core layout is based on a complete rewrite in JavaScript of the C++ LibCola library.Ĭytoscape.js : a graph library written in pure JS with a permissive open source license (MIT) for the core Cytoscape.js library and all first-party extensions. It works well with libraries like D3.js, svg.js, and Cytoscape.js. It visualizes data in a circular layout.Ĭola.JS : an open-source JavaScript library released under the MIT License for arranging your HTML5 documents and diagrams using constraint-based optimization techniques.

#Nodebox network data software#

It is an open source library available under GPLv3 License developed in the Helikar Lab.Ĭircos : a software package in Perl for visualizing data and information. You can use it with canvas, SVG, or even positioned HTML elements.ĬcNetViz : a lightweight JavaScript library for large network graphs visualization using WebGL. Arbor provides a force-directed layout algorithm plus abstractions for graph organization and screen refresh handling, leaving the actual screen-drawing to you. Most customization of the application takes place by overriding default configurations, rather than direct implementation via JavaScript.Īrbor.JS : a JavaScript graph visualization library released under MIT license using web workers and jQuery. The latest version of AfterGlow 1.6.5 was released on 07/08/13.Īlchemy.js : a JavaScript graph drawing application built in d3 to get up and running with graph visualization applications. It reads CSV files and converts them into a Graph. Graph visualization of the "Cosmic Web" dataset, study of the network of galaxies List of graph visualization librariesĪfterGlow : a script written in Perl that assists with the visualization of log data.

[bemused-writer]

VNC Anime Episode 1

And so the first anime episode came out! I'd say it was actually pretty faithful to the manga; adapting an 88 page first chapter into a singular episode is no easy feat. XD Mochizuki really was making them hefty at first. With that in mind, I figured I'd just talk about some of my first impressions and the few changes they made.

The opening is the obvious first change. The episode itself covers all the same info we learn early on, just in a different order. The manga opted to focus on true names and Teacher's warning to Noé, which ties in more directly to Amelia's plight and Noé's circumstances later on, while the anime chose to open with the vampire Vanitas, which is sort of like the driving force behind people's attitudes towards the blue moon. Will this shift be a big deal later on? It seems unlikely; both give you information you'll need.

I do have to say I hope we get more of this particular art style. The creepy fairytale vibe is so perfect...

La Baleine itself looks amazing as well. In the manga I was always struck by how cool the design was (thanks to Ryou Yamaguchi who designed it), but seeing it animated is something else and made me really think about how if that thing fell from the sky there would be some massive problems. 8D Truly, the only thing keeping that in the sky must be astermite.

Later on, when Amelia destroys all those lights, I realized I'd always misinterpreted that scene. I'd always assumed the broken lights were from Vanitas breaking through the window and, in his usual dramatic fashion, broke everything else, too. But no, it looks like it was indeed Amelia! My guess is that since she's losing control of herself she's also accidentally rewriting the world formula as well.

Okay, I'm going to nitpick the translation just a bit here, but in the manga they go for the more literal "What are you?" which is what Vanitas is really asking. That, to me, seems pertinent, because asking who Noé is is one thing, but asking what he is reveals that Vanitas is used to dealing with all manner of people, several of whom aren't human at all.

And on the note of translating things, I think I'll detour slightly to talk about Vanitas's voice type because I've seen a couple people say he sounds too rough. I get this because the English translation (both versions) tend to make Vanitas sound kind of elegant. However, the fact of the matter is that Vanitas has always been speaking very rough Japanese and isn't very elegant at all. 8D That's a difficult thing to capture in a translation since it's not like he's cursing like a sailor or anything that would make it easy to portray; it's just a style of speech. Anyway, what I'm getting at is that them casting a "rough" sort of voice for Vanitas in the anime actually fits in with how he's been speaking in Japanese.

You know a character has pulled some stuff when one of your favorite moments is them being chucked across the room. XD Ah, Vanitas, if you took a few seconds to explain things maybe you wouldn't be in the middle of a fight right now... However, the anime definitely played up how extreme of a hit this was. Don't get me wrong, Noé sent him flying in the manga, too, but in that he only slammed into the bench rather than through a statue and everything else. While I can appreciate the added drama, it does raise the question of what Vanitas's spine is made out of for it not to have snapped. (^^)"

Wow, Naenia is even creepier animated. :D Her voice is basically exactly what I thought it would be with that delightfully creepy reverb. I'm loving it. And I also like that they kept this manga panel and just added color.

And this is the moment that will have many of you mistakenly thinking Vanitas is a noble-minded fellow, but don't be deceived! He has about 10 million issues and at least half of those are aimed at women. 8D The rest are aimed at the entirety of vampire and humankind. That's not to say Vanitas is without redeeming qualities--he is still one of the heroes of this show--but he's not as straightforwardly wholesome as Noé.

Dante was actually quite a highlight of this episode for me even though he was barely in it. I love the voice they chose for him and he's also the only person who knows what Vanitas is actually like, so he has the most natural reaction to him. XD Everyone is amazed and impressed by what Vanitas has done--as well they should be because it is impressive--but Dante has to work with him. He knows.

This was probably my favorite part of the whole episode. The combination of the music and visuals really emphasized the nostalgic vibe of this moment. It really feels like a beginning and and end. I'm so glad we got to see this animated.

Teacher! They deprived us of seeing him at the start, but we got this shot in the flashback. I still find it strange that they made the estate more... estate-like rather than opening up into a forest like the manga, but it's still effective. We also get to see the silhouette of Louis. ): Truly, everything about Noé's statement, saying he finds the blue moon beautiful, is something we see challenged throughout the series in subtle ways. Can he find something beautiful when it's the source of so much pain? The series isn't over, so I guess we'll have to wait and see.

I will say that the end of the episode with Vanitas's manic grin and Noé's declaration he would eventually kill him by his own hand felt a little more impactful in the manga for me, but it was still very good in the anime as well. I did like that the anime included more people in the "what we gained and lost" section, such as Roland and Loki.

Anyway, the anime is off to a fantastic start! Ahh, the fact that we'll get an episode weekly is so exciting; definitely looking forward to the next. (^^)

[dani-luminae]

how do you picture Audrey, Lia and Ben becoming a triad (outside of a D3 AU)? Would Lia and Ben already be a couple and want to invite Audrey in? (That's nice because I'd imagine Ben just being like "I already hurt her once what if she doesn't want anything to do with me?" and Lia's very confident that it will work out.) Or do they all get together at the same time? Would Ben and Audrey have a different reaction to polyamory than Lia (Auradon vs Solasar cultural differences)?

Two scenarios:

The one you describe, where Ben and Lia are already a couple and want to invite Audrey in as well, even with Ben’s concern (which is super sweet! I love it.)

There’s also another one where, after Audrey and Lia meet in Rewrite the Stars, Lia is fascinated by Audrey the same way she’s fascinated with Ben, and eventually, the three of them get together at the same time, agreeing that there’s a mutual attraction between the three of them. 

Concerning the different reactions, 

Solasarians, specifically Ithanaks like Lia, don’t really bat an eye at polyamory. While polyamory is certainly less frequent than a typical couple, it’s not seen as lesser or unequal in any way. She loves Ben and Audrey and sees no reason why she can’t be with them, if they love her. (Aside from the whole “can’t love non-Solasarians” thing; this is assuming that this takes place during the time of RtS and Lia still has no designation.)

However, I think that Ben and Audrey would certainly face some expectations in Auradon, from the people and the court, to enter a typical couple instead of a triad. Especially if it’s Lia, as a lot of Auradon probably still doesn’t know what to think of her or how. But Ben and Audrey love her and include her whether the court and traditions like it or not.

Oh great I’ve fallen down a Ben/Audrey/Lia shipping hole

[digitaldreams0801]

Adventure Rewrite Idea Dump (Again)

Listen I want to talk about my OCs but I don’t have the energy to actually write right now since I feel like literal ass so it’s random fact time! Warning: random mashing of English and Japanese names for Digimon ahead. 

First off, I’m planning on giving one Armor evolution to all of the kids. Regardless of Adventure or 02 affiliation, all of them are getting one Armor evolution. Only Pegasmon and Nefertimon are staying the same while all the others get reworked/redesigned or new stuff entirely. The 02 kids get Armors first while the Adventure kids are later on. 

Also, there aren’t going to be any D3′s needed to open the gate between the worlds. All of the kids are going to have the same original model Digivice from Adventure. For colors at higher levels of evolution on the others it’ll go as follows: Daisuke - Gold, Miyako - Turquoise, Iori - White, Ken - Black, Meiko - Magenta.

Everyone is going to get to have a Jogress partner, but not in the same way that 02 used them. Instead, it’ll be more like Omnimon: an evolution that takes place after the highest level is obtained. Pairs will go as follows: Taichi/Yamato, Sora/Mimi, Koshiro/Jou, Daisuke/Ken, Miyako/Hikari, Iori/Takeru.

As of now, my plan for evolution is going to have Agumon and Gabumon go Mega in the original Adventure while Omnimon shows up during Our War Game. Veemon and Wormmon will go Mega in 02 and Jogress during Revenge of Diaboromon. All other Megas will appear during the first half Tri (which will be rewritten entirely to include the 02 kids) while the second half has the remaining four Jogress pairs. 

Since Jogress is being handled differently, the 02 partners get to go all the way to Mega on their own. The evolution lines are below: Veemon - ExVeemon - Paildramon - Magnamon Hawkmon - Aquilamon - Silphymon - Valkyrimon Armadillomon - Ankylomon - ??? - ??? Wormmon - Stingmon - JewelBeemon - GrandisKuwagamon

The only Jogress evolution that will remain from canon is Imperialdramon. The others will be redesigned entirely due to either not fitting as much (Shakkoumon) or being used already (Silphymon). As for Armadillomon’s evolutions, I’m going to have to design those myself. No matter how much I search, there’s never anything that properly fits in with the theme of Ankylomon, so I’ll just make up mons myself. Fight me on it. 

For the 02 kids, they have the Crests of Loyalty, Passion, Integrity, and Kindness for Daisuke, Miyako, Iori, and Ken respectively. Meiko will also get a Crest, though Meicoomon is special in the way that she has no Jogress partner and will act on her own. In fact, Meicoomon is being handled completely differently than in canon and is not used as a villain because I said so. Tri is being handled completely differently, so nearly everything about the plot is different now. Again, fight me. 

Hurricane Landing is going to be reworked so that it fits into canon. In it, Willis is not going to be designated specifically as a Chosen Child. Instead, he found Gummymon and Kokomon by pure accident, and they bonded to him on their own. Humans naturally have the power to make Digimon evolve at an advanced speed; a Digivice simply refines that power and makes it less unpredictable. Willis is partnered to them in a unique way since has no Digivice but is still able to make them evolve pretty reliably. 

On a similar note, I’m not using the international Chosen. I was never the biggest fan of them, so I’m just cutting them out. I’ll handle things differently during the World Tour segment (assuming it even remains in the final draft) to compensate. 

Mimi won’t be moving away to America either. I feel like it would be best for the sake of the plot if I kept her in Japan, so she’s sticking around there with the rest of the squad. 

I mentioned before that Tri is getting a complete overhaul, right? The first step is axing King Drasil. Yeah. Oops. Instead, I’m going to create a much more direct rival to Homeostasis. For now, let’s call them Havoc (which is a placeholder in case I wind up coming up with something better).

Havoc existed in the times before Homeostasis was created. In between the birth of the Digital World and the arrival of the Harmonious Ones, Havoc seemed to rule over the Digital World from afar. They created Apocalymon as a way of manifesting their chaotic whims, causing a reign of terror over the Digital World. In an unprecedented course of events, Apocalymon caused a severe distortion in the Digital World that caused time to flow faster than on Earth. Apocalymon’s existence caused a rift between the Digital World and Earth as well, and that portal pulled in the original group of six kids in 1980 (Daigo, Maki, Hiroaki, Haruhiko, Kaya, and Chisane). Their partners eventually evolved to become the Harmonious Ones, and they sealed away Apocalymon in the process, though time remained sped up. Homeostasis was born as a result of the Harmonious Ones coming to existence. 

Havoc was mostly left to linger in the shadows, forced back by the arrival of Homeostasis. The Order led by Homeostasis developed Digivices and Crests for twelve children based on manifestations from the original six. Another distortion caused by an escape attempt from Apocalymon opened a gate to Earth where the Greymon and Parrotmon fight took place in 1995. That selected eight of the twelve children, and when disaster struck and the Order was destroyed, the eight were called upon, prompting the events of Adventure to play out. 

During the attack by Myotismon in 1999, Daisuke, Iori, and Ken all witnessed events related to the Digital World. While they were not the only witnesses of these events, they caught Homeostasis’ eye for fitting three of the four traits. This left only Passion lacking in a host, though it found one when Miyako watched the fight between Omnimon and Diaboromon the following year, making her the final child of the group to be Chosen. 

Meiko was not a Chosen under Homeostasis. Instead, Havoc was the one who selected her. After the fall of Apocalymon, Havoc tried to concoct a further plan to usurp Homeostasis and take over the Digital World, and they created Meicoomon. By imitating the power of the Digivices seen up to that point (which was only known to evolve Digimon up to Mega), Havoc created another Digivice, the one that would later come to be used by Meiko. Since Armor and Jogress capabilities hadn’t been seen yet, her echo of a Digivice lacked both of those powers. She was given the Crest of Darkness, and Havoc planned for Meicoomon to evolve into another world-breaking monster on par with Apocalymon. During the events of this AU’s version of Tri, Meiko purifies the Crest into the Crest of Balance, and Meicoomon doesn’t slip into her destructive ways, instead finding a place as Rasielmon. 

As for the original Chosen, they split up after their original adventure. Hiroaki and Haruhiko grew distant from the rest of the group while Daigo and Maki went on to attend school together. Kaya and Chisane (both of whom are my OCs; fight me if that’s a problem okay) became romantic partners. All of them went on to live regular lives, most of them in the Odaiba area. Kaya and Chisane moved out to Tottori while the others stayed in Odaiba. When Digimon started to rise to prominence after the 1999 war with Myotismon, Daigo, Maki, and Haruhiko came to work together as Digimon researchers. Hiroaki remained on his own since he had other work at the TV station. 

As for Kaya and Chisane, they established a small restaurant in Tottori. They left Odaiba without a word once they were old enough, tying the knot and living alone while owning and running their cafe. Chisane couldn’t stand the city life due to the noise and crowds, and Kaya wanted to follow her. They avoided much of busy life, staying away from any incidents involving Digimon despite wishing to see their partners once again. 

All Crest bearers are sensitive to influence from Homeostasis, but their connection is on the lower side. Hope and Light are easily most connected due to their angelic links, though Light’s link is the strongest. Keepers of the Crest of Light can communicate with Homeostasis easily while bearers of Hope can still do it but are harder to contact. All of them are also sensitive to the balance of other worlds, but again, Hope and Light are most affected. 

Since Chisane was the original bearer of Hope and Light (all the original six kids had two Crests), her connection is so heavy that it borders on being dangerous. Being near so many Digital Gates in Odaiba can cause sickness for her at times since she has a lacking constitution and immune system. When the worlds are unbalanced, it has a horrible impact on her. To avoid any unnecessary sickness, Kaya moved with her out to Tottori where there were fewer gates. They moved not long after the Parrotmon/Greymon duel in 1995 since the sudden outburst by Apocalymon’s escape attempt sickened Chisane immediately. The destabilization of the worlds always harmed her, but that was the most prominent example of imbalance at the time, causing terrible harm. 

While the two mostly kept to themselves, Chisane was still vulnerable to being contacted by Homeostasis. She seems to speak to herself somewhat often, though this is more often than not Homeostasis asking for permission to borrow her body and mind. It was through her that Homeostasis learned more about how things were on Earth from the Digital World. 

When the Mochizuki family moved in near them, Chisane and Kaya took to avoiding them. Chisane was fine with Meiko at first, but when Havoc placed the Crest of Darkness inside her, being around Meiko for too long began to make her feel nauseous after prolonged contact. Kaya grows incredibly protective of Chisane when Meiko is nearby, coming off as hostile due to her blunt nature. 

The Digital World was created as a mix of three things: digital networks on Earth, the world of dreams shown at the end of 02 (one where everything is possible), and the Dark Ocean. The second of these two worlds is called the Dream Light. When all three of these lands came together, they spawned the Digital World. From there, lifeforms from all three lands were combined to create Digimon. Havoc emerged naturally, starting off as a virus program from Earth before mutating into something much larger and worse. 

Okay. I think I’m done. Also, I have a tag for my bullshit ranting now! You can find my AU junk under ‘Digital’s Adventure Rewrite BS’. It matches my Frontier tag, in other words. Now, I’m going to bed. It’s 3 AM, and I need to sleep. I hope you enjoyed tonight’s Tumblr tangent from Digital!

[suzanneshannon]

Designing a JavaScript Plugin System

WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too.

Plugins are a common feature of libraries and frameworks, and for a good reason: they allow developers to add functionality, in a safe, scalable way. This makes the core project more valuable, and it builds a community — all without creating an additional maintenance burden. What a great deal!

So how do you go about building a plugin system? Let’s answer that question by building one of our own, in JavaScript.

I’m using the word “plugin” but these things are sometimes called other names, like “extensions,” “add-ons,” or “modules.” Whatever you call them, the concept (and benefit) is the same.

Let’s build a plugin system

Let’s start with an example project called BetaCalc. The goal for BetaCalc is to be a minimalist JavaScript calculator that other developers can add “buttons” to. Here’s some basic code to get us started:

// The Calculator const betaCalc = {   currentValue: 0,      setValue(newValue) {     this.currentValue = newValue;     console.log(this.currentValue);   },      plus(addend) {     this.setValue(this.currentValue + addend);   },      minus(subtrahend) {     this.setValue(this.currentValue - subtrahend);   } }; 
 // Using the calculator betaCalc.setValue(3); // => 3 betaCalc.plus(3);     // => 6 betaCalc.minus(2);    // => 4

We’re defining our calculator as an object-literal to keep things simple. The calculator works by printing its result via console.log.

Functionality is really limited right now. We have a setValue method, which takes a number and displays it on the “screen.” We also have plus and minus methods, which will perform an operation on the currently displayed value.

It’s time to add more functionality. Let’s start by creating a plugin system.

The world’s smallest plugin system

We’ll start by creating a register method that other developers can use to register a plugin with BetaCalc. The job of this method is simple: take the external plugin, grab its exec function, and attach it to our calculator as a new method:

// The Calculator const betaCalc = {   // ...other calculator code up here 
   register(plugin) {     const { name, exec } = plugin;     this[name] = exec;   } };

And here’s an example plugin, which gives our calculator a “squared” button:

// Define the plugin const squaredPlugin = {   name: 'squared',   exec: function() {     this.setValue(this.currentValue * this.currentValue)   } }; 
 // Register the plugin betaCalc.register(squaredPlugin);

In many plugin systems, it’s common for plugins to have two parts:

Code to be executed

Metadata (like a name, description, version number, dependencies, etc.)

In our plugin, the exec function contains our code, and the name is our metadata. When the plugin is registered, the exec function is attached directly to our betaCalc object as a method, giving it access to BetaCalc’s this.

So now, BetaCalc has a new “squared” button, which can be called directly:

betaCalc.setValue(3); // => 3 betaCalc.plus(2);     // => 5 betaCalc.squared();   // => 25 betaCalc.squared();   // => 625

There’s a lot to like about this system. The plugin is a simple object-literal that can be passed into our function. This means that plugins can be downloaded via npm and imported as ES6 modules. Easy distribution is super important!

But our system has a few flaws.

By giving plugins access to BetaCalc’s this, they get read/write access to all of BetaCalc’s code. While this is useful for getting and setting the currentValue, it’s also dangerous. If a plugin was to redefine an internal function (like setValue), it could produce unexpected results for BetaCalc and other plugins. This violates the open-closed principle, which states that a software entity should be open for extension but closed for modification.

Also, the “squared” function works by producing side effects. That’s not uncommon in JavaScript, but it doesn’t feel great — especially when other plugins could be in there messing with the same internal state. A more functional approach would go a long way toward making our system safer and more predictable.

A better plugin architecture

Let’s take another pass at a better plugin architecture. This next example changes both the calculator and its plugin API:

// The Calculator const betaCalc = {   currentValue: 0,      setValue(value) {     this.currentValue = value;     console.log(this.currentValue);   },     core: {     'plus': (currentVal, addend) => currentVal + addend,     'minus': (currentVal, subtrahend) => currentVal - subtrahend   }, 
   plugins: {},     
   press(buttonName, newVal) {     const func = this.core[buttonName] || this.plugins[buttonName];     this.setValue(func(this.currentValue, newVal));   }, 
   register(plugin) {     const { name, exec } = plugin;     this.plugins[name] = exec;   } };    // Our Plugin const squaredPlugin = {    name: 'squared',   exec: function(currentValue) {     return currentValue * currentValue;   } }; 
 betaCalc.register(squaredPlugin); 
 // Using the calculator betaCalc.setValue(3);      // => 3 betaCalc.press('plus', 2); // => 5 betaCalc.press('squared'); // => 25 betaCalc.press('squared'); // => 625

We’ve got a few notable changes here.

First, we’ve separated the plugins from “core” calculator methods (like plus and minus), by putting them in their own plugins object. Storing our plugins in a plugin object makes our system safer. Now plugins accessing this can’t see the BetaCalc properties — they can only see properties of betaCalc.plugins.

Second, we’ve implemented a press method, which looks up the button’s function by name and then calls it. Now when we call a plugin’s exec function, we pass it the current calculator value (currentValue), and we expect it to return the new calculator value.

Essentially, this new press method converts all of our calculator buttons into pure functions. They take a value, perform an operation, and return the result. This has a lot of benefits:

It simplifies the API.

It makes testing easier (for both BetaCalc and the plugins themselves).

It reduces the dependencies of our system, making it more loosely coupled.

This new architecture is more limited than the first example, but in a good way. We’ve essentially put up guardrails for plugin authors, restricting them to only the kind of changes that we want them to make.

In fact, it might be too restrictive! Now our calculator plugins can only do operations on the currentValue. If a plugin author wanted to add advanced functionality like a “memory” button or a way to track history, they wouldn’t be able to.

Maybe that’s ok. The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have plugins.

What more could we do?

There’s a lot more we could do to improve our system.

We could add error handling to notify plugin authors if they forget to define a name or return a value. It’s good to think like a QA dev and imagine how our system could break so we can proactively handle those cases.

We could expand the scope of what a plugin can do. Currently, a BetaCalc plugin can add a button. But what if it could also register callbacks for certain lifecycle events — like when the calculator is about to display a value? Or what if there was a dedicated place for it to store a piece of state across multiple interactions? Would that open up some new use cases?

We could also expand plugin registration. What if a plugin could be registered with some initial settings? Could that make the plugins more flexible? What if a plugin author wanted to register a whole suite of buttons instead of a single one — like a “BetaCalc Statistics Pack”? What changes would be needed to support that?

Your plugin system

Both BetaCalc and its plugin system are deliberately simple. If your project is larger, then you’ll want to explore some other plugin architectures.

One good place to start is to look at existing projects for examples of successful plugin systems. For JavaScript, that could mean jQuery, Gatsby, D3, CKEditor, or others.

You may also want to be familiar with various JavaScript design patterns. (Addy Osmani has a book on the subject.)  Each pattern provides a different interface and degree of coupling, which gives you a lot of good plugin architecture options to choose from. Being aware of these options helps you better balance the needs of everyone who uses your project.

Besides the patterns themselves, there’s a lot of good software development principles you can draw on to make these kinds of decisions. I’ve mentioned a few along the way (like the open-closed principle and loose coupling), but some other relevant ones include the Law of Demeter and dependency injection.

I know it sounds like a lot, but you’ve gotta do your research. Nothing is more painful than making everyone rewrite their plugins because you needed to change the plugin architecture. It’s a quick way to lose trust and discourage people from contributing in the future.

Conclusion

Writing a good plugin architecture from scratch is difficult! You have to balance a lot of considerations to build a system that meets everyone’s needs. Is it simple enough? Powerful enough? Will it work long term?

It’s worth the effort though. Having a good plugin system helps everyone. Developers get the freedom to solve their problems. End users get a large number of opt-in features to choose from. And you get to grow an ecosystem and community around your project. It’s a win-win-win situation.

The post Designing a JavaScript Plugin System appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Designing a JavaScript Plugin System published first on https://deskbysnafu.tumblr.com/

[t-baba]

Create React App 2.0, the next Vue.js, and lots of VS Code goodies

#406 — October 5, 2018

Read on the Web

JavaScript Weekly

This past week JavaScript Weekly surpassed 150,000 subscribers. Over the past eight years it's been a pleasure to share projects, advice, and news with you, and see how JavaScript continues to grow and grow. We don't do it often, but sometimes its nice to mark such a milestone — if you're reading this I just wanted to say thanks. :-) — Peter Cooper, editor

A Beginner's Guide to JavaScript Prototypes — It’s aimed at beginners but this guide is really extensive and packed with examples, so it’s worth a skim unless you’re Kyle Simpson or something :-)

Tyler McGinnis

Plans for the Next Iteration of Vue.js — The creator of Vue.js, a popular alternative to things like React and Angular, gives a ‘brief sneak peek’ at what’s coming in the next major version of Vue, Vue 3.0.

Evan You

Accurately Locate Users By IP Address — Use our fast IP Geolocation API to reliably locate users, personalize content, analyze traffic, enrich forms, target ads, enforce GDPR compliance, perform redirections, prevent trial abuse, block certain countries and more. Get started with a free API key.

ipdata sponsor

Create React App 2.0 Released — A significant release of a project that’s had a huge effect on the adoption of React by making it easier to get a project started. Psst.. we have a React newsletter too.

Joe Haddad and Dan Abramov

The Node.js Foundation and JS Foundation Plan to Merge — Isomorphic foundations! This could also explain why the forthcoming Node+JS Interactive conference was renamed from JS Interactive recently :-)

The Linux Foundation

'Goodbye' JavaScript, Hello WebAssembly — It’s not been pushed to its full potential yet, but WebAssembly (a binary instruction format that compilers can target to run code fast in the browser) opens up a lot of potential for the Web, though, as Ed notes, JavaScript continues to have a role to play.

Ed Charbeneau

How To Build a News App with Angular 6 and Material Design — We always love a good Smashing Magazine walkthrough - this time out, it’s about building a basic news app (for both desktop and mobile) using Angular and Google’s Material Design principles.

Rachid Sakara

Awesome VS Code: A Curated List of VS Code Packages and Resources — Yep, it’s one of those ‘awesome’ lists - this time it’s a list packed with over a hundred links to themes and extensions, both language specific and general productivity ones.

Valerii Iatsko

💻 Jobs

JavaScript Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.

x-team

Mid-Level Front End Engineer @ HITRECORD (Full Time, Los Angeles) — Our small dynamic team is looking for an experienced frontend developer to help build and iterate features for an open online community for creative collaboration.

Hitrecord

Join Our Career Marketplace & Get Matched With A Job You Love — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

Building a Complex Financial Chart with D3 and d3fc — Reproducing the sort of graph you might see on Yahoo Finance, say.

Colin Eberhardt

Using React/JSX as a Server-Side Templating Language — Using React function components to render your website’s skeleton index.html

Kent C. Dodds

Barcode Detection in a Web Worker using Comlink — Comlink is a library that makes WebWorkers more transparent to work with.

Paul Kinlan

5 Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18

Twilio sponsor

What's New with Components as of Ember 3.4

David Tang

Working with Babel 7 and Webpack — Goes through setting up a project with Webpack and Babel 7, highlighting the basics of Babel plus some cool features of what it can do with your code.

Jan D'Hollander

Professor Frisby's Mostly Adequate Guide to Functional Programming — If you’ve got some spare time at the weekend and want to get into some FP with JS, this is a good read.

Lonsdorf, Benkort, Takle, et al.

How to Build Serverless Vue Applications with AWS Amplify — We also have a serverless newsletter if that’s your kinda thing.

Nader Dabit

A Very Basic Introduction to Custom Elements

James Robb

🔧 Code and Tools

Husky: Git Hooks Made Easy — Prevent bad commits, pushes, etc. by running tests or more automatically. 1.0, now just out, is a complete rewrite in TypeScript.

Typicode

The TDD Experience That Gives You In-Line Test Results as You Type — Wallaby catches errors in your tests and displays the results of expressions in your editor, in real-time.

Wallaby.js sponsor

Sal: Lightweight Scroll Animation Library — Coming in at just 2.8KB, this vanilla JS library is performance focused with no dependencies. GitHub repo.

Mirosław Ciastek

Highground.js: ES6-Focused Unit Testing — Highground is currently in beta and presents an alternative fast and easy way to test ES6 apps.

Daniel Stern

ekill: A Chrome Extension to 'Nuke' Annoying Elements on a Web Page — Could be useful in development as well.

René Hansen

Automated Visual Testing and Reviews on Each Commit — Replace time-consuming manual QA to catch visual UI bugs automatically and start deploying faster.

Percy sponsor

Wax: Experimental, JSX-compatible Renderer for the Web Audio API — An interesting idea that brings a JSX-style approach for managing audio nodes.

James Wright

imgToAscii: A JavaScript Image to ASCII Converter — Runs in the browser, too.

Victor Ribeiro

Fanray: A Blog System Built with ASP.NET Core and Vue.js — Runs on .NET Core 2.1 and SQL Server.

Ray Fan

by via JavaScript Weekly https://ift.tt/2E9Jvyy

[mbaljeetsingh]

Essential JavaScript Libraries and Frameworks You Should Know About

JavaScript has been around for 20+ years, and it's one of those languages that never stop evolving. The language has been experiencing a fast-paced growth recently that makes me wonder whether the modern front-end JavaScript technologies that are well known today will be relevant a couple of years later. 

Nevertheless, it's important to be ahead of the game by working with the latest tools and frameworks for a better development workflow. This article explores various JavaScript libraries, frameworks, and tools that you should consider learning right now.

Introduction

The JavaScript environment has grown huge. It has its own ecosystem of libraries, frameworks, tools, package managers and new languages that compile down to JavaScript. Interestingly, npm, which is the de facto package manager for JavaScript, is also the largest software registry in the world. Here is an excerpt from a post published on Linux.com back in January 2017.

At over 350,000 packages, the npm registry contains more than double the next most populated package registry (which is the Apache Maven repository). In fact, it is currently the largest package registry in the world.

Fast forward eight months, and there are currently about 500,000 packages in the npm registry. That's a massive growth compared to other package repositories. 

Source: ModuleCounts.com

As a front-end JavaScript developer, it's important to keep up with the modern JavaScript tools and libraries. When a technology becomes popular, demand for it is high, which in turn means more coding jobs that pay the highest salary in the industry. So I've assembled a list of the popular JavaScript technologies that I think you should be aware of. 

Libraries

A library is a reusable piece of code that offers certain functionality. It is a collection of functions, objects, and classes that you can use in your application. A library abstracts different layers so that you don't have to be concerned about their implementation details. 

You can call a library function and pass it some parameters, and the library executes it and returns the control back to you. However, it doesn't place any structural constraints that restrict how you use the library. Popular JavaScript libraries include:

React

React is a JavaScript library built by the developers of Facebook and Instagram. React was voted as the most-loved technology among developers, according to the Stack Overflow Survey 2017. React also holds the credit for being the most popular JavaScript project based on GitHub star count. 

So why is React getting all the attention? With React, it is possible to create an interactive UI using a declarative approach where you can control the state of the application by saying "the view should look like this". It uses a component-based model where the components are reusable UI elements and each component has its own state.

React uses a Virtual DOM so that you don't have to be concerned about directly manipulating the DOM. Other notable features of React include one-way data flow, optional JSX syntax, and a command-line tool for creating a React project with zero build configuration. 

If you believe that React is the next best thing and would like to learn React, check out our React Crash Course for Beginners tutorial series.

jQuery

jQuery is a library that made JavaScript more approachable and DOM manipulation easier than before. jQuery's gentle learning curve and easy syntax gave rise to a generation of new client-side developers. A few years back, jQuery was considered a solid solution for building robust websites with cross-browser support. jQuery's core features such as DOM manipulation based on CSS selectors, event handling, and making AJAX calls fueled its popularity. 

However, things have changed, and the JavaScript environment has steadily evolved. Some of jQuery's features have been incorporated into the newer ECMAScript specification. Moreover, the new libraries and frameworks in use today have a native way of binding the DOM, and hence plain DOM manipulation techniques are not required anymore. jQuery's popularity is on the decline, but I don't see it disappearing anytime soon.

D3: Data-Driven Documents

D3 (or D3.js) is a powerful JavaScript library for producing interactive visualizations using web standards such as SVG, HTML, and CSS. Unlike other visualization libraries, D3 offers better control over the final visual result. 

D3 works by binding the data to the DOM and then making the transformation to the document. It also has an ecosystem of its own, which consists of plugins and libraries that extend its basic functionality. The library has been around since 2011, and it has tons of documentation and tutorials that can help you get started. 

If you are looking to create simple visualizations without investing too much time in it, you should check out Chart.js. We have an introductory series on Chart.js that covers most of the visualizations that you can create with Chart.js

Frameworks

A framework has an architecture that dictates the flow of control in your application. The framework describes the skeleton and tells you how everything should be organized. The basic functionality required to get the application up and running is also provided to you. Moreover, you are bound to follow the framework's design principles and patterns. The difference between a framework and library is that you call a library, whereas the framework calls you. 

A framework often comprises of many libraries and has a higher level of abstraction. Functionality such as event handling, making AJAX calls, template and data binding, and testing are built into the framework.  

Angular

AngularJS was once the most popular JavaScript technology among front-end developers. It was backed by Google and a community of individuals and corporations. Despite the popularity, AngularJS had its own share of flaws. The Angular team spent two years working on a newer version of Angular, which was finally released in September 2016. 

The Angular 2 release was a ground-up rewrite of AngularJS. Some of the features of Angular 2 include:

TypeScript over JavaScript as the default language

component-based architecture

improved performance on both mobile and web platforms. 

better tooling and scaffolding options

However, upgrading from Angular 1.x to Angular 2 is expensive because Angular 2 is an entirely different beast. That's one of the reasons why Angular 2 hasn't experienced the same adoption rate as that of its predecessor. But Angular and AngularJS continue to be among the most commonly used technologies according to Stack Overflow (2017). The Angular project has about 28,000 stars on GitHub.

Vue.js

Vue.js is a lightweight JavaScript framework that has been trending this year. It is the most popular JavaScript framework on GitHub in terms of the GitHub star count. Vue claims to be a less opinionated framework and thus easy for developers to catch up with. Vue's HTML-based template syntax binds the rendered DOM to the instance data. 

The framework offers a React-like experience with its Virtual DOM and reusable components that you can use to create both widgets and entire web applications. Moreover, you can also use the JSX syntax to write the render functions directly.  When the state changes, Vue.js uses a reactivity system to determine what has changed and rerenders the minimal number of components. Vue.js also supports the integration of other libraries into the framework without much hassle.

Ember.js

Ember.js is a front-end framework based on the  Model-View-ViewModel (MVVM) pattern. It follows the convention over configuration approach which is popular among server-side side frameworks like Ruby on Rails and Laravel. Ember.js incorporates common idioms and best practices into the framework so that you can get an application up and running without much effort. 

The Ember stack usually comprises:

Ember CLI: Provides basic scaffolding options and supports hundreds of add-ons.

Ember Data: A data persistence library that can be configured to work with any server back end.

Ember Inspector: An extension available for Chrome and Firefox.

Liquid Fire:  An add-on for transitions and animations.

Tools

A tool is a collection of routines that help you in the development process. Unlike a library, a tool usually executes a task on the client code. It takes your code as input, performs a task on it, and then returns an output. The commonly used tools include transpilers and build tools, asset minifiers, module bundlers, and scaffolding tools. 

Tools: General-Purpose Task Runners

General-purpose task runners are the tools used to automate certain repetitive tasks. The popular general-purpose task runners include:

Gulp 

Gulp is a JavaScript toolkit used as a task runner and as a build system in web development. Compilation, code minification, image optimization, unit testing, linting etc. are repetitive tasks that should be automated. Gulp makes the process of writing tasks easier, even for people who are less familiar with JavaScript. 

Gulp uses pipelines to stream the data from one plugin to another, and the final result is outputted to a destination folder. Gulp performs better compared to Grunt because it doesn't create temporary files for storing intermediate results, which results in fewer I/O calls.

Grunt

Grunt is a task runner and an automation tool for JavaScript. Grunt has a command-line interface that lets you run custom tasks defined in a file called a Gruntfile. Grunt has thousands of plugins to choose from, which should cover most of the common repetitive tasks that you'd encounter. With Grunt, you can run all the tasks under a single command, making your life easier.

npm 

Gulp and Grunt require you to spend time learning and mastering a new tool, which takes time. Introducing additional dependencies into your project can be avoided by choosing an alternative that is already bundled with Node.js. Although npm is better known as a package manager, npm scripts can be used to perform the bulk of the abovementioned tasks. 

Tools: Testing

Testing is the process of validating and verifying that the application meets the expected business and technical requirements. The Test-Driven Development approach also aids in discovering bugs and therefore should be treated as an integral part of the modern front-end development stack.

Jest

Jest is a relatively new testing framework authored by Facebook and is well-received by the React community. There is a common misconception that Jest is specifically designed to work with React; however, according to the Jest Documentation:

Although Jest may be considered React-specific test runner, in fact it is a universal testing platform, with the ability to adapt to any JavaScript library or framework. You can use Jest to test any JavaScript code.

The biggest advantage of using Jest over other test suites is that you require zero or minimal configuration to start writing tests. The framework has a built-in assertion library and supports the use of mock functions or spies.

Jest has a feature called snapshot testing that lets you ensure that the UI of the application doesn't change unexpectedly. The developers at Facebook and other contributors have been pouring a lot of work into this project recently, so it wouldn't be a surprise if Jest turns out to be the most popular testing framework for JavaScript in the years to come.

Mocha 

Mocha is a JavaScript testing framework that features browser support, async support including promises, test coverage reports, and a JavaScript API for running tests. Mocha is often paired with an assertion library such as Chai, should.js, expect.js, or better-assert because it lacks an assertion library of its own. 

Jasmine

Jasmine is a behavior-driven testing framework for JavaScript. Jasmine aims to be a browser, platform, and framework-independent test suite. Jasmine has its own assertion library called matchers that gives it a clean and easy-to-read syntax. Jasmine doesn't have a built-in test runner, and you might have to use a generic test runner like Karma instead. 

Summary

JavaScript, the language of the web, has stayed relevant since the days of its inception back in 1995. It will probably stay that way as long as browsers don't decide to ditch it for another language. Although there are a lot of other languages that compile down to JavaScript, there is no other scripting language that will replace JavaScript in the foreseeable future. Why? Because JavaScript has grown too popular to be replaced.

The language is not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato Market. 

The JavaScript environment is definitely evolving, which is evident from the current trends in web development. Older libraries and frameworks have been replaced with new technologies. jQuery, which was once the most favored JavaScript library, is experiencing a decline in terms of appeal, usage, and popularity. The new generation of front-end libraries, frameworks, and tools are gaining ground and getting universal acceptance. 

Adapting to the new trends in technology has benefits too. Coding jobs that require React have some of the highest salaries in the industry, with an average salary of $105,000 in the U.S. according to Stack Overflow (2016). So you need to continue learning and experimenting with the latest tools and frameworks to get the best out of JavaScript. 

If you think I've missed a JavaScript framework, library or tool that is worth mentioning, let me know through the comments. 

Further Reading

Modules, a Future Approach to JavaScript Libraries

Quiz: Choose the Right Front-End JavaScript Framework for Your Project

Learn Computer Science with JavaScript

6 Things That Make Yarn the Best JavaScript Package Manager 

via Envato Tuts+ Code http://ift.tt/2go1Byc

[descendantofthesparrow]

IM SO FERAL FOR THEM AH

art commissioned from @c-rose2081!!! thank you for drawing them iltaysm!!!!!

[descendantofthesparrow]

Audrey; Queen of Mean-2024 redesign

@c-rose2081

[descendantofthesparrow]

D3 screenshot redraw - the meeting

[descendantofthesparrow]

Harriyanna Hook descendants designs by Rose Sparrow

what at first was just me having some fun, turned into an early bday gift for ms @harriyanna​~!!! happy birthday!!!! this was really fun to do and i think the only thing that gave me trouble was the bread this down dress, not the dress itself but its color pallet-the top was originally a brighter pink but i felt that didn't mesh well with the rest of the designs and felt more ‘Auradon’ than vk/isle, so boop bap turned it black and the belt black too~ and aaahhh~~~ i love it all~

D2 is based on her Harriyanna Hook cosplay Harri did a while back, and D3 beyond is mostly from my Poyw Rose outfit Pinterest board cuz idk rose has a good fashion sense XD i wanted to give her a constant corset theme since her harri cosplay had that gorgeous full corset, so i gave that to her two main designs from d2, and continued than into a below the bust corset for her main d3 look, which turned into a bust only corset/top for btd~!!! 

i very much tried to give her, her very own vibe/character instead of trying to turn her into a copy of someone else, because like my Rose, i think Harri is inspired by Harry, but i didnt wanna just-copy paste his vibes onto Harri...so i hope that came across correctly lol. gave her a bitchin sword for its goin down, and her braids for d3 since i based her d2 look off the cosplay shoot, which then her hair was not in braids :p 

again, this was alot of fun and im glad i did it.

now! its off to bed, since i have work tomorrow and i would like to get up at an appropriate time so i have more free time in the morning before work.

[descendantofthesparrow]

I know you don’t like the D3 outfits but what do you think about the fits in Good to be Bad?

high key-the BEST outfits of the movie, they fit each character so well and while they dont feel like outfit outfits-they feel like clothes Evie made for the four of them to celebrate their roots

like-look at these!!! they feel very similar to their first outfits from d1!! but they're changed-new! fresh! these aren't the kids fresh from the isle anymore-they are not their parent's kids-they have grown up, come into their own, they are of the isle-but they are not only of the isle, they are of Aruadon, their loved ones, their hopes and dreams-they have pulled away from their parents and have become their own being! they take inspiration yes-like colors and edges, but they are not copies!

i firmly believe these outfits should've been our main outfits, their adventure outfits, because ahahaha FUCK the motor cross gear-that shit still looks SO BAD

[descendantofthesparrow]

Mal D3 motor bike redesign number...5? damn ive redesigned her main look alot

canon

stuff i kept-the color pallet but i heavily symplified it and took away alot of the stuff that made the design so busy, while also adding just enough to make the design intersting becuase while Mal's canon gear is super busy and has so much going on, its also suuuper bland, like stupid bland, thats one of the problems with the canon designs because while theres SO MUCH going on, the motorcross gear is also SUPER bland, like theres alot of...nothing with shapes and colors and thats it. i also let mal keep her lil flame boots but made them less heel and more of a basic platform boot that isnt so stupid high. i also kept her canon shirt she wears under the vest cuz thats not something that i ever had complaints with, its just a shirt.

my big thing for this design was-tight t-shirt and big ol pants with bit belt. im really happy with the silouette alone and really like the scales/flames/embers on mal's pants :3 i also wanted to make her a PROPER ass motorbike jacket instead of a vest and sleeves, motor bike jackets are meant to freaking protect the rider, her arms being visible defeats the fucking purpose of the damned jacket!

but-yeah, i wanted this mal to be fucking READY, no big clunky shoes/heels, no tight pants with a stupid zipper on the buttm and proper gloves, i had the idea of Mal having a braid-which i still really like so just imagine Mal wearing her hair in a braid for the d3 adventure. but yeah, Mal's worn dresses her last two big battles and whenever i redesign any of hte outfits-i have a possible rewrite in mind where Maleficent is the big bad whose mind controlling Audrey and Mal knows this so she wants to be READY and wants comfy pants instead of a skirt or super tight pants that squeak when she walks.

yeah but i was at work and just thought 'D3 MOTORBIKE MAL-TIGHT SHIRT BIG PANTS' and decided i had to draw it out, ur welcome.

[descendantofthesparrow]

I like you *gives Mal proper motor gear*

i think this is my-fourth time redesigning her d3 gear? but this time-this time! is a redesign with the same concept instead of switching it around to a different fashion/bike gear. for Rewrite its just biker punk gear, this is based around motorbike armor, which-looking around on Pinterest, with how-lowkey blank motor gear is-i will admit they did what they could with the canon designs-they still suck-but-theres not a lot to do with motor gear....EXCEPT THERE IS CUZ AHAHA LOOK UP BITCHES.

i will take the design job now thanks disney, hire me for d4 /j

[descendantofthesparrow]

idek R Mal meets C!Mal

i hate Mal’s canon outfit, her color pallet is just all over the place and makes no fucking sense, her shoes are completely off color cuz i couldn't find a proper reference for them fuck the canon designs holy shit