11 Tips for “How to be a Healthy Web Developer”

Being a web developer is not an easy thing when you have lot of stress at work, more and more deadlines to achieve, to satisfy all your client’s expectation, 12 to 14 hours of work and sometimes even more. All these things really can turn your personal life and your health into worst condition.

Some common problems amongst web developers are back pain, mental stress and low eye sight. I am going to guide on this things which really helped me in my daily routine and improved me as a web developer.

Believe me you are at the right place if you have encountered any of the problem mentioned above as web developer (If you have not faced then also you will find this article helpful).

We all know, we have to follow some of the important factors related to our lifestyle and health but then also we ignore them and at the end we all get in big trouble in regards to our health.

Here I am going to list 11 factors that can help you to improve and maintain your healthy lifestyle as a webdeveloper.

1. Daily Schedule

Source : The One Place for All Your Thoughts

This should be the very first step if you want to move forward as a healthy Web developer. You should have daily plan for each of your single routine work same like our daily time of lunch and dinner.

1.1. Set a 24 hours daily schedule

Not sure what you are going to do whole day? Then, You should have a time table for your most of your daily life work. This will help you to organize yourself and set some goals and to achieve them too.

Your daily time table should be like, To Wake up at early morning 6 AM. 6:30 to 7:30 Exercise, Breakfast & Morning NEWS, Newspaper. Office time from 9 AM to 6 PM (This can be depend on your office daily routine :) ) spend time with family, reading of TYPO3 new techniques books, at 10 PM go to Bed. (A normal Web developer should have at least 8 hours of sleep)

1.2. Set a ToDo with required time for your daily work in office

s today your project’s deadline? Important issue to be solved? So, You should always start your office work day with a planing of your work for particular day. I am mentioning it here to minimize the mental stress. If you have very good planned day with your required time and priorities then you can easily focus on the main things rather than just wandering whole day and ruin your good day.

2. Eating Habits

Source : Food Business Lunch Restaurant

A normal person should have a proper diet in order to maintain a healthy lifestyle. And we are Web developer s, so we should have a very much proper diet plan in our daily routine. Major cause of any disease mostly starts with eating habits This doesn’t mean you can’t have snack or food that is unhealthy. It’s all about making sure that you know the right things and try to follow it.

2.1. Enough cal/protein food

In your diet food you should have proper protein and calories that you need as per your BMI calculations. There are lots of foods, fruits are there which have proper protein and calories that you need for your daily routine.

2.2. Avoid junk food

As you know and you have found this all places related to health that you should avoid junk food which has a so much side effect to our health like Fat, Oil etc… This doesn’t mean you shouldn’t take it all the time. You can have a break/off day when you can enjoy the pleasure of such food.

2.3. Avoid sugar

ou should cut down sugar as much as you can from your daily routine. Sugar can create a lot of problems in regards to your health. Yes, that’s true that we all like sweet in our food. But this can have very much side effects in our body. Now a days lot of sweet food products available with sugar-free. So, we can enjoy the sweet taste without ruined our health.

3. Water Habits

Source : Flavored Water a Good Alternative to Other Kids Drinks

Water has been a very important for our body. As you all know majority of our body type is made with water. A normal person (Web Developer) should consists 2.5 ltr of water daily.

Routine of drinking water is also important. In the morning (6 - 7 AM) you should drink at least 1 glass of water. Between 9-10 AM again a glass of water. At noon time you should drink at least 2 glasses of water. Before the end of Evening time you should drink 2 glasses of water.

In the summer time the frequency of drinking a water should be increased. You should make sure that you body keeps hydrated all the time.

I know, We all have a very busy and tight schedule at the office. So, remembering the water may be a bit difficult thing. But don’t worry. Now a days smartphone will help you to remind this. There are lot of apps available for this. You can try any best of them.

4. Sleep

Source : Baby Safety Tips

In our daily busy life schedule with all important things, I think the most important thing is to have a very good rest at the night. A normal person (Yes you a Web developer :P ) should have at least 8 hours of sleep at night.

Also, during the office hours a few mins of nap will increase your productivity. One science study has proofed this. A person who takes a few mins of nap after lunch have more productivity.

5. Proper sitting style

We are all Web developer and we have to sit at least 7-8 hours a day on a chair. So it’s but obvious that if you don’t seat properly then you will face lot of problems for back pain.

Out of 10 Web developer s 7 complains about back-pain. This is only because of not seating properly on a chair.

See the following image

Source : Discpensdrophe

Here mentioned the proper seating style of our daily routine of Web development.

6. Intervals during work

Source : Bathroom

Two hours of a movie has also one break to make the movie more enjoyable at the same time more interesting. (By the way, I am talking about a good movie. :D ) So, yes. Intervals in our working schedule are also important. 2-4 intervals of 2-5 mins between 4-5 hours are mandatory to feel relax physically as well as mentally. Does your code not working? Are you stuck somewhere? Are you not able to find out the cause of the bug? Just take 4-5 mins of a break. Go out and try to feel fresh air. (Visit toilet, Yes great idea comes on a toilet seat ;) ) Then restart your work. You will definitely find a solution to your problem soon.

7. Workout/Exercise

Source : The Truth How To Burn Abdominal Fat

Yes, I know, you will ask me that we already exercise full day in the office. But this is the bare truth that we have to workout and keep our body healthy not a single muscle should miss this.

Here I am not talking just about the weight lifting. Also Yoga, Cardio, Running, Cycling etc… are there to make your body healthier. Your body need some stretch, flexibility, endurance to pursue whole day in the Office. Exercise also helps to improve your immune system. So, While all are sick in the viral disease you are there to complete your deadlines.

Exercise helps our body to be fit. Regular exercise keeps your bones and muscle strong. Daily 45 mins of Workout (Or 4-5 days a week) will help keep your body functioning at an optimum level.

If you do weight lifting then your muscles will make your impression on your other colleagues. You will fetch more eyes on you if you want to ;)

I personally do weight lifting. I have owned few needed equipments for Gym and regularly do it in the Morning :)

8. Avoid alcohol/tobacco/drugs

Source : Bahayanya Obat Pcc Bila Dikonsumsi Sembarangan

I strongly feel this is the most important point from in this article. If you are not addict to any of the bad habits like alcohol, tobacco, drugs etc… then it’s very good. But if you are then this can be a very serious issue to your health, mind, family, carrier. You never know why your perfect life ruined if you are addicted to any of these.

Believe me or not personally I have never tasted any of these. And I am living life larger than large. I have a seen lot of people addicted to alcohol, tobacco. They don’t have a good life to live. Yes, you have few hours/mins of pleasure but it can be a cause of death too.

9. Be strong mindful

Source : Meditation

I think, I have mostly mentioned related to physical health, But mental health is also a key point here. If you want to dig out best from you then mental health should have a key role.

There are many factors that can make you down over the time, make you stressful, You are not performing your 100% or results are not good as per your efforts.

At that time strong mind can overcome all the problems, issues and you can fix all those issues. At the end, you are the one and you are the only solution to all the problems. You have to be brave to make a decision and to keep tall on all situations.

10. Weekend plan

Source : How Leverage Your Out Office Message Alexandra Hanken/

I strongly believe that we have to give some space to our self too. All the week we are working for the office/client. We all have some family responsibilities. But in all these we missed ourself.

In modern days of internet and Smartphone world, We all are connected through social media and apps with our family, friends. Which is a very good thing. But sometime we should cut off this. Switch off the phone, internet, all notifications.

It’s very enjoyable moments to walk in park with your love

11. Be Engaged to TYPO3 Community

Source : Typo3 cms

Yes, Our TYPO3 community is so strong that if you be a part to this great community then you will not feel alone at any time. Just be engaged to it. You can share your experience, You can ask your queries and there is lot more to do. TYPO3 - Inspiring People To Share!

Conclusion

I strongly believe that if we have to build our IT career as web developer then along with our all skills and knowledge our healthy lifestyle is also key role in it.

During my short career of 7 Years, I felt that all things are very much important, But our healthy body and mind is top amongst all. As I have mentioned at the top of this article, We works 10-12 hours a day without fail. We face lot of stress and problems. But to stand still amongst all our healthy body give us that much confidence that we can pass any hurdle and we be at the peak of mountain of success.

So, go and enjoy the very beautiful healthy life as web developer. And Thank you for your time and reading my article.

Web Scraping With Google Sheets

Web scraping and utilizing various APIs are great ways to collect data from websites and applications that can later be used in data analytics. Some companies have their entire business model focused on web scraping. HiQ crawls various “Public” websites to collect data and provide analytics for companies on their employees. They help companies find top talent using sites data like Linkedin, and other public sources to gain the information needed in their algorithms.

However, they ran into legal issues when Linkedin asked them to cease and desist as well as put in certain technical methods to slow down HiQ’s web crawlers. HiQ subsequently sued Linkedin and won! The judge said as long as the data was public, it was ok to scrape!

Image from commit strip (Here)

Web scraping typically requires a complex understanding of HTTP requests, faking headers, complex Regex statements, HTML parsers, and database management skills.

There are programming languages that make this much easier such as Python. Python offers libraries like Scrapy and BeautifulSoup that make scraping and parsing HTML easier.

However, it still requires proper design, a decent understanding of programming and website architecture.

Google sheets offer several useful functions that can help scrape web data for those who don’t have the time to learn programming. If you would like to see the video of our webinar it is below. If not, you can continue to read and figure out how to use Google Sheets to scrape websites.

Google Sheet Functions For Web Scraping

The functions you can use for web scraping with google sheets are:

• ImportXML
• ImportHTML
• ImportFEED
• ImportDATA

All of these functions will scrape websites based off of different parameters provided to the function. 

Web Scraping With ImportFeed

The ImportFeed Google Sheet function is one of the easier functions to use. It only requires access to Google Sheets and a URL for a rss feed. This is a feed that is typically associated with a blog.

For instance, you could use the RSS feed listed below. “http://www.acheronanalytics.com/2/feed".

How do you use this function? An example is given below.

“=ImportFeed( “http://www.acheronanalytics.com/2/feed")

That is all that is needed! There are some other tips and tricks that can help clean up the data feed as you will get more than just one column of information. For now, this is a great start at web scraping.

Do The Google Sheet Import Functions Update?

All of these import function automatically update data every 2 hours. A trigger function can be set to increase the cadence of updates. However this requires more programming.

This is it in this case! From here, it is all about how your team uses it! Make sure you engineer a solid data scraping system.

The picture above is an example of of using the ImportFeed function.

Web Scraping With ImportXML

The ImportXML function in Google Sheets is used to pull out specific data points using HTML ids, and classes. This requires some understanding of HTML and parsing XML. This can be a little frustrating. So we created a step by step for web scraping for HTML.

Here are some examples from an EventBrite page.

1. Go to https://www.eventbrite.com/d/wa--everett/events/
2. Right Click Inspect Element
3. Find the HTML tag you are interested in
4. We are looking for <div class = list-card__body> Some Text Here</div>
5. So this is the tricky part. The first part you need to pull out from this HTML tag is the type. This would be like <div>, <a>, <img>, <span>, etc. This first one can be called out using “//” then the tag name. Such as “//div”, “//a” or “//span”.
6. Now, if you actually want to get the “Some Text Here” you will need to call out the class.
7. That is done in the method shown in step 5. You will notice it combines using “//div” with the “[@class=”class name here”].
8. The xml string is “//div[@class=’list-card__body’]”
9. There is another data value you might want to get.
10. We want to get all the URLs
11. This case would involve wanting to pull out the specific value inside of the first HTML tag itself. For instance, <a href=”https//www.google.com">Click here</a>.
12. Then it would be like step 7.
13. The xml string is “//a/@href”
14. ImportXML(URL, XML String)
15. ImportXML(“https://www.eventbrite.com/d/wa--everett/events/",“//div[@class=’list-card__body’]”)

The truth about using this function is that it requires a lot of time. Thus, it requires planning and designing a good google sheet to ensure you get the maximum benefit from utilizing. Otherwise, your team will end up spending time maintaining it, rather than working on new things. Like in the picture below

From xkcd

Web scraping With ImportHTML

Finally, we will discuss ImportHTML. This will import a table or list from a web page. For instance, what if you want to scrape data from a site that contains stock prices like http://www.nasdaq.com/symbol/snap/real-time. There is a table on this page that has the stock prices from the past few days.

Similar to the past functions you need to use the URL. On top of the URL, you will have to mention which table on the webpage you want to grab. You can do this by utilizing the which number it might be.

An example would be ImportHTML(“http://www.nasdaq.com/symbol/snap/real-time",6). This will scrape the stock prices from the link above.

In the video above, they also show how they combine scraping the stock data above and melded it with news about the Stock ticker on that day. A team could create an algorithm that utilizes the stock price of the past, as well as new articles and twitter information to choose whether to buy or sell stocks.

Writing multi-platform mobile apps with react native and kotlin

Kotlin is an awesome language. It is functional and offers extension functions, null safety, smart casting, type-safe builders, default and named arguments, data classes and much more. It is arguably the language of choice for Android developers and very familiar to iOS developers.

React Native enables us to write only once for multiple platforms, has a simpler API than native development and a smooth learning curve. Steve Yegg, a former Google engineer, conjectures in his blog post that hybrid frameworks are likely to become even more popular. And the framework from Facebook is the major player at the moment.

So why not mixing both? 
Standing on the shoulder of giants (JetBrains/kotlin-wrappers and ScottPierce/kotlin-react-native), we can. 
An example repository can be found here.

React in a nutshell

You can learn the basics of React Native very quickly reading the official tutorial, but three important takeaways are:
- view = f(state) 
- React has a virtual representation of the view, and it calculates the smallest diff between renders
- development should be component-driven

Hello world in Kotlin

After cloning the example repository and following the README, you can simply edit the render() function to immediately see the result on the device.

For example, writing the following code…

override function render() =
  view(style = Style(flex = 1, flexDirection: "column", justifyContent: "space-between", alignItems: "center")) {
    text("hello")
    button("press me") { alert("pressed!") }
    touchableHighlight(onPress = { alert("also pressed!") }) {
      text("world")
    }
    image(style = Style(width = 640, height = 360),
          uri = "https://fossbytes.com/wp-content/uploads/2017/05/kotlin-android-learn-640x360.png")
  }

…would render the following output:

Our first application with Kotlin and React Native

Thanks to the Kotlin language features, we can write the view using a builder DSL similar to JSX, instead of manually calling React.createElement(…, React.createElement(…)).

Creating our first component

Let’s say you have the following view architecture and you want to make the code for headers reusable:

view(style = Style(backgroundColor = "skyblue", padding = 20, marginBottom = 10)) {
  text(style = TextStyle(color = "white", fontSize = 26, fontWeight = "bold"),
       text = "Kotlin React Native")
}

For this task, you could create a Header component:

class Header : React.PureComponent<Any, Any>() {
    override fun render() =
            view(style = Style(backgroundColor = "skyblue", padding = 20, marginBottom = 10)) {
                text(style = TextStyle(color = "white", fontSize = 26, fontWeight = "bold"),
                     text = "Kotlin React Native")
            }
}

And call it from the render() function as such:

override fun render() =
  view {
    component(Header())
}

Alternatively, if you want the extend the DSL so that you can call this component directly, just create an extension function:

fun ViewBuilder.header() = component(Header())

override fun render() =
  view {
    header()
}

Managing state

React doesn’t dictate how state management should be. For the sake of this example, let’s write our own simplified, naive implementation of Redux.

In this pattern, we have three main elements:
- store: holds the state
- actions: describe the changes
- reducers: return an updated state based on the requested action

Here is the full implementation:

typealias Dispatcher<A> = (A) -> Unit
typealias Reducer<S, A> = (S, A) -> S
typealias Callback<S, A> = (S, Dispatcher<A>) -> Unit

class Store<S, A>(
        initialState: S,
        private val reducer: Reducer<S, A>) {

    var callback: Callback<S, A>? = null

    var state: S = initialState

    private fun update() {
        callback?.invoke(state, dispatch)
    }

    fun subscribe(onUpdate: Callback<S, A>) {
        callback = onUpdate
        update()
    }

    fun unsubscribe() {
        callback = null
    }

    val dispatch: Dispatcher<A> = { action: A ->
        state.let { state = reducer(it, action) }
        update()
    }
}

Evidently, on a real world application, you should prevent race conditions and implement the subscriptions in an atomic fashion, possibly using RXJS. But that’s good for now.

A less contrived example

Now let’s write a simple application which consists of a header, and two rating widgets, for giving scores to two different programming languages.

First we create the models:

data class Rating(val language: String, val score: Int)

class RatingProps(val formattedText: String,
                  val onIncrementClick: () -> Unit,
                  val onDecrementClick: () -> Unit)

Then the actions that can be dispatched:

sealed class CounterAction {
    object INCREMENT: CounterAction()
    object DECREMENT: CounterAction()
}

Later on, we define the reducer:

fun createReducer() = { state: Rating, action: CounterAction ->
    when (action) {
        is INCREMENT -> state.copy(score = state.score + 1)
        is DECREMENT -> state.copy(score = state.score - 1)
    }
}

Then we define a view model, mapping state to view abstractions:

fun viewModel(state: Rating, dispatch: Dispatcher<CounterAction>) =
  RatingProps(
    formattedText = "${state.language} scores ${state.score}!",
    onIncrementClick = { dispatch(INCREMENT) },
    onDecrementClick = { dispatch(DECREMENT) })

We connect everything with a store:

typealias RatingStore = Store<Rating, CounterAction>

fun createStore(initialState: Rating) =
        Store(initialState, createReducer())

Finally, we create a stateless, dumb component:

val buttonStyle = Style(height = 30, flex = 1, margin = 10)

class Rating : React.PureComponent<RatingProps, Any>() {
    override fun render() =
            view {
                text(style = TextStyle(margin = 10, fontSize = 18),
                     text = props.formattedText)
                view(style = Style(flex = 1, flexDirection = "row", marginBottom = 60)) {
                    view(buttonStyle) {
                        button(title = "-1",
                               onPress = props.onDecrementClick)
                    }
                    view(buttonStyle) {
                        button(title = "+1",
                               onPress = props.onIncrementClick )
                    }
                }
            }
}

And another component that keeps track of the state:

class RatingContainer(private val store: RatingStore) : React.Component<Any, RatingProps>() {
    override fun componentWillMount() {
        store.subscribe { s, d -> setState(viewModel(s, d)) }
    }

    override fun componentWillUnmount() {
        store.unsubscribe()
    }

    override fun render(): dynamic {
        return view {
            component(Rating(), state)
        }
    }
}

fun ViewBuilder.rating(store: RatingStore) = component(RatingContainer(store))

And the final result is:

Our final application

So… Is Kotlin with React Native production-ready?

Possibly, but there are still some improvements to be made to the whole ecosystem. The interoperability with JavaScript isn’t effortless and has some pitfalls. For example, passing the store via props to the component won’t work because the state will become immutable. Also, using data classes for the props directly will return an error from React because apparently the serialization contains some metadata. In addition, you’re supposed to write your own type definitions, which is a huge productivity killer.

I think JetBrains is to blame for the unpopularity of KotlinJS, by not giving the language the love it deserves. Kotlin/ts2kt, for instance, could solve the type definition problem. However, most of the attempts for converting types fail, and the issues remain open. Actually, we don’t see many examples targeting JS at all, despite the fact that this a working platform for more than a year. Maybe they are focused on Kotlin/Native…

In the meantime, another alternative to JavaScript is Clojurescript, which is awesome with re-frame and in my opinion offers the best development experience out there. However, it’s not for the faint-hearted.

I hope that with this article and the example repository, the community can reconsider Kotlin as a language for React Native. Feel free to fork the code!

Eyes wide open - Correct Caching is always hard

In my last post I talked about Caching and some of the stuff I've been doing to cache the results of a VERY expensive call to the backend that hosts my podcast.

As always, the comments are better than the post! Thanks to you, Dear Reader.

The code is below. Note that the MemoryCache is a singleton, but within the process. It is not (yet) a DistributedCache. Also note that Caching is Complex(tm) and that thousands of pages have been written about caching by smart people. This is a blog post as part of a series, so use your head and do your research. Don't take anyone's word for it.

Bill Kempf had an excellent comment on that post. Thanks Bill! He said:

The SemaphoreSlim is a bad idea. This "mutex" has visibility different from the state it's trying to protect. You may get away with it here if this is the only code that accesses that particular key in the cache, but work or not, it's a bad practice.
As suggested, GetOrCreate (or more appropriate for this use case, GetOrCreateAsync) should handle the synchronization for you.

My first reaction was, "bad idea?! Nonsense!" It took me a minute to parse his words and absorb. Ok, it took a few hours of background processing plus I had lunch.

Again, here's the code in question. I've removed logging for brevity. I'm also deeply not interested in your emotional investment in my brackets/braces style. It changes with my mood. ;)

public class ShowDatabase : IShowDatabase

{

    private readonly IMemoryCache _cache;

    private readonly ILogger _logger;

    private SimpleCastClient _client;

    public ShowDatabase(IMemoryCache memoryCache,

            ILogger<ShowDatabase> logger,

            SimpleCastClient client){

        _client = client;

        _logger = logger;

        _cache = memoryCache;

    }

    static SemaphoreSlim semaphoreSlim = new SemaphoreSlim(1);

    public async Task<List<Show>> GetShows() {

        Func<Show, bool> whereClause = c => c.PublishedAt < DateTime.UtcNow;

        var cacheKey = "showsList";

        List<Show> shows = null;

        //CHECK and BAIL - optimistic

        if (_cache.TryGetValue(cacheKey, out shows))

        {

            return shows.Where(whereClause).ToList();

        }

        await semaphoreSlim.WaitAsync();

        try

        {

            //RARE BUT NEEDED DOUBLE PARANOID CHECK - pessimistic

            if (_cache.TryGetValue(cacheKey, out shows))

            {

                return shows.Where(whereClause).ToList();

            }

            shows = await _client.GetShows();

            var cacheExpirationOptions = new MemoryCacheEntryOptions();

            cacheExpirationOptions.AbsoluteExpiration = DateTime.Now.AddHours(4);

            cacheExpirationOptions.Priority = CacheItemPriority.Normal;

            _cache.Set(cacheKey, shows, cacheExpirationOptions);

            return shows.Where(whereClause).ToList(); ;

        }

        catch (Exception e) {

            throw;

        }

        finally {

            semaphoreSlim.Release();

        }

    }

}

public interface IShowDatabase {

    Task<List<Show>> GetShows();

}

SemaphoreSlim IS very useful. From the docs:

The System.Threading.Semaphore class represents a named (systemwide) or local semaphore. It is a thin wrapper around the Win32 semaphore object. Win32 semaphores are counting semaphores, which can be used to control access to a pool of resources.

The SemaphoreSlim class represents a lightweight, fast semaphore that can be used for waiting within a single process when wait times are expected to be very short. SemaphoreSlim relies as much as possible on synchronization primitives provided by the common language runtime (CLR). However, it also provides lazily initialized, kernel-based wait handles as necessary to support waiting on multiple semaphores. SemaphoreSlim also supports the use of cancellation tokens, but it does not support named semaphores or the use of a wait handle for synchronization.

And my use of a Semaphore here is correct...for some definitions of the word "correct." ;) Back to Bill's wise words:

You may get away with it here if this is the only code that accesses that particular key in the cache, but work or not, it's a bad practice.

Ah! In this case, my cacheKey is "showsList" and I'm "protecting" it with a lock and double-check. That lock/check is fine and appropriate HOWEVER I have no guarantee (other than I wrote the whole app) that some other thread is also accessing the same IMemoryCache (remember, process-scoped singleton) at the same time. It's protected only within this function!

Here's where it gets even more interesting.

• I could make my own IMemoryCache, wrap things up, and then protect inside with my own TryGetValues...but then I'm back to checking/doublechecking etc.
• However, while I could lock/protect on a key...what about the semantics of other cached values that may depend on my key. There are none, but you could see a world where there are.

Yes, we are getting close to making our own implementation of Redis here, but bear with me. You have to know when to stop and say it's correct enough for this site or project BUT as Bill and the commenters point out, you also have to be Eyes Wide Open about the limitations and gotchas so they don't bite you as your app expands!

The suggestion was made to use the GetOrCreateAsync() extension method for MemoryCache. Bill and other commenters said:

As suggested, GetOrCreate (or more appropriate for this use case, GetOrCreateAsync) should handle the synchronization for you.

Sadly, it doesn't work that way. There's no guarantee (via locking like I was doing) that the factory method (the thing that populates the cache) won't get called twice. That is, someone could TryGetValue, get nothing, and continue on, while another thread is already in line to call the factory again.

public static async Task<TItem> GetOrCreateAsync<TItem>(this IMemoryCache cache, object key, Func<ICacheEntry, Task<TItem>> factory)

{

    if (!cache.TryGetValue(key, out object result))

    {

        var entry = cache.CreateEntry(key);

        result = await factory(entry);

        entry.SetValue(result);

        // need to manually call dispose instead of having a using

        // in case the factory passed in throws, in which case we

        // do not want to add the entry to the cache

        entry.Dispose();

    }

    return (TItem)result;

}

Is this the end of the world? Not at all. Again, what is your project's definition of correct? Computer science correct? Guaranteed to always work correct? Spec correct? Mostly works and doesn't crash all the time correct?

Do I want to:

• Actively and aggressively avoid making my expensive backend call at the risk of in fact having another part of the app make that call anyway?
  • What I am doing with my cacheKey is clearly not a "best practice" although it works today.
• Accept that my backend call could happen twice in short succession and the last caller's thread would ultimately populate the cache.
  • My code would become a dozen lines simpler, have no process-wide locking, but also work adequately. However, it would be naïve caching at best. Even ConcurrentDictionary has no guarantees - "it is always possible for one thread to retrieve a value, and another thread to immediately update the collection by giving the same key a new value."

Trying out Transcrypt

One thing that doesn't make sense to me is that you can't just use any language anywhere. In particular, why can't you use Python for client-side web development?

I've been told this is unrealistic for a couple reasons. Performance is cited, as any other language would have to be either compiled to JavaScript, or a large language runtime, hopefully in asm.js or WebAssembly, would have to be downloaded before the actual scripts could be run. The other issue is debuggability: in some other language, you wouldn't be able to inspect and step into your source files in the browser's dev tools. Transcrypt attempts to address both of these concerns.

What is Transcrypt?

Transcrypt is a Python compiler, written in Python, that outputs JavaScript. The standard Python implementation, CPython, has some facilities for inspecting the abstract syntax tree of a program, and Transcrypt makes use of these, as well as Google's Closure compiler for generating JavaScript code. Its output is a JavaScript file with exported functions and variables like any other JavaScript file, and with the ability to access external JavaScript variables and functions as well.

Transcrypt aims to be a "90% complete" implementation of Python that favors speed over purity. In my test project, I haven't run into any of the things that are "incomplete". I did run into one small performance issue that was easily fixed. As far as debuggability goes, Transcrypt generates "sourcemaps", which allow you to debug using the browser's devtools.

My Test Project

To try out Transcrypt, I ported a JavaScript program I had written a couple years ago to Python. The program uses the canvas element to draw a bunch of particles, and simulates their movement as they all pull on each other with gravity. Since every particle pulls on every other particle, according to their distance and masses, it's an N2 algorithm. Not very efficient, but for testing the performance of the compiled code that's not a bad thing.

# force of gravitation between pararticles p1 and p2,
# given their masses p1.m, p2.m and gravitational constant g
def grav(p1, p2, g):
    r = dist(p1, p2)
    if (r == 0):
        r = 0.00000001
    return g * p1.m * p2.m / sq(r)

# apply force of gravitation to particle p1's velocity from p2,
#  given grav constant g
def nudge(p1, p2, g):
    f = grav(p1, p2, g)
    theta = Math.atan2( (p2.y - p1.y), (p2.x - p1.x) )
    gravX = f * Math.cos(theta)
    gravY = f * Math.sin(theta)
    p1.vX += gravX / p1.m
    p1.vY += gravY / p1.m

    p1.vX, p1.vY = trimSpeed(p1.vX, p1.vY, MAX_SPEED)

# Let each particle pull on each other particle
def gravParticles(g):
    for p1 in particles:
        for p2 in particles:
            if p1 is not p2:
                nudge(p1, p2, g)

You can't tell, but these particles are all gravitating toward each other.

After some yak shaving to get the right version of CPython installed (the Transcrypt website says 3.6 is required), "pip3 install transcrypt" worked without a hitch.

My approach was to start with an empty python file, move the functions over from the existing JavaScript file one at a time (fixing indentation, braces, etc. as necessary), and after each one recompile it and make sure the program still runs. This worked fine until, at some point, things got choppy.

Performance

After moving various pieces back and forth between the Python and JavaScript files, I determined that the problem was this line:

return { 'vX': vXNew, 'vY': vYNew }

Since it's part of my "trimSpeed" function that's called for every pair of particles (of which there are 200), and the expected time between cycles is 50 milliseconds (or 20 fps), that means this code should be called nearly 200 * 200 * 20 = 800,000 times a second. The reason for the slowness is probably that Transcrypt is creating not just a plain JavaScript object, but a Python "dict".

Since all I'm trying to do here is return the X and Y components of the speed, I could switch to the more Pythonic multiple return statement:

return vXNew, vYNew

This removed the choppiness.

The Main Loop

The last things to port were the outer function that I call from the body tag's onload attribute, and an inner function that I pass to window.requestAnimationFrame(). The inner function is basically the "game loop" of the program (minus the user input and AI steps).requestAnimationFrame also hints to the browser that some GPU acceleration would be nice (and it is nice).

This could be refactored quite a bit (not to mention my inconsistent abuse of global variables), but I decided to port what was left of it wholesale:

def doit():
    canvas = document.getElementById('tutorial')
    CANVAS_WIDTH = canvas.width
    CANVAS_HEIGHT = canvas.height
    ctx = canvas.getContext('2d')

    init(particles, CANVAS_WIDTH, CANVAS_HEIGHT)

    last = None
    def go(timestamp):
        global last
        if not last:
            last = timestamp
        if timestamp - last >= 50:
            g = GRAVITATIONAL_CONSTANT
            gravParticles(g)
            moveParticles(CANVAS_WIDTH, CANVAS_HEIGHT)
            drawParticles(ctx, CANVAS_WIDTH, CANVAS_HEIGHT)
            last = timestamp

        # make this function keep looping
        window.requestAnimationFrame(go)

    # kick things off initially
    window.requestAnimationFrame(go)

...

<!-- the compiled python code -->
<script src="__javascript__/ent_tr.js"></script>

<!-- the original script (no longer used) -->
<!-- <script src="ent_tr_old.js"></script> -->
...
<body onload="ent_tr.doit();">
    <!-- yes, I evolved this from a 'hello world' canvas tutorial. don't judge me. -->
    <canvas id="tutorial" width="1000" height="500"></canvas>
</body>

Other than differences of braces, parentheses, etc. this could pretty much be JavaScript code. As you can see, JavaScript APIs like document, window, and canvas are available from within Python code when compiled with Transcrypt.

File Size

How big are the files it generates? For a 4 KB Python source file (ent_tr.py), the following files were generated:

• ent_tr.js (77 KB)
• ent_tr.mod.js (5 KB)
• ent_tr.js.map (129 KB)
• ent_tr.mod.js.map (5 KB)

I believe ent_tr.js contains the Transcrypt runtime, so there should only need to be one in a given application. ent_tr.mod.js, corresponding to the module represented by the ent_tr.py file itself, is not much bigger than its source Python file. The *.map files are the sourcemaps, so they shouldn't need to be downloaded unless you're debugging.

Takeaways

I think this shows that Transcrypt is fast enough. One thing it appears to lack is the ability to include HTML, CSS, and Python in the same file, as one would with JSX and React. So Transcrypt might not currently be the best language for building user interfaces. One use case would be if you have (or plan to create) a moderately sized Python library that you would like to make available to other client-side code. If you don't want to maintain a separate JavaScript codebase with the same functionality, but want it to be more responsive than if you turned it into a microservice, Transcrypt may be for you.

I hope you found this interesting. I'll hopefully write more on Transcrypt as I continue to experiment with it. What do you think? Is 80 KB too big for a runtime? What benchmarks should we use to determine if it's "fast enough"?

Introduction to Unit Testing with Java

We all have been there: we spent so much time into a project, we make sure to run each and every possible scenario we might think off in order to make it as good as possible. But when you let someone else try it out they find small edge cases that can make your app behave in unexpected ways.

In order to prevent that from happening too often, we use different types of testing techniques: Unit Testing, Integration Testing and End-To-End Testing. Although the later (End-To-End Testing) can be made by either developers or Quality Assurance team members.

This is also known as the Testing Pyramid

Try not to be distracted about the other two types of test mentioned before, but rather focus on the idea that we can expect our unit test to be far more in quantity than the others, but keep in mind that they don't replace each other. They are all important.

Enough chitchat, let's start coding, shall we?

Requirements

• Have the JDK installed on your machine (duh!).
• An IDE (I would recommend IntelliJ IDEA Community Edition).
• In terms of Java as a language, you need to be familiar with the concepts of a variables, constant, function, class and object in order to fully understand this post. (Which I might be able to help with this).
• Add the Math class from this GitHub Gist to your project.

public final class Math {

private Math() {}

public static int add(int firstNumber, int secondNumber) {

return firstNumber + secondNumber;

}

public static int multiply(int multiplicand, int multiplier) {

return multiplicand * multiplier;

}

public static double divide(int dividend, int divisor) {

if (divisor == 0)

throw new IllegalArgumentException("Cannot divide by zero (0).");

return dividend / divisor;

}

}

view rawMath.java hosted with ❤ by GitHub

Getting Started

The very first thing we need to do is to add the TestNG framework to our project. This will provide us with a set of classes and annotations which will come in handy later.

Add TestNG to your project

This can be done 2 ways: manually or using Maven in your project. Feel free to skip the other depending on how you setup your project.

Manually

You can follow this guide in order to add it manually.

Via Maven

1. Open up your pom.xml, which should be on your project's root folder.
2. Inside the <project> tag, make a <dependencies> tag.
3. Add the following block of XML code:

<dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>6.14.2</version>
</dependency>

In case you haven't done it, make sure to select the Enable auto-importoption that should appear on the bottom right of your screen. This will allow IntelliJ IDEA to automatically detect any changes made to your pom.xml and refresh it accordingly. Life saver :)

The test subject

For the sake of this post, we will not be applying TDD (Test Driven-Development) techniques, our focus will be on getting to know how to write test classes and methods.

So, in order for us to start, we will need to create a class inside our src/test/java/ directory, and name it MathTests.

The use of the suffix "Tests" at the end of a testing class name is a common naming convention that will allow other developers and yourself to quickly know, without opening the file, that it has testing logic inside of it.

Which should look like this:

public class MathTests {
    // ...
}

Can you spot any difference from a regular class and this one?

Nope.

And that's fine.

What makes a class a "testing class" is not it's signature, but actually it's methods and it's important for these classes to be inside a directory marked as a Test Source Root.

These methods should follow a particular naming convention, should have the public access modifier, should have void as their return type and the @Test annotation before their signature.

The @Test annotation indicates our IDE's test runner that this is not a regular method and will execute it accordingly.

So, our first test method would look like this:

@Test
public void add_TwoPlusTwo_ReturnsFour() {
    // ...
}

Adding testing logic

There's another convention that is really common among other programming langauges, known as the Tripple A:

1. Arrange: consists of a few lines of code that are used to declare and initialize the objects we need in our test.
2. Act: is usually a few lines of code where we perform the actions, whether it is some calculation or modify the state of our objects.
3. Assert: usually consists of a single line of code where we verify that the outcome of the Act part were made successfully. Comparing the actual value with an expected value that we plan to get.

In practice, this would be:

@Test
public void add_TwoPlusTwo_ReturnsFour() {
    // Arrange
    final int expected = 4;

    // Act
    final int actual = Math.add(2, 2);

    // Assert
    Assert.assertEquals(actual, expected);
}

The final keyword is used to prevent our value to be changed later, also known as a constant.

Here we can see how the whole arrange, act and assert come together.

If you take a look at the line numbers on the left of the add_TwoPlusTwo_ReturnsFour() method, there's a green play button, select it and then choose the first option from the context menu.

Wait a few moments and... the test runner panel should open up with the test results.

If you see that everything is green, it means that our test passed!

But, as a good tester, we should also try to make our test fail.

Let's change the act part so it adds 3 and 2 together, so our actual value becomes 5 and our test should fail.

...

Did it fail?

Great!

Now, some of you may be wondering why we use the assertEquals()method from the Assert class, we could manually try to use an if-elseblock that can simulate the same results, but the Assert class provides a handy set of methods to do various types of validations.

The most common ones are:

• assertTrue(): evaluates a given condition or boolean, if it's value it's true, the test will be marked as PASSED, otherwise, it will be marked as FAILED.
• assertFalse(): similar to the assertTrue(), but whenever the condition or boolean is false the test will be marked as PASSED, otherwise, it will be marked as FAILED.
• asssertEquals(): commonly used to compare two given values that can be either primitive types (int, double, etc) or any objects.

If we were to implement our own logic using if-else, not only it would clutter our code, but also could lead to unwanted results. Since, if we forget to throw and exception in one of our if-else blocks, both of our code paths will be marked as PASSED.

Tip: most of the time we should only use 1 single Assert method per test, although there are exceptions to this rule. But this is normally recommended in order for our test to be really small and straight to the point. Each test should only verify 1 code path at a time. Also, if we had 3 assertions and the first one fails, the following ones will never be executed, so keep that in mind.

Now that we got that out of the way, let's continue with more tests!

How about you practice testing more scenarios for the add() method?

• Add a positive number with a negative one.
• Add two negative numbers.

If we take another look at our Math class, we can see there are 2 more methods.

I'll let you do the tests for the multiply() (hint: make sure to test when we multiply a number by zero) method and I'll focus on the divide() one for the rest of this article.

The divide() method

Let's take a closer look to this method:

public static double divide(int dividend, int divisor) {
    if (divisor == 0)
        throw new IllegalArgumentException("Cannot divide by zero (0).");

    return dividend / divisor;
}

As you can see, if the value of the divisor argument is 0, we will throw an IllegalArgumentException, otherwise, the division operation will be performed.

Note: the throw keyword not only throws a given exception, but also stops the code execution, so it works similar to the break keyword inside a loop or a switch block.

So, this method has 2 possible outcomes or "code paths". We need to make sure to test them.

The amount of tests per method, should be equal or more than the amount of code paths it has.

Which means, that we should at least have 2 tests.

Let's go ahead and make them!

• Divide two numbers, where the divisor is any number but zero (0).
• Divide two numbers, where the divisor is zero (0).

Our first test would be something like:

@Test
public void divide_TenDividedByFive_ReturnsTwo() {
    final double expected = 2.0;

    final double actual = Math.divide(10, 5);

    Assert.assertEquals(actual, expected);
}

And our second test would be:

@Test(expectedExceptions = IllegalArgumentException.class)
public void divide_TenDividedByZero_ThrowsIllegalArgumentException() {
    Math.divide(10, 0);
}

Wait wut!

Mr./Mrs Reader: "B-bu-but what happened with the arrange, act and the assert? what is the expectedExceptions part doing?"

Do not worry, I shall explain shortly!

1. I decided to skip the whole arrange, act and assert because the execution of our code will automatically be interrupted when the divide() method is ran. So the whole Tripple A can be omitted for this test in particular.
2. The expectedException part is needed in order to tell our test runner that the IllegalArgumentException is actually possible to happen in this test, if we were to change that to another exception, our test would fail.

Tip: remember to use the .class at the end of the exception name, otherwise, this code would not compile.

Testing objects

You have noticed that so far we have been testing static methods of our Math class, which means we don't have to create objects of it. Which is fine.

But what if we had a class that didn't have static methods?

For this, our testing framework (TestNG) provides a pair of annotations to make sure that each of our test use a fresh instance of our class.

Let's imagine we could create instances of the Math class.

In that case, our tests would look like this:

@Test
public void add_TwoPlusTwo_ReturnsFour() {
    final Math math = new Math();
    final int expected = 4;

    final int actual = Math.add(2, 2);

    Assert.assertEquals(actual, expected);
}

@Test
public void divide_TenDividedByFive_ReturnsTwo() {
    final Math math = new Math();
    final double expected = 2.0;

    final double actual = Math.divide(10, 5);

    Assert.assertEquals(actual, expected);
}

Which isn't that bad, but remember that we can make many more tests for this same class and having this Math objects initialized over and over will create more code noise.

If we have to ignore certain parts of our test, specially in the arrangement, it means we can use one of our testing framework's tools:

@BeforeMethod & @AfterMethod

These two annotations can be added to our test functions like we have been using the @Test one, but they work in a particular way.

• @BeforeMethod: this code block will always be executed before any other @Test method.
• @AfterMethod: this code block will always be executed after any other @Test method.

So, why would we use them?

In all of our @Test methods we would have to constantly initiate a new Math object, so with the help of the @BeforeMethod annotation we can get rid of this repetitive code.

First thing we need to do is to promote our Math object to a member variable or property.

public final class MathTests {
    private Math math;

    @Test
    public void add_TwoPlusTwo_ReturnsFour() {
        final int expected = 4;

        final int actual = math.add(2, 2);

        Assert.assertEquals(actual, expected);
    }

    @Test
    public void divide_TenDividedByFive_ReturnsTwo() {
        final double expected = 2.0;

        final double actual = math.divide(10, 5);

        Assert.assertEquals(actual, expected);
    }
}

Then add our @BeforeMethod function, which is commonly named as "setUp".

public final class MathTests {
    private Math math;

    @BeforeMethod
    public void setUp() {
        math = new Math();
    }

    @Test
    public void add_TwoPlusTwo_ReturnsFour() {
        final int expected = 4;

        final int actual = math.add(2, 2);

        Assert.assertEquals(actual, expected);
    }

    @Test
    public void divide_TenDividedByFive_ReturnsTwo() {
        final double expected = 2.0;

        final double actual = math.divide(10, 5);

        Assert.assertEquals(actual, expected);
    }
}

Now, in order to make sure we clear out our math object, we can set it's value to null inside our @AfterMethod function, which is usually called tearDown():

public final class MathTests {
    private Math math;

    @BeforeMethod
    public void setUp() {
        math = new Math();
    }

    @Test
    public void add_TwoPlusTwo_ReturnsFour() {
        final int expected = 4;

        final int actual = math.add(2, 2);

        Assert.assertEquals(actual, expected);
    }

    @Test
    public void divide_TenDividedByFive_ReturnsTwo() {
        final double expected = 2.0;

        final double actual = math.divide(10, 5);

        Assert.assertEquals(actual, expected);
    }

    @AfterMethod
    public void tearDown() {
        math = null;
    }
}

This means that the order of execution of our test would be:

1. The setup().
2. And add_TwoPlusTwo_ReturnsFour().
3. Then tearDown().
4. setup() again.
5. And divide_TenDividedByFive_ReturnsTwo().
6. Then tearDown() again.

Aaaaand that's it

With this you should be more familiar now with how Unit Testing works.

Although we didn't do any tests that required us using the assertTrue()and assertFalse(), I encourage you to do your own tests to play around with them for a little bit :)