My Hive Posts

    Written by Coding Defined who lives and works in India building useful things. You should follow him on Twitter

    [Smartphonephotography] Source of Light

    January 20, 2018
    smartphonephotography-source-of-light

    This week #smartphonephotography theme is Light, so here I am with one of the beautifully designed Bulb which is actually a source of light. ![IMG_20180118_194253.jpg](https://steemitimages.com/DQmSjsezRkrpzyzPgxcyA7Q4inBfvVsB8pBvFQigk5a7KYe/IMG_20180118_194253.jpg)


    #### Camera : Nokia 6, No Editing
    ####
    Follow @codingdefined

    $5K Bounties! Urgent Tasks Before KickStarter - React Devs

    January 20, 2018
    usd5k-bounties-urgent-tasks-before-kickstarter-react-devs

    ![utopian-post-banner.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516449865/t0gmipslwoa6htmribn7.png) #### Details Utopian.io is looking for 2 or more React Developers to join urgent development streams, necessary ones before launching the Kickstarter campaign. Bounties available. ## Moderation Functionalities - 1 React Dev In order to be ready for the possible pick in contributions after launching the Kickstarter campaign, Utopian.io is looking to improve the moderation system. ### 1. Cross-Editing. $500 worth of Steem + Utopian upvotes Moderators should be able to edit: - a. Repository - b. Categories, even from contributions to task requests. - c. Tags. The API already supports cross-editing. The functionality needs to be integrated in the contribution details, StoryFull component by integrating inline editing functionalities for mods. ### 2. Quality Slider + Questionnaire: $800 worth of Steem + Utopian Upvotes On every contribution (not task requests) Moderators should fill a short questionnaire, made ad hoc for every contribution category. By filling the questionnaire a quality slider will be set. The questionnaire should make 80% max of the quality slider, while the remaining 20% can be set freely by the Moderator. The Utopian bot vote will then use the quality as a main factor for calculating the voting weight. - Requires integration with API and edits on the API. Another developer will take care of the API changes. - Moderators should never be able to approve or reject a contribution without first filling the questionnaire and consequently only after having set the quality slider. - ***Related Task: Moderation should not also be able to reject or accept a contribution without having successfully added a comment before.*** The functionality needs to be integrated in the contribution details, StoryFull component, on the moderation modals/alerts when accepting or rejecting a contribution. ### 3. Pending Timeout: $450 worth of Steem + Utopian Upvotes In the contributions details a moderator should have a button to set the contribution as pending. A contribution should be pending for no longer than 1 hour. If the moderator does not either accept or reject a contribution within an hour, the contribution will be set to pending false. - Requires integration with the API. A node developer will take care of that. - On the contribution details the frontend should be constantly checking if a contribution suddenly became pending and alert another moderator that may be viewing the same contribution that another moderator is on it. ### 4. Moderators Activity: $650 worth of Steem + Utopian Upvotes On every profile of every enabled Moderators, there should be a tab to see which contributions a Moderator has rejected/accepted/pended, sortable by date "since" and "until" and by status rejected/accepted/pending. - The API should be ready for that. May still require further improvements. #### Components Edit Post, Moderation functionalities on StoryFull component, API integration #### Deadline Monday 5, February 2018 ## Github Issues and More - 1/More React Dev/s There are some minor and major bugs affecting the Utopian.io Frontend. We should clean the github issues feed and do some more enhancements. ### 1. Clean Github Issues: $1000 worth of Steem + Utopian Upvotes - Clean the Github issues on the frontend https://github.com/utopian-io/utopian.io/issues - You may need help in cleaning this feed and share the bounty. ### 2. Open Website to Public: $300 worth of Steem + Utopian Upvotes Utopian.io is now only accessible if you are logged in. The site should be open back again and only redirects to join.utopian.io if the user logs out. - Requires checking SEO issues. - May require changes to the API. A node developer will take care of that. ### 3. Cookies, TOS and Privacy Acceptance: $500 worth of Steem + Utopian Upvotes Utopian.io will soon become a SRLS, the equivalent of a LTD. We need to make sure users accept Cookies. We also need to make sure the users should accept terms of service and privacy regulations if they have not done that yet. - TOS and privacy policies will be given to you in specific pages. - Cookie acceptance should happen be on join.utopian.io and utopian.io. The cookie plugin should remember if the user has already accepted the cookie policy. - Will require changes in the API. One node developer will take care of that. ### 4. Login Redirect: $150 worth of Steem + Utopian Upvotes When logging in a modal should show up and explain briefly what SteemConnect is and redirect to SC within 3 seconds. - Contents to write in the modal will be provided to you. ### 5. Wallet From Busy.org: $200 worth of Steem + Utopian Upvotes - Integration of the wallet from Busy.org. Utopian is a originally a fork of Busy.org. ### 6. FAQ: $350 worth of Steem + Utopian Upvotes Completely refactor the FAQ page using an accordion. - Requires integration and changes to the API. A node developer will take care of that. - Contents of the FAQ will be provided by the backend in the form of an array of objects. #### Components Landing join.utopian.io, Login / Logout Procedures, Auth verification on front and API, New sections for TOS, Privacy Policy, Wallet, FAQ. #### Deadline Monday 12, February 2018 #### Communication Please get in touch with us on Discord https://discord.gg/Pc8HG9x and mention or DM @elear.


    Utopian Community-Driven Witness

    We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

    Utopian.io is the first Community-Driven Witness. Every decision will be taken as per the consensus of the entire community using our public Discord server and soon via a public voting system.

    mooncryption-utopian-witness-gif


    ### Top Sponsors

    @freedom - Vote Witness

    @misterdelegation

    @ned

    @transisto

    @wackou - Vote Witness

    @xeldal - Vote Witness

    @lafona-miner - Vote Witness

    @cnts

    @steempty - Vote Witness

    @thecryptodrive - Vote Witness
    ### Top Moderators

    @ruah

    @espoem

    @knowledges

    @arie.steem

    @elear

    @damla

    @mcfarhat

    @rosatravels

    @omeratagun

    @manishmike10


    Posted on Utopian.io - Rewarding Open Source Contributors

    ColorChallenge - Friday Blue - Glimpses of Train Journey

    January 19, 2018
    colorchallenge-friday-blue-glimpses-of-train-journey

    These are the few glimpses of a Train Journey in India. ![IMG_20180110_113924.jpg](https://steemitimages.com/DQmcW3zEU5GgZrYahn5f8KD2u9aySRxbW5dPHd5wNqaj67z/IMG_20180110_113924.jpg)


    ![IMG_20180110_091654_2.jpg](https://steemitimages.com/DQmeToMwfxC1byaDdx2AAf86xEPnsj8w4jPA8MhbqXYuB7F/IMG_20180110_091654_2.jpg)
    ![IMG_20180110_113903 (1).jpg](https://steemitimages.com/DQmchhb64anzcS3uYr9ED5z1sCYS6NfnMt2Tc4XyhyqYeyc/IMG_20180110_113903%20(1).jpg)
    ![IMG_20180110_113858.jpg](https://steemitimages.com/DQmWjHzXJF8otFrZnS1zRqM5ZDMFa4NuqUGf9hivLnE47Gw/IMG_20180110_113858.jpg)
    ![IMG_20180110_091623_2.jpg](https://steemitimages.com/DQmXwnpJoZbi2sU32PZgpd7xAwrqitphyXC5NwwncJijGFT/IMG_20180110_091623_2.jpg)
    ![IMG_20180110_113902.jpg](https://steemitimages.com/DQmaotwhFtX8g8xxvz2SzxrHuDn2Z1t6duPnTiAdvkJ8uej/IMG_20180110_113902.jpg)

    ColorChallenge - Thursday Green - Sand Art

    January 18, 2018
    colorchallenge-thursday-green-sand-art

    If you would have visited any beach you might have played with the sand but have you ever seen live sand art in the making. I have seen it in my recent visit to a beach and sharing some of the art photos all made by hand. ![IMG_20180108_172424.jpg](https://steemitimages.com/DQmfKt61DDcBbiZWqvpUukayugFCbWLZEFZPHjg7U5X9o6L/IMG_20180108_172424.jpg)


    ![IMG_20180108_172416.jpg](https://steemitimages.com/DQmSw4KSUUxv1E6yGeBDBwnRK6z4svvUmV3pjWydBScah3y/IMG_20180108_172416.jpg)

    Digital Art using PicsArt Software

    January 17, 2018
    digital-art-using-picsart-software

    So just like normal days I got a Photo of Sunset and then tried to do something different with the photo. That is by modifying it with PicsArt Software. You get tons of options but the below one I liked the most. ### Original Photo ![IMG_20180117_175756.jpg](https://steemitimages.com/DQmdmAeDyiZoVt61nW1VqvBY9wdqV2zWebr3TDYfkZ18Kcz/IMG_20180117_175756.jpg) ### Modified with PicsArt ![PicsArt_01-17-06.00.54.jpg](https://steemitimages.com/DQmSwPanhZ8V8W5nug8dpL1GBCnyNyXJytumnin3oq8BJm5/PicsArt_01-17-06.00.54.jpg)

    Getting Started With Gatsby.js - Part 1

    January 16, 2018
    getting-started-with-gatsby-js-part-1

    #### What you will Learn In this tutorial you will learn the basics of Gatsby - A Static Site Generator based on React. Other things you will learn is - Basic File and Code Structure of Gatsby - Importing packages - How to Create Component and Use it in other file - How to Create Link from One File to Another #### Requirements - Node.js and NPM installed on your System - Know basics of HTML, CSS and JavaScript, though not mandatory #### Difficulty Basic #### Tutorial Contents Recently I have started exploring React which is one of the hottest technology in the market right now. One of the reason of learning is then I can contribute more on teh bugs in Utopian, as my knowledge is limited in React. So I have tried to create a simple project using create-react-app npm package but somehow that is not working on my system. I was looking for alternative and found out that Gatsby is one of the alternatives of it. The only issue with Gatsby is that it only used for Static Site Generator. I thought of giving it a try since it might be a new thing to learn. The advantages of Gatsby includes its fastness, you need not have to think about Webpack (React thing) because its build inside the gatsby itself, easily integrated with APIs and Database. So Let's Get Started with Basics of Gatsby Installation : Installation can be done from npm using the command `npm install --global gatsby-cli` which will install your gatsby globally. Once done you can start your new Gatsby project by writing gatsby new gatsby-site. Once done you need to go inside gatsby-site directory and type gatsby develop which will open the development browser at localhost:8000 as shown below ![gatsby1.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516105171/zfs1z0rf4q2makyzjlvr.png) Our Directory Struvture looks like below where all the code resides in src folder. Layout is the main folder where we have the layout of the entire site. It contains index.js file which is nothing but a starting point of your React Application as shown below ![gatsby2.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516105435/f1x6hsbmruw8ofeqxjny.png) ###### layout>index.js ![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516105907/q3ykobkw2c0fcos2ew8k.png) Now if you are new to React like me its better to go each and every line and see what it does. The first five lines is just for importing all the files or packages we will need in this file. We will come to that file usage when we reach that info. Next we are creating a const variable which has some code written inside it. One thing to note here is that React uses JSX that means it combines your HTML with JavaScript and tightly coupled them. TemplateWrapper is nothing but a React Component which holds the layout of the Gatsby application. Just with the start we are using Helmet component(imported as react-helmet) which is used to attach all the header meta information like description, keywords to your generated HTML file thus known as document head manager for React, you can get more information here https://github.com/nfl/react-helmet. Next we are attaching the Header component inside the TemplateWrapper using

    whose code can be found under components > Header > index.js (which will take a look later). We are also styling our page inside the template itslef so that it remains inside it if we are using this component anywhere else too. One more thing to note here that you need to invoke the function (children ()) within the Component itself so that it know where all the HTML files to be inserted. Next is to export the TemplateWrapper so that any other file can use it as a component. As I said before we will go through the header component as well. So Header Component Looks like below : ###### component>header>index.js ![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516105987/u8uuyfrrfnhyhm7tjhyv.png) Same like TemplateWrapper you need to first import all the required package and then create the component having HTML and Javascript as well as CSS. One think to note here that we are using one more component called Link (gatsby-link) which is a package by gatsby to easily create links inside the component itself which will take the URL structures you are using. Now our structure is Done with the Template having Header and Layout. Next thing is to create the pages. The main page looks like below ![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516106031/pyur8rcxhth57mh23l0e.png) Where we have a component named IndexPage containing JSX temnplate code and then we are exporting it. If you see closely we are also creating a link which will go to Page-2 where the page 2 looks like below : ![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516106058/kpswnljj9v4bhhieuhur.png) You can both the files looks similar in implementation having different wordings. This way you get started with Gatsby Static Site Generator. In our next post we will extend our work on creating a Simple Static Website. Note : I need to attach pictures of the Code as Code Formating Not Working Properly

    Posted on Utopian.io - Rewarding Open Source Contributors

    Color Challenge - Tuesday Orange - Orange Fish

    January 16, 2018
    color-challenge-tuesday-orange-orange-fish

    Today I am sharing few photos of two Orange Fish (might be golden in color). They were like so fast moving here and there that I cannot get a clear shot. I tried my best to take some of them though. ![IMG_20171229_192014.jpg](https://steemitimages.com/DQmUdpSTWUur1mFZgGUtemGE5ZozAR8ZHiWdEyyvgNsurRK/IMG_20171229_192014.jpg)


    ![IMG_20171229_192005.jpg](https://steemitimages.com/DQmYdAeR89Sn6LB5BFkxjQhcBYCWWwHAKuk1EdhdAVYAdXj/IMG_20171229_192005.jpg)
    ![IMG_20171229_194205.jpg](https://steemitimages.com/DQmYxkgtD9Wx1seiemNSAxQodsp4khGPMPkvvEYrTqw4qSs/IMG_20171229_194205.jpg) Camera : Nokia 6, No Editing

    When you love watching the SKY

    January 15, 2018
    when-you-love-watching-the-sky

    Yesterday was one of those days in Bangalore where the SKY was rarely beautiful. It was filled up with clouds where the clouds were so synchronized that it look like they are holding their hands and going for a walk. It was evening so Sun was also setting where some of the sun rays peeping through the clouds. ![IMG_20180112_170159.jpg](https://steemitimages.com/DQmWYYu7tkziJBF4mXAHK7SF6rMemm28iATaw9JKTeyC7Kq/IMG_20180112_170159.jpg)


    ![IMG_20180112_170211.jpg](https://steemitimages.com/DQmezYGvH5jgjQDtBsYFcbGNg19YSP1wbCQcRM1LL4cVrQN/IMG_20180112_170211.jpg) Camera : Nokia 6, No Editing

    Color Challenge - Monday Red - Big Santa

    January 15, 2018
    color-challenge-monday-red-big-santa

    Though its little late, but I would like to share Big Santa which arrived Bangalore in the Month of December. The height of it was easily 20 feet or might be more. It was fun watching children's surprised to see that big santa. ![IMG_20171225_154727.jpg](https://steemitimages.com/DQmQiCC3xiehehjnvYPBJjKMdhX5cHgpDu6z7B49Up2Mx5M/IMG_20171225_154727.jpg)![IMG_20171225_154724.jpg](https://steemitimages.com/DQmVnkTPoG69JhGr4CD4xhs4RzfFL6ewDcUmcR6XBDqXwNt/IMG_20171225_154724.jpg)

    BeautifulSunday and GoldenHourPhotography - Sunset in Bangalore, India

    January 14, 2018
    goldenhourphotography-sunset-in-bangalore-india

    Again one more Sunset photo, as I love Sunset :P. This image was taken by my Nokia 6 Smartphone in Bangalore, India. ![IMG_20180112_183105_2.jpg](https://steemitimages.com/DQmTx4ZJkqq1NXj7dyGuwxoq1PUCAjtGFxKwAzezCWBKXuP/IMG_20180112_183105_2.jpg) ###

    Follow @codingdefined