#to change his dom style depending on the client | Explore Tumblr posts and blogs

suzanneshannon · 4 years ago

Text

Ground Rules for Web Animations

Animations can make a site stand out. Or, they can just as easily kill the experience. When working with web animations, there are a few things that could go wrong like adding animations that serve no purpose, setting durations that are too long or too quick, or not using right type of animation in the first place. Even if all of these things are done correctly, an animation style may not feel good, especially if they are not in sync with other animations or in line with the overall personality of the site.

Another important thing to note is that not all digital experiences should share the exact same animations. A marketing website might need different animations than a product website or a mobile app. Although the same basic principles of motion apply for all, there’re some nuances based on content type and screen size.

For example, say you want to make a boring form more exciting to fill out. You add some delightful animations in each step moving forward, but is that a good idea for a form you know a user needs to visit and fill often? Watching the same animations over and over could get annoying in that case.

Clearly, there are conditions and considerations that will serve animations well. In this article, we’ll discuss about adding animations into product websites. Let’s dig into that a bit and lay down some ground rules for working with them. Not so much a manifesto, but more like a baseline we can reference and sort of rally around.

First off, what’s a good situation for an animation?

When used well, an animation is almost like content — it provides context and has meaning that helps inform the user that something has happened and even what to expect next. Here are a few good situations where animation can do exactly that.

Transitioning UI blocks

This might be the most common use case for animations. When a UI block is moved from its original position, or is added or removed from the DOM, it’s a good idea to let users see that happen.

It’s easy to see the change with animation

…but it’s hard to figure out what changed without it.

Loading content

A loading animation is something we’ve all seen and encountered at some point in time! If not, a quick trip to CodePen shows you just how popular loading animations are. They’re ideal as placehholders for content, where users are not only given a hint at what to expect when the content loads, but confidence that something is being loaded at all.

Besides making the site feel fast, it also avoids janky content reflow, which can be super disorienting as elements render at different times.

Client side rendering is so interesting. Look at this janky loading experience. The page itself isn’t particularly slow, but it loads in very awkwardly. A whole thing front-end devs are going to have to get good at. pic.twitter.com/sMcD4nsL98

— Chris Coyier (@chriscoyier) October 30, 2018

Loading placeholders are best, of course, when you know the height of content blocks ahead of time.

Hinting

This is generally a one-time animation where the point is to give users a hint for where to look or what to do next. Some UIs are complex by nature. A little glow or ripple can help guide users through the process of completing a task or calling out a particular feature.

It doesn’t have to be all up in the user’s face. Instead, a little visual hint that informs without taking over the entire experience will do just fine.

Micro-interactions

Generally used on individual elements, micro-interactions give users instant visual feedback after performing an action. They instill confidence that a performed action has taken place and that something happened as a result — all while adding a little delight at the same time.

These do not have to be fancy, like Twitter’s heart animation, but they totally should indicate some kind of feedback or response to the user’s action. Just check out how subtle — yet delightful — that is when a user does something as small as adding an item from one line to another:

It’s small, but that little bounce provides instant feedback to user’s action.

Um, ok, so what just happened? It’s hard to tell when there’s no response.

OK, so when should we avoid animations?

We’ve just seen handful of situations where animations make a lot of sense. Let’s spell out the opposite conditions where animations generally contribute very little or nothing to the user experience. In other words, they become noticeable for bad reasons and are probably best left out of the equation.

Route transitions

Yes, we usually don’t see these sorts of animations on product websites but it’s worth mentioning to understand why they don’t make sense. These transitions work better on mobile apps because of the small screen area. On desktop screens there’s much larger area to animate. To animate the whole content smoothly, you’ll require to set more duration than on mobile screen. This will simply annoy the users making them wait to see the content as they are already used to see instant content visibility on the web. And in the worst cases, route transitions can not only be distracting, but a severe accessibility concern when it comes to motion sensitivity.

On initial load of page content

You may do it in marketing websites when you want to educate users or move their focus to a particular block. For product websites, it will be again annoying to see the same animation each time users navigates between pages.

When it’s unexpected

It’s a good idea to consider a user’s state of mind while they use a particular feature. Is visual feedback expected where the animation is being used? If not, it can confuse more than it helps.

For example, checkout this calculator app. There’s nothing new in the UI pattern when numbers are entered and calculations run. Users already know where to focus. There’s no point in making users wait before they can see results or surprise them with something that provides no additional meaning or benefit.

A snappy change without an animation is perfect in this case. The button hover and active states are more than enough.

When you’re unsure how well it performs

It’s worth bearing in mind that not all devices, internet connections, and browsers are equal in the eyes of animation. Eric Bailey sums this up nicely in his deep-dive on the prefers-reduced-motion media query:

We also need to acknowledge that not every device that can access the web can also render animation, or render animation smoothly. When animation is used on a low-power or low quality device that “technically” supports it, the overall user experience suffers. Some people even deliberately seek this experience out as a feature.

The heading above that quote is a sage reminder: Animation is progressive enhancement. If we plan on using an animation — especially ones that threaten to dominate the experience — we’ve gotta at least consider a way to opt out of it and whether the experience still works without the animation. prefers-reduced-motion is the best place to start.

When the purpose isn’t clear

Lastly, I’d say don’t add animations wherever you’re not absolutely sure about the purpose it serves. Superfluous animation can be distracting and hurt more than it helps. This tweet from 2018 is still very true:

Web design in 2018 428 dependencies 142 seconds compile time 5 MB of JavaScript 0 clue as to basic UI interactions pic.twitter.com/1GAAQS4td8

— Thomas #BlackLivesMatter (@thomasfuchs) March 27, 2018

How long should an animation last?

The length of an animation is just as important as the type of animation being used. Wait too long, and the animation can appear to drag on. Go too fast, and the nice details of the animation can get lost (in best cases) or completely disorient the user (in worse cases).

So, how long should we set the duration of an animation? I’ll give you a classic answer: It depends.

The bigger the distance, generally the longer the duration

Animations (like the ones we looked at earlier) can be limited to a short duration. But if we’re taking about a massive transition where an object is traveling a long distance, we may feel it needs something a little longer to make sure things don’t move too fast. But avoid using duration longer than 400ms.

Check out this example. Notice how the content takes a little longer to transition because it has a greater distance to travel. But also notice that the it doesn’t have to last too long because the object that leaves fades into the object that enters, and the object that enters comes at a shorter distance rather than making it travel across the entire screen.

Goes to show that even big animations can be optimized in ways that make it feel shorter without getting lost in the mix.

Use a shorter duration when the user triggers the action

This is important and a common mistake. If the user already expects something to happen — and the focus is already clearly where it should be — then there’s no point in making the user wait seconds to complete what they already expect.

Instant reaction to what user is expecting

Making user wait…

On the other hand, if the change is automatically triggered by the system, a longer duration makes sense, as it will allow the user to catch up to speed with the change taking place. Think of tooltips or modals that are not triggered by the user do not require a their immediate attention.

Less distracting with subtle entrance

Too distracting with short animation duration

Enter and exit animations can have different durations

Sometimes it makes sense to keep the animation for an object that is entering view a little faster than an animation for an object that is exiting, especially when the user is expecting to see that content change.

Take the previous example of dropdown menu. When a user clicks on it, they’d want to see the menu items right away — at least, I wouldn’t have to wait to see menu items. When the user clicks, let the submenu enter quickly and then smoothly leave when it’s dismissed so that it avoids distracting the user on the way out, when it’s no longer needed.

But this does not apply for large UI blocks. On larger blocks, for most cases, a duration longer than 200ms is required. In such cases, reversing the durations and letting a block exit faster than it entered ensures it won’t block the existing page view.

Doesn’t block the page view on exit

Blocks the page view on exit

Animation duration across the product should be in sync with each other and with the brand’s personality

I’ve came across many products where one feature has really nice animations and another is simply too quick, slow or lacks any animation at all.

Even worse is when animations within the same feature aren’t in sync.

Notice how the sidebar animates when it enters view, but also how it is totally out of sync with the animation that changes the width of the main content. It feels unnatural when they aren’t in harmony.

That’s where having a style guide with thoughtful animation guidelines that can be used consistently across the experience can be a huge help.

How simple is too simple? Or how complex is too complex?

The complexity of an animation ought to be based on how frequently users are expected to encounter it, among the other things we’ve looked at so far. The more often users are expected to see it, the simpler the animation should be. This should override the previous rules of duration where necessary.

For example, the below animation would work in a main menu, but using the same staggering effect in drop-down menus across the product is just too much to take in. There is indeed a point of diminishing returns in animations, just as there is in economics.

But, hey, if this sort of complex animation is used sparingly in intentional instances, then it can be incredibly delightful!

But yes, you can be creative with the animations where there’s a decision pending at the user or while processing data. This makes waiting times more engaging, like when network breaks or a wrong passcode is submitted.

Which easing function should you use?

Ease? Ease in? Ease out? Ease in and out? Some cubic bezier curve?

The right easing adheres to the laws of physics. Disney’s principles of animation is the gold standard when it comes to that.

For enter animations, use bounce effect if you want immediate attention of the user, otherwise use a smooth acceleration (and deceleration, for that matter) that is incremental rather than linear. Bouncing should reflect gravity. Brandon Gregory’s post on natural-feeling animations provides all kinds of examples that fall in line with the laws of physics.

CodePen Embed Fallback

You can refer to this Gist by Adam Argyle for defining easings in CSS.

Lights, camera, and… intentional action!

Attention to detail is what separates outstanding animations from ordinary (or even straight up broken) ones. If you’re in the process of learning web animations or currently working on a project that calls for them, I sure hope this post can serve as a set of useful ground rules to help you get the most out of your work.

Apart from the rules, I’d also mention that good animations take time and practice. Sure, a lot of the stuff I covered here is somewhat anecdotal and based on personal experience, but that’s the result of developing an eye for animations after years of working with them. Learn, try, improve, and keep learning. Otherwise, you may end up with a collection of animations that deliver poor user experiences and even hurt the accessibility of your site.

The post Ground Rules for Web Animations appeared first on CSS-Tricks.

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

Ground Rules for Web Animations published first on https://deskbysnafu.tumblr.com/

0 notes

researching01 · 6 years ago

Text

Deploying a Client-Side Rendered create-react-app to Microsoft Azure

New Post has been published on https://headacheshelp.com/awesome/deploying-a-client-side-rendered-create-react-app-to-microsoft-azure/

Deploying a Client-Side Rendered create-react-app to Microsoft Azure

Deploying a React app to Microsoft Azure is simple. Except that … it isn’t. The demon is in the details. If you’re looking to deploy a create-react-app — or a similar style front-end JavaScript framework who are in need of pushState-based routing — to Microsoft Azure, I believe this article will serve you well. We’re going to try to avoid the headaches of client and server side routing reconciliation.

First, a quick story.

Back in 2016, when Donovan Brown, a Senior DevOps Program Manager at Microsoft, had given a “but it works on my machine speech” at Microsoft Connect that year, I was still in my preliminary stages as a web developer. His talk was about micro-services and containers.

[…] Gone are the days when your manager comes running into your office and she is frantic and she has found a glitch. And no matter how hard I try, I can’t reproduce it and it runs perfectly on my machine. She says: fine Donovan, then we are going to ship your machine because that is the only place where it runs. But I like my machine, so I’m not going to let her ship it…

I had a similar sort of challenge, but it had to do with routing. I was working on a website with a React front end and ASP.NET Core back end, hosted as two separate projects that were deployed to Microsoft Azure. This meant we could deploy both apps separately and enjoy the benefits that comes with separation of concern. We also know who to git blame if and when something goes wrong. But it had downsides as well, as front-end vs. back-end routing reconciliation was one of those downsides.

One day I pushed some new code to our staging servers. I received a message shortly after telling me the website was failing on page refresh. It was hurling a 404 error. At first, I didn’t think it was my responsibility to fix the error. It had to be some server configuration issue. Turns out I was both right and wrong.

I was right to know it was a server configuration issue( though at the time, I didn’t know it had to do with routing ). I was wrong to deny it my responsibility. It was only after I went on a web searching rampage that I discovered a utilize case for deploying a create-react-app to Azure under the Deployment tab on the official documentation page.

Building React for production

When building a React app for production( assuming we’re are using create-react-app ), it’s worth noting the folders that get produced. Running npm running construct will generate a build folder where an optimized static version of its implementation lives. To get the application on a live server, all we need do is feed the server the content of the construct folder. If we were working on localhost, there is no live server involved, so it is not always equivalent to having the application on a live server.

Generally, the construct folder will have this structure :P TAGEND- constructed

– static

– css

– css files

– js

– js files

– media

– media files

– index.html

– other files … Client-side routing with React Router

React Router uses the HTML5 pushState history API internally. What pushState does is quite interesting. For example, navigating( or using Link in react router) from the page https :// css-tricks.com to the page https :// css-tricks.com/ archives/ will cause the URL bar to display https :// css-tricks.com/ archives/ but won’t cause the browser to load the page/ archives or even check that it exists. Couple this with the component-based model of React, it becomes a thing to change routes while displaying different pages based on those routes — without the all-seeing eye of the server trying to serve a page in its own directory. What happens, then, when we introduce servers by pushing the code to a live server? The docs tell it better :P TAGEND

If you use routers that use the HTML5 pushState history API under the hood( for example, React Router with browserHistory ), many static file servers will fail. For example, if you used React Router with a road for/ todos/ 42, the development server will respond to localhost: 3000/ todos/ 42 properly, but an Express serving a production build as above will not. This is because when there is a fresh page loading for a/ todos/ 42, the server looks for the file construct/ todos/ 42 and does not find it. The server needs to be configured to respond to a request to/ todos/ 42 by serving index.html.

Different servers involve different configuration. Express, for example, involves this :P TAGEND app.get(‘*’,( req, res) =>

res.sendFile( path.resolve( __dirname, ‘client’, ‘build’, ‘index.html’ )); );

…as documented in the create-react-app docs. Keep in intellect though, this assumes that we’re hosting create-react-app at the server root, which is making employ of a wildcard road (*) that catches all road and respond to all route request by serving the index.html file in the build folder which sits at the root of the server application. Also, this is tightly coupled with the back-end. If that’s the case, we would most likely have this kind of folder structure( assuming the back-end is in NodeJS ):

– Server

– Client( this is where your react code runs)

– construct( this is the build folder, after you npm running build)

– src

– node_modules

– package.json

– other front-end files and folders

– Other back-end files and folders

Since my front-end( create-react-app) and back-end( ASP.NET) were two different projects, serving static files by navigating the directory was sort of an impossibility.

In fact, since we are deploying a static app, we do not need the back-end. As Burke Holland set it: “Static” means that we aren’t deploying any server code; simply the front-end files.

I keep mentioning ASP.NET here because during the course of my research, I figured configuring Azure required a configuration file in a wwwroot folder and ASP.NET’s folder structure typically has a wwwroot folder. Remember the application’s back-end was in ASP.NET? But that’s just about it. The wwwroot folder seemed to be hidden somewhere on Azure. And I can’t show you without deploying a create-react-app. So let’s go do that.

Getting started with App Services on Microsoft Azure

To get started, if you do not already have a Azure account, get a free trial then head over to the Azure portal.

Navigate to All services- Web- App Services Navigating on the Azure portal from All services, to Web, to App services

We want to add a new app, give it a name, subscription( should be free if you’re on a free trial, or if you already have one ), resource group( create one or utilize existing ), then click on the Create button down at the bottom of the panel.

Creating a new App service on the Azure portal.

We should get a notification that the resource has been created. But it won’t immediately show up, so hit “Refresh” — I have other resources, but the AzureReactDemo2 is what I’m employing here. You’ll click on the name of your newly created app, which is AzureReactDemo2 in my occurrence.

Displaying all App Services on the Azure portal.

The blade shows you information about your app, the navigation to the left has everything you need to manage your application( overview, activity log, deployment center …).

For example, the Deployment Center is where the app deployment is managed, Slots is where things like staging, production, test are managed. Configuration is where things like environmental variables , node versions and — an important one — Kudu are managed.

The overview screen shows a general position of the application Status, URL … Click on the URL to see the live site.

Showing the various parts of an App Service on the Azure CLI.

The app is up and running!

Showing the default live page of an App Service.

What we’ve done is create a new App Service, but we have none of our code on Azure yet. As said earlier, all we need to do is to feed Azure the content of the build folder generated by building React for production, but we don’t have one yet. So let’s go local and get some React app.

Going local

We need to create a new React app, and install react-router as a dependency.

npx create-react-app azure-react-demo cd azure-react-demo

We also want to install react-router( react-router-dom, actually)

npm i react-router-dom

All things being equal, starting the app with npm start, we should get the default page.

Showing the default page generated by React.

Because this will be about testing routes, I needed to induce some pages. I’ve modified my local version and uploaded it to GitHub. I’m banking on the fact that you can find your route around react and react-router. Download a demo .

My folder looks like this :P TAGEND

Showing the folders and files in the modified create-react-app app.

The altered files have the following code :P TAGEND // App.js import React, Component from “react”; import ” ./ App.css”; import Home from ” ./ pages/ Home”; import Page1 from ” ./ pages/ Page1″; import Page2 from ” ./ pages/ Page2″; import BrowserRouter as Router, Switch, Route from “react-router-dom”;

class App extends Component

render()

return(

);

exportation default App; // Page1. js import React from “react”; import Link from “react-router-dom”;

const Page1=() =>

return(

Argentina( PAGE 1)

Nigeria

Home

); ; exportation default Page1; // Page2. js import React from “react”; import Link from “react-router-dom”;

const Page2=() =>

return(

Nigeria( PAGE 2)

Argentina

Home

); ; exportation default Page2; /* App.css */ html

box-sizing: border-box; body

margin: 0;. page

display: grid;

grid-template-rows: repeat( 3, 1fr );

height: 100 vh;. page1. flagTop, .page1. flagBottom

background-color: blue;. page2. flagTop, .page2. flagBottom

background-color: green;. flagCenter

display: flex;

align-items: centre;

flex-direction: column;

justify-content: center;

text-align: centre;. page a

perimeter: 2px solid currentColor;

font-weight: bold;

margin: 0 30 px;

padding: 5px;

text-decoration: none;

text-transform: uppercase;. flags

display: flex;

thicknes: 100%;. flags>. page

flex: 1;

Running the app runs locally, so the roads deliver when links are clicked and even when the page is refreshed.

Deploy the app to Azure

Now, let’s get it up on Azure! There are a few steps to make this happen.

Step 1: Head to the Deployment Center

On Azure, we need to go to the Deployment Center. There are quite a few options each with its pros and cons. We’ll be using Local Git( which means your local git app straight immediately to Azure) for source control, Kudu for Build Provider.

Remember to click continue or finish when you select an option, or else, the portal will just keep staring at you.

Showing Deployment Center on the Azure portal and choosing a source control as the first step in deploying a new App Service.

Showing the Build Provider section in the Deployment Center on Azure portal.

After the third step, Azure produces a local git repo for you. And it gives you a remote link to point your react app to.

One thing to note at this phase. When you push, Azure will ask for your GitHub credentials. It is under the deployment tab. There are two: App and User. App credential will be specific to an app. User will be general to all the apps you as a user has Read/ Write access to. You can do without User Credentials and use App credentials, but I find that after a while, Azure stops asking for credentials and just tells me authentication failed automatically. I defined a custom User Credentials. Either way, you are able to get past that.

Showing the Deployment Credentials for the App Service on Azure portal.

In the React app, after modification, we need to build for production. This is important because what we want to upload is the content of the build folder.

We need to tell Kudu what node engine we’ll be using, or else, the construct will most likely fail, due to the reported fact that react-scripts requires a node version higher than the default set on Azure. There are other ways to do that, but the simplest is to add a nodes engine in package.json. I’m utilizing version 10.0 here. Regrettably, we can’t only add what we like, since Azure has Node versions it supports and the rest are unsupported. Check that with the CLI with the command: az webapp list-runtimes

Add the preferred node version to the package.json file, as in :P TAGEND “engines”:

“node”: “1 0.0 ”

Displaying a list of Azure runtimes in the Azure CLI. Step 2: Build the App

To build the React app, let’s run npm build in the Terminal.

Step 3: Initialize the Git repo

Navigate into the build folder and initialize a Git repo in there. The URL to clone the repo is in the overview page. Depending on what credentials you’re employing( App or User ), it will be slightly different.

Showing the overview of the App Service on Azure and the Git clone URL. git init git add. git commit -m “Initial Commit” git remote add azure git push azure master

Now, visit the live app by using the URL on the overview page. As you can see, the app fails on/ page2 freshen. Looking at the network tab, a 404 is thrown because the page tried to be fetched from the server — with client-side routing, as we have already set up, the page shouldn’t even be server fetched at all.

Showing the failed page request and the network tab to verify. Configuring Azure to reconcile client and server side routing

In the public folder, let’s add a web.config XML file with the following content :P TAGEND

I’ve intentionally decided to not format the code snippet because XML is strict about that. If you miss the formatting, the file has no effect. You can download an XML formatter for your text editor. For VSCode, that would be the XML Tools plugin.

Showing an XML formatter and an XML formatted file in VSCode.

The app can be built again at this point, although we’ll lose the Git info in the construct folder since the new construct overrules the old build. That means it would have to be added again, then pushed.

Now the app runs as shown below! Whew.

We don’t want to have to npm run build every time — that’s where continuous deployment comes in. Check out the link below for appropriate references.

Conclusion

There is a lot to Azure, as it can do a lot for you. That’s nice because there are times when you need it to do something that seems super specific — as we’ve seen here with client and server side routing reconciliation — and it already has your back.

That said, I’ll leave you with a couple of related resources you can turn to as you look to deploying a React app to Azure.

Custom NodeJs Deployment on Azure Web App by Hao Luo: Learn more about Kudu and NodeJS deployment. Deploying a React App As a Static Site On Azure by Burke Holland: Even more options for deploying create-react-app to Microsoft Azure.

The post Deploying a Client-Side Rendered create-react-app to Microsoft Azure seemed first on CSS-Tricks.

Read more: css-tricks.com

#article #azure #deployment #react

0 notes

siliconwebx · 6 years ago

Text

Deploying a Client-Side Rendered create-react-app to Microsoft Azure

Deploying a React app to Microsoft Azure is simple. Except that... it isn’t. The devil is in the details. If you're looking to deploy a create-react-app — or a similar style front-end JavaScript framework that requires pushState-based routing — to Microsoft Azure, I believe this article will serve you well. We’re going to try to avoid the headaches of client and server side routing reconciliation.

First, a quick story.

Back in 2016, when Donovan Brown, a Senior DevOps Program Manager at Microsoft, had given a "but it works on my machine speech" at Microsoft Connect that year, I was still in my preliminary stages as a web developer. His talk was about micro-services and containers.

[...] Gone are the days when your manager comes running into your office and she is frantic and she has found a bug. And no matter how hard I try, I can't reproduce it and it works perfectly on my machine. She says: fine Donovan, then we are going to ship your machine because that is the only place where it works. But I like my machine, so I'm not going to let her ship it...

One day I pushed some new code to our staging servers. I received a message shortly after telling me the website was failing on page refresh. It was throwing a 404 error. At first, I didn’t think it was my responsibility to fix the error. It had to be some server configuration issue. Turns out I was both right and wrong.

I was right to know it was a server configuration issue (though at the time, I didn’t know it had to do with routing). I was wrong to deny it my responsibility. It was only after I went on a web searching rampage that I found a use case for deploying a create-react-app to Azure under the Deployment tab on the official documentation page.

Building React for production

When building a React app for production (assuming we’re are using create-react-app), it’s worth noting the folders that get generated. Running npm run build will generate a build folder where an optimized static version of the application lives. To get the application on a live server, all we need do is feed the server the content of the build folder. If we were working on localhost, there is no live server involved, so it is not always equivalent to having the application on a live server.

Generally, the build folder will have this structure:

→ build → static → css → css files → js → js files → media → media files → index.html → other files...

Client-side routing with React Router

React Router uses the HTML5 pushState history API internally. What pushState does is quite interesting. For example, navigating (or using Link in react router) from the page https://css-tricks.com to the page https://css-tricks.com/archives/ will cause the URL bar to display https://css-tricks.com/archives/ but won't cause the browser to load the page /archives or even check that it exists. Couple this with the component-based model of React, it becomes a thing to change routes while displaying different pages based on those routes — without the all-seeing eye of the server trying to serve a page in its own directory. What happens, then, when we introduce servers by pushing the code to a live server? The docs tell it better:

If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not. This is because when there is a fresh page load for a /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html.

Different servers require different configuration. Express, for example, requires this:

app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')); });

...as documented in the create-react-app docs. Keep in mind though, this assumes that we’re hosting create-react-app at the server root, which is making use of a wildcard route (*) that catches all route and respond to all route request by serving the index.html file in the build folder which sits at the root of the server application. Also, this is tightly coupled with the back-end. If that’s the case, we would most likely have this kind of folder structure (assuming the back-end is in NodeJS):

→ Server → Client (this is where your react code goes) → build (this is the build folder, after you npm run build) → src → node_modules → package.json → other front-end files and folders → Other back-end files and folders

Since my front-end (create-react-app) and back-end (ASP.NET) were two different projects, serving static files by navigating the directory was sort of an impossibility.

In fact, since we are deploying a static app, we do not need the back-end. As Burke Holland put it: "Static" means that we aren’t deploying any server code; just the front-end files.

I keep mentioning ASP.NET here because during the course of my research, I figured configuring Azure required a configuration file in a wwwroot folder and ASP.NET's folder structure typically has a wwwroot folder. Remember the application’s back-end was in ASP.NET? But that’s just about it. The wwwroot folder seemed to be hidden somewhere on Azure. And I can’t show you without deploying a create-react-app. So let’s go do that.

Getting started with App Services on Microsoft Azure

To get started, if you do not already have a Azure account, get a free trial then head over to the Azure portal.

Navigate to All services → Web → App Services Navigating on the Azure portal from All services, to Web, to App services

We want to add a new app, give it a name, subscription (should be free if you’re on a free trial, or if you already have one), resource group (create one or use existing), then click on the Create button down at the bottom of the panel.

Creating a new App service on the Azure portal.

We should get a notification that the resource has been created. But it won’t immediately show up, so hit "Refresh" — I have other resources, but the AzureReactDemo2 is what I’m using here. You’ll click on the name of your newly created app, which is AzureReactDemo2 in my case.

Displaying all App Services on the Azure portal.

The blade shows you information about your app, the navigation to the left has everything you need to manage your application (overview, activity log, deployment center...).

For example, the Deployment Center is where the app deployment is managed, Slots is where things like staging, production, test are managed. Configuration is where things like environmental variables, node versions and — an important one — Kudu are managed.

The overview screen shows a general view of the application Status, URL... Click on the URL to see the live site.

Showing the various parts of an App Service on the Azure CLI.

The app is up and running!

Showing the default live page of an App Service.

Going local

We need to create a new React app, and install react-router as a dependency.

npx create-react-app azure-react-demo cd azure-react-demo

We also want to install react-router (react-router-dom, actually)

npm i react-router-dom

All things being equal, starting the app with npm start, we should get the default page.

Showing the default page generated by React.

Because this will be about testing routes, I needed to make some pages. I’ve modified my local version and uploaded it to GitHub. I’m banking on the fact that you can find your way around react and react-router. Download a demo.

My folder looks like this:

Showing the folders and files in the modified create-react-app app.

The changed files have the following code:

// App.js import React, { Component } from "react"; import "./App.css"; import Home from "./pages/Home"; import Page1 from "./pages/Page1"; import Page2 from "./pages/Page2"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; class App extends Component { render() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/page1" component={Page1} /> <Route path="/page2" component={Page2} /> </Switch> </Router> ); } } export default App;

// Page1.js import React from "react"; import { Link } from "react-router-dom"; const Page1 = () => { return ( <div className="page page1"> <div className="flagTop" /> <div className="flagCenter"> <h1 className="country">Argentina (PAGE 1)</h1> <div className="otherLinks"> <Link to="/page2">Nigeria</Link> <Link to="/">Home</Link> </div> </div> <div className="flagBottom" /> </div> ); }; export default Page1;

// Page2.js import React from "react"; import { Link } from "react-router-dom"; const Page2 = () => { return ( <div className="page page2"> <div className="flagTop" /> <div className="flagCenter"> <h1 className="country">Nigeria (PAGE 2)</h1> <div className="otherLinks"> <Link to="/page1">Argentina</Link> <Link to="/">Home</Link> </div> </div> <div className="flagBottom" /> </div> ); }; export default Page2;

/* App.css */ html { box-sizing: border-box; } body { margin: 0; } .page { display: grid; grid-template-rows: repeat(3, 1fr); height: 100vh; } .page1 .flagTop, .page1 .flagBottom { background-color: blue; } .page2 .flagTop, .page2 .flagBottom { background-color: green; } .flagCenter { display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; } .page a { border: 2px solid currentColor; font-weight: bold; margin: 0 30px; padding: 5px; text-decoration: none; text-transform: uppercase; } .flags { display: flex; width: 100%; } .flags > .page { flex: 1; }

Running the app works locally, so the routes deliver when links are clicked and even when the page is refreshed.

Deploy the app to Azure

Now, let’s get it up on Azure! There are a few steps to make this happen.

Step 1: Head to the Deployment Center

On Azure, we need to go to the Deployment Center. There are quite a few options each with its pros and cons. We’ll be using Local Git (which means your local git app straight directly to Azure) for source control, Kudu for Build Provider.

Remember to click continue or finish when you select an option, or else, the portal will just keep staring at you.

Showing Deployment Center on the Azure portal and choosing a source control as the first step in deploying a new App Service.

Showing the Build Provider section in the Deployment Center on Azure portal.

After the third step, Azure generates a local git repo for you. And it gives you a remote link to point your react app to.

One thing to note at this point. When you push, Azure will ask for your GitHub credentials. It is under the deployment tab. There are two: App and User. App credential will be specific to an app. User will be general to all the apps you as a user has Read/Write access to. You can do without User Credentials and use App credentials, but I find that after a while, Azure stops asking for credentials and just tells me authentication failed automatically. I set a custom User Credentials. Either way, you should get past that.

Showing the Deployment Credentials for the App Service on Azure portal.

In the React app, after modification, we need to build for production. This is important because what we want to upload is the content of the build folder.

We need to tell Kudu what node engine we’ll be using, or else, the build will most likely fail, due to the reported fact that react-scripts requires a node version higher than the default set on Azure. There are other ways to do that, but the simplest is to add a nodes engine in package.json. I’m using version 10.0 here. Unfortunately, we can’t just add what we like, since Azure has Node versions it supports and the rest are unsupported. Check that with the CLI with the command: az webapp list-runtimes

Add the preferred node version to the package.json file, as in:

"engines": { "node": "10.0" }

Displaying a list of Azure runtimes in the Azure CLI.

Step 2: Build the App

To build the React app, let’s run npm build in the Terminal.

Step 3: Initialize the Git repo

Navigate into the build folder and initialize a Git repo in there. The URL to clone the repo is in the overview page. Depending on what credentials you’re using (App or User), it will be slightly different.

Showing the overview of the App Service on Azure and the Git clone URL.

git init git add . git commit -m "Initial Commit" git remote add azure <git clone url> git push azure master

Now, visit the live app by using the URL on the overview page. As you can see, the app fails on /page2 refresh. Looking at the network tab, a 404 is thrown because the page tried to be fetched from the server — with client-side routing, as we have already set up, the page shouldn’t even be server fetched at all.

Showing the failed page request and the network tab to verify.

Configuring Azure to reconcile client and server side routing

In the public folder, let’s add a web.config XML file with the following content:

<?xml version="1.0"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="React Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>

Showing an XML formatter and an XML formatted file in VSCode.

The app can be built again at this point, although we’ll lose the Git info in the build folder since the new build overrides the old build. That means it would have to be added again, then pushed.

Now the app works as shown below! Whew.

We don’t want to have to npm run build every time — that’s where continuous deployment comes in. Check out the link below for appropriate references.

Conclusion

That said, I’ll leave you with a couple of related resources you can turn to as you look to deploying a React app to Azure.

Custom NodeJs Deployment on Azure Web App by Hao Luo: Learn more about Kudu and NodeJS deployment.

Deploying a React App As a Static Site On Azure by Burke Holland: Even more options for deploying create-react-app to Microsoft Azure.

The post Deploying a Client-Side Rendered create-react-app to Microsoft Azure appeared first on CSS-Tricks.

😉SiliconWebX | 🌐CSS-Tricks

#Silicon Web Design #Ahmedabad #India #Web Development #WPBeginner #Silicon URL #Web Site #Cloud Host

0 notes

miss-m-and-her-blog · 7 years ago

Text

Mr. Perfect (Chapter 17: Last)

TITLE OF STORY: Mr. Perfect CHAPTER: 17 AUTHOR: hiddlestoner-and-cumberbabe WHICH TOM/CHARACTER: AU Gigolo!Tom GENRE: Romance, Fluff, Drama FIC SUMMARY: Mr. Tom Hiddleston is an international gigolo and renowned playboy that has sent London women’s hearts aflutter, and also all the women around the world. He’s charming, sexy , tall, smart, sophisticated and extremely handsome. But with his new client, Julie Rose Trillo, his life will change forever. RATING: T WARNINGS/TRIGGERS/AUTHORS NOTES: There are some British swear words and also curse words, so beware though hehe :P FEEDBACK/COMMENTS: Finally, I finished it! :D Once more, thank you for @thfrustration for letting this multi-chapter fanfic be posted in their blog; it means so much for me, honestly ^_^ Thank you so much, guys, and because of that, here’s a little list of those fellow Hiddlestoner/Tumblr users that gave Mr. Perfect some loving uhuh ;)

Tom is determined that he will see J.R. at the job fair. But will destiny permit him so? While J.R., will she ever let her heart decide this time of her happiness?

----

Tom turned around to where Ajay, Ajay’s mother, Mrs. Adita Ranjit, and Bailey sat in the couch as he presented himself on a navy-blue suit, partnered with a black tie and a baby blue shirt.

“So, how do I look? Comments?” He giddily asked, and then he pointed at Ajay,

“You look like you’re going with a client.” He playfully quipped and Bailey and his mother lightly slapped his shoulder for that remark.

“No, Tom, you look great. Very professional.” Ajay’s mother, Adita, gave him relief with her words.

“And smashing, too, I’d say.” Bailey commented last.

Tom sighed and then came to them to give them all kisses in the cheek to thank them. Ajay tried to refuse his kiss on the cheek but ended up with both of his cheeks kissed by Tom.

“Man! Come on!” Ajay wiped his cheek with the back of his hand.

“Thanks so much! Well, wish me luck. I hope that J.R. notices me there.” He sighed while he is pinning his cuff links.

“Come here, Tom, and I will tell you something.” Adita motioned to him to come closer. Tom got down on his knee and listened intently,

“You want to get the girl? You have to work for it. Tell her how much you feel. You know us women; the truth is always the best.” And she pinched his cheeks that left a smile on his lips.

“Thanks, Auntie.” Tom replied sweetly.

“Uhm, Tom, it’s 8am. The job fair starts at 9am.” Ajay reminded him, while tapping his wrist watch.

“Oh, blast! I have to go! Bye, guys! When I come back, I won’t be single anymore!” Tom, along with his sleek body bag, shouted out as he ran out of the room and out of their flat.

Everything felt so beautiful and majestic to Tom. The sun was just shinning right, the blue skies looked so bright, and the air felt like magic was floating all over. He couldn’t think of any negative thoughts, or even bad scenarios; all that he could think about is J.R.

What she might be wearing today, is she doing well while hosting the event? Is she okay? Those were the questions that are running up and down his mind while he waited for a taxi on the street.

He immediately got one and there, he is happily on his way to Renovis.

“Where to?” The driver asked Tom.

“Regent Street, the Renovis building.” Tom enthusiastically replied as he settled at the back seat. The driver did not said anything back and only chewed on the gum on his mouth.

Tom was about to sit properly when the car took off so quick, that he almost fell out of his seat. Tom tried to keep himself on his seat as the reckless driver sped their way on the road.

Then he noticed that the driver was wearing headphones on both ears, and that he could almost hear the banging music that was blaring off of the pieces.

Tom could only grunt in disgust, but he was pulled over to the left when the driver turned on a corner.

"Now I know how my clothes feel when they're in the wash." Tom muttered through gritted teeth.

The driver kept on turning hard on every corner and almost brushing the car's hood onto the next car's bumper, that sent Tom's heart hanging in the edge.

He did kept a tight grip on a handle near the windows, but that didn't stopped the inertia, pulling and pushing him from his seat. Suddenly, Tom realized that they are about to cross an intersection, and the driver couldn't resist but to beat the red light.

"NO! You tosser! You'll get us both killed!!!" Tom screamed out at the back, but the driver didn't heard a thing from him.

Tom held his breath and closed his eyes, also praying that they might cross the intersection safely.

And just like all of the angels in heaven heard him, they got safely across but the hell-for-leather ride kept on. The Renovis building was almost at the far side of his view and maybe a few blocks away, but he could only wish to arrive safely at the job fair.

And to see J.R. once again, perhaps.

But, his train of thought was derailed when the car stopped with a violent force that slammed him into the window behind the driver.

"What the actual fuck?!" He screamed out as he tried to see what happened, and there, their vehicle crashed onto another taxi, that placed a large bent on the car's hood.

The driver removed his seat belt and he went outside and argued terribly with the other driver whom he crashed his car on. The other driver then now grabbed the reckless man by the collar and there was a fist fight that was about to ensue.

Tom had no time to for this as his wristwatch had just ticked a quarter to 9 o’clock.

He went out of the taxi and he can clearly hear the screamed argument better when he heard the taxi driver shout out to him,

“Oi! You haven’t paid your fare yet!” His eyes glared at Tom.

Tom, who already had his back turned, faced the man, and held out his middle finger at him.

“I ain’t paying for nothing.” He spatted at him, then he ran at the opposite street to use his Uber app, even though he had already used his free rides and that he may have to use his own money to pay now.

Why couldn’t have you done this earlier, stupid? He thought to himself.

Tom only waited for five minutes for the his ride to arrive, and as soon as she got into the car and sat shotgun, he blared,

“Regent Street, mate, Renovis building, and step on it please!”

The driver looked shock and almost nervous, but then Tom sighed and slumped back on his seat.

“I’m sorry, I was just having a bad day; see that taxi that crashed on to another car, I was his passenger. And I’m very late for a job fair.” He apologized calmly and the driver had a hint of smile at the corner of his lips.

“Everyone’s dying to get at that bloody job fair, though, I understand.”

“Thank you. You say everyone?” Tom asked, curious.

“I’ve had two passengers earlier who was also going to Renovis this morning. How about you, you up for a job there?” Then their vehicle turned to a shortcut.

“Yes-- well, no. I’m going to see someone there.” Tom then brushed the back of his head with his hand.

“Who? Girlfriend?” The driver asked.

Tom almost laughed but tried to contain it that it turned to giggles. He felt like everything today is topsy-turvy, not anymore magical just like earlier. Maybe destiny is telling him not to go for J.R., but as far as he knows, it’s what his heart is shouting at him.

“Maybe. If ever she would let me be his boyfriend. It still depends.” Tom sighed now.

Then, right at the corner, he could see the Renovis building, tall and proud. Tom breathed in deeply, it was time to go and meet his fate.

----

J.R. saw her reflection from a glass door that she passed by. She wore a stunning blue dress; the top was adorned with sewn aqua-blue thread on baby blue sheer fabric. While the collar of her dress was a simple wing collar, while the skirt that reached above her knees were styled as billowing pleats. She didn't wore her hair in a bun but down, that flattered her whole outfit. J.R. was like a princess that whenever someone would see her, they would greet her with a slight bow.

She was headed on to Martin's office, to remind him that the event is about to begin. When she finally reached the door, she gave a knock and Martin called out for her to come in. She found her brother sitting over his desk, his laptop still open.

Still can't let go of work. She quietly thought with a smile.

"Kuya! It’s time.” She sang at him when she reached his table.

"Of course, J.R.. I was just looking at some photos here that Victor sent from Morocco." He pointed at his laptop monitor.

"Really? Let me see!" J.R. hopped beside him and looked on to the screen. J.R. saw the photos, they were taken at a wedding reception; Mason and Aicha's wedding.

"Aww, that's so sweet. I'm happy that Mr. Mason got to spend his leave that way." J.R. sighed.

"I'm glad that Victor had finally moved on to a new chapter in his life." Martin agreed.

He went on to the next photo and they saw a group photo of Mason, Aicha, Salima, Henri and even McCord who came with him to Morocco.

"Dom! He's there too?" J.R. pointed out.

"He also took his leave, and I had news from Ms. Van Vorst that McCord left Morocco with her cousin on a trip to Paris." Martin raised an eyebrow, and J.R. already got what he meant.

“Those cheeky bastards. Probably having the best Parisian holiday ever.” J.R. quipped, but then they both gave out a laugh at it.

Martin then placed a hand on J.R.’s, “I’ve something to tell you first, take a seat.”

She sat in front of his desk and listened very well. Then, Martin took out a folder from his drawers and showed it to J.R..

“I have asked Alex for an endorsement deal with us. She agreed and that she is taking off from her semi-retirement as a photographer. She also told me that she will be coming back as a model, and that the producers from Asia’s Next Top Model has offered her to be the show host.” after a while, he opened the folder and J.R. saw photos of Alex that are part of her portfolio.

There were three or more photos, and all of them declared how good of a supermodel is Alex.

Suddenly, Martin showed the last picture and there, J.R. gasped and paused for a while.

It was a picture from their photo shoot with Alex; when she was still with Tom. She could remember it clearly as day, the pose where they both sat over a window; Tom embracing her from behind, as if they were star-crossed lovers staring lovingly outside the window.

“Oh, how did this get here?” Martin asked then he studied the photo, while not noticing that J.R. just went quiet as the dead.

“Tom might have been an escort, but he sure looks like a model too.” Martin wondered then his gaze drifted towards J.R.

“Are you okay, J.R.?” He asked, but she only nodded in response.

“Are you thinking about him?”

Then J.R. looked up and met her brother’s gaze, “No. Why would I?” she tried to pretend that the photo didn’t had any effect on her.

Martin sighed and placed down the picture. He gently tapped the table with his index finger then he started,

“I know you think about him, Julie. Especially after the day he returned my payment for his services.”

J.R. stared out into the windows, as if trying to fight an urge to say something.

“I know too that he loves you. I saw it in his eyes whenever he was with you. But I feared his presence might just remind you of Nathan. He only looked like Nathan, but he is another person and he can’t be compared to him.”

Now, J.R. faced Martin and said, “What are you trying to say, Kuya?”

“That he doesn’t only loves you; you love him also, am I right?”

The question felt like an arrow that pierced J.R.’s chest. Can her brother be right with what he is talking about?

“No, I--” J.R. spoke but Martin followed up,

“I’m not even mad, J.R., if you love Tom. I want you to be happy, that’s all I want to say. And that’s what you should do; find him and you will find your happiness.”

J.R. let out a deep exasperated sigh. “If only it’s too easy to do, Kuya, I would’ve done it by now.”

Martin chuckled, then he stood up with the help of his cane. “Who knows, you might see him today.”

He walked towards her and she stood up, they were ready to go out.

She took his arm then said, “Be careful what you wish for, Kuya.” J.R. sassed.

-----

The minute Tom arrived in Renovis, he already saw the long queue that leads to the Job Fair inside. One needed to get in line just to get a visitor’s pass and booth ticket.

“Damn!” He cursed as he saw that the queue leads down almost into the business plaza of Renovis; where there are a lot of cafés and small stalls of ice cream parlors and also restaurants.

Before he went into the line, he saw a small light show and music inside the convention center and that caught his attention. He walked into the entrance of the convention center but he was stopped by the security guards wearing prestigious suits that somehow made him look like he a peasant.

“Sir, do you have a visitor’s pass and booth ticket?” One of the guards that looked as mean as Mason stopped him from going in.

“Uhm, not yet. Can’t I go inside already?” Tom demanded like a child.

“No, Sir. You have to get on the queue first, then when you have a visitor’s pass and booth ticket, only then you can go inside.”

Tom wasn’t paying attention to what the guard was saying because suddenly, the program has started. An emcee had already introduced J.R. and Tom craned his neck just to get a look at her.

But he was being kept pushed out by the guard that for a moment he lost his balance and fell on his bottom. The guard then ignored him this time, but Tom tried to peer into the glass door to see J.R..

J.R. stood up and went into the podium to speak. Tom felt breathless because even from a distance, he could feel the anticipation of seeing her again.

And not only that, J.R. took his breath away with her look today. If he could only eat his heart out right away, Tom has done it already.

J.R. then started speaking, “Good morning, ladies and gentlemen. First off, I want to introduce myself; My name is Julie Rose Bellegardé-Trillo, I am Sir Martin McLeod’s half sister. For those who have worked here for the past three years, they would recognize me for being Renovis’ endorser back in 2014.

“I have been in a long absence for three years; the reason why is that I got into a car accident and was comatosed for two years. I became an amnesiac for a year. But anyway, enough of that; I’m not here to talk about my past, because I’m here to talk about not only my future, but our future.”

Tom could only hear the muffled speaker that was inside the building but he fixed his gaze towards J.R. who is almost a hall away from him.

“As the new Renovis’ HR Department Head, it is my duty to ensure that the standards of hiring employees here in our company, will not just remain as the same, but to also improve. The quality of people hired will dictate the future of our corporation. But why a job fair, if you may ask; it is also for the future of our goodwill with our partners.

“The HR Department of Renovis can only hope that this event may not just help our companies, but also people who are deserving of a better professional career. Once again, good morning to all of you, and let the fair begin.”

Her speech was met with applause and there, J.R. sat back with Martin as the emcee announced other parts of the programme.

Tom stood back from the glass and the guard was still looking at him, he pointed at the queue and Tom inhaled sharply as he had no choice but to fall in line.

“Alright, alright.” Tom grumbled as he started to go over the plaza where the end of the queue is.

As soon as he got in line, he felt like something is really stopping him from even getting close to J.R..

Why is that now I wanted to be with J.R., everything seems just not to fall in place? He thought with contempt.

He crossed his arms and hoped that he won’t have to wait for long while on this queue. And this time, destiny seems to be cutting him some slack as the queue was moving quick.

Yes! Some good sign for the day! Tom rejoiced.

While on the queue, he noticed that there are somethings that have changed with J.R.. He thought that maybe J.R. is just like that because she is herself again. Her childish side is no longer noticeable now that she’s regained her memories.

He wonders, will she even acknowledge him when they see each other? Besides, she was the one who told him to stay away.

Heck, would I even get to talk to her amidst this big crowd? In between this ocean of people wedge between the two of us? Tom pondered

As he was enveloped with his thoughts, he didn’t noticed that he was almost near the booth for the ID and ticket.

Tom is now confused whether destiny is with him or not.

After a few more minutes of falling in line, he finally received his visitor’s pass and booth ticket, to which it directed him to his first booth, and incredibly, the Renovis booth. He felt his legs move into a sprint as he wanted to get there as soon as possible.

Not caring if he bumped into somebody while running towards the glass doors of the convention center, Tom got there in a minute and the guard who stopped him earlier made him pass when he saw his ID and ticket.

Tom entered the main hall and he tried to look for the directions that leads to the Renovis booth.

Inside his mind eye, he wished that he would see her there, as an interviewer, perhaps. And maybe, just maybe, she might notice him.

Tom rehearsed it in his mind on how will he act when he finally sees J.R.. Would he smile at her? Say Hi? Or maybe go on ahead and ask if he could talk to her in private.

No, you twit, that is just insane! He scolded at himself, but then when he lifted his head, he was already at the Renovis booth and once again, there is a line that he needed to get on.

Tom, already feeling stupid and tired, still got on the line and waited for his turn to be interviewed and to have his resumé submitted.

His patience was almost waning, but Tom kept his cool, because there were thousands of scenarios that are still optional, but all of those were running up and down his mind as he devised how will he get to meet J.R. in person.

For him, it was like trying to get an autograph from his favorite actress. He blew out a raspberry as he stood in line.

Then out of the blue, a short man with balding red hair gave Tom a nudge at the back.

“Hey, you nitwit, I was there first. Why did you took my slot?”

His voice almost sounded like Bugs Bunny’s that when Tom looked back, he tried to hold a giggle.

“You think I’m talking funny at ye, eh boy?” He then threatened Tom, but he was almost a few feet shorter than him that if Tom held his balding head, he won’t be able to land a punch on his body.

“I’m sorry sir, but I got here first. I’ve been in this queue for five minutes now.” Tom explained.

“You can’t fool me! I just went over to the loo and there, you’ve taken my place!” He now screamed at Tom that made other people look over at them.

“Please, sir, I was here first.” Tom now tried to stop his lips from stretching into a smile as the balding man looked like an angry Pokémon.

To no avail, Tom finally snickered, and there, the man grabbed him by the collar and pulled his shoulders down.

“Why you--!” The man shouted but then, they heard a security guard shout at them to break the tension between the two.

Because Tom was pulled down to the balding man’s level, he had to look up to see the people standing in front of them.

His eyes popped and his jaw dropped when he finally saw her there, standing with her arms crossed in her chest, and her eyes narrowed. But still, she looked lovelier than ever to him.

“What is this, sir, what is the squabble all about? What did this man do to you?” J.R. spoke with such authority that Tom couldn’t believe his own ears that it is J.R..

“He took my slot here in the line! He’s a one cheating arsehole and a git, for all I know.” The balding man yammered on.

But J.R. only rolled her eyes, and to end this situation, she ordered, “You can take your place now, sir. But you-- come here.” She pointed out at Tom.

Her lady boss tone was somehow scaring Tom, but he didn’t cared, that lady boss is the woman of his dreams.

“Yes, Ms. Trillo?” Tom playfully replied when he was now face to face with her.

“I will have to talk to you, personally.” Then she turned to the blonde woman with glasses on her right, “Natalie, have Mr. Hiddleston escorted to my office. I will be waiting there.”

Other applicants heard J.R. and whispered among themselves while looking at Tom.

J.R. only turned her back on Tom, but he felt like he had just been sprinkled on with fairy dust that he felt like he can fly.

She disappeared among the crowd, but Natalie now caught his attention,

“This way now, follow me.” She instructed him and Tom was led to the next building, the main building itself. He was made to surrender his visitor’s pass and booth ticket for another visitor’s pass for the main building.

Natalie escorted him to the elevators to which they got up to the 19th floor; the floor that mainly belongs to HR.

Tom could feel his heart already on his throat, ready to jump out and dance about when they arrived at the 19th floor.

He wondered, whatever J.R. wanted to talk to him about. Once again, he tried to imagine what would happen once he is in J.R.’s office. Humorously, his mind went in to naughty places where J.R. might seduce him and have her way on him above her desk.

Tom had to suppress a smile and shooed the dirty thoughts away,

No brain, please, not those kind of thoughts. Tom thought.

He was led into an office with cubicles ranging from corner to corner, there, Natalie said, “Welcome to Renovis’ Human Resources Department.”

Natalie walked beyond him and Tom only followed her into the labyrinth-like office that he swore they took one or more turns that lead them nowhere J.R.’s office.

He once thought that she may only be misguiding him, but once they took the last turn, Tom saw the door to J.R.’s office.

“You can go in; wait for Ms. Trillo inside.” Natalie instructed, then Tom went in.

The interior of J.R.’s office felt like a museum for everything that represents beauty; Tom sighed at the sight of the white marble floors, the cream-colored couches and seats, and also, her wide desk made out of glass.

Behind her desk were the bookshelves and stands where framed photographs sat quietly but were very much noticeable from afar.

He approached the stand carefully and saw for the first time a photograph of Cassandra and Robert. J.R. looked exactly like the mixture of those two good-looking people; then his attention went to the other framed picture, it is a photograph of a young Martin, no older than 20, and a 12 year old J.R..

Martin was leaning on his cane while J.R. held his arm and they were both laughing when the picture was taken.

Out of all those pictures, he tried to look for at least one photograph of Nathan; but there was none. Suddenly he wondered why J.R. would not have a picture of him.

Before he could think more about that thought, J.R. entered the room and she saw him standing over the photos. This seemed not to have caught his attention, and so, J.R. cleared her throat and,

“Mr. Hiddleston, please, if you are done ogling at my family; you can sit now.” And she pointed out the seat in front of her desk that very much looked like he was going to be interviewed for a job.

Tom tried to act formal as he quietly sat in front of her desk. J.R. took her seat after a while, then, her eyes darted towards him that made him feel a little bit terrified.

He only stared back for a minute when J.R. raised an eyebrow, “Are we just going to stare at each other or are you going to hand me your CV?”

His senses were alarmed and he clumsily fished out the transparent folder that contained his CV. After handing it out to J.R., she quickly flipped it over and read the part of his job experience.

J.R. was only quiet as she read on, but Tom craned his head up to see which part she was reading.

Without looking up at him, she said, “So, the last work you had was in a modelling agency? Then you graduated from London Metropolitan University with a degree in Psychology-- but you haven’t worked for any other company after that. Why is that?”

There, both of their eyes met; she was studying him, but Tom could only stare back at her. He knows to himself that he have missed her terribly. If only he could say it to her out loud, but the way she acted made him feel queasy.

“I-- I became an escort after the modelling agency.” Tom told it simply as that.

“And besides that, you had no other professional work whatsoever?” J.R. inquired.

“No. Just that.”

J.R. then shifted on her seat and sighed. She couldn’t keep on the charade, she knew that she had to ask him the question she really wanted to ask him.

“Why are you here, Tom?” J.R. then placed down his CV and her pen on the desk.

Tom now shifted in his seat and answered as earnest as he can, “To apply for a job. There’s a job fair today, ain’t it?”

She waved her hands off and said, “Don’t get smart with me, please, why are you really here? No-- Let me ask you the real question; why did you returned the payment my Kuya gave you?”

He could feel her confusion underneath the strict facade, but he just doesn’t get why she needed to know that.

“Because I didn’t needed the money. I did the job he offered me, because I wanted to do it not for the financial part. I realized that after everything.”

J.R.’s brows furrowed, then she got up from her chair and stood closer to Tom.

“Seriously? What do you think you are doing when you took the job? Charity? Out of your kind heart, you just did it?”

“I wasn’t worthy of that payment. I never was.” Tom sighed.

“Could you just tell me the truth why you did it? Was that a stunt or something?” J.R. couldn’t help it but her the tone of her voice became higher. She just wanted to know the truth; or maybe, she was afraid of knowing the truth from him.

He looked up to her, with his baby-blue eyes looked like it was begging for her, “Not because of that--”

But she spoke out, “What then?”

“Because I love you!” Tom let it slip out, and that made him rouse from his seat.

J.R. had to hold on to the desk behind her when she heard those words from him, but he kept on,

“Why are you doubting me? Like you are saying that it’s impossible for me to love you? I gave back the money because I didn’t wanted it to be like you were just some common client to me. And you were never a client to me, J.R., you were something else and more.”

The passion laced within his words felt like it had reached out for J.R., that she now tried to suppress herself from embracing him.

This can’t be. He couldn’t be this honest. It’s impossible. She thought.

Tom then went for his bag and tried to dig out a medium-sized journal. When he got it out, he handed it to her but J.R. hesitated from getting it from him.

“This is a journal I wrote while we were traveling together. I wrote everything I can write, every entry was about you and even when I’m with you. If you still doubt me, even though I have worked my way through this job fair just to see you again; read it. You’ll know that I’m not lying, I do really love you, but I doubted myself because you’re way out of my league.

“What could I do at that time, J.R.? I’m just a gigolo; an escort. You were everything I ever wanted and I was just nothing.”

J.R. finally reached out for it and took it from his hands. Her eyes felt like watering but she tried to stop herself from crying.

Tom felt his heart had broken into two; he never knew that J.R. could say those things to him. Somehow he wishes, they were back to the time they first met, when everything were just simpler.

“I think I’m not up to work here or be interviewed by you. I’ve already been judged. But if you wanted to know how I really feel for you, until now-- read my journal.”

He left the room and closed the door loud and quickly.

J.R. could only her heart drum out loudly, and she felt the leather of the journal on her fingertips.

Maybe he is right. Maybe it is love. But what about I feel? She pondered.

She took a deep breath and opened the journal. The pages opened to the night that they stargazed under the Moroccan skies; how Tom withheld himself from kissing her, but wrote down how much he wanted to.

Then, she flipped it at the beginning, there she saw a list that Tom had checked already, but one was left unchecked.

It said;

1. Make the trip to Palawan

2. Then to Paris

3. Lastly, to Morocco

4. Go to the ‘Pink House’

5. Tell J.R. I love her then...

From #1 to #4, they were all checked; but #5 was not yet done.

J.R. felt something deep within her, like something had awakened in her. She felt brave and touched, and that she knew she had to be, if she doesn’t want to lose Tom.

Out of a sudden, she hastily placed down the journal on her desk and felt her feet step up into a sprint as she opened her door.

J.R. looked left and right to see if Tom was still there, but he was gone already.

Her breath quickened as she felt the panic stab her in the chest. Her feet still continued running over the corridor and into the maze of cubicles.

If anybody saw her, they might just think that their boss is running wild and crazy all over the office.

But, Tom was nowhere to be found and she had asked a few people if ever they saw a tall and handsome man pass by. The only answer she got was a no, and it only made her panic more.

No, Tom. You can’t go just like that. I need to be with you, and you need to be mine. J.R.’s mind only repeated those words over and over again.

Little did she know, Tom is standing and waiting for the elevator lift to pass by the 19th floor. But every time the door would open, it would be too crowded for him to get on.

And so, he stood there, with his shoulders slumped down and his hands on his pocket, while remembering the scene earlier.

Why is she doubting me? Couldn’t she see right through me? Or maybe it’s just that I never stood a chance from the beginning?

This made Tom sigh with grief. He could already hear their sympathies and see the look of pitying in their faces when he gets home.

He shook his head, trying to dismiss those thoughts. It was no use for him anymore; he tried and there he knew that some things are just impossible.

The elevator door opened but it was crammed with too much people going up. Tom cringe at the elevator attendant; he was not going inside and he is not going to jam himself in that elevator, just like he is not going to stick himself in to J.R.’s life because she had evidently made it clear that she doesn’t want him in her life.

Tom tried to smile, “No thanks, I’ll take the stairs.”

And there he left the spot he had kept for minutes and he started going down the stairs.

After a while, J.R., running as fast as she can while wearing heels, reached the elevator doors. She immediately pressed the down button, but the elevator lift is still at the 25th floor and was slowly making its way down to the 19th.

“Come on, come on. I need to get down!” She impatiently muttered as she watched the LED screen of the floor indicator.

The elevator doors opened and a mechanical ding went up; but when the doors opened, it was full of event organizers or assistants that are busy for the event at the convention center.

“I’m sorry, Ma’am, the lift is full.” The attendant told her, but it was not the time for her to be moving slow, and so,

“No! All of you out, I have to go down; it’s official business!” were the only thing she could say but she saw all of them had a look of surprise and shock.

The people inside went out, one by one; her alibi worked and now they are quickly going down to the ground floor.

As she impatiently watched the numbers on the screen, she could already imagine Tom, leaving the premises; taking a taxi back home.

She might just look for his home address and talk to him then, but she could not let him go today without telling him what she really feels for him. And that she also need to apologize for everything hurtful that she may have told him.

When she reached the ground floor, she went to the security station and informed the guards to look out for a man named Tom Hiddleston and not let him leave Renovis.

Tom, where are you? J.R. worriedly thought as her eyes searched everywhere.

Meanwhile, Tom wound up at the business plaza and saw a gelato store.

A little sweetness wouldn’t be that bad, when all I’ve got from her is bitterness. He thought to himself and there he snickered. Maybe he is just comforting himself.

He went in and saw that the place had only two or three customers who ate their gelato at their tables.

Tom chose the chocolate truffle flavor on the biggest cup to which he chose to eat it outside. He found a lonely spot near the veranda, a few steps of stairs where he can sit.

“Ma’am, we couldn’t find Mr. Hiddleston, He’s not here in the building.” a security personnel, Handel, informed J.R..

“Did anyone looked near the convention center or the business plaza?” J.R. asked him then he paused,

“No, Ma’am. Not yet.” He replied sternly.

“Well then, we’ll look for him there.” J.R. demanded, but Handel asked her,

“We, Ma’am?”

J.R. eyed him, “I’ll come with you to look for Mr. HIddleston. It’s your top priority to find him, and also mine’s.”

“Yes, Ma’am.” Handel cooperatively answered.

They started making their way into the convention center, but J.R. decided to split up and she will lead a team to look for Tom at the business plaza.

It was already high noon, and the summer sun is bright and shinning over J.R., whom had a few bullets of sweat on her forehead.

Her dress was beginning to be itchy because she had walked over a few yards from the main building to the business plaza. Her feet are now aching and her knees felt wobbly. But she didn’t cared, the only thing she needed to do is to find Tom, and she doesn’t care anymore if she could get blisters on her feet.

When they arrived at the business plaza, she instructed the team of security personnel to split up once more, and that she would do her own searching.

J.R. found the dining stalls and stores, she searched how and low for Tom; whether he might be sitting alone on one of the restaurants or maybe standing next to the gelato store.

She felt desperate, and she wanted to scold herself for letting Tom go when he’s already there in front of her.

J.R. had to sit for a while as she can feel the tiresome search had already gotten into her.

She saw a veranda with a few stairs to sit upon, but when she finally got near it, she saw a man sitting there and eating a gelato, all by himself.

His blond hair and daddy-long-legs was just enough for J.R. to know that it is Tom.

She had no time to waste, J.R. ran to his side and called him, “Tom!”

He was sure that the voice that had screamed for his name is J.R., and it is not the gelato or his imagination.

Tom slowly turned his head back to see who called him, and he was not wrong at all. His eyes widened as he saw her with the frantic look on her face and a little bit haggard all over.

Tom knew the best response; he turned his head around and ignored J.R. He might just play a little hard-to-get this time.

J.R. bit her lip in anguish, and there, she stood right in front of him.

“Thomas Hiddleston, I called you!” She shouted at him while her hands were on her waist.

“There’s no need to shout, Ms. Trillo! Here, you want some gelato?” Tom invitingly offered her the gelato, but J.R. had only her brows in a furrow.

“Are you kidding me?” J.R. finally replied.

“Nope, not one bit. So, what are you doing here? You thought I already left didn’t you?” Tom teased her as he took another spoonful of gelato in his mouth.

“No. I wanted to ask you something-- that checklist in your journal... What did you wanted to do after telling me that you love me?”

Tom smiled mischievously and there, he stood up, now leveling with her gaze.

“That’s my secret. Why would I tell you that?” He then pouted at her, and he knew that she couldn’t keep another minute in a straight composure because of his teasing.

“Besides, there’s no reason anymore to let you know what I wanted to do so I could check that out of the list.” Tom scooped a big portion of the gelato and tried once again to offer it to J.R., “You sure you don’t want some? It’s good, it’s chocolate truffle.”

J.R. could only purse her lips and side-eye him, but Tom extended his hand that holds the spoon so she could reach for the gelato.

She shrugged off the pressure and then she ate the gelato on the spoon. The sweetness of the gelato and the dryness of her throat didn’t agreed to each other that she gave out a loud cough. Tom patted her shoulder and settled the cup down

When she swallowed down the sweetness, she started talking, “Tom, I want to say sorry. I really am sorry for I have said to you earlier. I want to apologize for ever doubting you... I don’t know why I doubted you; maybe it’s just that I was afraid-- I don’t know with what, but I was just scared.”

Tom loosened the teasing face and his eyes softened. She was looking through his soul, and he knew he had to listen for what she has to say.

“I was scared that I might lose you if I let you in. As you can see, it’s a tragic truth that some of the people I love are not here anymore.”

J.R. looked away and a tear-drop fell from her eye, but she continued, “But, that’s not really the point that I’m trying to get to-- What I’m trying to say is that I want to move on now, and Nathan told me so. You may not be Nathan, but you’re very much different from him--and now, I want to know you this time.

“Can you help me with that, Tom?” J.R. smiled at him.

Tom felt his chest heave and his lip tremble. Maybe, some things are not that too late, or too soon.

“I will help you with anything, Julie Rose, anything. I’ll even lend a hand so you could find your way into my arms.” He endearingly replied.

There, Tom reached for J.R.’s hand and placed over his heart; he also had tears in his eyes by that time, tears of wonderful joy.

J.R. sniffled as she took a step closer to him. Tom then placed a hand on her waist, pulling her into his body.

“Would you like to know what I would do after I tell you that I love you?” Tom’s mellifluous tone melted her right there and then, but she managed to say,

“What? What are you going to do?” J.R. looked up to him, her face just a few inches away from his.

“I will tell you that I love you, then, I will kiss you.”

J.R.’s lips stretched out into a wide smile, “It’s about damn time you check that out from your list, then.”

She closed her eyes and leaned up to meet his lips.

J.R. couldn't be more sure than this, and it is no brainer that she wants to be with Tom, and so does he.

For the very first time, Tom kissed J.R., and he swore that he could feel the butterflies in his stomach flutter stronger than before, that the fireworks in his mind-eye had just went off and everything felt so much brighter than ever.

When Tom let J.R. go for a while, she added, “Wait, you haven’t told me directly that you love me.”

“Nah, I do more than I say, baby.” Tom sweetly teased and there, J.R. giggled.

But for the second time around, she pulled him to a longer kiss.

For Tom and J.R., it was definitely a wild roller coaster ride of fake brain diseases, malevolent nurses, and terrifying cliff-sides.

Though, they could say, the road still smooths out in the end. And it isn’t just one smooth way, it was the sweetest; the greatest, and the most self-discovering end.

There is no looking back for Tom, no fear for J.R.; just loving each other is what they could only know.

It didn’t mattered whoever they are in the past; what they value the most is who they will be in the present and the future, and that is together.

END.

#tom hiddleston #my fanfics #fanfics #fanfiction #hiddlestoner #Arci Muñoz #arci muñoz as J.R.#thfrustration

10 notes · View notes

waypathfinder · 5 years ago

Text

Crimson Lane - Chapter 26 - Pieces

Links

Tumblr Master Post

Archive of our Own

Fanfiction.net

Winter changed into spring and with it small bundles of hope that made each day pass a little easier than the last. Within a month of Ben returning to jail, the knights of Ren were rounded up, arrested and placed in a different jail across the other side of town.

And through good behaviour, Ben had finally earned the privilege of receiving phone calls from the outside world, up to three times a week for 15 minutes each.

At 3 pm, every Monday, Wednesday and Friday, Rey slipped away to the grass area in front of her apartment and paced barefoot, waiting for the call to connect.

"Hello?" Rey spoke quickly. "Yes, connect me to prisoner 5831, please. That's right, Ben Solo. It's his girlfriend. Yes—I'll hold."

She was getting used to the stern woman on the other end, having called her twice this week. She was abrupt and gave the never-ending sense that everything was far too much effort. But she'd deal with the devil himself if it meant she could talk to Ben.

It was a surprisingly humid day for Spring and with every step, Rey could feel the trickle of sweat beading down her back. She waited for him, heart pounding in her chest and the roar of waves playing in the background. She stared into the horizon where a storm was brewing, a high anvil cloud looming overhead, flashing dully above a cast-iron sea. She loved days like these, they had their own life about them.

The phone clicked, and Rey beamed at the familiar voice on the other end.

"Rey," Ben dragged out her name. "What did you do?"

She smirked. "Did something happen?"

"You know exactly what happened. Armitage Hux was dragged in here both kicking and screaming this morning."

Rey couldn't hold back her smile. "Oh, you got yourself a little friend?"

"I wouldn't go that far," he scoffed, and Rey pictured him smiling into the phone, that crooked eyetooth winking at her. "How did you guys manage to find that slippery eel anyway? The cops said it was a tip-off."

Rey sat on a faded yellow deck chair, one leg crossed over the other, the cool ocean breeze making her hair whip around her face.

"Can you believe it wasn't even me? Rose found him." Rey forced back a chuckle, thinking back to Rose's manic call. "Hux's cat went viral."

"What!?" She heard a cross between a grunt and a laugh, and her heart pulled at the sound of it.

"I'm serious. She was watching Funniest Cat Home Videos on YouTube and there was a clip of this fat ginger cat falling onto a sail shade from a third-story apartment and Armitage Hux screaming at the bottom trying to catch him."

Ben's laughter rang out like he couldn't get a breath in and Rey started giggling herself.

"Was he okay?" Ben asked.

"The cat? Yes. Armitage, not so much. The cat was so terrified he clawed his face."

"Now I know what caused the scratch marks."

"You can tell him he's famous now. Poe recognised the street from the video and from there it wasn't long before we were able to tip the cops off as to his whereabouts."

In the background, Rey heard the low growl of one of the guards, giving them a 30-second warning.

"Did you get your— " he struggled to say the word.

"I got it yesterday." Rey adjusted her underwear, the second day was always her heaviest. " I told you it would be okay."

"Thank God for that."

"I have no regrets, do you?"

He chuckled. "None at all."

In the background, the correctional officer ordered them to finish.

Ben went quiet. He always did at this point. The moment where they crashed back to reality.

"It makes my day, you know, hearing your voice," he said, words soft, almost like he was hiding them behind his hand.

"Mine too." A gust of wind rushed in from the ocean and the bi-fold doors slapped open and closed. She rushed to fasten them, aware that every second of silence was a second wasted.

"Say something."

She hesitated, searching for words. "I love you."

There was a quick exhale on the other end of the line and she hung on in silence, waiting.

And at last: "I know."

"Say it back, you dick!"

He laughed again and Rey's eyes began to pool. She wished she could see him laughing, it would never be enough just to hear it.

"Love you back, sweetheart."

Over the next three months, Rey worked diligently on the Snoke story, along with Poe and Finn. With some off-the-books help from Dom, they managed to create a pretty clear picture of Snoke's operations, including his brutal recruitment strategy, where he blackmailed his employees to stay until they were no longer needed. Before Ben, the only other Knights that left the order seem to have disappeared from existence or were forcibly removed, which also coincided with some career-destroying scandal.

In the summer, a new visitor arrived at the Island. Rey had watched the seaplane land with a few skips on the ocean before it taxied to the wharf and a tall and slender woman stepped onto the dock, dressed entirely in white, with black shoes and a large-brim black hat and glasses. She exuded class and sophistication, and Rey was fascinated by the sight of her. She approached the resort, dragging a pair of rose-gold designer suitcases and Rey balked at the colour of her hair, brilliant lavender styled in a 1920s faux bob.

"Ah, she's here!" Leia exclaimed at the breakfast table. "Amilyn, over here!"

At the sight of Leia waving, Amilyn tore her hat off and waved it back.

Rey would soon learn this powerhouse of grace, was one Amilyn Holdo, the most sought after criminal lawyer in Coruscant, and Leia's oldest friend.

"This is Ben's girlfriend, Rey," Leia said and Amilyn extended her hand.

She stared at it briefly; so this is the woman who could change their future.

Rey met her handshake enthusiastically and was surprised to find Amilyn's hold was loose and warm. It shouldn't have made her panic, but it did. Ben needed someone strong enough not to take his shit, to fight the devil and his demons for him. Would this woman be up for the challenge?

"My client speaks a lot about you," Amilyn told her with a smile that came through equally to her eyes. Rey noted the refined lilt of her accent, it sounded like she'd spent her young adult life bouncing between the world's most prestigious universities, which, she later learnt, wasn't far from the truth.

Rey blushed. She always did, when it came to Ben.

"Did Leia tell you we go to trial next month?"

"Already?" Rey's heart skipped a beat. She'd spoken to Ben every day this week and not once had he mentioned a trial date, or even that he'd gotten a lawyer.

"Yes, with the Knights of Ren arrested and the State vs the Estate of Alaistair Snoke trial, it was pushed forward. I thought he might have told you though."

"I— no, he hadn't mentioned it."

Amilyn's eyes narrowed and Rey had never felt so naked. She shrunk back in her chair, aware that the lawyer was scrutinising her every move.

"I mean, it hasn't come up yet. I'm sure he was planning on—" Amilyn quirked her head to the side, appearing keenly interested in Rey's body language.

You know, don't you? Rey thought. You know everything.

"Leia, I think it would be a good idea if Rey and I had a quick chat." Amilyn held her hand out expectantly. "Come for a walk with me?"

Rey glanced at Leia, and the older woman nodded, slowly. "We'll have lunch ready for when you get back."

"Excellent," Amalyn clapped her hands together and Rey stood to go with her

"She's very stubborn," Leia called out as they left.

The women paused, glancing at each other.

"Is she talking about me or you?" Rey asked.

"Both, I imagine."

On the beach, they kicked off their shoes and made their way to the waterfront where the sand was firmer. Amilyn hiked her dress pants above her knees and Rey tied her sheer black skirt by her thigh. The ocean was quiet today, lapping at their toes, the only noise was the swish of waves upon the sand and the blow-fly buzz of jet ski engines somewhere far in the distance.

Rey dawdled, staring at the shifting line between the water and sand, very aware that Amilyn continued to study her.

"I imagine this has been hard for you," she said at last.

"Of course." Rey shrugged her shoulders, still staring ahead. She'd never met a lawyer before, nevermind one of the country's most respected criminal lawyers. Everything she'd seen on television had made her believe they were cunning and only after the big paychecks that came with cases like this. But perhaps, being Leah's friend, this one was different.

"You miss him." Amilyn's lips pressed in a warm smile. "But I imagine that's not why it's hard."

"I'm not sure what you mean." Rey pushed down the nauseous feeling in her stomach. The one that swelled whenever she thought about the reason why Ben was in prison.

"It's not fair of Ben to expect you to wait here." Amilyn put her sunglasses on, they were purple-rimmed, just like her hair, dotted with tiny diamonds.

"I'm not planning on waiting here. When Leia and Han go to the mainland for the trial, I'll be going with them."

"He won't like it."

Rey kicked sand into an oncoming wave with a little more force than intended.

"Then he shouldn't have told the world he was Kylo Ren. Let's keep walking, shall we?"

Amilyn gave her a sly smile. "Ben's underestimated you. But that's typical for a man. They can never shake off that whole damsel in distress idea. Little do they realise, their damsel probably has her own ideas of how things are going to play out. Wouldn't you say?"

Rey stared ahead. "Is there much hope for him to get out of this?"

Amilyn's face pulled into that sympathetic expression, brows knitted together and a soft smile. "It will depend on many things. The judge, witnesses, how the Snoke case is progressing. It wasn't long ago that the bastard was winning awards for being a good citizen."

Rey mulled all of this over. They still had time. Another month and every day new information came out about Snoke and the First Order. But what if it still wasn't enough?

She hesitated. "If things go badly, I'm not going to just sit by."

"Rey," Amilyn stretched out her name, but once again there was gentleness and empathy to her voice.

"No. I won't have this on my conscience!" Rey snapped, Surprisingly, Amilyn didn't look put out at all by her outburst. If anything, she looked pleased.

"I won't do it unless I need to. I know it would destroy him after everything he's done to keep me safe but if they're going to put him away for years and years. I can't—"

"We'll avoid that if we can. Meanwhile, there is something you could do to help."

Rey paused. "Anything!"

"What do you know about Phasma Christie?"

The next month dragged. Tourist season was coming into its autumn lull and Rey was reaching the limit of digging she could do into Snoke and the First Order from Bespin. She still spoke to Ben every Monday, Wednesday and Friday, but as the trial came closer their conversations were getting difficult. Ben was quiet and moody, even snapping at her on occasion, and each time she'd bite her tongue knowing the pressure he was facing. He never once mentioned the trial, and Rey suspected that he hoped she didn't know about it. To this, she played along, knowing anything else would have stressed him out.

Two days before the trial, Lando pulled up in his luxury yacht, the Lady Luck, and they packed their bags for the mainland.

The journey was an eight-hour boat ride across choppy, pewter seas. Once they arrived, Rey stepped onto the mainland, feeling like she was still walking on waves and clinging to the railing.

"What time is it?"

"Almost twelve," Leia replied.

Three more hours until she could call him.

Leia and Han taxied to the office of the Hosnian Herald. It should have been thrilling walking through those doors and showing her press pass, but all she could think about was Ben and the trial.

Poe gave her a quick hug and told her she looked like shit before he took her on a tour of the building. Rey nodded and smiled, and said pleased to meet you on cue, but inwardly was counting everything second until she could excuse herself and call Ben.

Finally, in the middle of a tour of the graphic's department, Rey gasped when she checked her phone and Poe rolled his eyes.

"Go call him."

"Thank you!" she said, excitedly. "I won't be long."

"Use the roof. It should be quiet up there."

Rey took the old elevator to the top of the fourth floor, from there she travelled up a dimly lit staircase leading to a large fire door. She pushed it with a sharp shove. It screeched, metal against metal, putting her nerves right on edge. The exposed roof was a tired and weathered area; cigarette butts lined the floor, a couple of pot plants were parched dry — most of them doubling as an ashtray.

But it would do.

Rey looked out over the city. The Hosnian Herald building was five stories high, so while she was still dwarfed by skyscrapers, the building was elevated enough that she could still see much of the city. Down below the streets were busy, and in the distance, she recognised the roof and courtyard of the Taco Dana Restaurant.

Shit, she'd forgotten about that place. She hadn't even said goodbye to Jess or handed Kennedy a letter of resignation. Images flashed in her mind, Ben and Snoke at the table, Rey's horror at seeing them there and suggesting Ben order a crab taco. He'd given her such an irritated smile at the time. How she'd hated him so much at that moment. Looking back they seemed like two other people, strangers from a lifetime ago.

Towards the east, there was a collection of low-rise buildings and terrace houses. Mustafar. She squinted, trying to make out the brothel, but the grey rooves all blended into one from here.

That shady part of the city would always fill her with contradiction. It was like she'd walked through hell and found herself a soul mate — speaking of which, she dialled the number of the jail, waiting as the phone rang.

The receiver picked up and she immediately recognised the low no-nonsense tone of the female officer on the other end.

"This is Rey, calling for Ben Solo, 5831."

"Hold." The phone line went dead and Rey waited. This was always the moment she dreaded most; when her body began to betray her: heartbeat racing and pulse throbbing. It was taking a long time. Rey watched the seconds pass on her watch with a growing sense of unease.

She paced, running her hand along the cement barrier, avoiding pigeon poo dotted along the top. Someone had scribbled Fuck You, Capitalism! and Rey traced the letters as she waited, wishing to hell that he'd pick up already.

There was a click.

"Hello." The voice was gravelly and low.

"Ben, is that you?"

He cleared his throat. "Yeah."

In the distance, Rey spotted a grey shape swooping down from the sky, her eyes darted to it, watching the falcon circle on the hunt for a fresh kill that wouldn't even know it was coming.

"Luke said you were sick."

There was a grunt. "Yeah."

"Is that why you couldn't speak last week?"

Rey watched the bird again, swooping at something she couldn't see, waiting for Ben to answer.

"Yes."

She rubbed her elbow. "You sound … are you okay?"

"Yeah, I'm fine."

Liar. In the months that had passed, she'd come to find Ben's moods pretty erratic, which wasn't surprising considering. Some days he would be cold and aloof, others ecstatic and romantic and then like this, depressed and quiet.

She tried to change the subject.

"You won't guess where I am?"

"No idea." Her chest tightened. She tried to ignore it. "I'm on the roof of the Hosnian Herald! Can you believe it?"

She waited, the horn from a commuter bus bleated from below as it pulled into traffic, cutting off a number of cars. The metal of the fire door screeched against the trim again as another employee came out for a break, bundled up in a grey trench coat and lighting a cigarette. Smoke swirled around her and she wrinkled her nose, trying to move away.

He released a long, strained breath. "What are you doing there?"

Cold. How could he be so cold?

"I'm here for the trial."

"Fuck, Rey!" he spat. "I told you not to come."

Her cheeks burned and she covered her hand over her mouth to keep their conversation private. "I want to support you. We all do. Your mum and dad are here too."

"Why didn't you stay where you were?"

"I—" Tears pricked at her eyes and the cityscape blurred below. "I wanted to see you. I thought I could come for visiting hour tomorrow."

Silence.

"If you wanted me to that is."

"One minute left," the guard's voice echoed in the background.

She pushed away her growing panic. "Do you want me to come?"

"I wanted you to stay on Bespin. I didn't want to you to—fuck!" He shouted the last word, and she heard the guard growl his name in warning.

"I'm sorry," Rey murmured, blindsided by his reaction. She tried not to let out the weak little sob that was harbouring in her chest, but it came anyway.

"Are you crying?"

"No," she said, sniffing.

"Look, Rey, I don't know what you're hoping for but the trial isn't going to go well."

"How do you know—"

"And I don't want you to hear about all the shit I've done. Are you prepared for that? To hear about every bone I've broken, every person's face I've smashed? Do you want to hear in detail about how I blew Lor San Tekka's fucking brains out," he was talking quickly and quietly now. "Do you think you can really hear all that and still want to be with me?"

"Time!" the guard's voice came in the background.

"I gotta go," he said, despondent. "Amilyn didn't ask you to testify, did she?"

"No, of course not." The door slammed again and the smoker was gone, although the smoke still lingered in a hazy cloud, burning her throat.

"Good," Ben said. "And promise me you won't come."

"Time!" the guard repeated, and this time she heard the sound of something hard smacking on metal.

"Rey?"

"Time!"

"Would you just fucking wait!?" He had that tone in his voice, the one that came before everything was eclipsed by his anger. "Promise me, damn it!"

The door screeched again, this time it was Finn popping his head out to look for her.

Rey quickly wiped her eyes.

"Rey?" Ben asked, and her heart broke at the panic in his voice.

"I—" The line went dead and Rey stared at the blank phone in her hand, trembling.

"Are you okay?"

She nodded, quickly, blinking away the tears. "Is it time for our meeting?"

Finn nodded and she breathed.

Push it down, push it all away.

It was something she knew how to do: compartmentalise, conceal and continue.

"Sure you're okay, peanut?"

She turned back to Finn, eyes dry, and a smile beaming. "I'm great. Let's go."

"This case is going to go terribly unless we have someone who was there the night Snoke died." Poe raked his fingers through his thick, curly hair, twisting a cold cup of coffee in his hands.

"I was there."

"Someone other than you."

Rey sunk in her chair. Here she was at the Hosnian Herald, sitting opposite the editor chair, while dozens of reporters tapped away on their keyboards, and conducted phone interviews. It should have been the best day of her life but the pain of her interaction with Ben was still there.

The glass door to Poe's office was in constant motion as a steady stream of people bustled in and out.

"Poe, what do you think of one of these as the front-page photo?" A young photographer with bangs and a polka-dot dress leaned over his desk as she flicked through a dozen images on her camera and Poe narrowed his eyes at them all, mumbling to himself.

"Can you try and find a photo of him not looking like a dementor?"

Rey raised an eyebrow.

"Your boy's trial is big news and we're going to lead with it tomorrow."

"You can't do that!"

"I know he's your boyfriend and all, but we gotta run with it. Every other news outlet will be doing the same thing. It's fair and unbiased reporting, Rey. I shouldn't need to remind you about that."

He leant forward, glasses slipping down his nose as he flicked through his emails.

"Fair and unbiased," she scoffed. "You really think the Ilum Times is going to do that?"

"We will. And who knows, perhaps an exclusive with his girlfriend might help. You could tell them how he cries when he makes love to you—"

"Forget it!" she snapped, and Poe started laughing.

Finn bustled in then, carrying lots of folders and a laptop. As he went to sit, he took one look at Rey and dumped them on Poe's desk crossly. "You didn't."

Poe sipped his coffee with a shrug, only to realise it was stone-cold and spat it out in the trash can.

"Ex-hooker teams up with Snoke's personal hit guy and falls in love. It's gold."

"Ignore him."

"I usually do," Rey said, trying to smirk but the corners of her lips fell.

"Why am I still paying you both?"

"Because no one else can stand you?" Rey snapped back and Poe laughed.

They'd been working together for six months now, but today was the first time they'd done it in the same space. Usually, their morning meetings were held over Zoom. In those days, the witty banter and excitement of what they were trying to achieve gave Rey enough fuel to face the rest of the day alone knowing that every second of it she spent fighting for Ben.

Finn pulled his chair closer and leaned over Poe's desk, looking through the many papers he'd dumped over the top of it.

"So final tally, what do we have?" Poe asked.

"Ordering the terror bombing on Resistance HQ, blackmail and bribery, specifically related to the government security contract, attempted murder by car bombing, assault, rape, grooming minors to work with him … to be honest, we could be here all day," Finn said.

"And what do we have specifically on Ben?"

"Our biggest issue is the San Tekka murder, and Snoke, obviously."

Rey opened her mouth to speak at that one, but Poe held his finger up. "Save it."

Poe continued: "there were a few misdemeanours that were still on the USB. That's since been turned over to the police. Word from Holdo's is Enric Pryde's prosecuting."

"What does that mean?" Finn asked.

"It means we're up shit creek without a paddle. Pryde plays dirty and he hates to lose. Plus, he's an Imperial supporter. He's not about to go easy because he's Leia Organa's son."

Rey sighed. "We need something else, something that could sway all of this." Poe tapped his index finger on the table.

"You guys anything?" Finn sat with his arms folded, legs stretched out, gazing out to the left as though he was trying to catch a thought and then to Rey, who was chewing on her lip.

"Amilyn and I talked about trying to get Phasma on the stand. She saw the whole thing," Rey said.

"From past conversations, I seem to recall she was no friend of yours," Poe answered, taping his pen in frantic beats on his table.

"She isn't." Rey thought back to her interactions with the imposing woman. "But she's all we have."

"Are you okay?" Amilyn asked, clearly noticing the way Rey gripped her hands on the car seat.

Rey nodded.

"I didn't realise she lived in Mustafar."

"We're not far now. Close your eyes if it's easier."

It wasn't easier because Rey knew these streets like the back of her hand. She knew the sounds and the smells. The waft of the kebab shop, the soundtrack of sirens and horns. She would always know these streets, from their graffitied boarded up shop windows and trendy open-air cafes, to the women in platform shoes and glitter skirts strolling along the pavement with their cappuccinos and lattes.

And she would know it by the turn off to the small lane ahead on their left.

"Can we drive past? it" Rey asked.

"Are you sure?"

"Yes, please. I want to see it."

Amilyn put her blinker on and they turned onto Crimson Lane. They approached the brothel, charcoal-coloured in the evening sun. The curtains were drawn, and the door was still blood red. The light was off. Closed for business. For good, she hoped.

The biggest difference was a line of tape around the perimeter, bright yellow and blue, warning people to stay away: unsafe structure.

"Someone set fire to it about a month and a half ago. It's pretty much just a shell now."

Rey nodded slowly, expecting to feel something, but it was like every emotion had drained away. Her gaze travelled to the top floor: their room.

There was evidence of the fire now, the glass smashed and frame black and broken.

She wondered how it had come to burn.

"Do they know who did it?" Amilyn shook her head. "Probably just an opportunistic arsonist."

The longer Rey stared at Number 12, the more it seemed to suck her in, like she was watching the heart of a fire, twisting and burning with red flame and ash. She couldn't look away.

"Rey—" Amilyn said from some distant part of her mind.

How could one find peace looking at the place that had infiltrated her mind at night with the most horrific nightmares, playing over and over and over again in her mind?

And yet, such beauty she had found there, healing, forgiveness.

Amilyn placed a hand on her knee and Rey turned to face her, surprised to feel her face was wet with tears.

"Are you ready to go?"

Rey sniffed and nodded. "Yes, I'm done."

They continued their drive, away from the red-light district to a narrow street dotted with parking metres and Jacaranda trees.

"So, you think she lives there?" Amilyn asked, peering out at the two-story terrace house.

"I hope so."

It was nothing special, rusty-coloured bricks and terracotta tiles. It was a modern re-creation of the original terrace designs, with their ornate ironwork and cement walls. Along the street, there were bars on the windows of the lower floors, and some on the doors. But Phasma had none of those, as if to say to the world she could take on anyone.

They waited. The street was quiet, apart from the gentle twit of swallows flitting in and out of the eaves.

Rey tapped her fingers on the window frame nervously. "I spoke to Ben today."

Amilyn sipped her coffee, leaving a line of bright red lipstick on the rim of the paper cup. "I imagine that was pleasant."

Rey turned in time to catch Amilyn's smirk, disappearing as she sipped her drink. "He's been a snarky prat for the past month. Trust me, when I say you get him on his best behaviour."

Rey thought back to the conversation, to the tone of his voice: distant, defensive … caged.

"He's scared." She picked some twigs and grime out of the window slit. "I don't—"

The door of the townhouse opened and they froze as a tall, slender woman with short blonde hair and a silver, velvetine tracksuit came out the door and over to the mailbox.

"Go, go, go!" Amilyn hissed.

Rey jumped out of the car and made a beeline to meet her.

"Phasma!" The woman stopped, blinking once, twice, before turning on her heels to go back to the house.

Rey darted behind her, shadowing her so when they got to the front door, Rey slipped in too.

Phasma didn't pay her any attention, busying herself around the interior: boiling the chrome silver kettle, unpacking a half-empty dishwasher and opening the blinds, as a ginger-coloured cat rubbed up against her calf.

Hux's celebrity cat, Rey thought with a smile.

The terrace house was surprisingly domestic, there were placemats on the table, and a collection of abstract art in deep purple and orange dotted around the room. As she entered the kitchen, she smelt an audacious eau de toilette mixed with the subtle hint of marijuana.

Rey waited, backed up against the wall as the kettle boiled as Phasma poured the hot water into a rose-coloured glass teacup, sitting at the table and watching Rey with oculus sky-blue eyes.

Even now, in this small kitchen, the woman ruled her space like a goddess. Rey was determined not to let this game of silence intimidate her and with a shrug of her shoulders, she sat down and waited.

Phasma sipped the tea, gaze fixed out the window. Rey watched her unblinking, her fingers twitching to move, to play with the strip of fabric of her shirt, to pick at her nails or tap on the table.

But no, she kept them folded, legs crossed, shoulders straight. She would not be intimidated, not anymore.

Phasma placed the teacup on the table, dabbing at her lipstick with a small tissue she had stowed away in her pocket, and when she glimpsed at Rey again it was with an exasperated sigh.

"Fine. I'll bite. How's Kylo?"

Rey stiffened, she'd almost forgotten that name and everything it represented.

"Oh, like that, is it?" Phasma chuckled, taking another sip. "You don't need to tell me, I saw him last week. He looked like shit, but then you would know."

Rey looked down into her lap. "I haven't seen him."

Phasma smirked. "Hmm. Well, that's interesting."

"The reason I haven't seen him—" Rey snapped back, her voice a little too high and peevish— "is because I came to see you instead."

"How sweet!"

Phasma flashed her a quick smile, fixing those cold blue eyes on her once more, like a predator waiting to strike.

"You know, I slept with him once."

Rey blinked. Trying not to move, or breathe, or do anything that would show weakness. But Phasma seemed to find something, because she smiled contentedly, her long ring-clad fingers caressing the skin behind her neck.

"He's a brutal lover, like an animal."

Rey's jaw clamped shut, every breath she took whistled through her nose. Is that why Phasma saw him last week, why she warned him to stay away from the brothel, why she'd always seemed to hate Rey and lastly, why she'd let Rey go — to save him?

"You—" Rey reconsidered her words, she needed to be careful. All this time, when Phasma was playing Snoke's pet, had she really just wanted Ben to save her?

Phasma smirked again. "Actually, I don't think I've ever been fucked so hard."

"He's always gentle with me." She met her gaze. It wasn't entirely true, she'd seen that side of Ben too, the part of him that brimmed with fire and passion, an unquenchable urge to hold on, but fuck that there was no way she would share that.

"That's funny. Some nights, I could have sworn he wasn't gentle at all. But you still seemed to like it. I mean, the night he trashed the room—"

The air was growing warm or at least it seemed to, heat licked at Rey's neck and she felt her chest getting blotchy as her temper boiled over.

"Yes, he fucks me hard and I like it. And, other times he's gentle, and I like that too. And every time we talk he tells me how much he loves me, and I tell him the same."

Phasma smiled again, but this time it was tighter, smaller.

"I am sorry for whatever horrible things Snoke did to you, but from what I can see you got your revenge for both of us — 37 times."

Phasma stiffened.

"So, did Hux help you kill him in the end?"

She froze; teacup in hand, the rippling surface the only thing giving away how much she was trembling.

"You have no proof."

"I'm not looking for proof."

Phasma's body relaxed. "Well, there wasn't much to do after you finished with him — before you let Kylo take the fall for you that is."

"We can throw barbs at each other all day. But the fact is you were the only one there that night who can prove this was self-defence."

"And what about you?" Rey looked down at her hands, scratching at each other like something was clawing under her skin.

"He—" Rey blinked quickly. "He doesn't want me at the trial."

Phasma laughed, shrill like a banshee, it made Rey's skin crawl.

"You want me to lie on the stand? To say that Kylo knifed Snoke in the neck when you're just letting him take the fall for something you did. I'm not protecting you."

"I'm not asking you to, I'm asking you to help him," Rey shouted back. "And I'm sure in your whole fucked up existence working with Snoke he has helped you."

Phasma stared at her, face unreadable.

"Please, Phasma. He needs your help. You know what kind of charges he's up against … along with everything else."

Time slowed as Rey waited for an answer, outside she could make out Amilyn's mauve hair in the car, she must have been listening to music as her head bobbed side to side in time with the tap of her fingers.

"Is that his lawyer?" Rey jumped, she hadn't realised Phasma had been watching her also.

"Amilyn Holdo. She's supposed to be very good."

Phasma stared at the woman with a blank expression.

"According to her, we should have a good case for justified homicide, in both cases, considering all the evidence against Snoke and what he has done to Ben-I mean, Kylo, considering Snoke blackmailed him as a minor and what he did to him after he tried to leave the First Order."

Phasma tucked a curl behind her ear, eyes closing.

"I remember that night. Snoke was barbaric. Kylo's lucky he got away with just the scars that he did. Others have suffered much more for much less."

Rey nodded. "Funny; that was another time he suffered for you. He never would have asked to leave Snoke had he not met you."

"I—" Rey's face turned a deep shade of beetroot, the sting of Phasma's words striking her just where she meant them, in the heart, filling her with guilt and shame.

"He was so fucking shaken up by the pathetic girl who slept on a dog bed. The thought of you being forced into sex work ..." Phasma rolled her eyes. "And here you are." She gestured to Rey in a grand motion. "Kylo's little whore, getting away with murder."

Rey stiffened, her jaw locked so tight she felt like she'd crack her teeth. "You might want to reconsider that statement."

They glared at each other. In the distance, the bell of an ice cream truck rang out along with the tinny chimes of Greensleeves. Children would be rushing out to buy soft-serve cones. It was such a contrast to the cold standoff taking place in this dimly-lit kitchen.

Rey had hoped not to find an enemy here. In some warped, idealistic way, she might have found an ally, someone who understood the pain of being held captive within Snoke's cruel grip, to have been enslaved in the most undignified way.

She had not expected to find a jealous lover, rotting in her own bitterness.

Rey stood, scraping her chair along the kitchen tiles. "This is useless."

Phasma was on her feet almost instantly, but Rey didn't wait. Storming to the front door, she'd just opened it when Phasma called out to her.

"I'll do it. Not for you, but for him."

Rey didn't look back.

"Tell your lawyer, I'll play her game, but if Kylo goes down for this—"

"He won't."

"But if he does," Phasma gave her something between a smile and a sneer. "I'm throwing you under the bus, Desert Flower."

Rey gave her a lopsided smirk. "I'll see you in court, madam."

#reylo #reylo fan fiction #crimson lane #angst with a happy ending #cryber

0 notes

bestnewsmag-blog · 8 years ago

Text

New Post has been published on Bestnewsmag

New Post has been published on https://bestnewsmag.com/four-focus-points-for-successful-property-investment/

Four focus points for successful property investment

The Indian actual estate industry constantly remains dynamic surroundings and reviews changes for the duration of the yr. Arriving at an evaluation of a specific city or area in phrases property of what funding capability it investment holds for you could be a frightening task due to the steady change of flux pointss .

Here are a few essential suggestions to create a smart analysis of your nearby housing marketplace.

1 – Take a look at the Pricing Developments

A totally useful technique of acquiring know-how about a sure town’s or area’s actual property marketplace is to music the way expenses are transferring. Reap genuine information approximately the present pricing Traits and evaluate this fact with pricing Developments within the beyond – say, over a length of three years. This will help you examine the boom that the marketplace has witnessed in this era and let you arrive at quite a dependable estimate for the future.

Even if you’re usually interested in residential belongings funding, Look at adjustments inside the pricing of a bigger go phase of real property segments – residential, commercial, industrial or even farmland belongings – situated in regions and various micro-locations within the market. This can yield valuable insights into the highs and lows that the areas have skilled, and assist chart their growth ability.

2 – Become aware of increase Elements

As soon as you have got recognized what styles of residential funding possibilities a positive marketplace offers you with – and additionally studied its pricing Trends – the following thing to understand is the Factors that have encouraged pricing changes inside the market. belongings cost grows on the again of both macro and microeconomic Factors that affect the improvement and expansion of the market.

The addition of civic and social infrastructure in the shape of roads, bridges, public transport, schools and faculties, hospitals and other public offerings in an area has a tendency to set off an nearly on the spot increase in market growth. Aside from these, Elements affecting the country and neighborhood economies inclusive of nearby regulatory recommendations, tax reforms and interest costs additionally play most important roles in either propelling or subduing marketplace boom.

3 – Examine Buying Activity

Going by way of the price at which residences are being bought and acquired, it’s miles viable to set up if a positive locality represents a purchaser’s or seller’s market. While it could no longer be smooth to gauge the number of houses on the market and apprehend what number of homes are bought on an ordinary basis, it’s far genuinely viable even for a layperson to discover how long homes listed through builders or owners have a tendency to live on the market earlier than being offered.

This fashion, called ‘Days on market’ or the DoM, can be studied with the help of easy Excel sheets over a duration of or three months based on on-line belongings listings. It may be applied to several locations at the same time and is a reliable method for researching present delivery and demand. More importantly, it’ll assist you’re making a fairly accurate estimate of future Shopping for Traits in those areas.

four – evaluate Valuable places with Suburbs and Outskirts

When you have been primarily focusing on homes in Principal locations, make bigger your area of research to the adjoining suburbs and even the similarly outskirts round this place. Frequently, the increase in Primary places stagnates due to the fact they ultimately attain their peak potential for new developments. This automatically interprets into a quicker growth of the adjoining locations, which nonetheless have an ability for improvement, both in terms of actual property tasks and infrastructure.

these are some of the time-tested and verified fundaments of a hit residential actual property funding. Whilst marketplace dynamics without a doubt change all the time, the guidelines that govern returns on funding do no longer. As soon as studying real property markets in a structured and approach-pushed manner will become second nature to an investor, it is only a be counted of time before his or her portfolio turns into very worthwhile.

The author, Anil Pharande is Chairman, Pharande Areas.The Indian actual property enterprise constantly remains dynamic surroundings and reports modifications at some stage in the year. Arriving at an evaluation of a specific city or area in terms of what investment capability it holds for you could be a frightening mission due to the consistent change of flux.

Right here are some vital pointers to create a smart analysis of your local housing marketplace.

1 – Take a look at the Pricing Traits

A totally useful method of obtaining know-how about a certain metropolis’s or location’s actual estate market is to the song the manner fees are shifting. Achieve specific records approximately the prevailing pricing Trends and examine this statistics with pricing Tendencies in the beyond – say, over a length of three years. This could help you compare the boom that the market has witnessed in this period and let you arrive at quite a dependable estimate for the future.

Even in the case, you’re more often than not interested by residential assets funding, Have a look at modifications within the pricing of a larger go section of actual property segments – residential, business, commercial or even farmland property – situated in regions and numerous micro-locations within the marketplace. This can yield treasured insights into the highs and lows that the areas have skilled, and help chart their boom ability.

2 – Discover increase Elements

Once you’ve got diagnosed what sorts of residential investment possibilities a certain marketplace provides you with – and additionally studied its pricing Developments – the following element to apprehend is the Elements that have inspired pricing adjustments within the market. property value grows at the back of both macro and micro-financial Elements that have an effect on the development and expansion of the marketplace.

The addition of civic and social infrastructure in the form of roads, bridges, public shipping, faculties and schools, hospitals and different public offerings in a place has a tendency to induce an almost immediate increase in market growth. Other than these, Factors affecting the state and nearby economies including local regulatory tips, tax reforms, and hobby costs also play essential roles in either propelling or subduing marketplace boom.

3 – Verify Shopping for Activity

Going by using the rate at which apartments are being sold and acquired, it is feasible to establish if a positive locality represents a client’s or supplier’s market. While it can no longer be easy to gauge the wide variety of homes in the marketplace and recognize what number of homes are sold on a ordinary foundation, it is honestly feasible even for a layperson to find out how lengthy homes listed via developers or proprietors generally tend to live available on the market earlier than being sold.

This fashion, known as ‘Days on market’ or the DoM, can be studied with the assist of easy Excel sheets over a length of or three months based on on-line assets listings. It may be implemented in numerous locations on the equal time and is a reliable approach for discovering present supply and call for. Greater importantly, it will help you are making a fairly accurate estimate of destiny Shopping for Traits in those regions.

4 – evaluate Crucial locations with Suburbs and Outskirts

If you have been in the main specializing in properties in Central places, expand your area of research to the adjoining suburbs and even the similarly outskirts around this vicinity. Often, the boom in Valuable places stagnates due to the fact they finally attain their top capacity for new traits. This automatically translates into quicker growth of the adjoining places, which nonetheless have a potential for development, both in terms of real estate initiatives and infrastructure.

these are some of the time-examined and verified fundaments of successful residential real property investment. At the same time as marketplace dynamics really change all of the time, the rules that govern returns on investment do no longer. As soon as reading actual property markets in a structured and method-pushed manner turn into second nature to an investor, it’s far best a count of time before his or her portfolio will become very profitable.

The writer, Anil Pharande is Chairman, Pharande Areas.

Is a House a Good Investment For You?

Are you among the crowd who is still thinking of where to invest the money they earned from years of working hard? There may have been unsolicited advises convincing you to put your share on various networking companies. Some may have even told you to put up a startup company. But is this the most practical thing you could probably do to your money? Perhaps, yes, if it’s your choice.

However, investing has its ups and downs depending on the industry you’re going to delve into. Yet, do you know that buying a house or owning one is one of the most intelligent investments you would probably make? Why?

Homes can be turned into rental properties. With necessary adjustments and with proper leasing or rental documents, you can turn your house into an additional income stream. What’s even good is rental fees tend to increase at regular intervals. There are persons who often move because of job changes. They constantly look for homes which they can rent, and yours can be their next rental homes.

Depending on a home’s location, it can also be a perfect vacation house. Typically, families, especially those with children, and those which embrace the concept of extended families – do love to have vacation houses. During specific periods of the year, the house can serve as a reunion spot for relatives to gather. So, thinking of having a vacation house? Should it be near a beach, the woods, or perhaps one that offers mountain view or city view otherwise?

0 notes

not-poignant · 4 years ago

Note

Could Arden be a tough dom? Maybe not with Ef but with some of his other partners would he possibly have a more intense style or is he generally more gentle?

Arden can pretty much change his domination style per client / person that he’s seeing. He enjoys pretty much everything (if he didn’t enjoy it, he wouldn’t do it), provided he has control over the person that he’s playing with.

But yeah Arden is definitely capable of very tough, and also very strict, punishment based and sadistic domination styles. But he’s also pretty well known for being very good at very soft and gentle domination styles, and kind of bucking the trend of those dominants who always feel like they have to be escalating or getting more extreme over time.

Generally speaking, because he teaches, he’s tried out a lot of the things that he teaches, and as a result that’s kind of made him pretty multi-skilled?

As for his overall preferences, it’s genuinely really hard to say. He looks for big emotional payouts, and he usually wants his clients and the people he’s dominating to feel pretty intense emotion, and then help them calm down. But he’s also huge into subspace, and if he can achieve that with gentler techniques, he will.

Idk, he’s kind of good compartmentalising all of his techniques? So he sort of never does the rougher techniques with certain people, never does the softer techniques with certain people, and then can otherwise employ a mix depending on what he feels like. He likes the challenge of adapting to the person he’s with!

#asks and answers #fae tales #fae tales AU #falling falling stars #arden mercury #efnisien ap wledig #i was thinking about this early on re: arden #and he absolutely has no problems #being a very tough and sadistic dom #but he can experience his sadism through other methods #for example making efnisien a little flustered #and then kind of catching him again #is very much his innate domination style in action #arden finds it really hard to switch that off #it's very much who he is #vs. something he turns on #administrator Gwyn wants this in the queue #Anonymous

23 notes · View notes

suzanneshannon · 6 years ago

Text

Deploying a Client-Side Rendered create-react-app to Microsoft Azure

First, a quick story.

I was right to know it was a server configuration issue (though at the time, I didn’t know it had to do with routing). I was wrong to deny it my responsibility. It was only after I went on a web searching rampage that I found a use case for deploying a create-react-app to Azure under the Deployment tab on the official documentation page.

Building React for production

Generally, the build folder will have this structure:

→ build → static → css → css files → js → js files → media → media files → index.html → other files...

Client-side routing with React Router

React Router uses the HTML5 pushState history API internally. What pushState does is quite interesting. For example, navigating (or using Link in react router) from the page https://css-tricks.com to the page https://css-tricks.com/archives/ will cause the URL bar to display https://css-tricks.com/archives/ but won't cause the browser to load the page /archives or even check that it exists. Couple this with the component-based model of React, it becomes a thing to change routes while displaying different pages based on those routes — without the all-seeing eye of the server trying to serve a page in its own directory. What happens, then, when we introduce servers by pushing the code to a live server? The docs tell it better:

If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not. This is because when there is a fresh page load for a /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html.

Different servers require different configuration. Express, for example, requires this:

app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')); });

Since my front-end (create-react-app) and back-end (ASP.NET) were two different projects, serving static files by navigating the directory was sort of an impossibility.

In fact, since we are deploying a static app, we do not need the back-end. As Burke Holland put it: "Static" means that we aren’t deploying any server code; just the front-end files.

Getting started with App Services on Microsoft Azure

To get started, if you do not already have a Azure account, get a free trial then head over to the Azure portal.

Navigate to All services → Web → App Services Navigating on the Azure portal from All services, to Web, to App services

Creating a new App service on the Azure portal.

Displaying all App Services on the Azure portal.

The blade shows you information about your app, the navigation to the left has everything you need to manage your application (overview, activity log, deployment center...).

For example, the Deployment Center is where the app deployment is managed, Slots is where things like staging, production, test are managed. Configuration is where things like environmental variables, node versions and — an important one — Kudu are managed.

The overview screen shows a general view of the application Status, URL... Click on the URL to see the live site.

Showing the various parts of an App Service on the Azure CLI.

The app is up and running!

Showing the default live page of an App Service.

Going local

We need to create a new React app, and install react-router as a dependency.

npx create-react-app azure-react-demo cd azure-react-demo

We also want to install react-router (react-router-dom, actually)

npm i react-router-dom

All things being equal, starting the app with npm start, we should get the default page.

Showing the default page generated by React.

My folder looks like this:

Showing the folders and files in the modified create-react-app app.

The changed files have the following code:

Running the app works locally, so the routes deliver when links are clicked and even when the page is refreshed.

Deploy the app to Azure

Now, let’s get it up on Azure! There are a few steps to make this happen.

Step 1: Head to the Deployment Center

Remember to click continue or finish when you select an option, or else, the portal will just keep staring at you.

Showing Deployment Center on the Azure portal and choosing a source control as the first step in deploying a new App Service.

Showing the Build Provider section in the Deployment Center on Azure portal.

After the third step, Azure generates a local git repo for you. And it gives you a remote link to point your react app to.

Showing the Deployment Credentials for the App Service on Azure portal.

In the React app, after modification, we need to build for production. This is important because what we want to upload is the content of the build folder.

Add the preferred node version to the package.json file, as in:

"engines": { "node": "10.0" }

Displaying a list of Azure runtimes in the Azure CLI.

Step 2: Build the App

To build the React app, let’s run npm build in the Terminal.

Step 3: Initialize the Git repo

Showing the overview of the App Service on Azure and the Git clone URL.

git init git add . git commit -m "Initial Commit" git remote add azure <git clone url> git push azure master

Showing the failed page request and the network tab to verify.

Configuring Azure to reconcile client and server side routing

In the public folder, let’s add a web.config XML file with the following content:

Showing an XML formatter and an XML formatted file in VSCode.

The app can be built again at this point, although we’ll lose the Git info in the build folder since the new build overrides the old build. That means it would have to be added again, then pushed.

Now the app works as shown below! Whew.

We don’t want to have to npm run build every time — that’s where continuous deployment comes in. Check out the link below for appropriate references.

Conclusion

That said, I’ll leave you with a couple of related resources you can turn to as you look to deploying a React app to Azure.

Custom NodeJs Deployment on Azure Web App by Hao Luo: Learn more about Kudu and NodeJS deployment.

Deploying a React App As a Static Site On Azure by Burke Holland: Even more options for deploying create-react-app to Microsoft Azure.

The post Deploying a Client-Side Rendered create-react-app to Microsoft Azure appeared first on CSS-Tricks.

Deploying a Client-Side Rendered create-react-app to Microsoft Azure published first on https://deskbysnafu.tumblr.com/

0 notes