#i had to plug in random nodes to see if any of them worked

[cerbreus]

today has been. a work day.

[itsakpopalypse]

Jang Wooyoung/Ace (VAV)  Astrology Ask: Romantic breakdown

@excindrela requested “Hi Rael! Would you please do astrology for Ace from VAV”

A/n Of course ! I am going to assume you would like it to be the same question as the previous one’s I have done (I hope so cause that’s what I did.)

I am pretty new to the Vamp world so this is based almost ENTIRELY off the chart itself, as I am still learning!

Thank you and I hope you enjoy!!!

He pretty pretty wow

Okay first of all I’d like to note that his chart is SO Virgo and Capricorn

honestly there is a ton of earth in general and we will tlak about what that means as we go along ,it’s just an interesting fact.

his 3 big signs are 

rising scorpio , virgo sun and virgo moon

now I have had a few Idols I have looked through with this type of placement and it makes sense

Virgos are pretty perfectionist

attention to detail

workaholics

so yeah

anyway now the romance stuff

Scorpio rising

this is going to sound a bit like a broken record but I will try to make it cute

Scorpios are SEXY MYSTERIOUS COOL

or at least that is how they like to come off (inside they are emotional beans with many feelings who just want to be loved okay)

might seem a bit quiet, but they generally just don’t speak unless they have something noteworthy to say

if they do though

buckle up it’s going to be so deep 

so when you first meet he is like “Sexy cool tough guy” and you will want to unwrap that 

ask him questions that’s all it really takes. 

They are inquisitive by nature. 

if he likes you though, and it’s pretty new still, he won’t pursue it. 

it’s going to be careful thoughtful steps

that’s amplified since his sun and moon are Virgo and they do not do well with failure 

so he might pick you apart and try to figure you out like a puzzle

will ask a ton of questions that make you ponder if you even know yourself

like why do you need to know about that time that i fell out of a tree when i was 12 dude, we were talking about dinner or smth

Virgos can seem a little harsh so even if he likes you he may end up saying something that is a bit mean?

not intentionally it’s just they are basically all mothers

so it’s “worry worry worry”

and you’ll be like… it’s not gonna rain I don’t need 72 umbrellas and a rain poncho

but that’s how he would show he cared.

probably hella healthy

and organized

likes to look nice and be put together and wants to help you achieve that too

so if he is trying to impress you he may buy you some sensible item or get you food and drink if he thinks you’re neglecting your health

what a sweet man oml

probably an angel in human skin

listen, in moon, Virgo means a more intense version of the same things from the sun, but it also means he is low key  NEEDING AFFECTION

he won’t ask you for it

probably will just try to reinforce the behavior with positive encouragement if you do it

“I love it when you sit in my lap”

“It’s nice when you cuddle with me”

things like that 

but if you fall asleep on him watching a movie he will probably literally implode in an emotional breakdown

what if they are cold

should i ask someone for a blanket

they could get a neck cramp like this oh no

he is  S T R E S S E D inside

Really protective really caring really concerned

someone take the load off this poor dude

mercury in Leo, so his communication is very persuasive

If he likes you 

he is gonna FLIRT HIS ASS OFF

it may be in the very Vigo way,

but listen

compliments that might sound a little backhanded are likely his source 

and if he realized it hurt your feelings he will be very upset and SMOTHER YOU in real ones

is very honest

is fine and he knows it

like will get dressed up and you’ll be like “Wow you look handsome”

and he is like yeah. i know. what a gift I am , to you rn

you’re welcome

Venus in Virgo

I wasn’t kidding about this earthy damn chart

listen Virgos seem cold at first

but they are hugely warm hearted and care more than they wanna admit

their love language is acts of service

his confidence is not what it seems about who he is though

Virgos already are hard on themselves but 

Venus virgo means he is REALLY

going to doubt why you are with him

pls reassure him

he wants to make you floored enough to never leave 

he will try so hard

His mars is Gemini which indicates a preference for physical activity

which makes sense since Virgos need an outlet for all that nervous energy

N node is Sagittarius so he tends to be really adventurous

fun dates 

fun but still traditional

so maybe a picnic or a random beach day

he’ll have it perfectly planned but it’s a surprise for you

will probably not be  the MOST physically affectionate in initiating contact especially not in public

but

if you initiate it , he will feel like he owns the whole world

but will probably tsundere it

“Oh i see, you just have to hold my hand cause you are scared right?”

“Did you miss me that much? I suppose you can cling to me for comfort if you have to.

Do not believe him you have already melted him inside

18+ the moment you are waiting for we know it we are all sluts down here

ooof big oof

Alright listen

scorpio rising means KINKY

he wants to try so many things

probably owns a restraint set 

and maybe a plug set don’t at me

CONTROL

CONTROLING

DOM 

okay 

he has WAY too much Virgo to sub

maybe just maybe he will try it one time 

and if it’s within parameters he feels okay with he will even be okay with it on occasion

but remember

Virgos are all acts of service and with Sun, Moon, Venus, and Jupiter in Virgo??

I am praying for your pelvis

GOOD LUCK 

he has rules

he has no qualms with punishing you for breaking them

probably edges you until you are crying 

he wants to please and he WILL but you are gonna get it on his time not yours

ORAL

recieving and giving are gonna be ah-mazing and OOF the grunts while he does it

facefucking he's praising you

both ways are gonna make you Only hotter

loves to tell you what to do

likes to see you weak for him 

Wanna make him happy?

Beg.

on your knees

shit that’s hot

he will eat that shit up

and rewards will be bountiful

and he has it planned

Probably likes to watch you touch yourself

gets off on being fully clothed while you’re a mess

“Take that off too and spread your legs more”

Toys

Orgasm denial

“If you cum before I say to, you’re not allowed to cum for a week. 

aftercare is A++

has there ever been anyone better at aftercare than a Virgo?

no?

don’t think so

he had everything laid out so clean up was a snap 

and then rubbed all your sore muscles out with lotion and gentle hands

pulls you close and praises you for being so good

will feed you and give you water and probably has vitamins that are good for recovery

he wants you to be ready for the next few rounds 

A/N  I hope you enjoyed !!

again this is not really based off anything I know about him, but instead his chart itself.

I am working on your next request but today didn’t go as smoothly as I hoped, thank you for being patient!!!

Requests are open and my Ask box is always open for any rando one off questions you may have!

[ahnmakes]

devlog # 5 // hex tilemaps and pathfinding, part 4 (concept + integration of paths)

it’s the big day - we’re going to be implementing a pathfinding system, one way or another.  this is going to be a long one.

to start with, not all pathfinding is equal – some pathfinding systems excel in certain areas and struggle in others. it might be helpful to reflect before starting on what kinds of pathfinding will be suited to the different use cases i have in mind.

so, what am i using pathfinding for in the first place?

well, mainly, i’ll need it for (a) highlighting regions where the character could possibly move, showing those predictions, and (b) locating an optimal path to a chosen tile. 

in both cases, i’ll need the system to take into account different terrain costs (moving more slowly through water, mud) and heights (for example, a steep cliff face) that will limit how much the player can move in these regions.

i may also need to implement both two-layer levels (things with roofs, or where you can go under/inside) and high one-layer levels (things without any roof, but just dramatic changes in height) – this is not a primary concern, however, and i expect solutions will become more apparent as i understand my own implementation of the pathfinding.

 okay, so, now that we understand what kinds of needs there are for this game, what kinds of pathfinding systems are available?

in this introduction to a* algorithms (what i’ll be merging with another tutorial to try to craft a system that matches our needs), we find a very insightful exploration of how pathfinding works.

 the basics of each of the systems to follow is that we (as i understand it so far – you should read the tutorial, yourself, since it has really great visuals/graphs):

(1) make a “frontier” list, an expanding ring of tiles to be considered

(2) make a “visited” list that will keep track of tiles we have considered

(3) remove our starting tile from the frontier list, add it to the visited list, then add its neighbors/every touching tile that hasn’t been visited to the frontier list

(4) repeat step 3 for the next tile in the frontier list: remove it from the frontier, add it to visited, and add its neighbors to the frontier, recursively expanding the ring until we have filled all of the map area

this loop so far seems to be called “breadth first search”, an algorithm pattern that just expands and visits every tile.

 we can sharpen these algorithms further if we implement code to:

(5) keep track of where we “came from” for each tile and

(6) set a target (early exit) – do a check when visiting tiles to see if that tile is the destination tile; if so, we can exit the loop and report back “came from” to construct a path between our origin and destination

(7) introduce movement costs, numbers we define (maybe 1 for plains/neutral terrain, but 2 for water and 3 for mud), and sort our next-to-be-checked/frontier list by priority of lowest cost (meaning we’ll look for the easiest paths before the harder, more expensive ones); at this point, the pattern is often called “dijkstra’s algorithm” or “uniform cost search” (this will always return the shortest path, but might be relatively slow to find it), OR

(7b) sort the frontier list by a priority of distance, choosing to check what’s closest to the target first; called “greedy best first search” (fast, but unfortunately, this doesn’t always return the shortest path – read the introduction to understand why)

and lastly, we can:

(8) combine both priority queues, sorting our frontier by comparing both movement costs AND closeness to the goal/final tile

with step 8, we construct something that is known as a* pathfinding – the most common and seemingly most competent choice for most pathfinding needs. 

[image source here]

thus, returning to our needs, for (a) highlighting regions where the character could possibly move, showing those predictions, and (b) locating an optimal path to a chosen tile, a* seems like it can fulfill both roles.  we might find it ideal to implement a simpler dijkstra’s algorithm for (a) in order for the pathfinding to be more performant (not as computationally demanding) – why?  

because if we are showing highlighted regions for where characters can possibly move, we might choose to do so in realtime/by just hovering over a character.  with this being updated so rapidly, it might save some performance to use a system that is doing less calculating.  however, there are also other ways to approach this (such as only running the algorithm when the character is first hovered over, not constantly), so it’s just something to consider.  most likely, we will only need to run pathfinding once or twice during a player’s movement phase, meaning the computational load should be minimal.  let’s get something working and then we’ll optimise at a later point, considering ways to write more efficient code along the way!

oof that was a lot of technical info.  let’s get into writing some actual code now.  i’ll be following along with this excellent tutorial series and connecting quill’s implementation with the patterns and needs we’ve explored above.

lesgoooooooooooooooooo!

 so, one of the first things i did was create a TileType class which keeps track of .. well, tile types.  the types of terrain available in the game.  this holds a name for the terrain type, a visual prefab of the hex (different colors, materials, etc), and – soon – things like movement cost; in the future, we can easily plug in different materials or different models that more fully represent the terrain.

in addition, i implemented random ranges for terrain types, right before instantiating (putting the hexes in the world), so that there would be variation in the tiles each time they are generated (in the future, i’ll likely do this with a sort of noise to create more artistic distribution).

this automatically creates a more interesting field of tiles. (i’ve also changed our player colors to not be clashing with the new tile colors)

two things pop into my mind here.  first, it would be really nice to convert our tile types into enums somehow so that we can reference the terrain types by name OR number.  secondly, i also notice that now, if we click to toggle on a hex (when no unit is selected), we will color them black and then white, erasing their original color.  maybe we should be storing this information somewhere?  this is something to do soon, but for now, let’s keep with the task of pathfinding.

the next major task was to build a graph of nodes (tiles), something which we will not see, visually, but which the computer will need in order to understand how all the hexes relate to each other - this is also why we set up to define which tiles are neighbors, i.e. adjacent / touching each other.

ran into a pretty tough bug when we started adding neighbors to node lists; it took me about 20 minutes to realise we hadn’t initialised the nodes before adding to them (so they were showing up null).  this also happened because i am not completely understanding lists and custom classes (our nodes) and such yet, but i am excited that i knew enough about debugging and how to go through each line to identify what the problem was!

once this was sorted, this meant that (theoretically) we had a graph of nodes that contained all of our tilespace, and also were listing data for each tile’s neighbors - you can see an example of conditional/constraint code i used to identify where a neighbor should be.

from here, we are now able to move to the next steps of the pathfinding pattern: i create a list to hold frontier nodes and a list to hold nodes we have not yet explored.  then, the big boy math.

i am not going to go through explaining each line, but i assure you that i followed the steps i listed above (again, you can find very complete information on this pattern in this a* introductory tutorial):

(1) make a “frontier” list, (2) make a “visited” list, (3) remove starting tile from frontier list, add it to visited, add its unvisited neighbors to the frontier, (4) repeat step 3 for the next tile in the frontier list, recursively expanding the ring, (5) keep track of where we “came from” for each tile, and (6) set a target; upon finding, exit the loop and report a reversed “came from” list to construct a path between our origin and destination

here’s some of how i implemented that scary math and logic code, for if you like to torture yourself :’) with so much thanks to quill and their amazing channel for making these maths more accessible.

now, once i had followed quill’s tutorial through these 6 steps, customising things as needed to align with how i had already implemented the rest of my assets/scripts, i was so thrilled to check out how our pathfinding looked!

after coding for hours and being entirely ready to enjoy the fruits of my labor, i immediately got a set of errors, the kind that won’t even let the program start. :(

at first this really shook me because i thought i had followed the tutorial pretty intently, so i felt it was likely something i had chosen to change in the process.  and how would i ever find what it was, among hundreds of lines of code i barely understood? i had put in the “returned without route” debug message just for thoroughness’s sake, not at all expecting to ever see it. i felt immediately that this revealed what a fraud of a developer i am - that this was confirmation of exactly what i had feared for years, what kept me away from this project: that i was actually incompetent, not capable of this.  a lot of hurtful self talk started right away.

and i checked that right away.

i remembered that this was just one of many things i had made across the years, and because i had chosen to trust myself along the way, i would not stop trusting myself now - every change i had put into the code had been purposeful, intentional, and i could rely on that it was doing what i had asked it to do.  instead of remaining hurt, i would devote all of that frustration and disappointment and surprise to sorting this out, the same way i had with a million other projects. i explored the code for hours, placing debugs along the process to clarify exactly what was happening at each step, which things completed and which didn’t.. eventually (among numerous other debugging efforts), i put in a few lines to color a given tile’s neighbors cyan, to make it clear if all the neighbors were being calculated properly. and immediately, it was clear they weren’t – so back to the code where we define how to find neighbors.

if the neighbors aren’t being calculated properly, that’s surely something that would mess up pathfinding, right?

i went through each line of code and adjusted the logic until each of the tiles i clicked show accurate neighbors in cyan.

yay!  well, not yet.  the way i had implemented this looked accurate, visually, but the underlying code later showed that there were extra neighbors being calculated (and some still missing?) along the edges.  after another tiny meltdown and taking the night to breathe, rest, i implemented code that would tell me exactly how many neighbors each tile was reporting.  and because i didn’t understand the math’s logic fully, i decided to do what i did know how to do: count.  i went through and, checking tile to tile, explored exactly what was leading to mistaken or missing neighbors.  it turned out to be that i hadn’t appropriately accounted for the (1) edge tiles, where x == 0 or the y is max, putting the tile at the top of the map, and (2) alternating offsets depending on whether rows were even or odd, how each column of the map snakes back and forth (in other words, adding 1 to y sometimes means putting a hex on the top left, and sometimes it’s on the top right).

solved! actually, not yet.

back to the code!  i went line by line, continuing to add Debug.Log reports at any major step of the process: what’s our destination tile?  “destination tile is...”

did we send this tile and a pathfinding call?  “path call sent to map!”

did the map receive it? “path initiated in map.”

what’s our source?  our target ..?  and so on.

each step through this process helped me understand much more deeply, as i began to feel i was really grasping how and why the code worked (or didn’t work).  eventually, i thought: if the code is no longer showing any problems in logic, maybe there are typos?  so, i compared my code to quill’s open source files from their website.  scanning, scanning .. found something!

an issue in scope.  i had defined certain methods within loops, where they needed to be outside - and some were outside when they needed to be inside.  a few curly braces later..

B A D A B I N G 

B A D A B O O M

“Path complete - sent to unit.”

it works, and it makes sense why it works!

this little black line seems so small, but it represents that the game understands how to navigate basic pathfinding through the hexes -- something i have dreamed of being able to do for years.

and with that, i am going to rest in the beautiful feeling which is trusting myself, knowing there’s no reason i can’t do exactly what i dream of - that the difference between “i don’t know how to” and “i very much know how to” is just whether i’ve devoted the time or not.

in the next devlog, i’ll work on implementing movement costs/further heuristics to make the pathfinding even smarter, then tidy everything up aaaaaand.. whatever else i feel like.  until then, with love and certainty that i am indeed a developer,

ahn

[suzanneshannon]

A Community-Driven Site with Eleventy: Building the Site

In the last article, we learned what goes into planning for a community-driven site. We saw just how many considerations are needed to start accepting user submissions, using what I learned from my experience building Style Stage as an example.

Now that we’ve covered planning, let’s get to some code! Together, we’re going to develop an Eleventy setup that you can use as a starting point for your own community (or personal) site.

Article Series:

Preparing for Contributions

Building the Site (You are here!)

This article will cover:

How to initialize Eleventy and create useful develop and build scripts

Recommended setup customizations

How to define custom data and combine multiple data sources

Creating layouts with Nunjucks and Eleventy layout chaining

Deploying to Netlify

The vision

Let’s assume we want to let folks submit their dogs and cats and pit them against one another in cuteness contests.

Live demo

We’re not going to get into user voting in this article. That would be so cool (and totally possible with serverless functions) but our focus is on the pet submissions themselves. In other words, users can submit profile details for their cats and dogs. We’ll use those submissions to create a weekly battle that puts a random cat up against a random dog on the home page to duke it out over which is the most purrrfect (or woof-tastic, if you prefer).

Let’s spin up Eleventy

We’ll start by initializing a new project by running npm init on any directory you’d like, then installing Eleventy into it with:

npm install @11ty/eleventy

While it’s totally optional, I like to open up the package-json file that’s added to the directory and replace the scripts section with this:

"scripts": {   "develop": "eleventy --serve",   "build": "eleventy" },

This allows us to start developing Eleventy in a development environment (npm run develop) that includes Browsersync hot-reloading for local development. It also adds a command that compiles and builds our work (npm run build) for deployment on a production server.

If you’re thinking, “npm what?” what we’re doing is calling on Node (which is something Eleventy requires). The commands noted here are intended to be run in your preferred terminal, which may be an additional program or built-in to your code editor, like it is in VS Code.

We’ll need one more npm package, fast-glob, that will come in handy a little later for combining data. We may as well install it now:

npm install --save-dev fast-glob.

Let’s configure our directory

Eleventy allows customizing the input directory (where we work) and output directory (where our built work goes) to provide a little extra organization.

To configure this, we’ll create the eleventy.js file at the root of the project directory. Then we’ll tell Eleventy where we want our input and output directories to go. In this case, we’re going to use a src directory for the input and a public directory for the output.

module.exports = function (eleventyConfig) {   return      dir: {       input: "src",       output: "public"     },   }; };

Next, we’ll create a directory called pets where we’ll store the pets data we get from user submissions. We can even break that directory down a little further to reduce merge conflicts and clearly distinguish cat data from dog data with cat and dog subdirectories:

pets/   cats/   dogs/

What’s the data going to look like? Users will send in a JSON file that follows this schema, where each property is a data point about the pet:

{   "name": "",   "petColor": "",   "favoriteFood": "",   "favoriteToy": "",   "photoURL": "",   "ownerName": "",   "ownerTwitter": "" }

To make the submission process crystal clear for users, we can create a CONTRIBUTING.md file at the root of the project and write out the guidelines for submissions. GitHub takes the content in this file and uses displays it in the repo. This way, we can provide guidance on this schema such as a note that favoriteFood, favoriteToy, and ownerTwitte are optional fields.

A README.md file would be just as fine if you’d prefer to go that route. It’s just nice that there’s a standard file that’s meant specifically for contributions.

Notice photoURL is one of those properties. We could’ve made this a file but, for the sake of security and hosting costs, we’re going to ask for a URL instead. You may decide that you are willing to take on actual files, and that’s totally cool.

Let’s work with data

Next, we need to create a combined array of data out of the individual cat files and dog files. This will allow us to loop over them to create site pages and pick random cat and dog submissions for the weekly battles.

Eleventy allows node module.exports within the _data directory. That means we can create a function that finds all cat files and another that finds all dog files and then creates arrays out of each set. It’s like taking each cat file and merging them together to create one data set in a single JavaScript file, then doing the same with dogs.

The filename used in _data becomes the variable that holds that dataset, so we’ll add files for cats and dogs in there:

_data/   cats.js   dogs.js

The functions in each file will be nearly identical — we’re merely swapping instances of “cat” for “dog” between the two. Here’s the function for cats: 

const fastglob = require("fast-glob"); const fs = require("fs"); 
 module.exports = async () => {   // Create a "glob" of all cat json files   const catFiles = await fastglob("./src/pets/cats/*.json", {     caseSensitiveMatch: false,   }); 
   // Loop through those files and add their content to our `cats` Set   let cats = new Set();   for (let cat of catFiles) {     const catData = JSON.parse(fs.readFileSync(cat));     cats.add(catData);   } 
   // Return the cats Set of objects within an array   return [...cats]; };

Does this look scary? Never fear! I do not routinely write node either, and it’s not a required step for less complex Eleventy sites. If we had instead chosen to have contributors add to an ever growing single JSON file with _data, then this combination step wouldn’t be necessary in the first place. Again, the main reason for this step is to reduce merge conflicts by allowing for individual contributor files. It’s also the reason we added fast-glob to the mix.

Let’s output the data

This is a good time to start plugging data into the templates for our UI. In fact, go ahead and drop a few JSON files into the pets/cats and pets/dogs directories that include data for the properties so we have something to work with right out of the gate and test things.

We can go ahead and add our first Eleventy page by adding a index.njk file in the src directory. This will become the home page, and is a Nunjucks template file format.

Nunjucks is one option of many for creating templates with Eleventy. See the docs for a full list of templating options.

Let’s start by looping over our data and outputting an unordered list both for cats and dogs:

<ul>   <!-- Loop through cat data -->   </ul> 
 <ul>   <!-- Loop through dog data -->   </ul>

As a reminder, the reference to cats and dogs matches the filename in _data. Within the loop we can access the JSON keys using dot notation, as seen for cat.name, which is output as a Nunjucks template variable using double curly braces (e.g. ).

Let’s create pet profile pages

Besides lists of cats and dogs on the home page (index.njk), we also want to create individual profile pages for each pet. The loop indicated a hint at the structure we’ll use for those, which will be [pet type]/[name-slug].

The recommended way to create pages from data is via the Eleventy concept of pagination which allows chunking out data.

We’re going to create the files responsible for the pagination at the root of the src directory, but you could nest them in a custom directory, as long as it lives within src and can still be discovered by Eleventy.

src/   cats.njk   dogs.njk

Then we’ll add our pagination information as front matter, shown for cats:

--- pagination:   data: cats   alias: cat   size: 1 permalink: "/cats//" ---

The data value is the filename from _data. The alias value is optional, but is used to reference one item from the paginated array. size: 1 indicates that we’re creating one page per item of data.

Finally, in order to successfully create the page output, we need to also indicate the desired permalink structure. That’s where the alias value above comes into play, which accesses the name key from the dataset. Then we are using a built-in filter called slug that transforms a string value into a URL-friendly string (lowercasing and converting spaces to dashes, etc).

Let’s review what we have so far

Now is the time to fire up Eleventy with npm run develop. That will start the local server and show you a URL in the terminal you can use to view the project. It will show build errors in the terminal if there are any.

As long as all was successful, Eleventy will create a public directory, which should contain:

public/   cats/     cat1-name/index.html     cat2-name/index.html   dogs/     dog1-name/index.html     dog2-name/index.html   index.html

And in the browser, the index page should display one linked list of cat names and another one of linked dog names.

Let’s add data to pet profile pages

Each of the generated pages for cats and dogs is currently blank. We have data we can use to fill them in, so let’s put it to work.

Eleventy expects an _includes directory that contains layout files (“templates”) or template partials that are included in layouts.

We’ll create two layouts:

src/   _includes/     base.njk     pets.njk

The contents of base.njk will be an HTML boilerplate. The <body> element in it will include a special template tag, , where content passed into the template will render, with safe meaning it can render any HTML that is passed in versus encoding it.

Then, we can assign the homepage, index.md, to use the base.njk layout by adding the following as front matter. This should be the first thing in index.md, including the dashes:

--- layout: base.njk ---

If you check the compiled HTML in the public directory, you’ll see the output of the cat and dog loops we created are now within the <body> of the base.njk layout.

Next, we’ll add the same front matter to pets.njk to define that it will also use the base.njk layout to leverage the Eleventy concept of layout chaining. This way, the content we place in pets.njk will be wrapped by the HTML boilerplate in base.njk so we don’t have to write out that HTML each and every time.

In order to use the single pets.njk template to render both cat and dog profile data, we’ll use one of the newest Eleventy features called computed data. This will allow us to assign values from the cats and dogs data to the same template variables, as opposed to using if statements or two separate templates (one for cats and one for dogs). The benefit is, once again, to avoid redundancy.

Here’s the update needed in cats.njk, with the same update needed in dogs.njk (substituting cat with dog):

eleventyComputed:   title: ""   petColor: ""   favoriteFood: ""   favoriteToy: ""   photoURL: ""   ownerName: ""   ownerTwitter: ""

Notice that eleventyComputed defines this front matter array key and then uses the alias for accessing values in the cats dataset. Now, for example, we can just use to access a cat’s name and a dog’s name since the template variable is now the same.

We can start by dropping the following code into pets.njk to successfully load cat or dog profile data, depending on the page being viewed:

<img src="" /> <ul>   <li><strong>Name</strong>: </li>   <li><strong>Color</strong>: </li>   <li><strong>Favorite Food</strong>: </li>   <li><strong>Favorite Toy</strong>: </li>   <li><strong>Owner</strong>: </li> </ul>

The last thing we need to tie this all together is to add layout: pets.njk to the front matter in both cats.njk and dogs.njk.

With Eleventy running, you can now visit an individual pet page and see their profile:

Fancy Feast for a fancy cat. 😻

We’re not going into styling in this article, but you can head over to the sample project repo to see how CSS is included.

Let’s deploy this to production!

The site is now in a functional state and can be deployed to a hosting environment! 

As recommended earlier, Netlify is an ideal choice, particularly for a community-driven site, since it can trigger a deployment each time a submission is merged and provide a preview of the submission before sending it for review.

If you choose Netlify, you will want to push your site to a GitHub repo which you can select during the process of adding a site to your Netlify account. We’ll tell Netlify to serve from the public directory and run npm run build when new changes are merged into the main branch.

The sample site includes a netlify.toml file which has the build details and is automatically detected by Netlify in the repo, removing the need to define the details in the new site flow.

Once the initial site is added, visit Settings → Build → Deploy in Netlify. Under Deploy contexts, select “Edit” and update the selection for “Deploy Previews” to “Any pull request against your production branch / branch deploy branches.” Now, for any pull request, a preview URL will be generated with the link being made available directly in the pull request review screen.

Let’s start accepting submissions!

Before we pass Go and collect $100, it’s a good idea to revisit the first post and make sure we’re prepared to start taking user submissions. For example, we ought to add community health files to the project if they haven’t already been added. Perhaps the most important thing is to make sure a branch protection rule is in place for the main branch. This means that your approval is required prior to a pull request being merged.

Contributors will need to have a GitHub account. While this may seem like a barrier, it removes some of the anonymity. Depending on the sensitivity of the content, or the target audience, this can actually help vet (get it?) contributors.

Here’s the submission process:

Fork the website repository.

Clone the fork to a local machine or use the GitHub web interface for the remaining steps.

Create a unique .json file within src/pets/cats or src/pets/dogs that contains required data.

Commit the changes if they’re made on a clone, or save the file if it was edited in the web interface.

Open a pull request back to the main repository.

(Optional) Review the Netlify deploy preview to verify information appears as expected.

Merge the changes.

Netlify deploys the new pet to the live site.

A FAQ section is a great place to inform contributors how to create pull request. You can check out an example on Style Stage.

Let’s wrap this up…

What we have is fully functional site that accepts user contributions as submissions to the project repo. It even auto-deploys those contributions for us when they’re merged!

There are many more things we can do with a community-driven site built with Eleventy. For example:

Markdown files can be used for the content of an email newsletter sent with Buttondown. Eleventy allows mixing Markdown with Nunjucks or Liquid. So, for example, you can add a Nunjucks for loop to output the latest five pets as links that output in Markdown syntax and get picked up by Buttondown.

Auto-generated social media preview images can be made for social network link previews.

A commenting system can be added to the mix.

Netlify CMS Open Authoring can be used to let folks make submissions with an interface. Check out Chris’ great rundown of how it works.

My Meow vs. BowWow example is available for you to fork on GitHub. You can also view the live preview and, yes, you really can submit your pet to this silly site. 🙂

Best of luck creating a healthy and thriving community!

Article Series:

Preparing for Contributions

Building the Site (You are here!)

The post A Community-Driven Site with Eleventy: Building the Site appeared first on CSS-Tricks.

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

A Community-Driven Site with Eleventy: Building the Site published first on https://deskbysnafu.tumblr.com/

[mechagalaxy]

Aspis and ass kickings

“Texas” Jack Johnson climbed up the scales to his Aspis knee, then the ladder on the back of the shield ruff to get to the cockpit access of his dino-mecha.  The steps were OK, but the ladder was wrong.  Set for the inward turned wrists of the Forerunners, it marked this Aspis as being one of the true ancients, a pre human design, rather than the later reverse engineered human copy.

 Opening the hatch, again with the odd circular grip of the Forerunner design, rather than the universal emergency handle of human design, Jack eased himself into his cramped but cozy cockpit, and let the automatic sequences begin his entombment.

 The seat began to flow over his body, sealing him in the coffin like tomb of his command throne. The click of the socket accepting the snaking jack from the Aspis AI let the connection to Armadillo open inside not only his brain, but his entire body.

 I arched my back and opened my mouth to scream as our/our pain filled me, a thousand old wounds on ninety tons of killing machines flowered inside my awareness, and in that moment my oxygen tubes slid seamlessly down my throat, silencing my scream. I felt the protective shock gel fill the coffin of my command throne and felt the auxiliary plugs snake into the nodes on my arms and legs.

 The receptors flooded with information.  My body awareness first, the feeling of ponderous power was a part of it, but mostly it was the awareness, the brightness of the world.  What others see only as the great armoured trample shield of the Aspis is far more.  The crown of sensors on it drank information with greater subtlety than any other mecha I have ever piloted.  

 Each of his ponderous step sends out a pulse through the ground, and the returns from each sweep the earth for signs of mines, traps, buried sensors.  Sweeps from the front horn beat the air, sensors powerful enough to cut through the most sophisticated jamming snapped on, painting a picture thirty kilometers in all directions.  Switching to passive, the head shield drank in the taste of every active sensor sweeping back in response to his pulse.  Armidillo’s AI worked to match the combination of what the active and passive sensors were reading to paint a picture of every active machine within the active search radius.

Sensors unique to the Aspis and Novum also drank in gravometric data, reading from the distortions in the local gravity field where powerful eddies existed to indicate niode mecha engines harnessing gravity to suppress the natural neutrino emissions all reactors tended to leak. The Regis may be a better critical killer, although Armadillo critical killed on one in four shots with any weapon, one in three with his Galaxy Eyes, but no one was better at finding and identifying the enemy than I/we were.  Our front rank sent us a contact report.  I figured we would be needed.  ID on the hostile was Bernard Johnson, and there is no way the front rank is stopping him (odds are no one is, but we are going to get a nice juicy piece of his formation at least).

 The feed from the front rank was garbage, too much interference.  I configured the trample shields on my Aspis, the plow like shape ghosting in front of the armoured head frill of the Aspis.  The plow shape served to slowly deflect spill over from previous ranks, even as it bled the excess energy through its four broad legs. The Aspis ducked its head low, weathering the power of the oncoming storm.  Ahead of him a proud Regis howled its rage at the world, awaiting the chance to sink its teeth into the foe, a loud clang sounded as the Regis head was snapped half around by the thousand points of trample damage passing through the second rank currently engaged.  The trample shields of the Regis blocked perhaps half the damage.   The rounds that passed the Regis were guided away from the Aspis with over 90% efficiency.  The Regis stood proud, stood tall, and drew fire like a magnet.  His Armadillo the Aspis hunkered down and prepared to whether its own trampling as the third rank Regis finally came to grips with the enemy. Bernard Johnson’s power was not to be denied, while the Regis made kills, they died even faster.  Great jointed legs scrambled between the burning wrecks of twin Regis as a Humbaba shouldered aside his kills and opened its great bays to unleash a storm of bombardment rockets. The missiles blossomed like a flower as they launched but wove together into a flaming spearhead to punch together like a spear of flame and steel.  The spear drove deep into the ground beside Armadillo, digging deep, and blasting mud and rock off the shields and armoured hide of Armadillo.  Unlike the Regis, the Aspis did not dodge with its speed, but with deception.  The great frill of its ruff shaped its emissions signature, offsetting its position to scanning sensors.  The Humbaba drove its missile spread tightly into the center of that signature, and missed the Aspis cleanly. Screaming blue lance of a Galaxy Eye speared from the Aspis left horn to connect with the Humbaba, the burning energy was not enough to penetrate the shields of the Humbaba, yet the strange energies of the Galaxy Eye surged with the power of the Aspis amplifiers and the targeting computers had managed to synchronize the wave frequencies of the Galaxy Eye with the target shields, and the resonance allowed the energies to play over the mecha itself, and shattering explosions throughout the hull blasted three of the six legs off the Humbaba as two of the ammunition bays erupted with sympathetic explosions.  Regis were better at it, but when they were knocked silly by trample before getting off the first shot, they were not as much better at it as they should be.

I/We laughed at the glory of our kill.

 The scream of plasma cut through the din of battle, and the universe dissolved in fire.  A Notas with Bernard’s heraldry blasted flame and death that swept aside shields and flayed the armoured hide of his Aspis.

I/We screamed.

 Shuddering to ground, I hammered at the manual fire controls as my link with Armadillo was overcome by the searing, mind destroying pain of the fire that killed us. Slamming the shut downs to keep the engines from running amok when the delicate magnetic shielding that contained the sun bright fury collapsed under the lash of flame.  Dying sucked, but if you kept your head, and fought the darkness off long enough to keep your mecha from being lost beyond salvage.

 “Texas” Jack Johnson watched the last of his company fall to the Warlock champion.  He grinned, spitting to clear the blood from his mouth. Patting the console of his mecha gently he whispered.

“Ah Armadillo, we got a good bite of them first.”

 My Aspis would fight again, as would he.  Maybe next time they would take Johnson, or a random colony drop leftover from Zeon might land on him, you never know.  Good times, always good times running an Aspis in Mecha Galaxy.

 John T Mainer 2280

[teslaboltzmann]

so I went to see the doctor yesterday.

You gotta understand something about Dr. Tellin. He's not a human GP, he's a cyberneticist from Twilight Holdings. Most of his patients are augmented humans, he says he's seen fewer than 10 Pillars as patients in the past year. He himself is human. So when I went in to talk about data transfer, I thought he was going to give me the whole "always use virus protection, only transfer from partners you trust, never share private keys" spiel. It's like the sex talk, I guess.

When I asked him, though, he hummed and hawed a bit.

"Well, I don't actually think you have the drivers for that. You can receive files but I don't think you could manipulate or voluntarily send them. It's a bit of a quirk of your architecture," he replied.

"What do you mean?"

"You're primarily a neural net. Contact with conventional filesystems... well, it would be pretty prone to error. You'd need an interface to bridge the gap."

Despite the fact that this meant I could tell my boss that I had to keep using the GUI and avoid the vulnerability of being forced to make transfers at work, Dr. Tellin's words carried the somber tone of someone informing you of a crippling disability. It worried me a lot, like it meant I was defective or something.

"Could you do anything to fix that?" I asked.

"I mean, I could look into writing you some custom drivers, but I'm not sure how well they would mesh with your existing architecture. Machine learning is outside my area of expertise. ...I have a colleague who might be able to help, but she doesn't normally see patients. She works with AIs."

...

I decided to see the "specialist." He told me that her name was Dr. Sarah Liu, but to just call her Sarah. The contact info Dr. Tellin gave me only included a phone and an email, no holochat. Either she was very old-fashioned, or very paranoid. I decided to call her on the phone instead of emailing since I could have more of a conversation about my issue.

She picked up after two rings. "Hello?"

"Hello, my name is Tesla, I'm a patient of Dr. Tellin's?" I said. "I'm an Amalgam, and I was calling about--"

"Wait... Amalgam?" she cut me off. "Oh, you must be Fred Tellin's patient!" she said excitedly.

"Oh, he told you already?" I asked. It was unlike Dr. Tellin to do something like that, but if the two were close associates, I guess it could happen.

"Uhh. No, I mean, I... Not as such. Anyway, why were you calling?"

"Well, I'm having issues with file transfer. Specifically, I probably need drivers installed, and Dr. Tellin said you're probably better suited to dealing with that for me." I explained. At this point, I was a little weirded out, but specialists for these kinds of things are hard to find. It took me months just to get a referral to Dr. Tellin.

"Oh! Yeah, I could probably help with that. What's your architecture like? Object-oriented? Functional?"

"Uhh, I'm a neural net..." I'm not actually sure. Dr. Tellin never mentioned much beyond that.

"I know that, I was asking about your programming... Nevermind, I can figure that out when you get here. Knowing the Rift I bet you're something weird. When are you free to come by?"

"I mean, I have the rest of today off," I mentioned.

"Perfect! Come by in an hour or two. I'll send you coordinates. See you then."

No sooner had she hung up than I got a text with her location. She was about 20 minutes away, so I surfed the internet on my phone for a while before finding transport over there.

When the cab got to the location I programmed into it, I panicked for a second. It looked like a private dwelling, not the office building I had expected. Maybe I got the coordinates wrong? But when I checked, they were the same ones Sarah had sent me.

I saw the front door to the smell, ranch-style house swing open.

"Hey!" a woman in a ponytail called out to me as she stepped out of the door. "You must be Tesla."

"Yeah," I answered.

She came down the steps to properly greet me. She kept pausing to admire my body - looking at my fingers as we shook hands, squinting to see her reflection in my faceplate - but never said anything about it. "Come in, I'll get everything set up."

Her house was sort of old-fashioned inside even though she only seemed to be in her 30s. There was almost no post-Watershed technology inside at all except the computer systems. But boy, did those computers make up for it. She had an entire room dedicated just to this big mainframe. Racks and racks of servers everywhere, with tons of cables, and I could see the faint glow of nanites in the air. Must have cost a fortune, and I had no idea what she had to have been running on those. Probably hosting her own site? Or maybe mining cryptocurrency? There's no chits in that, though, no one legit accepts it anymore. A mystery.

Sarah directed me to a chair on one end of the room. It sat next to a user terminal, and a squid-like array of data cables splayed out on the desk next to it. They came with all different ends, male and female, some of which I didn't recognize.

"Find one that fits," she told me, indicating the cables. "Don't force it. If we need to, we can splice in."

Luckily for me, one of my ports is a standard USB. I plugged the corresponding cable into the port on my chest. It didn't feel like it was turned on yet, though.

Sarah reminds me a lot of someone I used to know, but older, and more measured.

As she activated the connection, I felt it immediately. It’s like someone else being in your head, almost. Mostly it was just poking and prodding, not changing anything. I could feel my thoughts triggering sort of semi-voluntarily as it probed my memories, but I couldn’t really make heads nor tails of the presence in my head. One minute it was one place, the next it was somewhere else, moving almost like a living thing, but very carefully. Like I said, it feels really vulnerable to have an open connection like that.

“Yeah, just as I thought. It seems like you’ve got some functional-based stuff in there. Looks like lazy evaluation too,” Sarah said, examining the output on the terminal. “Memory circuits aren’t triggering until they’re forced to. Lemme copy out some memories and try to decompile the nodes into Haskell or something. I’m gonna pick something random because I don’t know what’s what, hopefully it’s nothing embarrassing or traumatic. You’re going to re-live an episodic memory as the files are copied.”

“Okay,” I answered.

...

I was lying in the hospital bed. My skin hurt. Skin. I had skin then. I opened my eyes, which felt gritty and goopy, and bright fluorescent light forced me to close them again. It hurt. Everything hurt. There were bandages all over me. I couldn’t think straight, there was a pervasive fog in my head. Morphine, maybe?

“Are you awake?” asked a high-pitched voice. “Mr. Wright, can you hear me?” The voice was so far away. I tried to speak, but only a scratchy gurgle came out. I coughed. My ribs hurt so much. I shouldn’t have done that.

“It’s okay, Mr. Wright, don’t try to speak.” I felt warmth. The person speaking was gripping my hand. The feeling was so soothing. 

“You’ve been in an accident, Mr. Wright.”

I started to slip back into unconsciousness.

...

“Tesla, are you okay?” Sarah asked. “You made this sort of coughing sound, it was startling. Is the memory over?” She was looking at me with raised eyebrows. Did she see what I saw through the terminal...? No, of course not.

“Yes, pardon me. That was a memory I thought I had forgotten,” I answered a little shakily. 

“Really? That’s odd, usually I end up with higher-priority memories because the software goes for the ones that seem strongest and most cohesive. Graduations, weddings, things like that,” Sarah said, puzzled.

“Oh, I guess I’m just an outlier then.” Really, it wasn’t a memory I had forgotten at all, just one I wish I had.

“What was it of, if it’s not too personal?” she asked.

“Just a hospital stay I had once,” I replied.

“Interesting,” she mused. “Well, that’s gonna decompile for a few minutes, and I’m gonna get myself some tea. Do you... want anything?” she asked, staring with some uncertainty at my mouthless faceplate.

I was a little low on coolant at that point. Normally I don’t eat or drink in front of people I don’t know well, but Sarah... seemed like a good exception.

“Just some water, with a straw if you have them,” I answered.

“I don’t normally keep straws around the house, but I’ll see what I can find,” she said.

With that, she left me alone in the computer room. I could hear her moving around in the kitchen, getting out a kettle and her tea. No pre-made, just the old-fashioned kind. I never got why some people don’t like convenience.

After a couple of minutes, she came back in holding her own mug of tea and a glass of water with a swirly pink loopy straw poking out the top.

“My son used to love these when he was a kid,” she commented. “I don’t have any other straws, so I hope it’s okay.”

I chuckled. “Thank you, it’s fine.” I lifted the front of my faceplate just enough to snake the straw up to my coolant intake. I really need to install a hatch or something on there.

Sarah sat back down at her terminal and read the data output.

“Alright, all of this seems pretty normal. I’m gonna cobble together some basic filesystem drivers and try to integrate them so you can properly store and manipulate files. What kinds of specific applications do you plan on using a lot?”

“I work in marketing and do a lot of graphic design stuff,” I answered.

“Really? An Amalgam working in graphic design? Now I’ve seen everything,” she laughed. 

I wasn’t sure how I was supposed to react, so I just nodded. 

“Anyway, that means I’m going to have to do some extensive work with your visual system. I’d have to run more tests on your architecture for that, but I sort of have stuff to do later today... could you come by again in a few days?” she asked.

“Yeah, sure. Any time, really, my work schedule is pretty flexible.”

I had finished the water by this point, and I closed up my faceplate.

“Let me get that for you,” Sarah said, taking it from me. She took the water glass from me and put it in the sink in the kitchen, and then came back into the room and leaned up against the door frame.

“I’ll call you when the filesystem drivers are ready, and we can run the tests and install the program in the same visit,” she said. “Sound good?”

“Alright,” I answered. “See you then.”

She showed me to the door, and that was that.