Tumgik
#like they can deal with each other later the second v1 shows up they are a TEAM
muzzleroars · 1 year
Note
HI HI HELLO HI i go rabid whenever u post art or long posts here is a random question that popped into my head a while ago:
why do you think the v-series (or all machines in general) run off of blood? whats up with that
i am just really curious and desperate for another pov OKTHANKSBYE
aaaaaa thank you!! sometimes i feel self-conscious carrying on for so long, so it makes me really happy that people like reading those posts ;o; this is a good question too, so let me ramble some more!!
in context, blood as fuel makes sense for something like the v-series - v1 was a prototype designed to be a highly skilled war machine, so blood would presumably be plentiful during its working time, while v2 was a quickly thrown together project to recoup the losses on v1 when the war ended. not exactly. great for a peacekeeper to be blood-fueled, but it was repurposed to not use direct contact blood so i guess it's a little less intimidating than its predecessor in that regard. however, it's the ubiquity of blood as fuel that presents an interesting question - why do things like drones and streetcleaners subsist on blood too? these are machines for surveillance and pollution maintenance, what could possibly compel their engineers to make them dependent on blood as well? outside of that, we also know from the terminal entry on the nailgun that even more non-combat machines existed and fought to survive against much more prepared opponents after the fall of humanity - and while we don't know if they too were blood-powered, why else would other machines attack them? everything seems to be blood-powered, to the point where that's one of the defining characteristics of what constitutes as a machine in ultrakill.
there isn't much to go on, but i think it must speak to the society that existed before the fall, particularly the one during the war. for v1, blood is efficient because it would be plentiful on the battlefield, but how are the drones fed? where do the streetcleaners find their blood? during the war, there must have been a great disregard for life and very much discarding of it, to the point that other fuel sources were in scarce supply but blood was plentiful. human bodies were piling up while perhaps the metals for batteries had been exhausted and the energy needed to produce electricity was becoming increasingly difficult to make or prohibitively expensive. so. they need to use what they have. machines are all outfitted with blood processing equipment for efficiency's sake and now those bodies are a precious resource when there's little else to go around in war time.
but then the new peace is established. how are machines now running on blood at a time when blood should be in much lower supply? there could be several answers to this, but all are pretty speculative. perhaps much like is mentioned with the streetcleaners, a majority of machines are deactivated. they no longer need massive industries to fight a war and so humans can once again run things without the aid of tireless machines, leading many of them to be scrapped or shelved. they are then only brought back into service with the hell expeditions, where they may once again feast on the blood of husks or demons. but that doesn't quite work, since it seems things like the drones stayed active during the new peace...meaning the new peace may have been much less peaceful than it seemed. or maybe machines had other options to power them like traditional electricity, with blood now a defunct back up (and by the events of the game, their only choice with all the grids forever down). however, given that it seems highly implied via minos that machines had something to do with humanity's fall, perhaps they were starting to starve. perhaps they were being worked on as little fuel as possible or maybe some makeshift blood substitute that allows them to work but leaves them hungry, unsatisfied and exhausted. perhaps the new peace was making them increasingly obsolete and they rejected their eventual demise. BUT it's entirely unknown at this point, it's just interesting to think of the possibilities...
24 notes · View notes
littlemisssquiggles · 4 years
Note
Since we have more or less confirmation that Ruby+ Yang are going to come to blows, I had an angsty idea of Yang calling Ruby out for lying and during their argument shouts akin to, "Well maybe if you had been honest, Oscar would still be alive!" Cue Ruby looking and feeling extremely stricken and along with her other problems, starts to have guilt over what happened to Oscar (If he doesn't show up within the first few episodes)
Hiya Miki-chan. Dang! Not going to lie. I quite like this angsty concept of yours and if a scene like that does end up happening in the canon then it’ll be one of those moments where, as an audience member, I’d think it was the second time that Yang crossed the line when berating a supposed ally. 
The first time she did this for me was back in V6 when she was technically the one who initiated the group questioning Oz in respect to the lamp and his actions; practically backing him into a corner more or less in spite of his efforts to brush off the subject
If anything, if Yang were to say something like that to Ruby’s face---especially if it IS the case that the group learn of Oscar’s death early on in the season and don’t get to know that he survived until some chapters later---then it would hold the same level of emotional weight as when Qrow told Oz that meeting him was the worst luck of his life; leading to the ole soul’s retreat into solitude inside Oscar’s mind.
For Yang of all people---the older sister who has always looked out for her baby sister, practically raised her as a surrogate parental figure following their mother’s death and Ty’s depressive absence---to say such a thing to Ruby, it WILL sting hard. It would definitely be like Ozpin again with Qrow.
Think about it. Of all of our heroes, Ruby is admittedly the one who has cared and safeguarded Oscar the most. She’s always looked out for his well-being since the moment he joined their group. She’s motivated him. Protected him. So to hear from her own sister’s mouth that she is the reason for the death of another dear friend that Ruby had done her best to always protect…that WILL hurt.
And with that being the case; imagine if…history repeated itself again in this type of scenario and just as Oz retreated from the group following Qrow’s remark, what if…following an argument with Yang, Ruby runs off straight into the arms of one of Salem’s henchmen---like Tyrian Callows, who either attempts to capture her for Salem or succeed in whisking her away?
Imagine if…just like V6, Yang initiates another moment where a leading character is backed into a corner and forced to have their past decisions questioned to an emotional breaking point?
Imagine if…in your small headcanon scenario, after Yang says her outburst (probably regretting it a little bit afterwards) an awestruck Ruby turns to everyone else in the room---all her other friends---asking them if that’s how they all saw her. Almost like she was asking the others if they too blamed her for Oscar’s death and when  met with their guilty silence, Ruby takes it as sign of everyone basically turning their backs to her; much like how they turned their backs to Oz following the events of V6CH3?
And just like how Oz left following that, picture an emotional Ruby, unable to deal with the feelings that bombarded her in a moment in which the people who once looked at her as a beacon of inspiration and guidance, now looked as her as nothing more than a nuisance. A problem. The very problem who caused all of their current problems essentially---just as how it was for Oz.
And just like Oz---imagine if…Ruby leaves---using her semblance to speed away before anyone can stop her. So Ruby speeds off to be alone to a place where she could hopefully recollect herself. But in doing do, Ruby runs away right into the clutches of the enemy.
Imagine if…the consequence for Yang arguing with Ruby is Ruby being captured by the enemy? Each time the group has fought amongst themselves with their leaders basically ‘falling from grace’ in some way or another, it always lead to some dire consequence that the group is forced to handle.
For Oz, him leaving resulted in the group having to get to Atlas on their own without his guidance, resorting to felonious methods out of desperation.
For Ironwood, he ended up renouncing his alliance with their heroes; seeing them all as traitors to both him and his kingdom, thus leading to our group being forced to leave again via lawful methods (evading arrest by the Ace Ops; commandeering another Atlesian airship to escape) yet again.
So if Ruby leaves…if the group end up turning their backs on Ruby or rather; if Ruby is left feeling like an unfit leader with her own teammates turning away from her and questioning her leadership; then it could provide an opportunity for the PLOT to lead into her becoming a prisoner of Salem (granted that that’s where the CRWBY Writers wish to go).
If not then at least, I’d like for a scenario like this to force Ruby to remember what Oz had told her back in V1. Remember the episode “The Badge and the Burden” from RWBY V1? Remember how Ruby doubted her role as leader of Team RWBY (as a result of her treatment by Weiss) leading to her bringing it up to Oz---the man who chose her specifically to lead. Remember what Oz told Ruby in that episode?
“…Being a team leader isn’t just a title you carry into battle, but a badge your wear constantly. If you are not always performing at your absolute best, then what reason do you give others to follow you? You’ve been burdened with a daunting responsibility, Ruby. I advise you take some time to think about how you uphold it…”
If Ruby is backed into a corner in V8 then this could potentially provide the second time within the narrative where her leadership title---her badge--- is brought into question by one of her peers. This hasn’t happened since V1 so it would be a nice callback to the first season, not to mention a way for Ruby to think of Oz by remember the lesson and badge he imposed on her.
Oz did tell advise Ruby back in Beacon Days to take some time to think on how she plans on upholding her title as leader. Who knows? Perhaps she’ll be forced to do that again next season. Take some time away. Leave the group to go off on her own somewhere to think about how she planned on leading the group moving forward especially now that Salem has arrived?
I think something like that could be cool, don’t you think?
It’s almost like a domino effect. Oz’s deceit lead to our heroes turning their back on him as a leader. Our heroes’ deceit lead to Ironwood and their Atlesian allies turning their back on them as allies. With the wisdom of their former teacher gone and their allies from Atlas against them, the only thing left is for the group---JNR_RWBY to turn on each other---friend against friend, family against family, teammates against their own leader with the whole ordeal culminating in Ruby potentially losing the respect of her friends as their so-called leader.
With two of their former ‘leading’ figures out of the picture (meaning Oz and Ironwood), the one person the group will have to turn to now for leadership and guidance is their aforementioned ‘unquantifiable spark of hope’---Ruby. But with everything that has happened and given the fact that Ruby’s leadership is the catalyst that spiraled out of control and brought  the group to where they are now---it can only be assumed that she will be the next person to be forced to face the music soon and by possibly one of her own too.
But here’s the thing fam, if  Yang is the one to call Ruby out for her actions, I hope it’s done AFTER Ruby calls her out for her actions since may I remind you that Yang isn’t exactly an innocent party either. Even if Ruby was the first to lie to Ironwood first and started the whole deceit train, nevertheless, Yang was the one who deviated from the group (along with Blake) and informed Robyn Hill about Amity; going not just against Ironwood but also the rest of the hero team since no one else outside of Blake knew that the two had done this. So if anything, I want Ruby to call Yang out for her own deception too. Because when Ruby deceived the General, as bad as that was, at least it was something that the group decided on unanimously afterwards to keep close to the chest…until Yang and Blake broke that promise and told another outside the team. If either Yang or Blake had told Ruby about letting Robyn in on their intel, then it would’ve been fine. They could’ve even done it during RWBY’s brief meeting with Oscar (and not JNR too for some odd reason---unless those three had assigned huntsmen duty around that time). But no. Neither Yang nor Blake mentioned Robyn at all. All the more reason when it became a surprise to Ruby and Weiss when Ironwood brought it up.
Bottom-line, what I’m really trying to get at here is that apart from Ruby, Yang needs to be pulled up as well. I don’t want a repeat of what happened in V6-V7 where the show basically portrayed Ozpin as the ‘bad guy’ with everyone constantly implying that his actions was responsible for all of their problems but the minute Ruby does the same thing, it’s treated like Ruby was doing the right thing.
From my perspective, deceit is deceit no matter how you spin it. If two people lied, it doesn’t matter if one person has been deceiving their allies for centuries versus someone who only lied to an ally for a few weeks or so. Both individuals lied and since lying is wrong; both parties should face the repercussions of their actions. Not this odd angle where the deceit of one is treated as heinous while the other is portrayed as righteous. No! Is either both liars are given a pass or both are punished. In the case of Ruby and Yang potentially coming to a dispute, I hope it’s done in a way where both characters’ past actions are called into question. Even if it still ends with Ruby being hurt the most from it, I want Yang’s dirty laundry to be tossed out along with Ruby’s since there are things that Yang did that she still hasn’t told the others despite calling other characters out for the secrets they chose to hide.
It bothered me so much when Yang yelled at Ozpin for withholding the truth from the others when she herself was sitting on the identity of the Spring Maiden (her mother) who could’ve easily sealed the Lamp of Knowledge back into its respective vault if Yang hadn’t boldly told her to let her take it---allowing Salem to come after her and her group.
You do realize that the reason why the group had to take the lamp to Atlas in the first place and go through all that they did during Argus was as a result of Yang’s choices back in V5?
Seeing Yang calling out Oz for his lies and half-truth was bothersome since she isn’t exactly a golden angel in that department herself. It made her sound so hypocritical knowing what we as the audience knew. And I would feel the same way if Yang were to call Ruby out alone for putting them in trouble in General when Yang herself contributed to the turn. And in this instance, Yang’s decision would be worse than  Ruby’s because at least when Ruby lied, she did it in the presence of everyone else so the whole group knew and more or less made the decision to follow her based on her lie. But with Yang, only Blake knew what the two had done with Robyn and neither did anything to inform the rest of their team about that.
Ruby made a somewhat selfish decision to have our heroes deceive Ironwood when he was supposed to be their ally whereas Yang also made a selfish decision to reveal some of the truth to Robyn Hill when she was supposed to be their enemy without the rest of her team knowing. When I look at it this way, both sisters---Yang and Ruby--- need to be held accountable for the ramifications their choices caused to the team  and I hope their argument is about them calling each other out.
…Soo yeah. I’m all for this kind of moment Miki-chan but…if something like this happens, I hope it’s instigated by Ruby first calling out Yang leading for Yang to clap back by calling Ruby out. It could even end off as you envisioned with Yang using Oscar’s death to (regrettably) spite Ruby for her actions out of heated frustration. Bonus if this moment leads to Ruby running away to clear her head; thinking back to Ozpin’s words from Beacon---ultimately leading to her being captured by the villains. I think that could be interesting to see play out but who knows? Your thoughts?
~LittleMissSquiggles (2020)
47 notes · View notes
razorblade180 · 4 years
Text
Talking about the Bees
Over the years bmblb has given me a mix of emotions that were difficult to explain but I’ve gotten a pretty good handle on them now and I’m kinda just putting them out into the air. Bmblb is a really cute ship; Blake and Yang are aesthetically pleasing together and fans come up with really interesting things for them. Outside of that however, it is a bit of a challenge to enjoy this ship and it comes down two things really.
The first thing is really easy to explain. It suffers from what most ships in shows have where there’s plenty of pairings; it’s gotten so big that it’s constantly louder than most ships. This problem really can’t be fixed all that much unfortunately. For those who don’t get what I’m saying I’ll explain. When I watch RWBY and Blake and Yang do anything together, I instantly know social media is gonna be flooded with it. The fans are all gonna post similar things regarding that clip that everything else about that episode practically gets drowned out. I remember in V5 where countless of people were talking about how Yang was gonna react to Blake in the final episode and not about how she was gonna confront her mother. What makes it seem louder is even during a hiatus there’s no real slow down. Someone can make a post saying “Bees killedAdam” today and it most likely trend higher than an extremely well drawn picture of Oscar. No other ship does this. When major things happen to big ships like White Rose and Renora people eat up for a couple of weeks then move on; they don’t even flood the hashtags really. It’s only Bmblb that has this constant high 24/7 because of the sheer size and energy of the shippers; that’s why it’s super easy to upset the hive; not to mention the Wasps.
The second thing is a bit more controversial but these are my opinions and obviously no one is obligated to agree with me. Bmblb to me does not seemed earned. Like I said, they look cute together but their relationship is really hollow and leaves a lot to be desired in my opinion. It’s like Rooster Teeth made all the plot points but never connected them; some have dashed lines but that’s it. Yang in vol5 was so touchy over the subject of Blake that she lashed out momentarily at Weiss and Ruby. Even after talking about it with Weiss, a lot of pent of emotions were still there and could only be resolved by confronting Blake with them. At the end of the volume I held out hope that her saying they were fine was just because it was the end of the volume. Then we got to V6
It starts of good with their being this awkwardness between them; things aren’t normal yet and that’s good. Next major thing is the barn scene and that’s where the ball drops. Yang getting upset at Blake for her comment about being protected should’ve been the flood gate for a well of deeper problems. Yang should’ve ripped into her about all the pain she’s caused her since V3. Blake didn’t believe Yang during the tournament incident, then she left without a word, now she’s back by coincidence and talking about standing by people when they need help. That aggression she showed Ruby and Weiss should’ve been in full force here while Blake tried defending herself and also getting a angry instead of Yang just leaving; then having her help only Blake a few scenes later. I mean Yang has a golden opportunity to talk about her abandonment issues here.
That argument could’ve caused the both of them to not speak to each other and only be hurt up until the airship mission. Instead of a cute scene of Blake telling Yang how bad stealth she is, replace it with Blake trying to apologize again and clear the air as Yang only listens because as much as she wants to forgive her, she’s genuinely hurt so Blake goes to do her part of the mission without an answer. Then Adam shows up and Yang rushes into action like in the show. Both of them are forced to get their shit together and face the vital reason they are in this emotional situation. The scene plays out as normal about them protecting each other and we have them both break down and crying after they beat him too. They’re both apologizing for everything that’s happened and Yang tells her how much Blake means to her. Now these awkward and cute scenes in V7 feel earned between them and not bait because they have a complete arc.
We know Rooster Teeth can pull this off because they’ve made a complete arc before. Blake met Sun and he started as a stranger she’s into and would help her with or without permission. She likes it until it becomes a problem in V4 where she actively tries shuts him out of her life and is upset that he’s around to the point she hits him. Sun however continues to push the boundaries. This comes to a head where she gets really upset after he could’ve died. Both of them end up having a serious conversation where they air out all of their emotional stress. Then we spend V5 with Blake actively including him and giving him information about her life willing to the point she tells him about Ilia’s past and let’s him know she’s going to meet her.
This payoff keeps happening from that point forward where they have each other’s back and supporting one other until the end of the volume. The two of them confident that they don’t even have to constantly be around each other and that they can handle things separately. Then the arc closes in the beginning of V6. Blake went from hitting Sun and not wanting him around to being sad that he’s leaving her and kisses him on the cheek. Sun isn’t worried about her and trying to stick with her. He knows Blake is where she needs to be and doesn’t pressure her to figure everything out so fast; he respects her boundaries. They had a complete arc.
This is why Bmblb and BlackSun are so aggressive. More fans love Bmblb and they are drowning in evidence that their ship will be canon, BlackSun feels more complete. Their relationship has matured more naturally; the dots connect. There’s just not as many dots at this point. I’m not picking sides or anything because at this point o think Blake should be single and focus on who she is as a person for awhile, which would do Yang’s character some good. Yang has not initiated any meaningful conversation or action with anyone except Blake and her mom. Weiss just happened to be kidnapped by Raven and she also made Yang open up after her lash out. Yang barely talks to Ruby and outside of V1 and their hug in V5 there hasn’t been a real heart to heart with them, but she’s talked with, or about Blake plenty with varying emotions. Jaune is consistent with his feelings. Pyrrha makes him sad and any serious conversation holds a wait of him struggling to press on and slowly getting better because almost everyone has talked to him to help progress his character. Yang is trapped in a bubble talking to Blake and Blake is only allowed to really talk to Weiss if it’s about racism.
I know it’s a bit of tangent but Rooster Teeth is kinda letting this problem bleed over into other characters; especially when it comes to making plot points with no lines. Perfect example we got this volume. Ruby has been in the mindset that she failed to save Penny for like a year and felt crushed about her friends death, yet did not sob uncontrollably learning that her friend was alive. But she cried when she saw her sister, a person she left at home who wasn’t talking to her. If Pyrrha came back you could bet everything that Jaune would be on the floor in tears because it would be weird of he didn’t do that for someone he mourned over. It’s almost like if it’s not shipping related then RT doesn’t care that much but they obviously love Bmblb, yet it’s skeleton of what it should be by now!
That kinda wraps up the basis of my feelings towards the Bees. I really do think this ship is nice but it’s just so lack luster for the amount of people who love it way more than me and for RT to try and sell people on it. I don’t like comparing shows but for anyone who’s heard of The Dragon Prince, season 3 is nine episodes yet the evolution of two characters relationships feels way more natural; also it wasn’t planned from the beginning of the show. If they can do it, Rooster Teeth can too. I say this because I care and want to see the show improve. Like besides Adam, what do Yang and Blake have to talk about? Yang never is in the above faunus oppression. Anytime Blake gets racism thrown her way it’s Weiss that deals with it. Blake and Yang killed the lifeblood their ship was riding on way too long.
106 notes · View notes
calliecat93 · 5 years
Text
Top 5 Things I Disliked About RWBY Volume 1
(Top 5 Likes)
Welcome to the first installment of this little series of mine! So with Red vs Blue, I’ve done these ‘Top 5 Things I Like/Dislike/ posts regarding the recent seasons. So I thought ‘well, why not do it for RWBY to lead-up to Volume 7′! Sure, I thought of it at the last second and have to do two posts a day in order to be done by Saturday, but hey! it gives me something to do, so yay!
Anyways, here’s how these works. I’m going to release two posts a day. One for dislikes, one for likes. I want to say this about Dislike sin particular. As far as Volumes 1-5 go, the dislikes are things that I find weak about the volumes, but are NOT relevant to where RWBY is now. Volume 6 will have my relevant issues, but that’s about it. These are also gonna be nitpicky cause honestly, I have very few things that I dislike about each volume. Yes, including V5. Anything I bring up here I’ll do my best to explain, and same with Likes though obviously that’s gonna be more positive/happy. Dislikes are gonna be first cause I wanna get them out of the way.
Okay! Let's do this!
#5 - Chapter Runtimes
Tumblr media
As of now, we RWBY fans are used to chapters bing about... 12-15 minutes on average, and longer than that on certain occasions. If it goes past 20 minutes, then we know that it’s a biiiig deal. Volume 1 though was... bizarre. Aside from Chapters 1, 8, 15, and 16 they ranged from about 6-8 minutes. Sometimes even four minutes. Now, this may not seem like that big a deal, especially since it is Volume 1 so they were still figuring the show out. So there's no reason to harp on them... but it is still an issue for this volume in particular and while I came into it after all the chapters were out and was able to just binge it in one go, it was a frequent complaint that I saw regarding it.
The issue is that many of the episodes would end up being two-parters when may of them would just be one episode nowadays. I’m gonna get to the Jaune Arc in another section, so let's take say... The Badge and the Burden for example. It’s a two-parter that I really like... but Part One is five and a half minutes, and Part 2 is seven minutes. Combined, they equal a total of around 12 1/2 minutes, reaching the current standard. I really feel that this could have improved pacing, especially for the Jaune arc since if it only went two episodes, IDT it would have annoyed as many people as it did. If you combined all the two-parters, V1 would ave a total of ten episodes. Now I assume that the episode order would have been cut down, so if they went with 12 then that gives them two episodes to do more things like showing more of Team RWBY growing as a team, showing more of how Beacon works, setting up things like Weiss’ racism towards Faunus and Blake’s Faunus status, etc. 
As I said though, this was the first volume. I think that they were trying to go with how they did Red vs Blue episodes since that was what they knew, and that format just didn’t work for RWBY. It was a critique that they listened to, and fixed accordingly in V2 and beyond. They were still finding their feet with the show and nowadays since you can just binge the volume, any pacing issues aren’t as big a deal. But I do feel like some things could have been better established or fleshed out had they gone with the current format here, so it is still something about the volume that I don’t care for. But it is certianly not an issue anymore.
#4 - Length of the Jaune Arc... Arc
Tumblr media
Oh Jaune, the shit that you got for these four episodes...
So in V1, there are these two parts titled Jaunedice and Forever Fall. In it, Jaune is being bullied and struggling in his classes. Pyrrha offers to help, but Jaune refuses and we find out hat he cheated his way into Beacon. Cardin finds out, blackmails him, Jaune grows a backbone, Grimm fight, and Jaune finally accepts Pyrrha’s help. It’s more than that. We have Jaune opening up about how worthless he feels and how he hates being the Butt-Monkey that he had been made as over the course of the volume. He’s doubtful of his role as a leader, with Ruby giving him encouragement that later helps him stand up to Cardin. We see how caring Pyrrha is as she tries to convince Jaune to let her help him, how disappointed she is when he rejects her, and her using her power to help Jaune and give him a confidence boost. It’s a good story that especially helps with the bond between Jaune and Pyrrha and without this plot, the things that happen later wouldn’t have been nearly as impactful, especially during V3.
That being said, however, the issue here is that it’s four episodes long. In a 16 episode season where the runtime for each was under ten minutes. That meant that four weeks straight, instead of focusing on the actual main characters of having cool fights, people spent essnetially a month watching this ‘Jaune gets bullied’ storyline. Now I want to make this clear, I love Jaune. He's one of my favorite characters and I think that him hating being a fool and wanting to be a hero but having this kinda macho mindset about it makes him an interesting character. They subvert the ‘loser hero who becomes greater than everyone’ cliche by having Jaune have to man up, but he doesn't ever really become this ultra-badass hero. He has to learn to accept help and pays consequences for cheating his way into Beacon by having to actually work to prove his worth. 
Jaune had a very good character arc here... it’s just that the season’s structure makes it feel like he took the spotlight from other characters, especially Team RWBY. It being kind of a standard bullying story that isn’t out of place in any teen drama also didn’ make it very interesting, it just sets up more interesting things in later volumed. Even the Grimm fight at the end, compared to every other fight this volume, isn’t all that great and only serves to both reveal Pyrrha’s Semblance and to end the Cardin conflict. Had this been in the current format and just two episodes, it probably wouldn’t have annoyed as many people. ut as such, it’s just kinda... meh compared to the high fantasy that we get later and maybe gave aune a little too much attention. They do a much better job of giving Jaune time when prominent, but not letting it override other characters. But I will stills ay the arc is good character stuff for Jaune and Pyrrha, sets up Jaune training to become better, shows Pyrrha’s selfless nature, and without it, anything that happened later wouldn't have been nearly as impactful. So I don’t hate it, but it ain’t perfect.
#3 - Cardin Sucks
Tumblr media
Okay, this is gonna be brief, but Cardin sucks. Okay yeah, I know that he’s supposed to suck, but he’s just... a bad character. He is a one-dimensional bully who exists solely to make Jaune miserable. After this arc, he has no prominence and in side stories like the manga or comics, they only use him to have a hate sink against other characters. He’s boring. He has no reason to be an asshole. We know nothing about him or why he’s that way. Which makes him utterly uninteresting, especially compared to later villains. Like say what you want about CInder or Adam, but at least they have actual motivations and impact. And it looks especially lame when you have Roman in this volume, who is one of the most beloved villains from the show because of how charismatic and fun he is. 
Sure Cardin's not supposed to be this great villain nor do I want him to be, and yes sucky people who suck just because are a thing. But Cardin just exists for the Jaune Arc... arc, which really with a couple of adjustments you could write him out completely. Like did we really need to have Jaune get blackmailed to make his arc work? There is nothing interesting about Cardin’s character. he’s just... a bully, and that’s it. I get it, he's made to be a hateful bully, but it also makes him a poor character and I just want him to vanish form all material because he’s not good for anything really.
#2 - Penny Fight
Tumblr media
Let's get this out of the way before I say anything else. Monty was an incredibly talented animator who clearly had a love for his work and was incredibly creative and passionate. His fights were always amazing, this one included, and he gave us a show that I have loved for several years now. Even now, he is greatly missed but will always be remembered as an amazing animator, and as an amazing person. That being said though, Monty was not perfect and I think that this moment from the finale shows that sometimes he let his love for cool action scenes go too far.
Monty sometimes had a bad habit of making the characters more powerful than they really should be. This could look bad in stories where the characters would lose fights and people would get upset due to it. Like with how Adam was made out to be this badass... and we’ve ALL seen how people keep trying to use that argument for how Miles and Kerry ruined him, even though they didn’t. Then we have things like Penny. Now originally, Miles didn’t want the Penny Robot reveal to happen until V2. Now admittedly he and Kerry... kinda made it obvious that enny was at least not normal during her intro so everyone pretty much figured it out by the finale, but still, there was room for speculation. But Monty decided that he wanted a badass action sequence with Penny... and in doing so it gave the reveal away. And apparently, no one bothered to inform Miles and you can tell on the V1 Commentary that he was pretty surprised to see the sequence.
Monty was a great animator and he created a fantastic world. But like anyone, he had his flaws. I’m still annoyed at how that fight, as cool as it looked, gave the reveal away and went against the writer’s intention. I do not like it when stories get messed with just for coolness, and this is a prime example. IDT it annoyed people as much as the V2 finale where Monty definitely went overboard with cool action scenes. but this is still very much an example of the problems with doing that. V1 still is my least favorite finale for this and one other reason that we’ll go into in a bit. It’s not a big deal now and again, most people already figured the twist out due to the lack of subtlety. But it still pretty much ruined any build-up that it could have had, and that is a shame. Nevertheless, it was a very badass sequence by Monty and shows off just how crazy talented that the man truly was. Monty was a mad genius, and his memory still goes on even today. So for that, I can give it a little bit of slack.
I cannot give a much slack for Number One though...
#1. Weiss at the end Black and White was poorly done
Tumblr media
To be honest, The Stray and Black and White is... not a strong finale. Yes, it brings up the Faunus oppression and introduced the White Fang as well as Sun. But the Faunus stuff had very little build-up. Sure, we had Cardin bullying Velvet... but it was Cardin, who bullied everyone so not a great example. Wiss worked better as, why this was her bitch phase, he wasn't a bad person and we saw her kinder side earlier. Plus she had a reason that wasn’t just racism and helped build-up to her problematic family life. But I find it hard to believe that Weiss hadn’t been showing her anti-Fuanus stances before The Stray, which is what it felt like so I feel like a better job could have been done regarding her.
Then we get to the ending of Black and White, and it feels... forced. Really forced. At the end, Weiss suddenly did a 180, telling Blake that she doesn't care that Blake is a Faunus, asks Blake to open up to her team more, and tries to hold back on any derogatory terms against Sun. It’s nice to see Weiss trying to be better, and later volumes very much show how much that she’s improved... but there is no build-up to her reaching this epiphany. Sure Ruby and Yang call her out on how horrible she’s acting towards Blake... but that was before they knew that she was a Faunus with Penny having to spell it out for them. Yeah, Yang makes a snide remark towards Weiss later about Weiss not caring which Weiss rebukes... but that’s it. We don’t see Weiss learn anything or see her view shift whatsoever over the course of these two episodes. I guess you can argue that the revelation is what made Weiss reconsider... but since she was calling Blake a criminal before the revelation, it kinda makes it hard for me to believe that. I guess it was meant to be implied, but even when I watched it the first time, I was baffled by it.
It just kinda cheapens the ending when Weiss did a 180 out of nowhere. Now Om glad that she had the revelation. As I said, later volumes show that she meant in with V2 having her stop Blake from closing up in Chapter 2 and get her to open up to them. V3 has her defend Velvet, a Faunus, and shows concern for her safety. V6 had her get pissed at Cordovin when she made a racist motion at Blake with murder clearly in her eyes. And I expect that V7 is going to show us more of this. it’s also clear that Weiss’ racism was due to a hateful mindset that she was raised into that she knows is wrong and had to grow out of. So I can see Weiss growing out of it in the finale and am happy for what we see later... but we don’t see her start to break out of it here. She says that she had 12 hours to think about it... and we’re just supposed to assume that she came to the conclusion because we were told that it happened. ‘Show don’t tell’ has been a frequent critique of the show, and sadly this is one of the best examples. Maybe if we saw Ruby and Yang call Weiss out after the Faunus revelation or saw Blake and Weiss interacting before Weiss’ racism became known it would have worked, but... no. We don’t. Again, it’s V1 so it’s not gonna be perfect and we do see that Weiss was genuine. I just wish that they did a better job of letting us experience that growth with her.
________________________________________________________________
Okay, Dislikes are done. Again, many if not all of these are no longer relevant to where RWBY is now. It’s just a little trip down memory lane. If anything, it really shows how much that everyone has improved over the years, which is a great thing. The good news is that now we can focus on the good things for VOlume 1. That post will go up later today... after I sleep. So thank you all for reading, and be on the lookout for the Top 5 Things I Liked About RWBY Volume 1~!
3 notes · View notes
toshiro-46 · 6 years
Text
Bumblebee: A Comprehensive Guide to Your Favorite Ship
Hey, I ended up finishing this about a week back and was going to post it then, but I noticed that Bmblb week was upcoming and thought this might be a nice way to start it off.
To be clear: the purpose of this post is to be comprehensive. Every small detail I’ve noticed will be here, so like if you see something and you think “that’s not necessarily indicative of anything romantic”, you might be right, but don’t let that small detail detract from the larger picture. Unfortunately, though I’d like it to be completely comprehensive, I’m only human and no doubt will have forgotten and/or missed some details.
Speaking of small details, in the past I’ve been told that this is all too subtle and RWBY doesn’t do subtlety. To answer that, I invite you to look at Qrow’s semblance, or Raven being the Spring Maiden, or Ilia’s feelings for Blake. I don’t think this is out of line with any of those, and if anything it (particularly Yang’s feelings) is considerably more blatant than Qrow’s semblance and Ilia’s feelings were prior to their reveals.
Finally, I want to defend myself and other bees like me for a second because I realize that taking several hours to research and write this to argue in favor of a fictional (potential) romance, a ship, can be seen as a tad weird… but that’s not really how I view what I’m doing. I think of it more along the lines of a theory, because it’s actually not really different at all: I’m using evidence from the show to support a conclusion. It’s exactly what I did when making basically every other analysis I’ve done on the show. It’s just what the subject of this theory/analysis is. Ok let’s go.
Supplementary reading because I’m not the only person who’s written essays about bumblebee and I’ve used the first two as reference points:
The classic Masterpost by Allisonbw. Unfortunately, it’s two volumes behind, which is a big reason why I’m doing this.
A relatively shorter post by y8ay8a talking about why she thinks it’ll happen. Again, it’s two volumes behind, but still a very good read. Also her art is top notch so check that out.
I’m not as familiar with them, but rwby-analysis has also done several posts about bumblebee.
chained-prometheus has several posts I’ll be referencing, but just the blog in general has many fantastic analyses on why it’s going to happen.
The tl;dr is obviously Yang is gay for Blake, which I’m 95% sure of, and Bumblebee has a pretty good chance of happening.
There’s 4 sections. Yang’s feelings, Blake’s feelings, Parallels, and Eclipse.
#1. Hints of Yang’s Feelings
Volume 1:
There’s not much to say here, really.
Lowkey joking, but like, the only time we see Yang express any interest in boys (even though it was in an overly comedic tone) is in V1C3, and that’s immediately prior to when she meets Blake. After that, she has nothing but disinterest towards boys, like tfw Yang meets Blake. I don’t mean to be offensive because this is actually a thing, adolescents not realizing how they feel until they meet someone that’s their… type I think would be the correct word. Hell, Monty says something about this later on, which I’ll get to. And I’ll expand more on this scene, in a more serious manner, at the end of this section.
It’s worth noting that Blake and Yang have absolutely no relationship issues once they become partners, which - alongside Renora - is an interesting contrast to Weiss/Ruby and Pyrrha/Jaune.
Yang’s concern for Blake during V1C16 is in stark contrast to Weiss, and even though she just heard that Blake was literally a terrorist who seemingly defended all the horrible things that happened to Weiss, she’s more concerned about her safety and finding her.
Really there was very little on Yang and Blake’s relationship in this volume, which is a shame, but what can you do? I’ll tell you what you can do, you can go to the Director’s Commentary and see what Miles has to say about it! Which is what I did. The context of this quote is that it’s talking about when Blake elbows Yang when they meet Penny in V1C15.
That, that is really what I do love about Team RWBY, is that, we have these two pairs of girls, each pair is completely contrasting characters. Ruby and Weiss that causes them to butt heads, Blake and Yang? They get along, flawlessly most of the time.
To put it in my friend’s words: “This is particularly important as there are people that like to say that Yang and Blake have horribly clashing personalities and get along like ‘gasoline and fire’. That they have no chemistry and are absolutely horrible for each other. The idea has been around for awhile, but here’s actual proof that it’s been wrong from the very beginning.”
I also think it’s important because it sets a precedent that even little things like this are being taken seriously by the writers. They didn’t get a lot of time to show off Blake and Yang’s friendship this volume, but what they did show has meaning.
Finally, I wanted to mention Wings. Wings is either sung from Yang to Blake, or from RWY to Blake. But Weiss as the singer (which, I believe, has been the traditional interpretation) doesn’t make any sense, she simply doesn’t fit the singer’s very understanding, nurturing attitude towards Blake. Yang, on the other hand, is definitely characterized as nurturing, such as in Gold. I could see it being all of RWY, but again it’s not Weiss’s style, nor is it Ruby’s when she’s two years younger and she herself gets Yang’s nurturing side. Oh, and an instrumental of it played when Yang and Blake saw each other again for the first time since V3. So yeah, it’s probably Yang to Blake. Also Stray sounded like Straight the first 20 times I listened to this
Volume 2:
So it begins.
V2C1: “Whatcha doin’?” This is noteworthy for two reasons: 1. Yang, Blake’s new partner and future lover (don’t @ me), is interrupting her rumination on her old partner and former lover. Out with the old, in with the new. 2. This phrase is classic flirting, most notably seen in literally every Phineas and Ferb episode.
V2C2: “Yes! I love it when you’re feisty!” More flirting, not much else to say.
I mean obviously, we have the V2C6 scene: most of it isn’t inherently romantic, just a friend comforting another, excepting the rather infamous, “If you feel like coming out tomorrow, I’ll save you a dance.” wink? I shouldn’t have to explain this, it’s pretty blatantly flirting and a double entendre.
V2C6: My friend: “This is the most vulnerable Yang has ever intentionally allowed anyone else to see her. With Ruby in V3 she was too hurt to really guard herself, and even then she tried to deny caring about Blake. The only time Yang has ever let anyone see herself as vulnerable as in Burning the Candle is during her talk with Weiss about Blake.” Because Blake gets to her like no one else. See later when Yang keeps it together with Raven until she makes a snide comment about Blake.
The dance in V2C6-7. Out of our ten students (RWBYJNPRSN), 8 of them end up with someone here. The two who don’t? Ruby, who 1. is two years younger than everyone else 2. “is not really focused on romance” - Lindsay and 3. ends up with Cinder for most of the night and Yang. Yang, the one described as a “party girl” by the back of V1’s steelbook cover, doesn’t end up going with anyone to the dance. Take a second and think on how that’s pretty weird, especially when she says “I’ll be turning heads tomorrow night”. She does, however, dance with Blake, and then seemingly spends the rest of the night just chilling out and watching Blake be happy. To put it in Allison’s words, “Yang went and played wallflower for fuck’s sake.” Oh, and while doing that, Yang turns Blake’s head while she’s dancing with Sun. That shot is focused on ffs.
Something that should be noted: Yang is not a flirty person. She flirts with two sets of people: cute cat girl partners, and enemies. Or to put it another way, she flirts with Blake, and she flirts with enemies (Junior, Random WF Mook #294, Mercury sorta before their match I guess). So let’s not pretend that flirting with people is just a Yang thing.
Volume 3:
Let’s fast-forward to V3C8. Yang has to deal with being vilified in front of literally the entire world, thinking maybe she’s going crazy, getting her team kicked out of the tournament, and guilt over breaking Merc’s leg. What brings her to tears? Blake not believing her. Like this can’t be overstated. Yang is brought to tears like 6 times in series proper. 3 are due to Blake, 1 is her reunion with Ruby, and the other 2 are due to Raven. This relationship is just so important to her and her character, way beyond what you’d expect from a normal, platonic partnership (contrast it with Weiss and Ruby). And it’s not like they have a “sisterly relationship” (something I’ve heard too often) either, because again this is portrayed as different from Yang and Ruby.
Blake and Yang are always on the scroll together btw V3C10 proves this
In V3C11 she’s again brought to tears, and again it’s due to Blake. She’s more emotional in that moment than nearly at any other point in the series so far. And before that, she chooses to go after Blake over Ruby. This is Ruby, who has been missing for like an hour and who she called Blake about last episode because she was so concerned, as opposed to Blake, who was okay last Weiss saw her. And she goes after Blake.
In V3C12, Yang has to deal with everything she did before in V3C8 except now she’s short one arm, two people she knew are dead, her school is in ruins, Weiss is gone, her sister was in a coma for weeks, and you know what actually gets her to break and raise her voice at Ruby? Blake. Yang is more torn up about Blake leaving her than she is about any of the other shit, including her arm. She’s heartbroken.
There’s also a lot of shit about parallels here that I’ll get into later.
Volume 4:
Yang doesn’t mention Blake at all this Volume so we don’t exactly have a lot to work with.
There is, however, one useful quote from Sun in V4C11 that helps confirm what I said a little ways up: “That chameleon friend of yours got me pretty good, but I’d do it all again if it meant protecting you. And I can promise Yang would say the same… so stop pushing us out. It hurts more than anything the bad guys could ever do to us.” So in case you were doubting that Yang is indeed more hurt by Blake than by her arm, doubt no longer. Also parallels between Sun and Yang, which again we’ll get to later.
In Armed and Ready, Yang states she has nightmares every night about how she tries to save Blake (because “There’s nothing that I won’t do for her”). Not necessarily romantic, but telling.
Bmblb speaks for itself and deserves a mention here, regardless of everything that’s happened. I should also note that, in response to what Arryn said about songs not being in the show not being consulted over, Boop wasn’t in the show either until an instrumental or two in V4 and no one doubted its canonicity. And also this is important and relevant. I thought about expanding on this section more, but ultimately I don’t think it’s worth it.
Volume 5:
Not really a hint towards anything romantic but I thought this exchange in V5C6 was interesting: “Listen to your friend, Yang. Your teammates never let you down before.” - Raven, vaguely sarcastically. “You don’t know the first thing about my teammates! About me! You were never there! You left us! Why?” - Yang, her voice breaking by the end; Yang manages to keep it together until Raven makes a quip about Blake leaving her.
V5C8: Yang snaps at Ruby over Blake. Her scenes this episode portray actual heartbreak. I’m having trouble explaining it any other way, really. “What if I needed her here for me?” Like hello? + Yang/Ilia parallels which I will get to later. + This connecting it back with Sun and Blake’s talk in V4C11. Also this is a good time to mention Fre/ezerburn. People were/have been hyping it up, particularly because of this episode, but in my opinion, this episode does the opposite of supporting it. Yang and Weiss are given a private heart-to-heart together - pretty rare for RWBY characters… and they spend the entire time talking about Yang’s feelings about/for Blake. That’s not really what I’d expect from two characters interested in each other. Nothing against the ship itself, just doesn’t seem like it’s going to happen in canon.
V5C13: this is gay. No but seriously this girl gets paralyzed in the middle of a battle of life and death just from seeing Blake again. I have to emphasize again that this is so much more emotional and intense than how a normal friendship is and is portrayed in this show.
General stuff:
This is more about Yang’s sexuality than Blake specifically. When talking about it, people generally point to the scene in V1C3 where she… purrs I guess would be the sound at shirtless men as evidence that she likes men. Makes sense, but I don’t completely buy it. 1. It’s just a joke, both in a meta context and to Yang. She’s clearly just joking with Ruby and as soon as one of the guys (albeit Jaune in a onesie) takes notice of her, she gags. 2. She’s still a 17 year old fresh out of their equivalent of high school, it’s not uncommon for LGBT people to realize they’re LGBT around then. 3. This is still very early in the show and since that point (starting with V2 specifically) RT could’ve decided which way they wanted to go with the character. Ultimately it’s sort of irrelevant as it doesn’t matter much if she’s bi or lesbian, but I’ve always thought of her as a lesbian for reasons right below.
Historically Yang has not really liked men. Junior in the Yellow trailer, Jaune in V1C3, Port in V1C9, Neptune in V2C4, and Shay in V5C1. Unlike Ruby, she’s not a fan of Qrow’s story in V3C4. Unlike literally everyone else in RWBYJNPRSN, she doesn’t have any notable positive relationships with a member of the opposite sex, excepting those related to her.
Her reactions to Blake are far beyond what you’d consider normal for a friend, even a best friend. She gets angrier than we’ve ever seen her when Blake gets stabbed. She isn’t that angry when Ruby gets knocked out or when Weiss gets stabbed or anything, but she absolutely fucking loses it with Blake. And this is after going after Blake when as far as she knows she’s fine but Ruby’s been missing for a long time. Pyrrha and Penny died, Weiss left too, but what got Yang to crack and lose her temper with Ruby in the V3 finale is Blake. A reminder that Blake’s abandoning actually hurt her more than losing her arm did - Sun says as much in V4 and that again, she loses her temper at Ruby when Blake is brought up in V5C8. She actually goes still from shock when she sees Blake, p different from when she first sees Raven and Ruby, two people who she also reunited with this volume after being abandoned previously.    
Relevantly, in response to someone asking about LGBT characters, Monty said (and this is at the beginning of V2) “Sure, absolutely. The best part about that is maybe they are there now, because they’re kids and we’re on a path to help them discover themselves. I don’t think we even need to make that decision right away because we learn more about these characters as we write them. So we’re definitely not opposed to it, a lot of us are for it, I have some cast members and some crew members who are like “This would be really cool”. But the thing is we can’t just shove it out there, it has to be earned, which is the better way to do it. And a lot of these characters we try to look at outside of their gender so we just want to do what’s natural for them.” I think this is important because it’s pretty much what I think happened with them and Yang. At first, they didn’t think about it much and that’s why we didn’t get anything about it in Volume 1. But by the time Volume 2 starts, we get Yang flirting with Blake and all that. She may not have (in Monty’s words) discovered it herself then or even now, but we’re getting to that point.
#2. Hint’s of Blake’s feelings
There’s not nearly as much about Blake, but the moments she does have tend to be pretty significant.
Volume 1:
V1C6: Blake chooses Yang. She follows her in the Emerald Forest and deliberately makes eye contact with her. Obviously not specifically romantic, but the other two people who chose their partner had feelings for them.
gay
Volume 2: I personally can’t find anything that would indicate Blake has non-platonic feelings towards Yang. However note that she does tilt her head in a smile when Yang says “I love it when you’re feisty” in V2C2, so… it’s not just Sun whose flirting she responds to positively (V3C2 is what I’m referring to).
Volume 3:
In V3C8, Blake, unlike Ruby or Weiss, doesn’t immediately believe Yang. Why? Yang reminds her of Adam. Not in the sense that they have very similar personalities - they don’t, besides a few striking parallels - but in the sense that Blake thinks of them along very similar lines. She let love blind her once and doesn’t want that to happen again.
V3C11: A post on the Kuleshov Effect in use here by Chained Prometheus. In addition, Adam, who probably knows how to read Blake better than most, having known and/or dated her for 4+ years, can immediately tell she loves Yang just from a single look of hers. That’s something.
V3C12: Besides the obvious implication of this shot and what Sun is thinking about here (more on that here), what other relationship saw hand-holding in an intensely emotional scene this volume???
Volume 4:
In the opening, Blake glances away, leading into a scene with Yang, indicating that she’s thinking about her.
In V4C11, her voice breaks when she says Yang, a stark contrast to the other two she mentions. She also says, “I loved them like I never thought I could love anybody!” Wait… what? Was her friendship with Ilia - a 4+ year affair - somehow lesser than a friendship with them that lasted less than a year? That makes absolutely no sense! What about Sun, what about her parents?? Did she really love all of RWY differently and more intensely than everyone else she knows/knew? No. Just one of them.
Volume 5:
When she’s talking about her team in V5C5, her ears perk up and her tone changes when she talks about Yang. Again, it’s made exceedingly clear with small things like this that Blake and Yang care about each other differently than they care about the rest, and that this isn’t just a partner thing - once again look at Ruby and Weiss - it’s far more comparable to JNPR’s partner relationships than it is to WR (the difference btw between JP/RN and WR is that JNPR’s partner relationships are/were both romantic).
V5C13: “Yang?”<- her first thought when there’s a giant fucking ethereal lancer (huh wonder if the giant bee that’s there right as they see each other again means anything it probably doesn’t)(oh also that’s the whole reason she went in there in the first place bc Hazel got stabbed and she saw that and was checking it out, yet she still ignores it in favor of Yang) behind Weiss who has a peculiar stab hole in her shirt and also Mercury and Emerald are there for some reason fighting her team and somehow her team is back together and all this and yet her first reaction is “Yang?" Hammertime does a nice post on this.
Oh hey look it’s Hammertime again. Seriously, watch that, it’s only like 40 seconds long and relevant. Besides that V5C14 doesn’t have much beyond some smiles but those smiles are, in my completely objective opinion, pretty fucking gay.
#3. Parallels
The most important shit, in my opinion. Yang and being compared with Blake’s past and present love interests, name a more iconic duo.
Yang and Tai, Raven and Blake:
Raven and Blake: mysterious ninja (well Raven’s clothing is more samurai-esque I think, but I digress) girls with bloody pasts who use katana-esque swords and also incorporate their sheathes into their fighting, who have long black hair, and who have clear affinities to animals.
Tai and Yang: (I mean they’re father and daughter so the similarities/parallels should be obvious). Both obviously deal with some severe abandonment issues due to Raven and later Summer/Blake. Or how about this? Tai and Yang are both reminded of their former teammate/lover in a talk (Tai in V4C11 talking with Yang before she leaves, though this gif is from V4C12) and then go look at the photograph with them in it.
Raven/Blake leave their teammate/partner/person-who-is-in-love-with-them after a life changing event, which leaves Tai/Yang broken and shut down.- Raven and Blake are pretty clearly contrasted in their relationships to Yang. Raven leaves for (probably) selfish reasons, never bothers to give an explanation as to why (true for Blake atm, but Weiss at least explained it), and Yang is forced to find her. Blake leaves for selfless reasons and chooses to go back to and stay with Yang.
And, as per my friend​: 
Yang and Blake both seem to be succeeding where Tai and Raven failed. Tai suffered heartbreak and broke down. For a long time. He wasn’t a deadbeat who only just started working, because as Yang says to Weiss, Tai was always at work. But he threw himself into work instead of facing his issues. Yang had to deal with so much [ex: her arm and everything else I mentioned in the V3C12 blurb] on top of losing Blake. And yet, she still got back on her feet in under a year. And while she may not be better, she’s still moving to take care of those she loves. She’s working to heal.
As for Raven, she also had a problem with running away. While Blake just runs away, Raven runs and hides behind others. Which shows in her Semblance [A point I didn’t get, Blake and Raven even have sort of similar semblances], she can teleport to people she cares about. People who would protect her [And Blake ran away to protect Yang. Raven ran away to protect herself].
But where as Raven never overcame this, Blake decides to stop running and face her problem. Instead of getting revenge, she seeks to stop the source of the problems. And yeah, she didn’t go to Haven for Yang. But she decided to stay [And she willingly decided to face Yang in the first place]. Something Raven also didn’t do.
Yang and Adam:
I mean Blake herself compares them. This fact alone is huge: she’s directly comparing Yang to her former love-interest, she thinks of them in similar ways, even if she doesn’t realize it herself. Which is actually a thing people do.
Their semblances. Both are essentially absorbing and redirecting damage, and the writers themselves have said that’s a purposeful comparison, except Yang uses her pain to become stronger while Adam just bottles it up, not feeling it, before releasing it all in one hateful blow.
Both are forced to deal with Blake leaving them unexpectedly, except Blake left Yang because she loved her, while she left Adam because she no longer could.
Both have anger issues that worry Blake at some point, but Blake chooses to believe in Yang, unlike what happened with Adam.
Yang and Ilia, Yang and Sun:
Look no further than Alone Together for Yang and Ilia. They’re paralleled in the episode pretty heavily, with both getting pinkish eyes over her, both showing how they’ve handled her abandoning them, and both getting extremely real with their confessions over how Blake makes/made them feel.
Sun himself talks about how they feel the same way in regards to protecting Blake. Sun - who we know 100% has romantic feelings for Blake - says this: "I’d do it all again if it meant protecting you. And I can promise Yang would say the same.” He knows they feel the same way about her. Besides that they’re both blonde brawlers who show some chest, have gloves/bracers/whatever, are/can be pretty laid back, and are associated with the sun. Again, similarities should be clear.
Bumblebee and Arkos:
Honestly, I had never seen this myself until it was pointed out to me, so it’s much more fitting that I just quote Allison.
From her post (I once again encourage you to read the whole thing, it’s very relevant):
You remember how I mentioned that Blake and Yang’s relationship is not like the other relationships in Team RWBY (Ruby and Weiss’s relationship included)? Because there’s another relationship in this show it’s a lot like. A relationship with confirmed romantic interest that gets a fair bit of on-screen development in the first three volumes, even. I’m going to show as much as possible as opposed to a bunch of telling, because this shit must be seen to be believed.
Going in chronological order, and also weaker to stronger, on dialogue parallels:
Bumbleby and then Arkos in the Emerald Forest.
Arkos, in a scene with an intimate setting with romantic lighting in which Jaune discloses a shameful personal secret to Pyrrha.
Bumbleby, in a scene with an intimate setting with romantic lighting in which Yang discloses a shameful personal secret to Blake.
Bumbleby, in a scene where Yang tries to reassure Blake.
Arkos, in a scene where Jaune tries to reassure Pyrrha.
And some parallels that aren’t dialogue per se: In what relationship in the V2 dance arc do we see a blond hunter having a heart-to-heart with their partner (one, two, one partner making a deniable expression of interest in going to the dance with the other (one, two), and then the blonde cheering up their partner by donning a white dress and dancing with her despite not officially being her date (one, two)?
Depicted: the answer. Both of them.
I also had a Blcksn shipper tell me once that Yang can’t be interested in Blake because she let Blcksn happen right in front of her at the dance (I like the way she stomps off in those heels). And I’m thinking, “You mean like how if Pyrrha were interested in Jaune, she totally wouldn’t have coached him on how to ask Weiss out?”
And then of course there’s this blatant juxtaposition in 3.11, which I dare you to unsee now.
Seriously though, the big moments for Arkos/Bees come at the same times. It starts with V2C6/C7, then the first half of V3C8, the end of V3C11, and the beginning of V3C12. Jaunedice is the only odd moment out here, otherwise it’s consistent. Pyrrha and Blake both deliberately hunt down and choose their partner in Volume 1, both believe they find the relic at the same time… etc. The similarities are hard to ignore.
Yang and Blake, Beauty and the Beast:
'Beauty’ and 'Beast’ can be used interchangeably with Blake and Yang. Blake has labels assigned to her from birth (her last name, Belladonna and the fact that she’s a faunus) while Yang has physical traits (she’s a beauty and referred to as such in RLR, and her semblance is essentially beast mode) that signify both of them as both characters. And Adam fits in neatly as Gaston.
Here’s a link to Chained Prometheus’s post on the matter. He’s legitimately very well-versed on Beauty and the Beast, his opinion here is very worthwhile.
From Allison: 
Yang, who’s loathed worldwide as of 3.6 and misshapen as of the end of this very scene and generally paid out the nose for her short temper this volume, introduces herself with a roar, attacks a white-fanged enemy in defence of Belle/Blake, gets her right arm fucked up, passes out from shock, and has to be rescued and hauled to safety by Belle/Blake at the end of the scene.
#4. Ecl/ipse
So I’ve gone back and forth on Ecl/ipse (which is Sun/Blake, to be clear, I just come from a part of the fndm where Ecl/ipse is the dominant name) a lot in the last two years. From “It’s definitely going to happen” to “It’s never going to happen” to somewhere in the middle, to where I am now (No hate btw, and I mean that seriously. This is just something I have to address, because for Bumblebee to happen, Ecl/ipse can’t).
Which is… it’s probably not going to happen. I think it’s pretty simple as to why:
If it were going to happen, it already would have. Blake and Sun had two volumes where they spent the majority of their time together; from a storytelling standpoint this is the ideal time to develop their dynamic into a relationship. There’s no better opportunity, really. Especially since Sun has always been a stand-in for her team, a way to push her back towards them, and he’s never been relevant when that’s not necessary. If you don’t believe me, look at how he’s first introduced when she runs away in V1 and how he’s barely a presence in V2 (excepting the one episode where she’s apart from her team, of course) or especially V3. In V6, she (and the show) most likely just doesn’t have time for him, the same way she (and the show) didn’t have time for him in V2/V3. She’s back with her team, what further purpose does he serve? The answer is no purpose, really, because it’s not like he’s going to Atlas (because why would he), so he’ll likely be out of the story for the next few years. Basically they had their chance to make it happen and they didn’t. They had their chance to set it up more explicitly in V5 and they instead focused primarily on Blake’s and Ilia’s relationship.
Look at V4 and V5. In V4 (specifically Chapter 3), Sun is obtrusive and flirty and Blake really doesn’t like it. She’s impatient with him, she even slaps him three times, and generally she’s just not having it. But he gets the hint, he actually backs off in V5. And their interactions are far more positive accordingly. I think Sun realizes by V5 that it’s not going to happen, so he doesn’t end up flirting - at all - in V5, which is unique when compared to literally every other volume. In fact, I think he realized it back in the V3 finale, he was just sort of in denial for most of V4 before coming to accept it in the latter half. And that’s why he pushed Blake towards Yang in the V5 finale. He knows (this is admittedly speculative, but yeah Sun is low-key a bee shipper imo).
y8ay8a also explains the actual faults of the ship pretty well.
------------------------------------------------------------------------------------------- There is a lot of evidence towards Bumblebee. Even if you’re not looking for it, you’ll see signs of it. I did. Allison did, too. Both of us weren’t really into shipping in general or bees specifically until we saw Volume 3 Chapter 11. And once I started looking for it… there’s just much pointing to it. Which is why I wrote this post. As a guide for anyone who wants to know whether this ship is actually realistic.
604 notes · View notes
riichardwilson · 4 years
Text
Smashing Podcast Episode 15 With Phil Smith: How Can I Build An App In 10 Days?
About The Author
Drew is a director at edgeofmyseat.com, co-founder of Notist and lead developer for small content management system Perch. Prior to this, he was a Web Developer … More about Drew McLellan …
In this episode of the Smashing Podcast, we’re talking about building apps on a tight timeline. How can you quickly turn around a project to respond to an emerging situation like COVID-19? Drew McLellan talks to Phil Smith to find out.
In this episode of the Smashing Podcast, we’re talking about building apps on a tight timeline. How can you quickly turn around a project to respond to an emerging situation like COVID-19? Drew McLellan talks to Phil Smith to find out.
Show Notes
Weekly Update
Transcript
Drew McLellan: He is director of the full-stack web development studio amillionmonkeys, where he partners with business owners and creative agencies to build digital products that make an impact. He’s worked on projects for the BBC, AirBnB, Sky Cinema, Pearson, ITV, and Sussex Wildlife Trust to name but a few and works right across the stack with React, Vue, Laravel, Gatsby and more. Hailing from Brighton on the UK South coast, he’s also an author for Smashing Magazine, writing recently about the Alpine JavaScript framework. So, we know he’s a skilled developer and communicator, but did you know he can solve a Rubik’s Cube in six seconds using only his feet? My Smashing friends, please welcome Phil Smith.
Drew: Hi, Phil. How are you?
Phil Smith: I’m smashing, Drew.
Drew: We’re in the thick of this crisis of COVID-19 and I think one of the interesting ways that we’re placed as designers and developers and technologists is to be in this position where we can still work and we can still do our jobs. And the work that we do is often based around providing access to information or enabling people to communicate, which is, I think, very relevant in a situation like this. I was interested to look at how those skills could be put to use to help in a time of crisis and then I saw your blog post, Phil, about how you had been doing something just like that. What have you been working on? How did this all start?
Phil: It’s a very crazy story. About three weeks ago I was catch up with some friends and we’re feeling very glum about the whole situation. We’ve got two kids who we’re trying to homeschool while keeping this business going. And I was feeling a bit down about not doing that very well and not doing my job very well and the prospects of seeing friends and things like that. And then I had a chat with my wife who said, “Look, you just need to pick yourself up a bit, really.” And the same day, a chap called David got in touch via Wired Sussex, which is a kind of tech group in and around Brighton. And he said he had a friend who’d built a website which was around flashcards for medical practitioners who are caring for patients suffering with COVID.
Phil: He was looking for a developer to turn this website into an app and add a few features. And they wanted it done very, very quickly and they had essentially no money. And I dwelled on it for not very long and I’ve been building apps and have the experience of doing back-end and front-end development and it just felt like this was … It felt like a significant moment, really, where I was having a bit of a crisis and this incredible opportunity came round and this need and I could actually contribute something. So, I got in touch with David. There was a lot of back and forth. And then I spoke to Rachel, who is the founder of CardMedic. She’s currently in America, so there’s this weird time difference that we’ve got to deal with every day. But she was really keen and very trusting of me. I spoke to her husband who’s a bit more tech-savvy and then we set to work.
Phil: Essentially, it was … There were a few features that she wanted added but this was really about actually building … The existing site is on Squarespace, so it needed a new back-end built and an API and then an app that calls on the API and a few nice features added. Yeah. People might have seen the app or they can download it. It’s ridiculously simple. It was really just about … It wasn’t about there’s loads of learning to be done, it was just about there’s quite a lot of work to do. I just need to get it done. I had a bit of client work to do but tried to put that off as much as possible and did a lot of late nights and got it churned out in about 10 days, I think it took, from starting to getting it on the App Store.
Drew: Just in the briefest terms, what is the app and how do medics use it?
Phil: One of the strange medical nuances of COVID is because of the way it’s grown, there are lots of people caring for patients who have COVID who have no experience in respiratory illness and they may well be looking after patients whose first language is their first language because of the rate that it’s grown and because of these issues like them dealing with it in care homes and things like that. What the app does is it’s a kind of flashcard system whereby if there’s a particular subject you need to speak to a patient about … That might be about something like someone’s having difficulty breathing … Then there would be a flashcard which explains to the patient why they’re having difficulty breathing and what the practitioner is going to do about that.
Phil: The app can also read the script aloud and we’re currently in 10 languages, which is all machine-translated at the minute. Yeah. But that’s the basics of the app.
Drew: That’s sounds incredibly important, incredibly useful for people working under this pressured situation out in the field. With the quick turnaround that was needed for this project for obvious reasons, how did you go about breaking it down and deciding what needed to be there for launch and what you could deal with and add later?
Phil: Rachel had lots of feature requests that she wanted to add to the app. What we agreed from the outset was the first version, which is the version that is now available … The things that would ship are all the functionality on the existing site. That is translation into different languages, read-aloud, the text to speech, and then a list of cards alphabetically. And the one that we wanted to add, which we felt fitted into the things we wanted to launch with was a card where practitioners could take a photo of their face and then show it to their patients along with a kind of introductory text because you’ll be wear … A lot of these people are wearing PPE and they’re just losing … Caring for people and they don’t know what their faces look like.
Phil: We agreed, actually, to get this thing to ship as soon as possible they are the only features that would make V1. And anything else, we’d park and then we’d prioritize. And we’re kind of going through that process now of saying, “Okay, what do we want to deal with next?” The interesting side of this has been that as we’ve shipped, actually lots of people have come forward with their own suggestions. And Rachel, who’s never done this before, is balancing the things that she thinks the app needs with the things that other people are saying the app needs and we’re trying to balance what is most important, here.
Drew: It can be a great eye-opener, can’t it? Shipping early and then listening to feedback rather than spending a lot of time in development building loads and loads of features and then getting it in front of users.
Phil: What’s been funny as well is when we got in the App Store last Friday … Yeah, about midnight on Friday and then The Guardian ran a piece on Saturday. Great. So, we got loads of coverage really quickly and there was quite a lot of feedback from people who aren’t practitioners and that is difficult for Rachel, I think, to deal with of, “Okay, where are these constructive ideas by practitioners and where are these interesting things but actually aren’t going to make a difference in this crisis?”
Drew: This is a native mobile app that’s built largely with what we usually think of as web technologies. What was the stack and what was each part of that stack responsible for?
Phil: Sit tight. Here we go. The first thing, I think, I did was I have an A3 pad and I mapped out data models and what I thought the data structure would look like. I then … I use a thing, and I don’t know how I ended up using it, but it’s called Apiary. I don’t even know you pronounce it. You know how you pronounce it.
Drew: Might be Apurree?
Phil: Yeah. One of those. I think Oracle bought it a few years ago, so I think it’s quite a big outfit now. Anyway, that allows you to write API documentation and it gives you a kind of mock API. I did that first of all. I think this is the first thing that I’ve ever done which is multilingual as well. Certainly, it’s the first API I’ve been multilingual so I had to do a bit of research and suss out … And part of the reason I decided with this, to do the documentation and the mock API, was just to play with a few ideas about how the API could be structured if it was multilingual.
Phil: I settled on what I wanted the API to look like and then started to build a back-end using Laravel. I use Laravel for … I do both front-end and back-end. Everything back-end I do, I use Laravel. It’s just incredible. The speed at which you can build a proper back-end is just … And a really good back-end. It’s fast, it’s incredibly clever, what it does, and if it wasn’t for Laravel, I … I’m sure there are other things out there, maybe I’d learn Ruby or something, but it just allows me to get stuff done very quickly.
Phil: For example, in the back-end you create one of these flashcards and then you send it off to get the audio transcription and to get it translated into other languages. And the APIs that we use for both those services are quite heavily throttled; you can only do so many requests a second. And the thought of having to deal with calling on other APIs and throttling requests and things like that … The thought of doing that without Laravel … I have no idea how I’d do it. But with Laravel, you read the documentation, hunt down a couple of tutorials and you’re away.
Phil: The back-end was probably 90% done within three days, I’d say. I got all of that set up and then really turned my attention … There’s an admin interface whereby Rachel and others can go in and edit content and update content and add translations and get new audio files. But really, the primary purpose of the backend is the API. Once all the back-end was set up, I focused my attention on the app, which is entirely built using React Native. And that compiled down to both an IOS and Android app.
Phil: Rachel doesn’t have an iPhone and I am completely in on the Apple ecosystem and partly for that reason, but partly because it’s just an amazing tool set, I’m using Expo, which is a collection of tools that wrap around React Native to help with speedy development. There’s an Expo app and what it allows you to do is when you’re in the development phase, completely bypass the App Store by just sending a JavaScript bundle to their servers and when users download the Expo Client on their phone, they can download that JavaScript bundle and load the app within the Expo Client. Does that make sense?
Drew: It does, yeah.
Phil: Yep. Expo was really the key thing in ensuring this app could be developed really swiftly because it meant every couple of hours I could build something and Rachel could be seeing it where the thought of doing a whole build and getting it to the App Store and go by the Google ecosystem, there’s no way you could do that every couple of hours. It just wouldn’t … You’d spend more time building than actually developing the app. Expo was crucial in that process.
Drew: Expo’s the tool that you’re using as part of your development workflow to enable you to do that in the development phase but it’s not something you go into production with? Is that right?
Phil: Exactly. It’s used in development phase but it also handles the build process. Using the CLI, it will build a package that you can then upload to the Play Store or to the App Store. It looks after all the authentication and keys and certificates and all the side of things which has traditionally been such a headache and incredibly daunting as well. And that has made … I think that has put a lot of people off app development. Getting all these certificates is so difficult and actually, Expo just makes that incredibly easy.
Drew: How did you go about constructing things on the React side?
Phil: I have a starter framework. I’ve developed a pattern of how I construct apps. I use RedUX as state management and that, although it’s not prescriptive, there’s a rough structure that goes alongside that. Yeah, I don’t quite know how much detail to go into, but there’s a lot of stateless components at the end of it, which I’m getting into and I appreciate the advantages of that.
Phil: One other thing that’s worth mentioning is I’m really getting into typing this year or trying to discipline myself to do it. I decided although it would take … I’m not great at it, so I knew it would take me longer to build the app with TypeScript but it felt a lot safer doing that because intelligence in my editor around TypeScript just meant that I wasn’t making mistakes as often. And I’ve fallen foul of that in the past where I’ve not used TypeScript and I’m getting lots of red screens where things are undefined and I’ve just avoided that and managed it. And that hopefully means now I can add features without risk of breaking stuff that is in there already.
Drew: And have you done a lot of work with React Native before?
Phil: Yep. I’ve built quite a few things in React Native. It’s nice now because it’s really settled down. And this goes with the whole react ecosystem now. Now I think hooks are being adopted a lot more widely and all those … That big latest batch of changes, everything feels like it’s settling a bit now and it’s worth learning those things and implementing them. Yeah, it’s great. It’s great.
Drew: Just thinking about your workflow, you were saying you started with mocking up an API at the back-end. You then built a Laravel app to … The API was what your Laravel app was exposing to the mobile app, is that right?
Phil: Exactly. Really, the documentation and the mock API was just to give me a standard to work toward. That is what I wanted to get to. And I also … I sometimes find that, actually, I’d quite like to work on the app now and not on the back-end and that allowed me to switch to work on the app when the back-end wasn’t in place. So, that was another reason for doing that.
Drew: And I suppose that’s a workflow that larger teams could use and could lean on where you might have different people developing the back-end and a mobile app. If you have a mock API to start with, then both teams can work inwards towards that API at the same time.
Phil: That’s how I first came across this idea because, actually, it meant that if I was building a back-end then someone else could develop the mobile app.
Drew: How do you balance under time pressure? How do you create a balance between moving quickly and relying on technologies that you are familiar with and you know you can work quickly and you know that will do the job … How do you balance that between what might traditionally be a longer R&D phase where you workout, actually, what is the really best technology for this job? Is it a case of just going with what you know will do a good job and you can ship quickly?
Phil: That is a good question. I think as soon as the project was mentioned to me, I thought I know exactly how I’m going to build all of this. And if I didn’t have kids and I sat in a dark room, I think I could have probably turned it all around in about five days if I’d have been working on it solid, solid, solid because the requirements were very much in line with my experience of building apps. I’ve built similar kind of things where it calls on an API, stores the results in state and presents them. I’m now at a position where there’s some bits where I’m like, “Okay, I need to go back and refactor that.”
Phil: Like I’ve spoke about typing tin, but actually the types can be quite loose in the app and that needs to be tightened up. And on the back-end, there aren’t many tests and now we’re starting to roll the back-end out because lots of people have come forward and said, “Actually, this is a great resource. I’d like to volunteer my services to translate this into my native language.” The back-ends being used by more people so I’m just thinking, hang on, I need a few more tests in here to make sure that nothing can break because there are people using this in production now.
Phil: I think I answered your question. Essentially, there was no decision making. I just had to get it out there as quickly as possible.
Drew: Did at any point you consider making this as a progressive web app?
Phil: We did. Just before this all kicked off there came an announcement which I didn’t fully consume. There was some announcement which I read on Jeremy Keith’s blog which made me nervous about progressive web apps. I really love the technology and the idea behind it, but I just didn’t sense it was far enough along yet. And I don’t sense it’s in people’s psyche quite enough whereas telling people to go to the App Store and download the app, everyone knows how to do that. It just felt like the safest bet was to get the app done.
Drew: I find sometimes that people are more familiar with the concept of an app than they are with the concept of a website.
Phil: Yeah, my sense, as well, was it just felt too early to place all our eggs in one basket with the progressive web app. I’m sure it will get there. I really hope it will get there because it feels a much better solution to that, but I don’t think we’re quite there yet.
Drew: You presumably build React projects for the web as well as React Native projects. Is this something that you could take that code base from React Native and move it to the web at some point in the future? How different are those two different environments?
Phil: One of the interesting developments in React Native over the past few years is Nicholas Geiger built a package called React Native Web, which … How React Native works is it’s React and then you have different clients. And the traditional clients are IOS and Android but Nicholas Geiger’s built this package whereby one of the clients is web. So, you’re building a React Native app but it spits out HTML and JavaScript. And actually, I think I’m right in saying the Twitter website, I think, is built using React Native Web or one of the Twitter … I’m pretty sure the Twitter website is using React Native Web. And it’s really good. Unfortunately, one of the packages we use doesn’t transfile down to React Native Web.
Phil: However, I think my job for next week is going to be to ditch that package so that we can use React Native Web. And the reason I want to use that is because the website is still currently powered by Squarespace but I would like to use Squarespace for all the marketing agency stuff but for the actual flashcards, I would like to be using exactly the same code base as a mobile app and call in on the same API so that we can have consistency across the board.
Drew: I was going to ask, actually, how the website fits into this. The same functionality is potentially going to be available or already is available via the website?
Phil: Some of the functionality is available on the website. That was actually built in View. On the website, we just inject some JavaScript and that was a lot easier to do with View because it’s just a load of script tags. There’s no transfiling, there’s no funny business, and it was just very quick. And I was very confident that I could get that working quite quickly. Yeah, the website is done like that but hopefully by this time next week we’ll have built that with React Native Web.
Drew: You mentioned that the app needed to be multi-lingual and your flashcards are available in different languages. What was the process of doing that and making that possible?
Phil: The Squarespace site uses a plug-in by a company called Weglot which I was quite impressed by, actually. You essentially set up a load of sub domains and point those sub domains at the Weglot server and that, then, fetches the corresponding page of the English translation and translates it on the fly. And it’s seemingly very reliable and they have said for this service they’re not going to charge anything. And they have got an API as well as that service that they offer to Squarespace. When a card is updated, we post all that data to Weglot along with a list of translations that are active and Weglot sends us back a translation. I think it is larger than a wrapper around Google Translate and a few other services.
Phil: We’re really hopefully that a professional translation service are going to take this on. Yeah. I’ll probably post something about that on my blog this week and that will be on the CardMedic website. But yeah, a professional translation service have said they’ll do it and they’ll do 10 languages. And then we’ve had a load of other people come forward and say they’re really happy to translate it to their languages. So, I’m building this editor feature whereby people who are … Quite a few people have come forward from Hungary and they can see a list of articles that have yet to receive a Hungarian translation and they can just pick them off and once they’re done, we’ll be able to push those new languages live.
Drew: And another API you mentioned that you made yourself was one for text to speech. How did that work?
Phil: The website uses a service called SiteSpeaker. Again, I think this might be a wrapper around Google text to speech services, but you send them a string of text and the language the text is in and the voice that you want, because you can have different voices, and it sends you back an audio file. I think it dumps it on S3 or something, sends you back a URL. There’s been some tricky bits around that, around how particular characters are encoded, especially when you get to foreign languages. That gets really difficult. But I think that is working pretty well now.
Drew: One of the things that you mentioned as part of the basic requirements for version one was the ability to search for a flashcard. How are you handling the search within the app? Is that happening in the client or does that happen back on the server?
Phil: That happens in the client and is ridiculously simple. And I’m sure there’s a much better way of doing searches than seeing if one string is included in another string. I think, again, that might be developed because for example, if you’re searching for breathing almost every article on there comes up and it probably needs to be a bit more sophisticated. But at the minute, it’s doing the job.
Drew: That’s how search always starts.
Phil: Yeah.
Drew: The simplest possible solution and then you work out from there when you find the problems.
Phil: Yeah.
Drew: The Laravel back-end, how is that hosted?
Phil: That is on Digital Ocean. Again, Digital Ocean has launched a COVID relief program, so they have put a load of credit on our account to cover the cost of this, which is great. I don’t think we’re paying for any service and we’re using a lot of services on there. The server was built using Forge, which is a service built by the founder of Laravel, Taylor Otwell, which spins up new Digital Ocean droplets and services on S3 and a few other hosting packages. It does all the stuff, in my eyes, that a sys admin would do like scheduling and cron jobs and upgrading and deployment. It just makes it so simple. I’d be lost without that.
Drew: It sounds like that architecture of this app is making a lot of use of external services and APIs, which is a nice modern way to go. Given more time to investigate different options, do you think it’s the sort of app that could have been built with a serverless approach?
Phil: It could have. One of the funny things about it is it’s not very demanding on the server. The jobs that do need to be done, like going to the text to speech, that’s intensive process but we’re not actually doing that process. We’re just calling API and it’s somebody else’s problem. There’s quite a lot of request to the server, but we cache … Everyone’s getting the same content so we just cache the API and flush the cache once every hour, I think. So there isn’t actually a lot of load on the server. It is not the cheapest droplet but it’s not far off the cheapest droplet and it’s doing fine. It probably could have been serverless but, again, I think that ecosystem isn’t quite … Well, I don’t know enough about it to be able to churn that out in this amount of time.
Drew: Would you have done anything differently, looking back at the project now, about the way the technology came together? The choices that you made? Would you have done anything differently if you could do it over?
Phil: I wish we’d use React Native Web from the start. I kind of tried to do that after the fact and realized that actually, that was going to be really difficult. I wish I’d used React Native Web from the start and played closer attention to that. I don’t think I’d have changed anything on the back-end side of things. I wish I had more time to have done it. I feel there are some bits I could have done better. And I maybe wish I could have got a designer involved. A lot of it is from a UI framework, the app itself, and there are some screens which I’m less happy with than others. And the screen I’m least happy with is the one that The Guardian decided to feature on their homepage over the weekend, so that was a bit annoying.
Drew: Once an app is ready, you think about getting it into the hands who need it. From a web project point of view, that’s just deploying to a server of a CDN. With Native apps, it’s a little bit more complex than that, isn’t it? You need to know about the App Stores, about developer accounts and all that sort of business. Is that something you’ve done a lot of before? And how did that process go?
Phil: Expo handle a lot of the difficult technical side of that and the documentation on the Expo site is incredible. If you’re just getting into this and you’re thinking oh, yeah, I’m a front-end dev, I think I could build an app, then you should just dive into Expo and give it a whirl because even if you don’t ship, it will take you through the whole process and explains everything really clearly. And I don’t know how they do it, but their documentation, they always manage to keep up to date with the Play Store and the App Store. So when the UI changes in … What’s it called? App Store Connect … Then actually, the Expo documentation is updated, which just makes everything so much easier because you just follow their instructions and it all works great.
Phil: One of the biggest stress and difficulty with the whole project came about getting approval in the App Stores. We shipped … We first submitted the app to the Apple App Store last Thursday. Yeah, last Thursday. So, eight days ago as we’re recording this. And it was pretty promptly rejected with a very, very stern rejection notice saying, “Don’t try this again.” And it pointed us to a document which they published but I had not read saying, “We’re only going to release COVID apps from registered companies.” And this is all on my developer account at the time. And my heart sank and I thought, “Oh God. I’ve spent a lot of time on this and this woman, Rachel, has spent loads of time on it and it’s not going to happen.”
Phil: I then calmed down a bit and we rushed through her developer account for her company. Thankfully, she was … CardMedic is a registered trademarked company, so we rushed through a developer account, made the application on her account and it was approved straight away. Getting the Android app published has been the same process but drawn out over 10 days and they sent us a really harsh rejection notice, whereas Apple’s was like, “We don’t know who you are. You’re some bloke with a funny company name. Why on earth are you talking about COVID?” Which I kind of understand.
Phil: The Google rejection notice was talking about profiteering from the pandemic and saying the app was insensitive and it was just very, very scary. And I was quite disheartened but I wrote a very firm appeal to their rejection and said, “Look, we’re reputable. We got a letter from a consultant at the hospital. The app was on The Guardian and The Beeb last weekend and has also featured on Government UK this week.” We sent the Play Store links to those articles and they approved the app this morning. But yeah, that had been the biggest stress of the project because you obviously can’t phone up Tim Cook and say, “Hey, where’s my app?” You just kind of … Especially with Google, you just submit the app and you can put in some supporting notes but there’s no dialogue. So, that was quite stressful but we’ve done it now. It’s in.
Drew: You’ve managed to get the app developed in about 10 days and it sounds like the reception has been pretty good, being featured on news outlets and going down quite well with its potential users. What are the next steps? Where does it go from here?
Phil: The next steps are getting the translations better. We really want to incorporate some features which will help people who have some kind of learning difficulty. I think I’d likely involve adding illustrations to particular cards. There’s this key card which shows your headshot and says, “Hi, my name is Phil. I’m a doctor at UCH,” and so forth. That page currently isn’t translated because, obviously, it’s unique to everyone. So I want to sort out how I’m going to do that without … Because we need to do that presuming that the person is offline when they’re viewing that screen, so that’s a little bit challenging but I’m sure I’ll sort that out. And then there’s a whole load more cards to add over the weekend as we hear of more use cases and more stories about it. So, we’re getting some new cards written, which will help in those scenarios and we’ll hopefully get those on the app soon.
Drew: It sounds like very valuable work to be doing and people can, of course, find out more about the app by going to CardMedic.com. I’ve been learning about building apps rapidly. What have you been learning about lately, Phil?
Phil: I have been learning about how to make the perfect pulled pork because it was my birthday this week and we’re having a virtual Zoom party tomorrow night, so I currently have two very large cuts of pork barbecuing and they’ve done five hours and they’ve got about 12 hours to go.
Drew: That sounds delicious. If I wasn’t vegetarian …
Phil: Yeah. The pulled halloumi isn’t quite as tasty, I’m afraid.
Drew: If you, dear listener, would like to hear more from Phil, you can follow him on Twitter where he’s @MonkeyPhil and his personal blog is MonkeyPhil.co. You can find examples of his work and hire him to work on your projects at AMillionMonkeys.co.uk. Thanks for joining us today, Phil. Do you have any parting words?
Phil: I think I’d really encourage people if they are front-end web developers to at least explore building apps in React Native. If you’ve got experience in React and you’re willing to read a lot of documentation, actually the process is nowhere near as daunting as you’d imagine.
(il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/smashing-podcast-episode-15-with-phil-smith-how-can-i-build-an-app-in-10-days/ source https://scpie.tumblr.com/post/617299702558408704
0 notes
laurelkrugerr · 4 years
Text
Smashing Podcast Episode 15 With Phil Smith: How Can I Build An App In 10 Days?
About The Author
Drew is a director at edgeofmyseat.com, co-founder of Notist and lead developer for small content management system Perch. Prior to this, he was a Web Developer … More about Drew McLellan …
In this episode of the Smashing Podcast, we’re talking about building apps on a tight timeline. How can you quickly turn around a project to respond to an emerging situation like COVID-19? Drew McLellan talks to Phil Smith to find out.
In this episode of the Smashing Podcast, we’re talking about building apps on a tight timeline. How can you quickly turn around a project to respond to an emerging situation like COVID-19? Drew McLellan talks to Phil Smith to find out.
Show Notes
Weekly Update
Transcript
Drew McLellan: He is director of the full-stack web development studio amillionmonkeys, where he partners with business owners and creative agencies to build digital products that make an impact. He’s worked on projects for the BBC, AirBnB, Sky Cinema, Pearson, ITV, and Sussex Wildlife Trust to name but a few and works right across the stack with React, Vue, Laravel, Gatsby and more. Hailing from Brighton on the UK South coast, he’s also an author for Smashing Magazine, writing recently about the Alpine JavaScript framework. So, we know he’s a skilled developer and communicator, but did you know he can solve a Rubik’s Cube in six seconds using only his feet? My Smashing friends, please welcome Phil Smith.
Drew: Hi, Phil. How are you?
Phil Smith: I’m smashing, Drew.
Drew: We’re in the thick of this crisis of COVID-19 and I think one of the interesting ways that we’re placed as designers and developers and technologists is to be in this position where we can still work and we can still do our jobs. And the work that we do is often based around providing access to information or enabling people to communicate, which is, I think, very relevant in a situation like this. I was interested to look at how those skills could be put to use to help in a time of crisis and then I saw your blog post, Phil, about how you had been doing something just like that. What have you been working on? How did this all start?
Phil: It’s a very crazy story. About three weeks ago I was catch up with some friends and we’re feeling very glum about the whole situation. We’ve got two kids who we’re trying to homeschool while keeping this business going. And I was feeling a bit down about not doing that very well and not doing my job very well and the prospects of seeing friends and things like that. And then I had a chat with my wife who said, “Look, you just need to pick yourself up a bit, really.” And the same day, a chap called David got in touch via Wired Sussex, which is a kind of tech group in and around Brighton. And he said he had a friend who’d built a website which was around flashcards for medical practitioners who are caring for patients suffering with COVID.
Phil: He was looking for a developer to turn this website into an app and add a few features. And they wanted it done very, very quickly and they had essentially no money. And I dwelled on it for not very long and I’ve been building apps and have the experience of doing back-end and front-end development and it just felt like this was … It felt like a significant moment, really, where I was having a bit of a crisis and this incredible opportunity came round and this need and I could actually contribute something. So, I got in touch with David. There was a lot of back and forth. And then I spoke to Rachel, who is the founder of CardMedic. She’s currently in America, so there’s this weird time difference that we’ve got to deal with every day. But she was really keen and very trusting of me. I spoke to her husband who’s a bit more tech-savvy and then we set to work.
Phil: Essentially, it was … There were a few features that she wanted added but this was really about actually building … The existing site is on Squarespace, so it needed a new back-end built and an API and then an app that calls on the API and a few nice features added. Yeah. People might have seen the app or they can download it. It’s ridiculously simple. It was really just about … It wasn’t about there’s loads of learning to be done, it was just about there’s quite a lot of work to do. I just need to get it done. I had a bit of client work to do but tried to put that off as much as possible and did a lot of late nights and got it churned out in about 10 days, I think it took, from starting to getting it on the App Store.
Drew: Just in the briefest terms, what is the app and how do medics use it?
Phil: One of the strange medical nuances of COVID is because of the way it’s grown, there are lots of people caring for patients who have COVID who have no experience in respiratory illness and they may well be looking after patients whose first language is their first language because of the rate that it’s grown and because of these issues like them dealing with it in care homes and things like that. What the app does is it’s a kind of flashcard system whereby if there’s a particular subject you need to speak to a patient about … That might be about something like someone’s having difficulty breathing … Then there would be a flashcard which explains to the patient why they’re having difficulty breathing and what the practitioner is going to do about that.
Phil: The app can also read the script aloud and we’re currently in 10 languages, which is all machine-translated at the minute. Yeah. But that’s the basics of the app.
Drew: That’s sounds incredibly important, incredibly useful for people working under this pressured situation out in the field. With the quick turnaround that was needed for this project for obvious reasons, how did you go about breaking it down and deciding what needed to be there for launch and what you could deal with and add later?
Phil: Rachel had lots of feature requests that she wanted to add to the app. What we agreed from the outset was the first version, which is the version that is now available … The things that would ship are all the functionality on the existing site. That is translation into different languages, read-aloud, the text to speech, and then a list of cards alphabetically. And the one that we wanted to add, which we felt fitted into the things we wanted to launch with was a card where practitioners could take a photo of their face and then show it to their patients along with a kind of introductory text because you’ll be wear … A lot of these people are wearing PPE and they’re just losing … Caring for people and they don’t know what their faces look like.
Phil: We agreed, actually, to get this thing to ship as soon as possible they are the only features that would make V1. And anything else, we’d park and then we’d prioritize. And we’re kind of going through that process now of saying, “Okay, what do we want to deal with next?” The interesting side of this has been that as we’ve shipped, actually lots of people have come forward with their own suggestions. And Rachel, who’s never done this before, is balancing the things that she thinks the app needs with the things that other people are saying the app needs and we’re trying to balance what is most important, here.
Drew: It can be a great eye-opener, can’t it? Shipping early and then listening to feedback rather than spending a lot of time in development building loads and loads of features and then getting it in front of users.
Phil: What’s been funny as well is when we got in the App Store last Friday … Yeah, about midnight on Friday and then The Guardian ran a piece on Saturday. Great. So, we got loads of coverage really quickly and there was quite a lot of feedback from people who aren’t practitioners and that is difficult for Rachel, I think, to deal with of, “Okay, where are these constructive ideas by practitioners and where are these interesting things but actually aren’t going to make a difference in this crisis?”
Drew: This is a native mobile app that’s built largely with what we usually think of as web technologies. What was the stack and what was each part of that stack responsible for?
Phil: Sit tight. Here we go. The first thing, I think, I did was I have an A3 pad and I mapped out data models and what I thought the data structure would look like. I then … I use a thing, and I don’t know how I ended up using it, but it’s called Apiary. I don’t even know you pronounce it. You know how you pronounce it.
Drew: Might be Apurree?
Phil: Yeah. One of those. I think Oracle bought it a few years ago, so I think it’s quite a big outfit now. Anyway, that allows you to write API documentation and it gives you a kind of mock API. I did that first of all. I think this is the first thing that I’ve ever done which is multilingual as well. Certainly, it’s the first API I’ve been multilingual so I had to do a bit of research and suss out … And part of the reason I decided with this, to do the documentation and the mock API, was just to play with a few ideas about how the API could be structured if it was multilingual.
Phil: I settled on what I wanted the API to look like and then started to build a back-end using Laravel. I use Laravel for … I do both front-end and back-end. Everything back-end I do, I use Laravel. It’s just incredible. The speed at which you can build a proper back-end is just … And a really good back-end. It’s fast, it’s incredibly clever, what it does, and if it wasn’t for Laravel, I … I’m sure there are other things out there, maybe I’d learn Ruby or something, but it just allows me to get stuff done very quickly.
Phil: For example, in the back-end you create one of these flashcards and then you send it off to get the audio transcription and to get it translated into other languages. And the APIs that we use for both those services are quite heavily throttled; you can only do so many requests a second. And the thought of having to deal with calling on other APIs and throttling requests and things like that … The thought of doing that without Laravel … I have no idea how I’d do it. But with Laravel, you read the documentation, hunt down a couple of tutorials and you’re away.
Phil: The back-end was probably 90% done within three days, I’d say. I got all of that set up and then really turned my attention … There’s an admin interface whereby Rachel and others can go in and edit content and update content and add translations and get new audio files. But really, the primary purpose of the backend is the API. Once all the back-end was set up, I focused my attention on the app, which is entirely built using React Native. And that compiled down to both an IOS and Android app.
Phil: Rachel doesn’t have an iPhone and I am completely in on the Apple ecosystem and partly for that reason, but partly because it’s just an amazing tool set, I’m using Expo, which is a collection of tools that wrap around React Native to help with speedy development. There’s an Expo app and what it allows you to do is when you’re in the development phase, completely bypass the App Store by just sending a JavaScript bundle to their servers and when users download the Expo Client on their phone, they can download that JavaScript bundle and load the app within the Expo Client. Does that make sense?
Drew: It does, yeah.
Phil: Yep. Expo was really the key thing in ensuring this app could be developed really swiftly because it meant every couple of hours I could build something and Rachel could be seeing it where the thought of doing a whole build and getting it to the App Store and go by the Google ecosystem, there’s no way you could do that every couple of hours. It just wouldn’t … You’d spend more time building than actually developing the app. Expo was crucial in that process.
Drew: Expo’s the tool that you’re using as part of your development workflow to enable you to do that in the development phase but it’s not something you go into production with? Is that right?
Phil: Exactly. It’s used in development phase but it also handles the build process. Using the CLI, it will build a package that you can then upload to the Play Store or to the App Store. It looks after all the authentication and keys and certificates and all the side of things which has traditionally been such a headache and incredibly daunting as well. And that has made … I think that has put a lot of people off app development. Getting all these certificates is so difficult and actually, Expo just makes that incredibly easy.
Drew: How did you go about constructing things on the React side?
Phil: I have a starter framework. I’ve developed a pattern of how I construct apps. I use RedUX as state management and that, although it’s not prescriptive, there’s a rough structure that goes alongside that. Yeah, I don’t quite know how much detail to go into, but there’s a lot of stateless components at the end of it, which I’m getting into and I appreciate the advantages of that.
Phil: One other thing that’s worth mentioning is I’m really getting into typing this year or trying to discipline myself to do it. I decided although it would take … I’m not great at it, so I knew it would take me longer to build the app with TypeScript but it felt a lot safer doing that because intelligence in my editor around TypeScript just meant that I wasn’t making mistakes as often. And I’ve fallen foul of that in the past where I’ve not used TypeScript and I’m getting lots of red screens where things are undefined and I’ve just avoided that and managed it. And that hopefully means now I can add features without risk of breaking stuff that is in there already.
Drew: And have you done a lot of work with React Native before?
Phil: Yep. I’ve built quite a few things in React Native. It’s nice now because it’s really settled down. And this goes with the whole react ecosystem now. Now I think hooks are being adopted a lot more widely and all those … That big latest batch of changes, everything feels like it’s settling a bit now and it’s worth learning those things and implementing them. Yeah, it’s great. It’s great.
Drew: Just thinking about your workflow, you were saying you started with mocking up an API at the back-end. You then built a Laravel app to … The API was what your Laravel app was exposing to the mobile app, is that right?
Phil: Exactly. Really, the documentation and the mock API was just to give me a standard to work toward. That is what I wanted to get to. And I also … I sometimes find that, actually, I’d quite like to work on the app now and not on the back-end and that allowed me to switch to work on the app when the back-end wasn’t in place. So, that was another reason for doing that.
Drew: And I suppose that’s a workflow that larger teams could use and could lean on where you might have different people developing the back-end and a mobile app. If you have a mock API to start with, then both teams can work inwards towards that API at the same time.
Phil: That’s how I first came across this idea because, actually, it meant that if I was building a back-end then someone else could develop the mobile app.
Drew: How do you balance under time pressure? How do you create a balance between moving quickly and relying on technologies that you are familiar with and you know you can work quickly and you know that will do the job … How do you balance that between what might traditionally be a longer R&D phase where you workout, actually, what is the really best technology for this job? Is it a case of just going with what you know will do a good job and you can ship quickly?
Phil: That is a good question. I think as soon as the project was mentioned to me, I thought I know exactly how I’m going to build all of this. And if I didn’t have kids and I sat in a dark room, I think I could have probably turned it all around in about five days if I’d have been working on it solid, solid, solid because the requirements were very much in line with my experience of building apps. I’ve built similar kind of things where it calls on an API, stores the results in state and presents them. I’m now at a position where there’s some bits where I’m like, “Okay, I need to go back and refactor that.”
Phil: Like I’ve spoke about typing tin, but actually the types can be quite loose in the app and that needs to be tightened up. And on the back-end, there aren’t many tests and now we’re starting to roll the back-end out because lots of people have come forward and said, “Actually, this is a great resource. I’d like to volunteer my services to translate this into my native language.” The back-ends being used by more people so I’m just thinking, hang on, I need a few more tests in here to make sure that nothing can break because there are people using this in production now.
Phil: I think I answered your question. Essentially, there was no decision making. I just had to get it out there as quickly as possible.
Drew: Did at any point you consider making this as a progressive web app?
Phil: We did. Just before this all kicked off there came an announcement which I didn’t fully consume. There was some announcement which I read on Jeremy Keith’s blog which made me nervous about progressive web apps. I really love the technology and the idea behind it, but I just didn’t sense it was far enough along yet. And I don’t sense it’s in people’s psyche quite enough whereas telling people to go to the App Store and download the app, everyone knows how to do that. It just felt like the safest bet was to get the app done.
Drew: I find sometimes that people are more familiar with the concept of an app than they are with the concept of a website.
Phil: Yeah, my sense, as well, was it just felt too early to place all our eggs in one basket with the progressive web app. I’m sure it will get there. I really hope it will get there because it feels a much better solution to that, but I don’t think we’re quite there yet.
Drew: You presumably build React projects for the web as well as React Native projects. Is this something that you could take that code base from React Native and move it to the web at some point in the future? How different are those two different environments?
Phil: One of the interesting developments in React Native over the past few years is Nicholas Geiger built a package called React Native Web, which … How React Native works is it’s React and then you have different clients. And the traditional clients are IOS and Android but Nicholas Geiger’s built this package whereby one of the clients is web. So, you’re building a React Native app but it spits out HTML and JavaScript. And actually, I think I’m right in saying the Twitter website, I think, is built using React Native Web or one of the Twitter … I’m pretty sure the Twitter website is using React Native Web. And it’s really good. Unfortunately, one of the packages we use doesn’t transfile down to React Native Web.
Phil: However, I think my job for next week is going to be to ditch that package so that we can use React Native Web. And the reason I want to use that is because the website is still currently powered by Squarespace but I would like to use Squarespace for all the marketing agency stuff but for the actual flashcards, I would like to be using exactly the same code base as a mobile app and call in on the same API so that we can have consistency across the board.
Drew: I was going to ask, actually, how the website fits into this. The same functionality is potentially going to be available or already is available via the website?
Phil: Some of the functionality is available on the website. That was actually built in View. On the website, we just inject some JavaScript and that was a lot easier to do with View because it’s just a load of script tags. There’s no transfiling, there’s no funny business, and it was just very quick. And I was very confident that I could get that working quite quickly. Yeah, the website is done like that but hopefully by this time next week we’ll have built that with React Native Web.
Drew: You mentioned that the app needed to be multi-lingual and your flashcards are available in different languages. What was the process of doing that and making that possible?
Phil: The Squarespace site uses a plug-in by a company called Weglot which I was quite impressed by, actually. You essentially set up a load of sub domains and point those sub domains at the Weglot server and that, then, fetches the corresponding page of the English translation and translates it on the fly. And it’s seemingly very reliable and they have said for this service they’re not going to charge anything. And they have got an API as well as that service that they offer to Squarespace. When a card is updated, we post all that data to Weglot along with a list of translations that are active and Weglot sends us back a translation. I think it is larger than a wrapper around Google Translate and a few other services.
Phil: We’re really hopefully that a professional translation service are going to take this on. Yeah. I’ll probably post something about that on my blog this week and that will be on the CardMedic website. But yeah, a professional translation service have said they’ll do it and they’ll do 10 languages. And then we’ve had a load of other people come forward and say they’re really happy to translate it to their languages. So, I’m building this editor feature whereby people who are … Quite a few people have come forward from Hungary and they can see a list of articles that have yet to receive a Hungarian translation and they can just pick them off and once they’re done, we’ll be able to push those new languages live.
Drew: And another API you mentioned that you made yourself was one for text to speech. How did that work?
Phil: The website uses a service called SiteSpeaker. Again, I think this might be a wrapper around Google text to speech services, but you send them a string of text and the language the text is in and the voice that you want, because you can have different voices, and it sends you back an audio file. I think it dumps it on S3 or something, sends you back a URL. There’s been some tricky bits around that, around how particular characters are encoded, especially when you get to foreign languages. That gets really difficult. But I think that is working pretty well now.
Drew: One of the things that you mentioned as part of the basic requirements for version one was the ability to search for a flashcard. How are you handling the search within the app? Is that happening in the client or does that happen back on the server?
Phil: That happens in the client and is ridiculously simple. And I’m sure there’s a much better way of doing searches than seeing if one string is included in another string. I think, again, that might be developed because for example, if you’re searching for breathing almost every article on there comes up and it probably needs to be a bit more sophisticated. But at the minute, it’s doing the job.
Drew: That’s how search always starts.
Phil: Yeah.
Drew: The simplest possible solution and then you work out from there when you find the problems.
Phil: Yeah.
Drew: The Laravel back-end, how is that hosted?
Phil: That is on Digital Ocean. Again, Digital Ocean has launched a COVID relief program, so they have put a load of credit on our account to cover the cost of this, which is great. I don’t think we’re paying for any service and we’re using a lot of services on there. The server was built using Forge, which is a service built by the founder of Laravel, Taylor Otwell, which spins up new Digital Ocean droplets and services on S3 and a few other hosting packages. It does all the stuff, in my eyes, that a sys admin would do like scheduling and cron jobs and upgrading and deployment. It just makes it so simple. I’d be lost without that.
Drew: It sounds like that architecture of this app is making a lot of use of external services and APIs, which is a nice modern way to go. Given more time to investigate different options, do you think it’s the sort of app that could have been built with a serverless approach?
Phil: It could have. One of the funny things about it is it’s not very demanding on the server. The jobs that do need to be done, like going to the text to speech, that’s intensive process but we’re not actually doing that process. We’re just calling API and it’s somebody else’s problem. There’s quite a lot of request to the server, but we cache … Everyone’s getting the same content so we just cache the API and flush the cache once every hour, I think. So there isn’t actually a lot of load on the server. It is not the cheapest droplet but it’s not far off the cheapest droplet and it’s doing fine. It probably could have been serverless but, again, I think that ecosystem isn’t quite … Well, I don’t know enough about it to be able to churn that out in this amount of time.
Drew: Would you have done anything differently, looking back at the project now, about the way the technology came together? The choices that you made? Would you have done anything differently if you could do it over?
Phil: I wish we’d use React Native Web from the start. I kind of tried to do that after the fact and realized that actually, that was going to be really difficult. I wish I’d used React Native Web from the start and played closer attention to that. I don’t think I’d have changed anything on the back-end side of things. I wish I had more time to have done it. I feel there are some bits I could have done better. And I maybe wish I could have got a designer involved. A lot of it is from a UI framework, the app itself, and there are some screens which I’m less happy with than others. And the screen I’m least happy with is the one that The Guardian decided to feature on their homepage over the weekend, so that was a bit annoying.
Drew: Once an app is ready, you think about getting it into the hands who need it. From a web project point of view, that’s just deploying to a server of a CDN. With Native apps, it’s a little bit more complex than that, isn’t it? You need to know about the App Stores, about developer accounts and all that sort of business. Is that something you’ve done a lot of before? And how did that process go?
Phil: Expo handle a lot of the difficult technical side of that and the documentation on the Expo site is incredible. If you’re just getting into this and you’re thinking oh, yeah, I’m a front-end dev, I think I could build an app, then you should just dive into Expo and give it a whirl because even if you don’t ship, it will take you through the whole process and explains everything really clearly. And I don’t know how they do it, but their documentation, they always manage to keep up to date with the Play Store and the App Store. So when the UI changes in … What’s it called? App Store Connect … Then actually, the Expo documentation is updated, which just makes everything so much easier because you just follow their instructions and it all works great.
Phil: One of the biggest stress and difficulty with the whole project came about getting approval in the App Stores. We shipped … We first submitted the app to the Apple App Store last Thursday. Yeah, last Thursday. So, eight days ago as we’re recording this. And it was pretty promptly rejected with a very, very stern rejection notice saying, “Don’t try this again.” And it pointed us to a document which they published but I had not read saying, “We’re only going to release COVID apps from registered companies.” And this is all on my developer account at the time. And my heart sank and I thought, “Oh God. I’ve spent a lot of time on this and this woman, Rachel, has spent loads of time on it and it’s not going to happen.”
Phil: I then calmed down a bit and we rushed through her developer account for her company. Thankfully, she was … CardMedic is a registered trademarked company, so we rushed through a developer account, made the application on her account and it was approved straight away. Getting the Android app published has been the same process but drawn out over 10 days and they sent us a really harsh rejection notice, whereas Apple’s was like, “We don’t know who you are. You’re some bloke with a funny company name. Why on earth are you talking about COVID?” Which I kind of understand.
Phil: The Google rejection notice was talking about profiteering from the pandemic and saying the app was insensitive and it was just very, very scary. And I was quite disheartened but I wrote a very firm appeal to their rejection and said, “Look, we’re reputable. We got a letter from a consultant at the hospital. The app was on The Guardian and The Beeb last weekend and has also featured on Government UK this week.” We sent the Play Store links to those articles and they approved the app this morning. But yeah, that had been the biggest stress of the project because you obviously can’t phone up Tim Cook and say, “Hey, where’s my app?” You just kind of … Especially with Google, you just submit the app and you can put in some supporting notes but there’s no dialogue. So, that was quite stressful but we’ve done it now. It’s in.
Drew: You’ve managed to get the app developed in about 10 days and it sounds like the reception has been pretty good, being featured on news outlets and going down quite well with its potential users. What are the next steps? Where does it go from here?
Phil: The next steps are getting the translations better. We really want to incorporate some features which will help people who have some kind of learning difficulty. I think I’d likely involve adding illustrations to particular cards. There’s this key card which shows your headshot and says, “Hi, my name is Phil. I’m a doctor at UCH,” and so forth. That page currently isn’t translated because, obviously, it’s unique to everyone. So I want to sort out how I’m going to do that without … Because we need to do that presuming that the person is offline when they’re viewing that screen, so that’s a little bit challenging but I’m sure I’ll sort that out. And then there’s a whole load more cards to add over the weekend as we hear of more use cases and more stories about it. So, we’re getting some new cards written, which will help in those scenarios and we’ll hopefully get those on the app soon.
Drew: It sounds like very valuable work to be doing and people can, of course, find out more about the app by going to CardMedic.com. I’ve been learning about building apps rapidly. What have you been learning about lately, Phil?
Phil: I have been learning about how to make the perfect pulled pork because it was my birthday this week and we’re having a virtual Zoom party tomorrow night, so I currently have two very large cuts of pork barbecuing and they’ve done five hours and they’ve got about 12 hours to go.
Drew: That sounds delicious. If I wasn’t vegetarian …
Phil: Yeah. The pulled halloumi isn’t quite as tasty, I’m afraid.
Drew: If you, dear listener, would like to hear more from Phil, you can follow him on Twitter where he’s @MonkeyPhil and his personal blog is MonkeyPhil.co. You can find examples of his work and hire him to work on your projects at AMillionMonkeys.co.uk. Thanks for joining us today, Phil. Do you have any parting words?
Phil: I think I’d really encourage people if they are front-end web developers to at least explore building apps in React Native. If you’ve got experience in React and you’re willing to read a lot of documentation, actually the process is nowhere near as daunting as you’d imagine.
(il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/smashing-podcast-episode-15-with-phil-smith-how-can-i-build-an-app-in-10-days/ source https://scpie1.blogspot.com/2020/05/smashing-podcast-episode-15-with-phil.html
0 notes
scpie · 4 years
Text
Smashing Podcast Episode 15 With Phil Smith: How Can I Build An App In 10 Days?
About The Author
Drew is a director at edgeofmyseat.com, co-founder of Notist and lead developer for small content management system Perch. Prior to this, he was a Web Developer … More about Drew McLellan …
In this episode of the Smashing Podcast, we’re talking about building apps on a tight timeline. How can you quickly turn around a project to respond to an emerging situation like COVID-19? Drew McLellan talks to Phil Smith to find out.
In this episode of the Smashing Podcast, we’re talking about building apps on a tight timeline. How can you quickly turn around a project to respond to an emerging situation like COVID-19? Drew McLellan talks to Phil Smith to find out.
Show Notes
Weekly Update
Transcript
Drew McLellan: He is director of the full-stack web development studio amillionmonkeys, where he partners with business owners and creative agencies to build digital products that make an impact. He’s worked on projects for the BBC, AirBnB, Sky Cinema, Pearson, ITV, and Sussex Wildlife Trust to name but a few and works right across the stack with React, Vue, Laravel, Gatsby and more. Hailing from Brighton on the UK South coast, he’s also an author for Smashing Magazine, writing recently about the Alpine JavaScript framework. So, we know he’s a skilled developer and communicator, but did you know he can solve a Rubik’s Cube in six seconds using only his feet? My Smashing friends, please welcome Phil Smith.
Drew: Hi, Phil. How are you?
Phil Smith: I’m smashing, Drew.
Drew: We’re in the thick of this crisis of COVID-19 and I think one of the interesting ways that we’re placed as designers and developers and technologists is to be in this position where we can still work and we can still do our jobs. And the work that we do is often based around providing access to information or enabling people to communicate, which is, I think, very relevant in a situation like this. I was interested to look at how those skills could be put to use to help in a time of crisis and then I saw your blog post, Phil, about how you had been doing something just like that. What have you been working on? How did this all start?
Phil: It’s a very crazy story. About three weeks ago I was catch up with some friends and we’re feeling very glum about the whole situation. We’ve got two kids who we’re trying to homeschool while keeping this business going. And I was feeling a bit down about not doing that very well and not doing my job very well and the prospects of seeing friends and things like that. And then I had a chat with my wife who said, “Look, you just need to pick yourself up a bit, really.” And the same day, a chap called David got in touch via Wired Sussex, which is a kind of tech group in and around Brighton. And he said he had a friend who’d built a website which was around flashcards for medical practitioners who are caring for patients suffering with COVID.
Phil: He was looking for a developer to turn this website into an app and add a few features. And they wanted it done very, very quickly and they had essentially no money. And I dwelled on it for not very long and I’ve been building apps and have the experience of doing back-end and front-end development and it just felt like this was … It felt like a significant moment, really, where I was having a bit of a crisis and this incredible opportunity came round and this need and I could actually contribute something. So, I got in touch with David. There was a lot of back and forth. And then I spoke to Rachel, who is the founder of CardMedic. She’s currently in America, so there’s this weird time difference that we’ve got to deal with every day. But she was really keen and very trusting of me. I spoke to her husband who’s a bit more tech-savvy and then we set to work.
Phil: Essentially, it was … There were a few features that she wanted added but this was really about actually building … The existing site is on Squarespace, so it needed a new back-end built and an API and then an app that calls on the API and a few nice features added. Yeah. People might have seen the app or they can download it. It’s ridiculously simple. It was really just about … It wasn’t about there’s loads of learning to be done, it was just about there’s quite a lot of work to do. I just need to get it done. I had a bit of client work to do but tried to put that off as much as possible and did a lot of late nights and got it churned out in about 10 days, I think it took, from starting to getting it on the App Store.
Drew: Just in the briefest terms, what is the app and how do medics use it?
Phil: One of the strange medical nuances of COVID is because of the way it’s grown, there are lots of people caring for patients who have COVID who have no experience in respiratory illness and they may well be looking after patients whose first language is their first language because of the rate that it’s grown and because of these issues like them dealing with it in care homes and things like that. What the app does is it’s a kind of flashcard system whereby if there’s a particular subject you need to speak to a patient about … That might be about something like someone’s having difficulty breathing … Then there would be a flashcard which explains to the patient why they’re having difficulty breathing and what the practitioner is going to do about that.
Phil: The app can also read the script aloud and we’re currently in 10 languages, which is all machine-translated at the minute. Yeah. But that’s the basics of the app.
Drew: That’s sounds incredibly important, incredibly useful for people working under this pressured situation out in the field. With the quick turnaround that was needed for this project for obvious reasons, how did you go about breaking it down and deciding what needed to be there for launch and what you could deal with and add later?
Phil: Rachel had lots of feature requests that she wanted to add to the app. What we agreed from the outset was the first version, which is the version that is now available … The things that would ship are all the functionality on the existing site. That is translation into different languages, read-aloud, the text to speech, and then a list of cards alphabetically. And the one that we wanted to add, which we felt fitted into the things we wanted to launch with was a card where practitioners could take a photo of their face and then show it to their patients along with a kind of introductory text because you’ll be wear … A lot of these people are wearing PPE and they’re just losing … Caring for people and they don’t know what their faces look like.
Phil: We agreed, actually, to get this thing to ship as soon as possible they are the only features that would make V1. And anything else, we’d park and then we’d prioritize. And we’re kind of going through that process now of saying, “Okay, what do we want to deal with next?” The interesting side of this has been that as we’ve shipped, actually lots of people have come forward with their own suggestions. And Rachel, who’s never done this before, is balancing the things that she thinks the app needs with the things that other people are saying the app needs and we’re trying to balance what is most important, here.
Drew: It can be a great eye-opener, can’t it? Shipping early and then listening to feedback rather than spending a lot of time in development building loads and loads of features and then getting it in front of users.
Phil: What’s been funny as well is when we got in the App Store last Friday … Yeah, about midnight on Friday and then The Guardian ran a piece on Saturday. Great. So, we got loads of coverage really quickly and there was quite a lot of feedback from people who aren’t practitioners and that is difficult for Rachel, I think, to deal with of, “Okay, where are these constructive ideas by practitioners and where are these interesting things but actually aren’t going to make a difference in this crisis?”
Drew: This is a native mobile app that’s built largely with what we usually think of as web technologies. What was the stack and what was each part of that stack responsible for?
Phil: Sit tight. Here we go. The first thing, I think, I did was I have an A3 pad and I mapped out data models and what I thought the data structure would look like. I then … I use a thing, and I don’t know how I ended up using it, but it’s called Apiary. I don’t even know you pronounce it. You know how you pronounce it.
Drew: Might be Apurree?
Phil: Yeah. One of those. I think Oracle bought it a few years ago, so I think it’s quite a big outfit now. Anyway, that allows you to write API documentation and it gives you a kind of mock API. I did that first of all. I think this is the first thing that I’ve ever done which is multilingual as well. Certainly, it’s the first API I’ve been multilingual so I had to do a bit of research and suss out … And part of the reason I decided with this, to do the documentation and the mock API, was just to play with a few ideas about how the API could be structured if it was multilingual.
Phil: I settled on what I wanted the API to look like and then started to build a back-end using Laravel. I use Laravel for … I do both front-end and back-end. Everything back-end I do, I use Laravel. It’s just incredible. The speed at which you can build a proper back-end is just … And a really good back-end. It’s fast, it’s incredibly clever, what it does, and if it wasn’t for Laravel, I … I’m sure there are other things out there, maybe I’d learn Ruby or something, but it just allows me to get stuff done very quickly.
Phil: For example, in the back-end you create one of these flashcards and then you send it off to get the audio transcription and to get it translated into other languages. And the APIs that we use for both those services are quite heavily throttled; you can only do so many requests a second. And the thought of having to deal with calling on other APIs and throttling requests and things like that … The thought of doing that without Laravel … I have no idea how I’d do it. But with Laravel, you read the documentation, hunt down a couple of tutorials and you’re away.
Phil: The back-end was probably 90% done within three days, I’d say. I got all of that set up and then really turned my attention … There’s an admin interface whereby Rachel and others can go in and edit content and update content and add translations and get new audio files. But really, the primary purpose of the backend is the API. Once all the back-end was set up, I focused my attention on the app, which is entirely built using React Native. And that compiled down to both an IOS and Android app.
Phil: Rachel doesn’t have an iPhone and I am completely in on the Apple ecosystem and partly for that reason, but partly because it’s just an amazing tool set, I’m using Expo, which is a collection of tools that wrap around React Native to help with speedy development. There’s an Expo app and what it allows you to do is when you’re in the development phase, completely bypass the App Store by just sending a JavaScript bundle to their servers and when users download the Expo Client on their phone, they can download that JavaScript bundle and load the app within the Expo Client. Does that make sense?
Drew: It does, yeah.
Phil: Yep. Expo was really the key thing in ensuring this app could be developed really swiftly because it meant every couple of hours I could build something and Rachel could be seeing it where the thought of doing a whole build and getting it to the App Store and go by the Google ecosystem, there’s no way you could do that every couple of hours. It just wouldn’t … You’d spend more time building than actually developing the app. Expo was crucial in that process.
Drew: Expo’s the tool that you’re using as part of your development workflow to enable you to do that in the development phase but it’s not something you go into production with? Is that right?
Phil: Exactly. It’s used in development phase but it also handles the build process. Using the CLI, it will build a package that you can then upload to the Play Store or to the App Store. It looks after all the authentication and keys and certificates and all the side of things which has traditionally been such a headache and incredibly daunting as well. And that has made … I think that has put a lot of people off app development. Getting all these certificates is so difficult and actually, Expo just makes that incredibly easy.
Drew: How did you go about constructing things on the React side?
Phil: I have a starter framework. I’ve developed a pattern of how I construct apps. I use RedUX as state management and that, although it’s not prescriptive, there’s a rough structure that goes alongside that. Yeah, I don’t quite know how much detail to go into, but there’s a lot of stateless components at the end of it, which I’m getting into and I appreciate the advantages of that.
Phil: One other thing that’s worth mentioning is I’m really getting into typing this year or trying to discipline myself to do it. I decided although it would take … I’m not great at it, so I knew it would take me longer to build the app with TypeScript but it felt a lot safer doing that because intelligence in my editor around TypeScript just meant that I wasn’t making mistakes as often. And I’ve fallen foul of that in the past where I’ve not used TypeScript and I’m getting lots of red screens where things are undefined and I’ve just avoided that and managed it. And that hopefully means now I can add features without risk of breaking stuff that is in there already.
Drew: And have you done a lot of work with React Native before?
Phil: Yep. I’ve built quite a few things in React Native. It’s nice now because it’s really settled down. And this goes with the whole react ecosystem now. Now I think hooks are being adopted a lot more widely and all those … That big latest batch of changes, everything feels like it’s settling a bit now and it’s worth learning those things and implementing them. Yeah, it’s great. It’s great.
Drew: Just thinking about your workflow, you were saying you started with mocking up an API at the back-end. You then built a Laravel app to … The API was what your Laravel app was exposing to the mobile app, is that right?
Phil: Exactly. Really, the documentation and the mock API was just to give me a standard to work toward. That is what I wanted to get to. And I also … I sometimes find that, actually, I’d quite like to work on the app now and not on the back-end and that allowed me to switch to work on the app when the back-end wasn’t in place. So, that was another reason for doing that.
Drew: And I suppose that’s a workflow that larger teams could use and could lean on where you might have different people developing the back-end and a mobile app. If you have a mock API to start with, then both teams can work inwards towards that API at the same time.
Phil: That’s how I first came across this idea because, actually, it meant that if I was building a back-end then someone else could develop the mobile app.
Drew: How do you balance under time pressure? How do you create a balance between moving quickly and relying on technologies that you are familiar with and you know you can work quickly and you know that will do the job … How do you balance that between what might traditionally be a longer R&D phase where you workout, actually, what is the really best technology for this job? Is it a case of just going with what you know will do a good job and you can ship quickly?
Phil: That is a good question. I think as soon as the project was mentioned to me, I thought I know exactly how I’m going to build all of this. And if I didn’t have kids and I sat in a dark room, I think I could have probably turned it all around in about five days if I’d have been working on it solid, solid, solid because the requirements were very much in line with my experience of building apps. I’ve built similar kind of things where it calls on an API, stores the results in state and presents them. I’m now at a position where there’s some bits where I’m like, “Okay, I need to go back and refactor that.”
Phil: Like I’ve spoke about typing tin, but actually the types can be quite loose in the app and that needs to be tightened up. And on the back-end, there aren’t many tests and now we’re starting to roll the back-end out because lots of people have come forward and said, “Actually, this is a great resource. I’d like to volunteer my services to translate this into my native language.” The back-ends being used by more people so I’m just thinking, hang on, I need a few more tests in here to make sure that nothing can break because there are people using this in production now.
Phil: I think I answered your question. Essentially, there was no decision making. I just had to get it out there as quickly as possible.
Drew: Did at any point you consider making this as a progressive web app?
Phil: We did. Just before this all kicked off there came an announcement which I didn’t fully consume. There was some announcement which I read on Jeremy Keith’s blog which made me nervous about progressive web apps. I really love the technology and the idea behind it, but I just didn’t sense it was far enough along yet. And I don’t sense it’s in people’s psyche quite enough whereas telling people to go to the App Store and download the app, everyone knows how to do that. It just felt like the safest bet was to get the app done.
Drew: I find sometimes that people are more familiar with the concept of an app than they are with the concept of a website.
Phil: Yeah, my sense, as well, was it just felt too early to place all our eggs in one basket with the progressive web app. I’m sure it will get there. I really hope it will get there because it feels a much better solution to that, but I don’t think we’re quite there yet.
Drew: You presumably build React projects for the web as well as React Native projects. Is this something that you could take that code base from React Native and move it to the web at some point in the future? How different are those two different environments?
Phil: One of the interesting developments in React Native over the past few years is Nicholas Geiger built a package called React Native Web, which … How React Native works is it’s React and then you have different clients. And the traditional clients are IOS and Android but Nicholas Geiger’s built this package whereby one of the clients is web. So, you’re building a React Native app but it spits out HTML and JavaScript. And actually, I think I’m right in saying the Twitter website, I think, is built using React Native Web or one of the Twitter … I’m pretty sure the Twitter website is using React Native Web. And it’s really good. Unfortunately, one of the packages we use doesn’t transfile down to React Native Web.
Phil: However, I think my job for next week is going to be to ditch that package so that we can use React Native Web. And the reason I want to use that is because the website is still currently powered by Squarespace but I would like to use Squarespace for all the marketing agency stuff but for the actual flashcards, I would like to be using exactly the same code base as a mobile app and call in on the same API so that we can have consistency across the board.
Drew: I was going to ask, actually, how the website fits into this. The same functionality is potentially going to be available or already is available via the website?
Phil: Some of the functionality is available on the website. That was actually built in View. On the website, we just inject some JavaScript and that was a lot easier to do with View because it’s just a load of script tags. There’s no transfiling, there’s no funny business, and it was just very quick. And I was very confident that I could get that working quite quickly. Yeah, the website is done like that but hopefully by this time next week we’ll have built that with React Native Web.
Drew: You mentioned that the app needed to be multi-lingual and your flashcards are available in different languages. What was the process of doing that and making that possible?
Phil: The Squarespace site uses a plug-in by a company called Weglot which I was quite impressed by, actually. You essentially set up a load of sub domains and point those sub domains at the Weglot server and that, then, fetches the corresponding page of the English translation and translates it on the fly. And it’s seemingly very reliable and they have said for this service they’re not going to charge anything. And they have got an API as well as that service that they offer to Squarespace. When a card is updated, we post all that data to Weglot along with a list of translations that are active and Weglot sends us back a translation. I think it is larger than a wrapper around Google Translate and a few other services.
Phil: We’re really hopefully that a professional translation service are going to take this on. Yeah. I’ll probably post something about that on my blog this week and that will be on the CardMedic website. But yeah, a professional translation service have said they’ll do it and they’ll do 10 languages. And then we’ve had a load of other people come forward and say they’re really happy to translate it to their languages. So, I’m building this editor feature whereby people who are … Quite a few people have come forward from Hungary and they can see a list of articles that have yet to receive a Hungarian translation and they can just pick them off and once they’re done, we’ll be able to push those new languages live.
Drew: And another API you mentioned that you made yourself was one for text to speech. How did that work?
Phil: The website uses a service called SiteSpeaker. Again, I think this might be a wrapper around Google text to speech services, but you send them a string of text and the language the text is in and the voice that you want, because you can have different voices, and it sends you back an audio file. I think it dumps it on S3 or something, sends you back a URL. There’s been some tricky bits around that, around how particular characters are encoded, especially when you get to foreign languages. That gets really difficult. But I think that is working pretty well now.
Drew: One of the things that you mentioned as part of the basic requirements for version one was the ability to search for a flashcard. How are you handling the search within the app? Is that happening in the client or does that happen back on the server?
Phil: That happens in the client and is ridiculously simple. And I’m sure there’s a much better way of doing searches than seeing if one string is included in another string. I think, again, that might be developed because for example, if you’re searching for breathing almost every article on there comes up and it probably needs to be a bit more sophisticated. But at the minute, it’s doing the job.
Drew: That’s how search always starts.
Phil: Yeah.
Drew: The simplest possible solution and then you work out from there when you find the problems.
Phil: Yeah.
Drew: The Laravel back-end, how is that hosted?
Phil: That is on Digital Ocean. Again, Digital Ocean has launched a COVID relief program, so they have put a load of credit on our account to cover the cost of this, which is great. I don’t think we’re paying for any service and we’re using a lot of services on there. The server was built using Forge, which is a service built by the founder of Laravel, Taylor Otwell, which spins up new Digital Ocean droplets and services on S3 and a few other hosting packages. It does all the stuff, in my eyes, that a sys admin would do like scheduling and cron jobs and upgrading and deployment. It just makes it so simple. I’d be lost without that.
Drew: It sounds like that architecture of this app is making a lot of use of external services and APIs, which is a nice modern way to go. Given more time to investigate different options, do you think it’s the sort of app that could have been built with a serverless approach?
Phil: It could have. One of the funny things about it is it’s not very demanding on the server. The jobs that do need to be done, like going to the text to speech, that’s intensive process but we’re not actually doing that process. We’re just calling API and it’s somebody else’s problem. There’s quite a lot of request to the server, but we cache … Everyone’s getting the same content so we just cache the API and flush the cache once every hour, I think. So there isn’t actually a lot of load on the server. It is not the cheapest droplet but it’s not far off the cheapest droplet and it’s doing fine. It probably could have been serverless but, again, I think that ecosystem isn’t quite … Well, I don’t know enough about it to be able to churn that out in this amount of time.
Drew: Would you have done anything differently, looking back at the project now, about the way the technology came together? The choices that you made? Would you have done anything differently if you could do it over?
Phil: I wish we’d use React Native Web from the start. I kind of tried to do that after the fact and realized that actually, that was going to be really difficult. I wish I’d used React Native Web from the start and played closer attention to that. I don’t think I’d have changed anything on the back-end side of things. I wish I had more time to have done it. I feel there are some bits I could have done better. And I maybe wish I could have got a designer involved. A lot of it is from a UI framework, the app itself, and there are some screens which I’m less happy with than others. And the screen I’m least happy with is the one that The Guardian decided to feature on their homepage over the weekend, so that was a bit annoying.
Drew: Once an app is ready, you think about getting it into the hands who need it. From a web project point of view, that’s just deploying to a server of a CDN. With Native apps, it’s a little bit more complex than that, isn’t it? You need to know about the App Stores, about developer accounts and all that sort of business. Is that something you’ve done a lot of before? And how did that process go?
Phil: Expo handle a lot of the difficult technical side of that and the documentation on the Expo site is incredible. If you’re just getting into this and you’re thinking oh, yeah, I’m a front-end dev, I think I could build an app, then you should just dive into Expo and give it a whirl because even if you don’t ship, it will take you through the whole process and explains everything really clearly. And I don’t know how they do it, but their documentation, they always manage to keep up to date with the Play Store and the App Store. So when the UI changes in … What’s it called? App Store Connect … Then actually, the Expo documentation is updated, which just makes everything so much easier because you just follow their instructions and it all works great.
Phil: One of the biggest stress and difficulty with the whole project came about getting approval in the App Stores. We shipped … We first submitted the app to the Apple App Store last Thursday. Yeah, last Thursday. So, eight days ago as we’re recording this. And it was pretty promptly rejected with a very, very stern rejection notice saying, “Don’t try this again.” And it pointed us to a document which they published but I had not read saying, “We’re only going to release COVID apps from registered companies.” And this is all on my developer account at the time. And my heart sank and I thought, “Oh God. I’ve spent a lot of time on this and this woman, Rachel, has spent loads of time on it and it’s not going to happen.”
Phil: I then calmed down a bit and we rushed through her developer account for her company. Thankfully, she was … CardMedic is a registered trademarked company, so we rushed through a developer account, made the application on her account and it was approved straight away. Getting the Android app published has been the same process but drawn out over 10 days and they sent us a really harsh rejection notice, whereas Apple’s was like, “We don’t know who you are. You’re some bloke with a funny company name. Why on earth are you talking about COVID?” Which I kind of understand.
Phil: The Google rejection notice was talking about profiteering from the pandemic and saying the app was insensitive and it was just very, very scary. And I was quite disheartened but I wrote a very firm appeal to their rejection and said, “Look, we’re reputable. We got a letter from a consultant at the hospital. The app was on The Guardian and The Beeb last weekend and has also featured on Government UK this week.” We sent the Play Store links to those articles and they approved the app this morning. But yeah, that had been the biggest stress of the project because you obviously can’t phone up Tim Cook and say, “Hey, where’s my app?” You just kind of … Especially with Google, you just submit the app and you can put in some supporting notes but there’s no dialogue. So, that was quite stressful but we’ve done it now. It’s in.
Drew: You’ve managed to get the app developed in about 10 days and it sounds like the reception has been pretty good, being featured on news outlets and going down quite well with its potential users. What are the next steps? Where does it go from here?
Phil: The next steps are getting the translations better. We really want to incorporate some features which will help people who have some kind of learning difficulty. I think I’d likely involve adding illustrations to particular cards. There’s this key card which shows your headshot and says, “Hi, my name is Phil. I’m a doctor at UCH,” and so forth. That page currently isn’t translated because, obviously, it’s unique to everyone. So I want to sort out how I’m going to do that without … Because we need to do that presuming that the person is offline when they’re viewing that screen, so that’s a little bit challenging but I’m sure I’ll sort that out. And then there’s a whole load more cards to add over the weekend as we hear of more use cases and more stories about it. So, we’re getting some new cards written, which will help in those scenarios and we’ll hopefully get those on the app soon.
Drew: It sounds like very valuable work to be doing and people can, of course, find out more about the app by going to CardMedic.com. I’ve been learning about building apps rapidly. What have you been learning about lately, Phil?
Phil: I have been learning about how to make the perfect pulled pork because it was my birthday this week and we’re having a virtual Zoom party tomorrow night, so I currently have two very large cuts of pork barbecuing and they’ve done five hours and they’ve got about 12 hours to go.
Drew: That sounds delicious. If I wasn’t vegetarian …
Phil: Yeah. The pulled halloumi isn’t quite as tasty, I’m afraid.
Drew: If you, dear listener, would like to hear more from Phil, you can follow him on Twitter where he’s @MonkeyPhil and his personal blog is MonkeyPhil.co. You can find examples of his work and hire him to work on your projects at AMillionMonkeys.co.uk. Thanks for joining us today, Phil. Do you have any parting words?
Phil: I think I’d really encourage people if they are front-end web developers to at least explore building apps in React Native. If you’ve got experience in React and you’re willing to read a lot of documentation, actually the process is nowhere near as daunting as you’d imagine.
(il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/smashing-podcast-episode-15-with-phil-smith-how-can-i-build-an-app-in-10-days/
0 notes
yanobam · 5 years
Text
Best Golf Balls for High Handicappers
How frequently have you heard this?
'Purchase second hand balls' and 'Utilize the cash for balls to get exercises'. Definitely, genuine accommodating when all you're requesting is what ball you should utilize, isn't that so?
In any case, I thoroughly get you, there comes when all you need to do is air out another sleeve of balls and take care of business that new ball smell. Hold the ball up to your nose and inhale it in. The little delights throughout everyday life.
A great deal of golfers neglect the significance of a conventional golf ball yet not us. Congrats on looking for more data on the one bit of gear that is basic on each shot. How about we examine the best golf balls for high handicappers. Be that as it may, before we do, I have one inquiry for you...
What are you searching for?
I would rather not place you into a crate yet generally we golfers can be arranged into these classes of what we're searching for:
Greatest Distance: If you simply need to get a couple of more yards off the tee, those lake balls are not helping you. With another sleeve of balls intended for more separation, you'll right away notice the distinction.
Straighter shots: The balls you're searching for are lower pressure which make significantly less turn on the ball on the long shots. You'll see on the Bridgestones, the dimples are shallow and practically level. I don't have a clue about the science behind it, yet I'm certain that has something to do with their stunning capacity to give you straighter shots.
Turn and Feel: Perhaps you have the separation, you have the bearing however those separation balls simply aren't holding the greens. We as a whole achieve a moment that we need to really chip it close or remain on the green when the ball really arrives on the standard 3. These balls are normally multi layered with urethane covers and feel so delicate which lends them to getting scraped.
The Best Golf Balls for High Handicappers
Here are my picks separated into 3 classifications to lessen the disarray a bit. When you comprehend what you requirement for your amusement, it's very simple to locate the best golf balls:
For separation
Titleist Velocity (ideal pressure for 80 to 95 mph swings)
Srixon Soft Feel (wallet well disposed top esteem)
Volvik Crystal (for slower swing rates and terrible eyes)
For course
Callaway Superhot 55 (best to improve low ball flight)
Bridgestone E6 (best to diminish cuts and hooks)​
Volvik Vivid (most brilliant golf ball practically difficult to lose)
For additional turn
Titleist DT Trusoft (delicate spread for milder feel)
Bridgestone B330 RXs (Tour quality ball for swings under 105 mph)
Srixon Z-Star XV (Best option in contrast to Pro V1)
Separation Golf Balls
At the point when your need is additional separation, you'll discover the balls are firmer and when you hit them they roll A LOT more than the costly premium balls. They'll bound down the fairway frequently giving you a couple of yards more run.
Titleist Velocity
The Velocity is a firm ball that truly booms off the tee and with long irons. It creates a high ball flight so you can stop the ball on the greens effectively enough.
Likewise with most separation golf balls, the Velocity is a two-piece and is intended to help a slower swinger get this show on the road the ball sometime later. One of the longest golf balls out there with the Titleist name on it and with that title comes the way that the ball is HARD. So be set up for some high pitched strikes and looong rollout on your shots for additional separation.
Visit level separation execution to help slower swingers at an extraordinary cost
Insignificant turn on driver shots for straight drives
Fairway and green discoverer
Entirely sturdy spread
Srixon Soft Feel
Presently in it's tenth emphasis, the Srixon Soft Feel remains a grapple in Srixon's ball gathering. It's a two-piece golf ball so it's made for separation and solidness however the dainty spread gives this ball a delicate vibe so it doesn't feel like you're playing a stone. Expect lengthy drives and irons that take off with a delicate vibe on the club face.
At whatever point somebody requests a suggestion for a golf ball as high or mid handicapper, I quickly, decisively state Srixon Soft Feel. I've cherished these balls since I utilized them dropping from a mid/high handicapper down to a 5 handicapper. Delicate inclination off the face and huge separation off the tee. You'll cherish them.
All around evaluated, tough ball
Long separation with a low pressure and moderate look about greens
Milder inclination off the putter face than most separation balls
Volvik Crystal
Simple to see separate ball for moderate to direct swings
This is a hard ball. How about we get that out the way. It won't feel like a bit of cleanser on your club face however the Crystal goes far. On the off chance that you incline toward separation ball that is simpler to find noticeable all around and find in the grass, at that point these balls are ideal for you.
I would state this ball feels directly amidst a Pinnacle Gold and a Titleist DT Trusoft. This is a pleasant 3 piece ball for slower swings to truly get an additional kick in the jeans. Volvik have been and keep on being the golf ball of decision for the World Long Drive Association so you realize this thing is a flier.
Anticipate that the ball should go a lot more remote than others and take a couple of yards to stop on the green. On the off chance that you lean toward the knock and run kind of chipping, this ball is flawless and you need to make it keep running at the earliest opportunity since it truly is reliable.
Numerous hues to browse
Three-piece development for slower to medium swings
Upscale plan stops people in their tracks with the splendid hues
Hard ball that will deliver remove gains and won't scrape effectively
Straight and Long Golf Balls
In the event that you are somewhat of a slicer or puller of the golf ball, these balls will get you back in the fairway and bombarding them down the center.
Callaway Super Hot 55
Callaway convey perfection ball after ball. The low pressure Super Hot 55 is efficiently intended to get high up for a long solid convey. The delicate mantle and spread framework work couple to diminish turn. Decreasing twist likewise implies lessening side turn, so on your more extended shots you can diminish those cuts and snares.
I'm not the greatest enthusiast of these balls when I utilize the supplement putter. When I utilize my steel confronted putter, I like them a ton as the input is obvious. In the event that you utilize an addition putter, I'd recommend something firmer like the E6 or the Vivid underneath.
Callaway reliability​
Less cut and snare turn in light of lower turn rates off the tee
3-piece golf ball so it feels actually delicate as it packs big time off your club face
Bridgestone E6
Golfers favor this more established model to stop snares and cuts
Truly, the 2015 model is favored by a ton of golfers. The presentation and feel by and large is by all accounts better in the more seasoned model, and what's more, the cost is inconceivably low!
Cutting your impediment originates from hitting fairways and greens. The Bridgestone E6 gets you in the fairway simpler and supports long and mid iron execution to get you closer to the green all the more regularly. You may need to change your pointing - no all the more pointing way left. The ball goes where you point.
Like with other Bridgestone balls, it's anything but difficult to see the shallow dimples. They've accomplished something directly with their golf balls in light of the fact that most folks I play with cherishes these balls. I discover the spread is very hard so don't expect a bar of cleanser when you fix the bundling. This is for you if your need is straight hitting and lessening cuts and snares.
Explicitly intended to fundamentally diminish cuts and snares
Longer separation from less side turn and more rollout
Straight shooting golf ball to hit more fairways and greens
​Volvik Vivid
My preferred ball right now. I prescribe these to everybody. The spread isn't actually delicate yet it isn't generally hard so at first you're befuddled. Be that as it may, in the wake of bobbing it on a tiled floor and gnawing it, you give it a shot the course and understand this isn't just an amazing ball to follow in flight, however it goes like a bat out of heck, straight down the fairway.
I like the matte completion however it takes some an opportunity to become accustomed to (perhaps 2 or 3 openings). I began utilizing these and love the looks I jump on the course with my orange and shockingly most effortless to see glowing green ball. Keep away from the blue shading balls - something about them makes them hard to see.
On my tee shots I saw the Vivid appeared to fly with a lower entering flight however didn't boil sensible when I expected and voyaged an additional couple of yards further before bending to the cold earth. It was very amazing. I contribute a ton with these ball on the grounds that their move to the gap is so predictable on green side chips.
Difficult to lose mid flight
Straight and long yet feels great on the club face
Simple to discover in the harsh, bushes and leaves
Matte completion makes scrapes hard to see
Turn Golf Balls
For the most part I wouldn't suggest additional turn balls for high handicappers however once in a while they're fundamental for you to hold more greens a give yourself a shot at making more putts. These three balls are the best golf balls for high handicappers searching for some green holding turn.
Titleist DT Trusoft
When looking at the DT Trusoft against the Velocity, it's reasonable the distinction comes in the short amusement. With short irons, the Trusoft turns significantly more and on all shots gives a milder inclination. Speed may have a slight edge in simply remove yet all-round the Trusoft is a high-esteem golf ball for golfers who need some vibe and turn.
When you first opening the DT Trusoft, you see the sopay surface of the spread and the 'chomp test' discloses to you straight away the ball is gentler than others. Feel off the club face is charming and off wedges feels shockingly delicate.
Delicate feel and better control around the greens on account of a delicate spread
Long and genuine entering ball flight
Feels smooth and sounds charming off the putter face
Bridgestone B300 RX-S
This is a lavish ball. It's a urethane secured three-piece magnificence. In spite of the urethane spread, it's tough alongside giving astounding execution. The ball flies long and plunks down on the
0 notes
rubydailystream · 5 years
Text
Build a chat app with Ruby on Rails
Not all web apps need chat, but if you want to communicate with your customers, or you want them to communicate with each other, you’re going to run into this problem quickly. CometChat Pro is a fantastic alternative to rolling your own chat service. You’ll see that you can easily insert chat into your application, without it getting in the way of other content you may be delivering.
Prerequisites
This tutorial doesn’t assume much knowledge at all. Ruby on Rails is an incredibly easy framework to get started with. If you’ve worked with other web technologies, you’ll probably find it very clear and very opinionated.
CometChat Pro itself needs to run in Javascript, so you’ll see a marriage between a Ruby-based framework and view manipulation through Javascript. There are many more complicated ways to handle this in Rails. For this tutorial, I kept everything in basic Javascript and the templating engine Rails ships with: erb. Rails enthusiasts will be able to easily translate these foundational tools into their specialized setups.
I assume you are able to run Rails applications – which means you already have Ruby and bundler installed. This application uses Ruby 2.5.3 and Rails 5.2.2 but nothing happening here is special for latest versions – you could plug these tools into any modern version of Rails.
Introduction
One of the hardest parts of building chat is dealing with concurrency – users need to see new messages without refreshing their browsers. CometChat Pro achieves this with very little code, as you will see.
CometChat Pro example running in two windows.
If you’ve ever tried to use Action Cable to achieve similar results, you will be very pleased with how quickly you can copy-paste your way to real-time updates in the browser.
You can jump right into the code on Github, or take this guy for a spin yourself. Let’s get it!
Setting up
Initialization
Grab yourself a terminal and fire up a new Rails app: rails new cometchatpro --skip-active-record -T. We don’t need a database for this, and the -T prevents Rails from creating test files for us. If you’ve already got an application, you can skip this step – it should be easy to pop this code into an existing project.
Environmental variables and CometChat credentails
Next, you’re going to need an API key and an App ID from CometChat Pro. Once you’ve logged in, head to the dashboard, create a new app, then generate an API key. You’ll need fullAccess, not just authOnly. Grab those credentials and add them to your .env file. You’ll need your file to look something like this:
COMETCHAT_APP_ID=23n2f2n3p2y3 COMETCHAT_API_KEY=av22g24ll
Next, add dotenv-rails to your Gemfile and bundle. Now your application can read your environmental variables. These are private credentials for your CometChat Pro account; do not commit this file to your version control!
Chat pages
Next we’ll add some boilerplate Rails views and routing so we can chat as a user with other users. Generate a new controller: rails generate controller Users. This will create a number of files, which we’ll get into shortly. You’ll also need to add a route to your new view in config/routes.rb. Here’s what my routes.rb looks like:
Rails.application.routes.draw do resources :users, only: %i[index show] root 'users#index' end
If you jump into the GitHub code or pop over to the hosted app, you’ll see that I have added user creation. I’ve left it in place because I already built it, but CometChat Pro comes with sample users baked into every account, so you can start testing right away without needing to set up user creation first. I’ve omitted discussion of user creation for this tutorial in the sake of brevity, but you can see the code needed for that in the Github repo.
You’ll also need to create a /views/users/show.html.erb file. We’ll fill it will content in a moment.
CometChat Service
Let’s get into the meat of our application – interacting with the CometChat API. I organized interactions with CometChat Pro into a service. Here’s what it looks like:
class CometChatService include HTTParty BASE_URI = 'https://api.cometchat.com/v1'.freeze def fetch_users response = HTTParty.get("#{BASE_URI}/users", headers: headers) response.dig('data') &.map { |user| {name: user['name'], id: user['uid']} } end private def headers { apikey: ENV['COMETCHAT_API_KEY'], appid: ENV['COMETCHAT_APP_ID'] } end end
CometChat Pro does a lot of things, and as we grow our app, we might want to fill this service with further interactions with their API. Here, all we need to do is fetch a list of users we can chat with. Note that no gem is needed to interact with CCP, you simply send your requests however you like (I used HTTParty) with the proper headers (from our .env file) and CCP sends back the information you requested.
I map the JSON response from CCP into the information my application needs – the user name and the user ID.
Working with the service in the users controller
Now that we have a protocol established for speaking with the CCP API, we can use it in our UsersController. Here’s what mine looks like:
class UsersController < ApplicationController def index @users = CometChatService.new.fetch_users end def show users = CometChatService.new.fetch_users @current_user = users.find { |user| user[:id] == params[:id] } @users = users.reject { |user| user[:id] == @user[:id] } end end
I’ve skipped over the index page for brevity, but it’s just a list of users who we may “chat as”. You can think of it as the most insecure, ridiculous login page imaginable. On both views, we fetch the users registered with our CometChat Pro app. We’ve already mapped the JSON response in the service, so on the index and show pages we loop through users to display them. On the show page, we are chatting “as” a user, so we don’t want him to show up in the list of possible people to chat with (line 9).
List of users in a CometChat Pro app
The user show view
Let’s walk through the sections of our user show page in turn. In a minute, we’ll discuss the Javascript necessary to make them run. I’ve also omitted discussion of styling. You can see full code for styling in the GitHub repo, or of course you could implement your own (surely much-better) styling.
Who is talking?
To make information about our “logged-in” user (the one whose show page we are on) available to the CometChat service, we’ll want to include an invisible div with the user name and id. You can put this anywhere on your page:
The user list
To display the list of users as shown above, here’s the erb code:
&ltul class="list-group list-group-flush"> &lt% @users.each do |user| %> &ltli class="list-group-item user-select bg-light" id="&lt%= user[:id] %>" name='user-select'> &ltdiv class="d-flex w-100 justify-content-between"> &lth5 class="mb-1">&lt%= user[:name] %>&lt/h5> &lt/div> &lt/li> &lt% end %> &lt/ul>
There’s nothing special happening here – the only thing to note is that we are setting the user id as an id on the list-item. We’ll need it later to reference which user we are speaking to. Remember that our @users has come from the controller, where we gathered the list of users from the CometChat service.
Receiving and displaying messages
Next, let’s look at how we will display incoming messages. Our code starts as this:
&ltdiv id="messages" class="messages"> Messages loading... &lt/div>
We need to supply a div for CometChat Pro to load messages into. I’ve called mine messages but you could call yours anything you like.
Sending messages
We’ll use Ruby’s form helpers to create our message form, but we don’t let Ruby handle any of the functionality here:
&lt%= form_for :message, remote: true do |f| %> &ltdiv class="col-xs-9"> Message : &lt%= f.text_area :text, class: "form-control" %>&ltbr/> &lt/div> &ltdiv class="col-xs-3 capitalize"> &lt%= button_tag "Send Message", type: 'button', onclick: "javascript:sendMessage()", class: "btn btn-info btn-block" %> &lt/div> &lt% end %>
When we click the “Send Message” button, we’ll be using Javascript to work our magic. The Rails form will just sit there, happily waiting for more input.
The heart of our application: Javascript methods
The CometChat Pro service runs on Javascript and we’ll be using their clear sample code to make the pieces of our app work.
We’ll need to take the following steps:
1. Initialization – set up a connection to the CometChat service.
2. Log in a current user.
3. Select a user to chat with and fetch message history with that person.
4. Add an event listener to pick up new messages from the other person.
5. Set up an action to send messages.
Initialization
First, we’ll need to get our app talking to the CometChat Pro service and log in. In application.html.erb, add this line between the <head> tags:
&ltscript type="text/javascript" src="https://unpkg.com/@cometchat-pro/chat/CometChat.js">&lt/script>
Add these lines to the bottom of /views/users/show.html.erb:
&lt% javascript_include_tag 'show', cache: 'myfiles' %> &ltscript type="text/javascript"> setUserListeners(); document.addEventListener('turbolinks:load', initializeChat); &lt/script>
We’ll look at the setUserListeners method in a second. Finally, we’re referencing a show.js.erb, which we’ll need to create and add to app/assets/javascripts.
Here’s our first Javascript method:
const initializeChat = () => { CometChat.init('').then( hasInitialized => { loginUser() }, error => { console.log("Initialization failed with error:", error); } )};
Because we loaded the CometChat Pro Javascript in our application.html.erb, we can now use CometChatmethods in our Javascript file. The first one we’ll use is .init, which requires us to send in our APP ID as a credential. We’re calling the loginUser method once our chat is initialized.
User login
After initialization, we need to log in the current user. This application includes no security whatsoever – anyone can chat as anyone else. Obviously you’d want to have something just a tiny bit more customized in a production app. Here’s how we log in our user on CometChat Pro:
const loginUser = () => { const userDiv = document.getElementById('user-id'); if (!userDiv) { return true } const id = userDiv.dataset.id; CometChat.login(id, '').then( User => { const messageDiv = document.getElementById('messages'); messageDiv.innerHTML = `<div class="whisper">Choose a user to start chatting</div>`; }, error => { console.log("Login failed with exception:", {error}); }) }
Remember that weird tag('div') that held our user information from show.html.erb? Here we use it to find out what user needs to log in. If something has gone wrong with that div, we just bail from this operation.
Next, we call our next CometChat method: .login. We take the id we got from the user div, and use our API credentials. If CometChat Pro sends back a User, we update the message div to say “Choose a user to start chatting”.
setUserListeners
Let’s hop back to the show.html.erb page where we called setUserListeners() at the bottom of the view. In order to know who we want to chat with, we’ll need to listen for clicks on the user list. Here’s what that code looks like:
const setUserListeners = () => { const userDivs = document.getElementsByName('user-select'); userDivs.forEach(user => user.addEventListener("click", e => { const id = e.target.id || e.target.offsetParent.id setUser(id); fetchMessages(id); })) }
userDivs is a node list of divs, one for each of the users we can chat with. We loop through them and add event listeners on each. If we click on a user, we want to first call setUser to tell our application who we want to talk to, and then fetchMessages for that user.
setUser and addMessageListener
Here’s where we really get some magic and CometChat Pro takes care of the heavy lifting for us. Once we log our user in and select someone to chat with, we want to see any new messages from that person in real time. With CometChat Pro, we don’t have to worry about keeping any websockets open or dealing with refreshing – the messages just appear as you would expect.
The setUser function is only concerned with making the active user blue in the list, so I’ve skipped it here. But it also calls the addMessageListener class, which is critical for receiving new messages as they come in:
const addMessageListener = id => { CometChat.addMessageListener( 'listener_id', new CometChat.MessageListener({ onTextMessageReceived: textMessage => displayNewMessage(id, textMessage) }) )}
This is taken almost directly from the CometChat Pro documentation. We call the CometChat addMessageListener method, then using incoming messages to update our message div. Fire up two different browsers to see this in action (or just check out the gif above).
displayNewMessage
When that new message comes in, we’ll need to update our view. Here’s the code:
const displayNewMessage = (currentChatterId, msg) => { const userDiv = document.getElementById('user-id'); const id = userDiv.dataset.id; if (![currentChatterId, id].includes(msg.sender.uid)) { return; } const newNode = document.createElement("div") newNode.innerHTML = newMessage(msg, id) const messageDiv = document.getElementById('messages') messageDiv.appendChild(newNode) messageDiv.scrollTop = messageDiv.scrollHeight }
First, if the incoming message isn’t between our logged-in user and the user we’re chatting with, we ignore it. Then, we need to process the new message – we construct a new div with the message, then we append it to the messages div, again scrolling to the bottom so we can see it.
newMessage
Our newMessage method will simply format the message – it’s a new bubble in our chat app. We check if the sender has the same id as the logged-in user so we can apply the self class to the div – making it pink for “self” and blue for everybody else.
const newMessage = (msg, id) => { return ( `&ltdiv class='message ${msg.sender.uid === id && 'self'}'> &ltdiv class='message-text'>${msg.text}&lt/div> &ltdiv class='message-sender'>- ${msg.sender.name}&lt/div> &lt/div>` ) }
fetchMessages
Before we start chatting, we need to see the messages that have come before and anything that was exchanged when we weren’t chatting with that particular user. Our fetchMessages method will grab the messages between our logged-in user and our selected user.
const fetchMessages = id => { if (!id) { return; } const limit = 30; const messagesRequest = new CometChat.MessagesRequestBuilder().setUID(id).setLimit(limit).build(); messagesRequest.fetchPrevious().then( messages => { const messageDiv = document.getElementById('messages'); messageDiv.innerHTML = messages.length > 0 ? messages.map(msg => newMessage(msg, id)).join('') : `&ltdiv class="whisper">Start of message history&lt/div>`; messageDiv.scrollTop = messageDiv.scrollHeight }, error => { console.log("Message fetching failed with error:", error); } ); }
If for some reason we don’t have an id, we’ll return so as not to get errors. First we construct our request, setting the ID of the user we want to talk to, and the limit of messages we want to receive. More complicated applications would want to automatically fetch results from further back in time as the user scrolls.
Once our message requester is set up, we can call fetchPrevious to grab a list of messages. This returns messages, which we can use to populate our messages div. Each message is a JSON object with a sender.uid, sender.name and a text. We map through the messages and return them as HTML objects and replace whatever is inside messages with our new message node list. Remember to .join('') them or you’ll see a bunch of commas between divs. If there were no messages, we want to show the user that this is the “start of message history”.
Last, we want to scroll to the bottom of the messages div to show the user the latest messages.
Sending new messages
We’re logging in, selecting a user to chat with, fetching all the old message history between these two, and receiving any new messages sent to us from that user. Finally, we want to be able to send messages. Here’s how we do it:
const sendMessage = () => { const recipient_id = document.getElementsByClassName('bg-info')[0].id; const message_text = document.getElementsByName('message[text]')[0].value; document.getElementsByName('message[text]')[0].value = '' const messageType = CometChat.MESSAGE_TYPE.TEXT; const receiverType = CometChat.RECEIVER_TYPE.USER; const textMessage = new CometChat.TextMessage(recipient_id, message_text, messageType, receiverType); CometChat.sendMessage(textMessage).then( message => displayNewMessage(recipient_id, message), error => { console.log("Message sending failed with error:", error); } ); }
First, we determine which user we are chatting with, based on the highlighted user in the list. Next, we read the message from the form, and clear the form so it’s ready for the next message.
Our textMessage object will call CCP’s TextMessage method, constructing a message to send based on the logged-in user, receiver id, message text, and the types of message and recipient. Then we just sendMessagewith our textMessage object, wait for a message response, and render the message in the same way we would an incoming message from another user.
And that, my friends, is everything we need to install chat in our Rails app!
Conclusion
If you’ve been following along, you now have a fully-functional one-to-one chat app in your project. You can start exploring the other functionalities available through CometChat Pro, or you can start refactoring with jQuery, Slim, or other tools you may wish to incorporate to pare down the code. Hopefully seeing everything in plain Javascript made it clear what we are accomplishing, even if you want to have more efficient code in your own application.
Best of luck installing chat in your own app and have fun!
Links
Github repository with this code + user creation
Heroku deployment so you can see it running quickly. Try two browsers!
CometChat Pro documentation
HTTParty gem
0 notes
ohwowbabee · 7 years
Text
XIDIO by ASTROBLU Bonus
XIDIO by ASTROBLU Bonus
XIDIO Review and Bonus by ASTROBLU – How To Create Amazing Video Promotions in Minutes
XIDIO by ASTROBLU bonus
XIDIO by ASTROBLU Jvzoo Wso is the best, it will save your time and money.
Yes, For just under $29 bucks you can grab your hands on this miraculous goldmine of the most premium & trendy marketing graphics not available anywhere else!That’s a crazy bargain!Just think about it for a second. You’ll get a lifetime, unlimited access to thi Brand New graphic templates for less then $1 EACH!Make sure to take action now! The price can increase at any time without notice to $37, $67 or even $97!
MOCKUP MARS…Turn ordinary images into eye catching compositions with the power of perspective mockups. An efficient marketing tool perfect for enhancing your portfolio and showcasing your work, it requires minimum effort and yields maximum results. With all the content in one place you will find yourself saving loads of time, and with the interface this easy, you shall see first results with just a few clicks.
Well first, let’s look at what you’d need to pay for similar templates elsewhere…And to be honest, it’s totally worth such a price.I’ll make it simple for you.The actual cost for this one-of-a-kind graphical package is well over: $1,997.00.Think about outsourcing just 50 unique sales page graphics. For $20 a pop that’s $1,000 right here!You could also design all the graphics yourself and spend “unforgettable” late evenings with the world’s most confusing program ever – Photoshop Your choice.The last option is to get expensive, over-used graphic templates from sites like graphicriver.net, yet the prices aren’t pretty!Why It’s Just $29?And because this is a brand-new package, I’d like to give an opportunity for more people to try it out almost risk-free…I’m holding this special discount for limited discount – you don’t want to wait!I want to do something special for you today, something unheard off…So listen up: your total investment today will not be $97.00, that would be the regular price.
XIDIO Review and Bonus by ASTROBLU – How To Create Amazing Video Promotions in Minutes is the best. You will be like a professional.
Get Now XIDIO :
XIDIO Review and Bonus by ASTROBLU – How To Create Amazing Video Promotions in Minutes
XIDIO OTO / Upsell / Platinum :
FRONTEND : TOTAL 50 video templates, 50 Banner Templates, 10 Branding Templates, 10 Flyer Templates and 10 Mockup Templates
1. 10 Animate Explainer Video Templates 2. 10 Social Media Video Templates 3. 10 Video Explainer Templates 4. 10 Video Outro Templates 5. 10 Logo Opener Video Templates 6. 50 Banner Kit Templates (10 niche) 7. 10 Branding Stationery Design Templates 8. 10 Flyer Design Templates 9. 10 MockUp Design Templates
PLATINUM PACKAGES: TOTAL 80 video templates, 75 Banner Templates, 15 Branding Templates, 15 Flyer Templates and 15 Mockup Templates
1. 20 Animate Explainer Video Templates 2. 15 Social Media Video Templates 3. 15 Video Explainer Templates 4. 15 Video Outro Templates 5. 15 Logo Opener Video Templates 6. 75 Banner Kit Templates (15 niche) 7. 15 Branding Stationery Design Templates 8. 15 Flyer Design Templates 9. 15 MockUp Design Templates
SEE HOW THESE HYPNOTIZING VIDEO TEMPLATES INSIDE XIDIO V1 PACKAGES
FULL ANIMATED VIDEO TEMPLATES We offer you hundreds of ready-to-use animated slides. All “done for you,” with updated styles to make your videos catchier and more engaging, with personal touches, of course.
INSTAGRAM VIDEO TEMPLATES Increase your marketing conversion and product sales with highly engaging videos on discount, offers, review, demo, and many more. You can do it ALL easily with NO additional CHARGE!!
ANIMATED VIDEO TEMPLATES With Animated Video Templates, you will be able to engage audiences to see more videos of yours. The more people see, the more likely they will close the deal.
LOGO INTRO VIDEO TEMPLATES Make your eye catching logo opener. This video template is simply edited in your Powerpoint. Now, you can see your logo opener that is ready to be shown to your audience.
OUTRO VIDEO TEMPLATES With Outro Video Templates, you will be able to engage audiences to see more videos of yours. The more people see, the more likely they will close the deal.
BANNER TEMPLATES Make your eye catching banner. This banner kit template is simply edited in your PhotoShop. Now, you can see your amazing banner that is ready to be shown to your audience.
FLYER TEMPLATES Make your eye catching flyer. This flyer kit template is simply edited in your PhotoShop. Now, you can see your amazing banner that is ready to be shown to your audience.
MOCKUP TEMPLATES Make your eye catching mockup. This mockup kit template is simply edited in your PhotoShop. Now, you can see your amazing mockup that is ready to be shown to your audience.
STATIONARY BRANDING TEMPLATES Make your eye catching branding. This flyer kit template is simply edited . Now, you can see your amazing branding that is ready to be shown to your audience.
XIDIO Bonuses :
Ultimate Resource For Free Graphics Online Discover little-known places online where you can get free icons, backgrounds, patterns, fonts, public domain images and so much more cool free stuff! You’ll be abstolutely amazed!
FREE Public Domain Images
FREE Patterns & Textures
FREE Vector Graphics
FREE Icons
FREE Fonts
FREE Mock Up Graphics
FREE Cool Text Generator
10 Months Of Free Updates & Tech Support Did you get stuck at any point? Don’t know how to edit your graphics? No problem! Our dedicated team is here to help you with any technical problems.
Dedicated Support and Assisstance from Our Phone Unlike other product developers that goest HIT-n-RUN with their customers, we’re getting ourselves available to your questions and help request. The best part is We’re available online from our phone just to reply you ( use “chat us now” button on bottom right ). It’s also the best place to get in touch with both of us directly with no gate-keeper secretaries and assistants.
Step-By-Step Video Trainings How To Customize Your Graphics Templates Contains step by step video guide showing how to edit the HTML/ PowerPoint templates. So easy to follow that even your granny can use it.And I’ll show you behind my shoulder, step-by-step how to quickly edit & customize your awesome graphics. In minutes you’ll learn how to make these templates completely unique. It’s going to be a lot of fun! You’ll need Photoshop in order to follow these trainings.
What Can You Do With Them?
A few ways you can use these templates & toolkit to make profitable videos today…
Better ROI from Your Paid Promotion Use my templates to create better landing page or sales videos to convert more of your Social media traffic into buyer.
Instant Portfolio Showcase You do not need to spend lots of time creating portfolio for your client. With XIDIO, you can make your instant portfolio today.
Look Like a Pros Instantly If you’re using XIDIO, you’ll be like professional designer and marketer. Once again the high quality that Vlydeo will make you a champion easily.
What does XIDIO do for you?
It Saves Time and Money You do not need a designer or expensive software anymore to create interesting video and graphics. Of course XIDIO will save your time by assisting you in creating interesting promotion video within minutes with only click and replace!
Interesting and Unique Niche XIDIO has unique niche. Not all of your competitors have niche packages like this, consequently giving you several steps ahead from your competitor.
Ultra Boosting Conversion It will constantly increase your conversion rate with High quality videos; help you create interesting designs and user friendly website. It also makes it easier for your visitor to clearly understand your products.
100% Risk Free 30 Day Guarantee
PRODUCT GUARANTEE: We’ll be totally straight with you here… If you plan on purchasing then asking for a refund, please don’t order a license. This is a very limited offer, so if you are not 100% committed then leave the license for other people who are and who will put it to good use. We only want to work closely with serious marketers and genuine folks that are ready to take their business to the next level. But because we want you to start today with total peace of mind your investment is backed up by a full 30 day money back guarantee – You will be ordering with confidence and this eliminates any kind of risk on your part. We do offer a 30 day money back guarantee only if there are technical issues in the theme that can’t be resolved. If you have any issues you can let us know, we will try our best to resolve it. If we fail to resolve then refund will be made.
XIDIO : FAQ
What is your Refund policy? You should pay attention to our requirements,We Do The refund If there is an issue with the product and our technical support can’t solve it for you, we will provide a refund for you within 30 days of your purchase.
PRODUCT USAGE POST-REFUND By receiving a refund, you agree to remove all files downloaded from our website, and all rights to use the product will be revoked. We reserve the right to decline a refund if the client does not adhere to these conditions.
REFUND PROCESS send your query to http://ift.tt/2ngv2VK , DO NOT dispute via paypal, all refund is processing by JVzoo.
REFUND POLICY Our refund policy only applies to the first time you purchase our product. Second time purchases will not be permitted the same rights to refund. We understand that sometimes the timing may not be right when you purchase our product and you may return to purchase later, but please be aware second purchase refund requests will not be permitted. This is to protect our product and ourselves from individuals who may take advantage of our refund policy.
DUPLICATE PURCHASE In the event of a billing error or duplicate billing, we will investigate the matter and issue a full refund if deemed necessary.
Q. How do I contact support with any issue/concern? A. Our support center is located at http://ift.tt/2nm0UKc
Q. How to access my purchase? A. You will be taking through JVZoo payment and will end up at our login page. On that page you can access your purchase and login to member area.
Q. Are there any One-Time-Offers or Upsells? A. YES, there’s. Commercial license is offered with more assets & niche on Platinum Bundle.
Q. What is this? A. Xidio is Powerpoint Explainer/Presentation Video templates it’s not a software, plugin or wordpress theme.
youtube
forget about wasted time end payment high price,. XIDIO is something I’ve been waiting for, I had seen these kinds on many sites before but didn’t now of any tool that could create like XIDIO. My advice don’t wait around, jump in! XIDIO will pay for itself as soon as you start using it.
XIDIO is the best software on the market right now (as far as I know). XIDIO comes with easy to follow instructions. You don’t need any technical experience to make these improvements. is good news for online bussiness. XIDIO by ASTROBLU Bonus
Get Now XIDIO :
related XIDIO
XIDIO bonus, XIDIO pro, XIDIO oto, XIDIO software, XIDIO download, XIDIO upsell, XIDIO discount, XIDIO pro, buy XIDIO, XIDIO wso, XIDIO jvzoo, get XIDIO, XIDIO
XIDIO by ASTROBLU Bonus
0 notes
ubizheroes · 7 years
Text
Pop-Ups, Overlays, Modals, Interstitials, and How They Interact with SEO – Whiteboard Friday
Posted by randfish
Have you thought about what your pop-ups might be doing to your SEO? There are plenty of considerations, from their timing and how they affect your engagement rates, all the way to Google’s official guidelines on the matter. In this episode of Whiteboard Friday, Rand goes over all the reasons why you ought to carefully consider how your overlays and modals work and whether the gains are worth the sacrifice.
https://fast.wistia.net/embed/iframe/ohomyv8n62?videoFoam=true
https://fast.wistia.net/assets/external/E-v1.js
Click on the whiteboard image above to open a high-resolution version in a new tab!
Video Transcription
Howdy, Moz fans, and welcome to another edition of Whiteboard Friday. This week we’re chatting about pop-ups, overlays, modals, interstitials, and all things like them. They have specific kinds of interactions with SEO. In addition to Google having some guidelines around them, they also can change how people interact with your website, and that can adversely or positively affect you accomplishing your goals, SEO and otherwise.
Types
So let’s walk through what these elements, these design and UX elements do, how they work, and best practices for how we should be thinking about them and how they might interfere with our SEO efforts.
Pop-ups
So, first up, let’s talk specifically about what each element is. A pop-up now, okay, there are a few kinds. There are pop-ups that happen in new windows. New window pop-ups are, basically, new window, no good. Google hates those. They are fundamentally against them. Many browsers will stop them automatically. Chrome does. Firefox does. In fact, users despise these as well. There are still some spammy and sketchy sites out there that use them, but, generally speaking, bad news.
Overlays
When we’re talking about a pop-up that happens in the same browser window, essentially it’s just a visual element, that’s often also referred to as an overlay. So, for the purposes of this Whiteboard Friday, we’ll call that an overlay. An overlay is basically like this, where you have the page’s content and there’s some smaller element, a piece, a box, a window, a visual of some kind that comes up and that essentially says, maybe it says, “Sign up for my email newsletter,” and then there’s a place to enter your email, or, “Get my book now,” and you click that and get the book. Those types of overlays are pretty common on the web, and they do not create quite the same problems that pop-ups do, at least from Google’s perspective. However, we’ll talk about those later, there are some issues around them, especially with mobile.
Modals
Modals tend to be windows of interaction, tend to be more elements of use. So lightboxes for images is a very popular modal. A modal is something where you are doing work inside that new box rather than in the content that’s underneath it. So a sign-in form that overlays, that pops up over the rest of the content, but that doesn’t allow you to engage with this content underneath it, that would be considered a modal. Generally, most of the time, these aren’t a problem, unless they are something like spam, or advertising, or something that’s taking you out of the user experience.
Interstitials
Then finally, interstitials are essentially, and many of these can also be called interstitial experiences, but a classic interstitial is something like what Forbes.com does. When you visit Forbes, an article for the first time, you get this, “Welcome. Our sponsor of the day is Brawndo. Brawndo, it has what plants need.” Then you can continue after a certain number of seconds. These really piss people off, myself included. I really hate the interstitial experience. I understand that it’s an advertising thing. But, yeah, Google hates them too. Not quite enough to kick Forbes out of their SERPs entirely yet, but, fingers crossed, it will happen sometime soon. They have certainly removed plenty of other folks who have gone with invasive or overly heavy interstitials over the years and made those pretty tough.
What are the factors that matter for SEO?
A) Timing
Well, it turns out timing is a big one. So when the element appears matters. Basically, if the element shows up initially upon page load, they will consider it differently than if it shows up after a few minutes. So, for example, if you have a “Sign Up Now” overlay that pops up the second you visit the page, that’s going to be treated differently than something that happens when you’re 80% or you’ve just finished scrolling through an entire blog post. That will get treated very differently. Or it may have no effect actually on how Google treats the SEO, and then it really comes down to how users do.
Then how long does it last as well. So interstitials, especially those advertising interstitials, there are some issues governing that with people like Forbes. There are also some issues around an overlay that can’t be closed and how long a window can pop up, especially if it shows advertising and those types of things. Generally speaking, obviously, shorter is better, but you can get into trouble even with very short ones.
B) Interaction
Can that element easily be closed, and does it interfere with the content or readability? So Google’s new mobile guidelines, I think as of just a few months ago, now state that if an overlay or a modal or something interferes with a visitor’s ability to read the actual content on the page, Google may penalize those or remove their mobile-friendly tags and remove any mobile-friendly benefit. That’s obviously quite concerning for SEO.
C) Content
So there’s an exception or an exclusion to a lot of Google’s rules around this, which is if you have an element that is essentially asking for the user’s age, or asking for some form of legal consent, or giving a warning about cookies, which is very popular in the EU, of course, and the UK because of the legal requirements around saying, “Hey, this website uses cookies,” and you have to agree to it, those kinds of things, that actually gets around Google’s issues. So Google will not give you a hard time if you have an overlay interstitial or modal that says, “Are you of legal drinking age in your country? Enter your birth date to continue.” They will not necessarily penalize those types of things.
Advertising, on the other hand, advertising could get you into more trouble, as we have discussed. If it’s a call to action for the website itself, again, that could go either way. If it’s part of the user experience, generally you are just fine there. Meaning something like a modal where you get to a website and then you say, “Hey, I want to leave a comment,” and so there’s a modal that makes you log in, that type of a modal. Or you click on an image and it shows you a larger version of that image in a modal, again, no problem. That’s part of the user experience.
D) Conditions
Conditions matter as well. So if it is triggered from SERP visits versus not, meaning that if you have an exclusionary protocol in your interstitial, your overlay, your modal that says, “Hey, if someone’s visiting from Google, don’t show this to them,” or “If someone’s visiting from Bing, someone’s visiting from DuckDuckGo, don’t show this to them,” that can change how the search engines perceive it as well.
It’s also the case that this can change if you only show to cookied or logged in or logged out types of users. Now, logged out types of users means that everyone from a search engine could or will get it. But for logged in users, for example, you can imagine that if you visit a page on a social media site and there’s a modal that includes or an overlay that includes some notification around activity that you’ve already been performing on the site, now that becomes more a part of the user experience. That’s not necessarily going to harm you.
Where it can hurt is the other way around, where you get visitors from search engines, they are logged out, and you require them to log in before seeing the content. Quora had a big issue with this for a long time, and they seem to have mostly resolved that through a variety of measures, and they’re fairly sophisticated about it. But you can see that Facebook still struggles with this, because a lot of their content, they demand that you log in before you can ever view or access it. That does keep some of their results out of Google, or certainly ranking lower.
E) Engagement impact
I think this is what Google’s ultimately trying to measure and what they’re trying to essentially say, “Hey, this is why we have these issues around this,” which is if you are hurting the click-through rate or you’re hurting pogo-sticking, meaning that more people are clicking onto your website from Google and then immediately clicking the Back button when one of these things appears, that is a sign to Google that you have provided a poor user experience, that people are not willing to jump through whatever hoop you’ve created for them to get access your content, and that suggests they don’t want to get there. So this is sort of the ultimate thing that you should be measuring. Some of these can still hurt you even if these are okay, but this is the big one.
Best practices
So some best practices around using all these types of elements on your website. I would strongly urge you to avoid elements that are significantly harming UX. If you’re willing to take a small sacrifice in user experience in exchange for a great deal of value because you capture people’s email addresses or you get more engagement of other different kinds, okay. But this would be something I’d watch.
There are three or four metrics that I’d urge you to check out to compare whether this is doing the right thing. Those are:
Bounce rate
Browse rate
Return visitor rates, meaning the percentage of people who come back to your site again and again, and
Time on site after the element appears
So those four will help tell you whether you are truly interfering badly with user experience.
On mobile, ensure that your crucial content is not covered up, that the reading experience, the browsing experience isn’t covered up by one of these elements. Please, whatever you do, make those elements easy and obvious to dismiss. This is part of Google’s guidelines around it, but it’s also a best practice, and it will certainly help your user experience metrics.
Only choose to keep one of these elements if you are finding that the sacrifice… and there’s almost always a sacrifice cost, like you will hurt bounce rate or browse rate or return visitor rate or time on site. You will hurt it. The question is, is it a slight enough hurt in exchange for enough gain, and that’s that trade-off that you need to decide whether it’s worth it. I think if you are hurting visitor interaction by a few seconds on average per visit, but you are getting 5% of your visitors to give you an email address, that’s probably worth it. If it’s more like 30 seconds and 1%, maybe not as good.
Consider removing the elements from triggering if the visit comes from search engines. So if you’re finding that this works fine and great, but you’re having issues around search guidelines, you could consider potentially just removing the element from any visit that comes directly from a search engine and instead placing that in the content itself or letting it happen on a second page load, assuming that your browse rate is decently high. That’s a fine way to go as well.
If you are trying to get the most effective value out of these types of elements, it tends to be the case that the less common and less well used the visual element is, the more interaction and engagement it’s going to get. But the other side of that coin is that it can create a more frustrating experience. So if people are not familiar with the overlay or modal or interstitial visual layout design that you’ve chosen, they may engage more with it. They might not dismiss it out of hand, because they’re not used to it yet, but they can also get more frustrated by it. So, again, return to looking at those metrics.
With that in mind, hopefully you will effectively, and not too harmfully to your SEO, be able to use these pop-ups, overlays, interstitials, modals, and all other forms of elements that interfere with user experience.
And we’ll see you again next week for another edition of Whiteboard Friday. Take care.
Video transcription by Speechpad.com
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!
from Moz Blog https://moz.com/blog/popups-seo-whiteboard-friday via IFTTT
from Blogger http://imlocalseo.blogspot.com/2017/04/pop-ups-overlays-modals-interstitials.html via IFTTT
from IM Local SEO https://imlocalseo.wordpress.com/2017/04/28/pop-ups-overlays-modals-interstitials-and-how-they-interact-with-seo-whiteboard-friday/ via IFTTT
from Gana Dinero Colaborando | Wecon Project https://weconprojectspain.wordpress.com/2017/04/28/pop-ups-overlays-modals-interstitials-and-how-they-interact-with-seo-whiteboard-friday/ via IFTTT
from WordPress https://mrliberta.wordpress.com/2017/04/28/pop-ups-overlays-modals-interstitials-and-how-they-interact-with-seo-whiteboard-friday/ via IFTTT
0 notes
sandrarumley · 7 years
Text
Pop-Ups, Overlays, Modals, Interstitials, and How They Interact with SEO – Whiteboard Friday
Posted by randfish
Have you thought about what your pop-ups might be doing to your SEO? There are plenty of considerations, from their timing and how they affect your engagement rates, all the way to Google’s official guidelines on the matter. In this episode of Whiteboard Friday, Rand goes over all the reasons why you ought to carefully consider how your overlays and modals work and whether the gains are worth the sacrifice.
https://fast.wistia.net/embed/iframe/ohomyv8n62?videoFoam=true
https://fast.wistia.net/assets/external/E-v1.js
Click on the whiteboard image above to open a high-resolution version in a new tab!
Video Transcription
Howdy, Moz fans, and welcome to another edition of Whiteboard Friday. This week we’re chatting about pop-ups, overlays, modals, interstitials, and all things like them. They have specific kinds of interactions with SEO. In addition to Google having some guidelines around them, they also can change how people interact with your website, and that can adversely or positively affect you accomplishing your goals, SEO and otherwise.
Types
So let’s walk through what these elements, these design and UX elements do, how they work, and best practices for how we should be thinking about them and how they might interfere with our SEO efforts.
Pop-ups
So, first up, let’s talk specifically about what each element is. A pop-up now, okay, there are a few kinds. There are pop-ups that happen in new windows. New window pop-ups are, basically, new window, no good. Google hates those. They are fundamentally against them. Many browsers will stop them automatically. Chrome does. Firefox does. In fact, users despise these as well. There are still some spammy and sketchy sites out there that use them, but, generally speaking, bad news.
Overlays
When we’re talking about a pop-up that happens in the same browser window, essentially it’s just a visual element, that’s often also referred to as an overlay. So, for the purposes of this Whiteboard Friday, we’ll call that an overlay. An overlay is basically like this, where you have the page’s content and there’s some smaller element, a piece, a box, a window, a visual of some kind that comes up and that essentially says, maybe it says, “Sign up for my email newsletter,” and then there’s a place to enter your email, or, “Get my book now,” and you click that and get the book. Those types of overlays are pretty common on the web, and they do not create quite the same problems that pop-ups do, at least from Google’s perspective. However, we’ll talk about those later, there are some issues around them, especially with mobile.
Modals
Modals tend to be windows of interaction, tend to be more elements of use. So lightboxes for images is a very popular modal. A modal is something where you are doing work inside that new box rather than in the content that’s underneath it. So a sign-in form that overlays, that pops up over the rest of the content, but that doesn’t allow you to engage with this content underneath it, that would be considered a modal. Generally, most of the time, these aren’t a problem, unless they are something like spam, or advertising, or something that’s taking you out of the user experience.
Interstitials
Then finally, interstitials are essentially, and many of these can also be called interstitial experiences, but a classic interstitial is something like what Forbes.com does. When you visit Forbes, an article for the first time, you get this, “Welcome. Our sponsor of the day is Brawndo. Brawndo, it has what plants need.” Then you can continue after a certain number of seconds. These really piss people off, myself included. I really hate the interstitial experience. I understand that it’s an advertising thing. But, yeah, Google hates them too. Not quite enough to kick Forbes out of their SERPs entirely yet, but, fingers crossed, it will happen sometime soon. They have certainly removed plenty of other folks who have gone with invasive or overly heavy interstitials over the years and made those pretty tough.
What are the factors that matter for SEO?
A) Timing
Well, it turns out timing is a big one. So when the element appears matters. Basically, if the element shows up initially upon page load, they will consider it differently than if it shows up after a few minutes. So, for example, if you have a “Sign Up Now” overlay that pops up the second you visit the page, that’s going to be treated differently than something that happens when you’re 80% or you’ve just finished scrolling through an entire blog post. That will get treated very differently. Or it may have no effect actually on how Google treats the SEO, and then it really comes down to how users do.
Then how long does it last as well. So interstitials, especially those advertising interstitials, there are some issues governing that with people like Forbes. There are also some issues around an overlay that can’t be closed and how long a window can pop up, especially if it shows advertising and those types of things. Generally speaking, obviously, shorter is better, but you can get into trouble even with very short ones.
B) Interaction
Can that element easily be closed, and does it interfere with the content or readability? So Google’s new mobile guidelines, I think as of just a few months ago, now state that if an overlay or a modal or something interferes with a visitor’s ability to read the actual content on the page, Google may penalize those or remove their mobile-friendly tags and remove any mobile-friendly benefit. That’s obviously quite concerning for SEO.
C) Content
So there’s an exception or an exclusion to a lot of Google’s rules around this, which is if you have an element that is essentially asking for the user’s age, or asking for some form of legal consent, or giving a warning about cookies, which is very popular in the EU, of course, and the UK because of the legal requirements around saying, “Hey, this website uses cookies,” and you have to agree to it, those kinds of things, that actually gets around Google’s issues. So Google will not give you a hard time if you have an overlay interstitial or modal that says, “Are you of legal drinking age in your country? Enter your birth date to continue.” They will not necessarily penalize those types of things.
Advertising, on the other hand, advertising could get you into more trouble, as we have discussed. If it’s a call to action for the website itself, again, that could go either way. If it’s part of the user experience, generally you are just fine there. Meaning something like a modal where you get to a website and then you say, “Hey, I want to leave a comment,” and so there’s a modal that makes you log in, that type of a modal. Or you click on an image and it shows you a larger version of that image in a modal, again, no problem. That’s part of the user experience.
D) Conditions
Conditions matter as well. So if it is triggered from SERP visits versus not, meaning that if you have an exclusionary protocol in your interstitial, your overlay, your modal that says, “Hey, if someone’s visiting from Google, don’t show this to them,” or “If someone’s visiting from Bing, someone’s visiting from DuckDuckGo, don’t show this to them,” that can change how the search engines perceive it as well.
It’s also the case that this can change if you only show to cookied or logged in or logged out types of users. Now, logged out types of users means that everyone from a search engine could or will get it. But for logged in users, for example, you can imagine that if you visit a page on a social media site and there’s a modal that includes or an overlay that includes some notification around activity that you’ve already been performing on the site, now that becomes more a part of the user experience. That’s not necessarily going to harm you.
Where it can hurt is the other way around, where you get visitors from search engines, they are logged out, and you require them to log in before seeing the content. Quora had a big issue with this for a long time, and they seem to have mostly resolved that through a variety of measures, and they’re fairly sophisticated about it. But you can see that Facebook still struggles with this, because a lot of their content, they demand that you log in before you can ever view or access it. That does keep some of their results out of Google, or certainly ranking lower.
E) Engagement impact
I think this is what Google’s ultimately trying to measure and what they’re trying to essentially say, “Hey, this is why we have these issues around this,” which is if you are hurting the click-through rate or you’re hurting pogo-sticking, meaning that more people are clicking onto your website from Google and then immediately clicking the Back button when one of these things appears, that is a sign to Google that you have provided a poor user experience, that people are not willing to jump through whatever hoop you’ve created for them to get access your content, and that suggests they don’t want to get there. So this is sort of the ultimate thing that you should be measuring. Some of these can still hurt you even if these are okay, but this is the big one.
Best practices
So some best practices around using all these types of elements on your website. I would strongly urge you to avoid elements that are significantly harming UX. If you’re willing to take a small sacrifice in user experience in exchange for a great deal of value because you capture people’s email addresses or you get more engagement of other different kinds, okay. But this would be something I’d watch.
There are three or four metrics that I’d urge you to check out to compare whether this is doing the right thing. Those are:
Bounce rate
Browse rate
Return visitor rates, meaning the percentage of people who come back to your site again and again, and
Time on site after the element appears
So those four will help tell you whether you are truly interfering badly with user experience.
On mobile, ensure that your crucial content is not covered up, that the reading experience, the browsing experience isn’t covered up by one of these elements. Please, whatever you do, make those elements easy and obvious to dismiss. This is part of Google’s guidelines around it, but it’s also a best practice, and it will certainly help your user experience metrics.
Only choose to keep one of these elements if you are finding that the sacrifice… and there’s almost always a sacrifice cost, like you will hurt bounce rate or browse rate or return visitor rate or time on site. You will hurt it. The question is, is it a slight enough hurt in exchange for enough gain, and that’s that trade-off that you need to decide whether it’s worth it. I think if you are hurting visitor interaction by a few seconds on average per visit, but you are getting 5% of your visitors to give you an email address, that’s probably worth it. If it’s more like 30 seconds and 1%, maybe not as good.
Consider removing the elements from triggering if the visit comes from search engines. So if you’re finding that this works fine and great, but you’re having issues around search guidelines, you could consider potentially just removing the element from any visit that comes directly from a search engine and instead placing that in the content itself or letting it happen on a second page load, assuming that your browse rate is decently high. That’s a fine way to go as well.
If you are trying to get the most effective value out of these types of elements, it tends to be the case that the less common and less well used the visual element is, the more interaction and engagement it’s going to get. But the other side of that coin is that it can create a more frustrating experience. So if people are not familiar with the overlay or modal or interstitial visual layout design that you’ve chosen, they may engage more with it. They might not dismiss it out of hand, because they’re not used to it yet, but they can also get more frustrated by it. So, again, return to looking at those metrics.
With that in mind, hopefully you will effectively, and not too harmfully to your SEO, be able to use these pop-ups, overlays, interstitials, modals, and all other forms of elements that interfere with user experience.
And we’ll see you again next week for another edition of Whiteboard Friday. Take care.
Video transcription by Speechpad.com
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!
0 notes