should i tag this to assets

Tumblr Themes & React and Redux: Part 1 - Setup and the Initial State

As a platform that prides itself on being a home for artists and creatives alike, it only makes sense that we allow our users to fully customize their Tumblrs to fully express themselves. Here at Tumblr, the world is your oyster not only in terms of looks but also in how you create your theme. I wanted to demonstrate how you too can develop a theme using Redux and React. Since there are plenty of docs and tutorials on how to use those libraries themselves, I will briefly describe how I got the libraries to work with the Tumblr theme engine, and share some handy tips that made developing more efficient and more enjoyable.

If you follow the ever changing landscape of JavaScript, then you’ve at least heard of these two libraries. Prior to building the Post-It-Forward theme, I only knew of them by name but never got the chance to actually use them. Developers couldn’t get enough of how React made it easy to create and reuse components. Many also praise how elegantly React manages and renders views, especially when paired with Redux for state management. All of this sounded great. I wanted to turn this project into a learning experience. I thought, “why not?” and gave it a shot.

An Extremely Brief Introduction to Tumblr Themes

The way themes work on Tumblr is that we have a theme engine that provides special types of operators. These operators insert dynamic data, such as your Tumblr’s title or description, or are blocks that serve as conditionals for rendering a block of HTML, like the “Next Page” link.

My HTML started off a little something like this:

<!DOCTYPE html>
    <head>
    <title>{Title}</title>
        <style></style>
    </head>
    <body>
        <div id="post-it-forward-root"></div>
    </body>
</html>

As you can see, {Title} is a variable that will return the title of the Tumblr. The point of entry for this theme is the <div> element with the #post-it-forward-root ID. In your index.js file you’ll reference this DOM element in your ReactDom.render() method. If you want to learn more about the theme engine, head over to our Theme Docs

Creating the Initial State

To get things started, we need to create an initial state. How do we introduce this initial state if we have to rely on the theme engine to give us all our data? How do we get the data from HTML land to JS land? Well, here’s one way of doing it:

<script type="text/javascript">
    (function(root) {
        var ensureString = function(str) {
            return !str ? '' : str;
        };

        var basicVariables = {
            title: ensureString({JSTitle}),
            name: ensureString({JSName}),
                        description: ensureString({JSDescription}),
                        metaDescription: ensureString({JSMetaDescription}),
                        blogUrl: ensureString({JSBlogURL}),
                        rss: ensureString({JSRSS}),
            favicon: ensureString({JSFavicon}),
            customCss: ensureString({JSCustomCSS}),
            isPermalinkPage: !!ensureString(/*{block:PermalinkPage}*/true/*{/block:PermalinkPage}*/),
            isIndexPage: !!ensureString(/*{block:IndexPage}*/true/*{/block:IndexPage}*/),
            /*{block:PostTitle}*/
            postTitle: ensureString({JSPostTitle}),
            /*{/block:PostTitle}*/
            /*{block:PostSummary}*/
            postSummary: ensureString({JSPostSummary}),
            /*{/block:PostSummary}*/
            portraitUrl16: ensureString({JSPortraitURL-16}),
            portraitUrl24: ensureString({JSPortraitURL-24}),
            portraitUrl30: ensureString({JSPortraitURL-30}),
            portraitUrl40: ensureString({JSPortraitURL-40}),
            portraitUrl48: ensureString({JSPortraitURL-48}),
            portraitUrl64: ensureString({JSPortraitURL-64}),
            portraitUrl96: ensureString({JSPortraitURL-96}),
            portraitUrl128: ensureString({JSPortraitURL-128}),
            copyrightYears: ensureString({JSCopyrightYears}),
            isSearchPage: !!ensureString(/*{block:SearchPage}*/true/*{/block:SearchPage}*/),
            searchQuery: ensureString({JSSearchQuery}),
            safeSearchQuery: ensureString({JSURLSafeSearchQuery}),
            searchPlaceHolder: ensureString('{lang:Search Blog}'),
            noSearchResults: !!ensureString(/*{block:NoSearchResults}*/true/*{/block:NoSearchResults}*/),
        };

        root.tumblrData = {
            basicVariables: basicVariables,
            };
    })(this);
</script>

This creates a tumblrData attribute on the browser’s window object.

Sometimes the theme engine returns nothing for a particular variable if it’s not available. For example, if I made a post that does not have a title, the final root.tumblrData object will not have postTitle as a key. Sometimes the key will be available but the theme engine returned an empty value for it. For those cases, I created a helper method called ensureString() that turns those empty values into empty strings. Sometimes you might need a boolean value. In those cases, I’ll enter the conditional variables from the theme engine into the helper method to get the boolean value from it.

Once you’ve set up your initial state make sure that you place this script tag before the script tag that references the rest of your code that should be compiled and minified and uploaded through the asset uploader that the Tumblr text editor provides. This ensures that the tumblrData is accessible through the window object by the time the React app gets initiated.

tumblrData should look something like this:

const tumblrData = {
    basicVariables: {
        blogUrl: "https://mentalhealthquilt.tumblr.com/",
        copyrightYears: "2016–2017",
        customCss: "",
                description: "Mental Health Quilt",
        favicon: "https://68.media.tumblr.com/avatar_c402eedfb9d5_128.png",
        isIndexPage: true,
        isPermalinkPage: false,
        isSearchPage: false,
        metaDescription: "Mental Health Quilt",
        name: "mentalhealthquilt",
        noSearchResults: false,
        portraitUrl16: "https://68.media.tumblr.com/avatar_c402eedfb9d5_16.png",
        portraitUrl24: "https://68.media.tumblr.com/avatar_c402eedfb9d5_24.png",
        portraitUrl30: "https://68.media.tumblr.com/avatar_c402eedfb9d5_30.png",
        portraitUrl40: "https://68.media.tumblr.com/avatar_c402eedfb9d5_40.png",
        portraitUrl48: "https://68.media.tumblr.com/avatar_c402eedfb9d5_48.png",
        portraitUrl64: "https://68.media.tumblr.com/avatar_c402eedfb9d5_64.png",
        portraitUrl96: "https://68.media.tumblr.com/avatar_c402eedfb9d5_96.png",
        portraitUrl128: "https://68.media.tumblr.com/avatar_c402eedfb9d5_128.png",
        rss: "https://mentalhealthquilt.tumblr.com/rss",
        safeSearchQuery: "",
        searchPlaceHolder: "Search mentalhealthquilt",
        searchQuery: "",
        title: "Mental Health Quilt",
    },
}

Now we have the data that the theme engine gave us in a format that React and Redux can work with.

If you are new to these libraries, I highly recommend following the simple Todo App Tutorial that is on the Redux website. They do a wonderful job of explaining the process as you build the app.

Helpful Tips

Setting up a local server will make developing way faster than the current setup. If you’re using both the “webpack” and “webpack-dev-server” packages, in your package.json file under scripts you can place something like this in it:

In your package.json file

...
"scripts": {
    "local-server": "NODE_ENV=development webpack-dev-server --config path/to/webpack.config.js --port=3000 --inline --hot"
},
...

To run that script, in the terminal you will type this command:

> npm run local-server

In the Tumblr editor, be sure to replace your script tags referencing these external files like so:

<!DOCTYPE html>
        <head>
                <title>{Title}</title>
                <link rel="stylesheet" type="text/css" href="http://localhost:3000/path/to/prod/index.css">
        </head>
        <body>
                <div id="post-it-forward-root"></div>
                <script type="text/javascript">
                        // where the tumblrData gets created
                </script>
                <script src="http://localhost:3000/path/to/prod/index.js"></script>
        </body>
</html>

Once you run that script, it’ll enable live reload so that every time you save a .js_.css_.scss/etc. file, it’ll rebuild the assets and refresh your Tumblr blog for you. This is way faster than having to re-upload your assets every time you make a change, no matter how small. Just remember to return your script and style references to the uploaded assets when you’re done working. Localhost is only for development.

You could also add the Redux logger middleware to your project during development so that you can view how the state changes as you fire off different actions. For more information on how to set this up, the Redux Logger Github is a great resource.

Summary

Building a Tumblr theme using Redux and React is possible! Not only is there a workflow that makes development much faster, but it’s also a great way to flex your web development muscles. You can add more to the user experience of your Tumblr now that you have the world of JavaScript at your fingertips. Go forth and make some awesome themes!

Stay tuned for part 2 that will cover paginating.

- @0xmichelle

The Asset - Epilogue

Prologue / Part One / Part Two / Part Three / Part Four / Part Five / Part Six / Part Seven / Part Eight / Part Nine / Part Ten / Part Eleven / Part Twelve / Part Thirteen / Part Fourteen

A/N: I have no idea why I wrote this when I should be working on my unfinished series. This is just a tiny bit of fluff. No tags on this one.

Pairing: Bucky Barnes x Reader

Word Count: 648


The sun began to set over an expanse of quiet farmland somewhere in the middle of America. As evening slowly cooled the day’s summer heat, a chorus of cicadas and crickets increased in volume.

A lone stretch of pavement was the only road that reached the few farmhouses in the area. There wasn’t much traffic along the road, but on this particular evening, a blue vintage Volkswagen Beetle puttered its way toward the property that sat at the road’s dead end.

As the Beetle pulled off the road and onto the gravel drive, a young boy with a wide smile and a mop of curly brown hair bounded out of the farmhouse and down the wraparound porch’s front steps.

Keep reading

2

insp: x and true detective

Don’t ever follow the advice of someone who continues to devalue your worth. Don’t listen to someone who makes you think for a second you’re important and the next minute reminds of how everyone else sees you. Don’t take anything from someone who takes credit for your success when they barely know who you are. Your worth shouldn’t have a price tag. You’re a priceless being and make sure it stays that way. Your value should be in your character only. Your importance should not be limited to certain timings. You’re a timeless being. Your soul is yours and no one and I mean no one has the right to treat you like you’re an asset. You’re not a property to protect or a land to claim. You are a skyscraper and if they don’t see you for the masterpiece you truly are then walk away. No one should put labels on you or tell you what is right for you when they don’t even know what is right for themselves. Don’t you ever let them do that. Don’t ever lock yourself in. Once people sense your weaknesses or whatever they see to be a weakness, they lock you into a cage. They make you believe you are nothing without them but you are a freaking star. Don’t you ever forget that. You are a star and they’re only in your way because they don’t want to see you shine without them but you can and you will.
—  DesertWinds

     TinkerQuarry is an RPG about a girl trapped in an uncanny plane of existence called “The Dollhouse”. In this Dollhouse there are toys, all of which seem to be sentient and intelligent. These toys are convinced that you alone were their owner, save for one. He tells you that you are not (what you named your character) but someone called “Adeline” and urges you to escape. 

 This game is currently a demo that has been worked on since July 2015 via RPGMaker2003. All assets were created by myself, my soundtrack composer, or Royalty Free items (some music and RTP animations only). From our tests, we see that it does work on most OS. 

 The full version of the game should be released around the summer of 2016


Support for this game would be very much appreciated! I have poured my heart and soul into this project since its flimsy beginnings. Its no fantastic breakthrough of an RPG, sure, but if you’d like to keep up with its progress feel free to give the tag ‘TinkerQuarry’ a look; or follow this blog.

Reblogging this post would be nice as well.

The Sims 4: New Game Patch (June 23rd, 2016)

Remove all MODS and Custom Content before updating your game

Update: 06/23/2016 – PC Version 1.20.60.1020 / Mac Version 1.20.60.1220

How do Simmers! Just about the end of June… Summer is in full swing… what better time than now for a release?!

What’s New?

Did you see something? Over there… peeking out from under the bed. Not if you aren’t a kid!

Children however might find themselves awakened at night to the eerie sounds of a monster lurking beneath their bed. Fear not brave ones, a quick spray of monster repellent will get the pesky critter to creep away (you can also pre-spray like any properly working repellent).

But… why be afraid, when you can be friends! Children can spend a little time trying to get to know the bed bound beastie, and maybe make a new friend.

Of course, perhaps you just don’t want your kiddies to worry. Place “Coolala, The Defender Wall Light” to keep the monster at bay, and sleep tight, have a good night…. and know that the Monster Under the Bed is afraid of sunlight.

General Issues…

  • We fixed an issue that left our elders looking a bit more daw… er…ly morning of the dead than we wanted them to be… their age lines were quite pronounced. Elders should look less zombie and more walking alive.
  • The Days Until Age Up information in the Simology panel will now display no matter where you hover over the age bar.
  • Left side… right side… slightly off center… the Sims’ days are always numbered.
  • Do you think the Sim knows about their age countdown?
  • Do you think it’s Logans Run’esque, Terminator 2’ish, or maybe Paycheck’ian…
  • “Eat” will no longer be called “Eat and Learn Experimental Food” on foods that are not experimental foods.
  • We fixed an issue with some assets that were incorrectly tagged as masculine or feminine, or that had their tags forgotten altogether. Specifically:
  • We fixed an issue that prevented Sims from being able to hire a mixologist to tend bar.
  • …not that anyone should reference Paycheck. But you know what, I liked Paycheck. There, I said it, and now you know.
  • Also… quotations used “incorrectly” have been known to cause “confusion” and lead to the belief that “what the writer is writing” is intended sarcastically.
  • ymhair_Sp05LongFront is now tagged as masculine
  • ymTop_SP05Basic is now tagged as masculine
  • yfAcc_EarScoop is now tagged as feminine
  • yfBottom_EF10SwimBikiniMetalFront is now tagged as feminine
  • They are back, they are mixing…
  • …‘ologist’ refers to a person who studies or has knowledge of a particular kind of science.
  • And as much as I hoped… a tribologist does not actually study tribbles.

Spa Day…

  • Mud bathing Sims will no longer appear with random face paints.

Dine Out…

  • The hair ym_GP03SlickBackWavy will no longer have a bald spot on the back.
  • Net profit information will no longer improperly display when opening the View Last Finances report in your restaurant menu.
  • We addressed an issue (Hello issue) that could cause restaurant advertising to have little or no effect upon the number of customers that would come to visit your establishment.
  • Implants are complete, all hair is 100% natural… no chemicals or artificial sweeteners have been added.
  • We fixed an issue that was causing the totals to add incorrectly each time the dialog was viewed.

Get to Work…

  • We fixed an interface issue that made it appear retail stores would remain open when the Sim left the lot.
  • Patients should no longer reset when their doctor attempts to examine them or take their temperature.

Thank you again for your feedback, support, and issue reports – all of which keeps us moving along!

-SimGuruGnome