Yesterday I have visited to the Isckon temple of Bangalore. This time at the evening, thus there were lightnings all around. This is the whole temple view. There is actually three temples inside it.  This is the front view "Sri Radha Krishna Temple" a.k.a. Iskcon temple.   Photography inside the temple is prohibited but there are few points where actually you can take photos. Here in this photo the view is of going up to the main temple. 

I am back with my Color Challenge photography. Indigo flowers are very hard to find, but I have spotted it shoe how. The flower has two distinct colour, the Indigo as the primary colour as well as the yellow colour.

So I was checking Contributions made by everyone out here in Utopian and found out that @deveerei called developers to fix some issues "[Calling on Developers for this task](https://utopian.io/utopian-io/@deveerei/task-for-developers-color-changes-help)". Its great that Utopian is growing so fast that when you call for task assignment anyone who is not working on anything can grab that task and start working. In one of the line of @deveerei post he said that >I only know basic CSS and HTML which gives me the trouble of finding the proper places in the Github Repository to edit to show those changes on the colors in the game. So my tutorial is for @deveerei as well as everyone who wants to know how to find details if you want to change anything. @deveerie was kind enough to provide us the [test site](https://deveerei.github.io/OhSteem/), so just head over that site, you can see a very nice colourful website. The task which he has asked is to change Red and Blue into Teal and Midnight Blue. So lets find out what are the classes in CSS we need to change. When you are in the page just hit F12 or right click and do Inspect Element you will see a window like below.  Next is to find out the exact element. For that go to the left hand corner where you will see something like below  Click on that and click on any element on the web page to find out that element. Once you do that you can see all the classes attached to that element, now just go to the right hand side of the Inspect Element window you will see a list of classes and all the details about that. Now as you can see in the below GIF, I have actually found out the element and then tried to change its colors. Now you have to find out that exact class in your css files and then change it.  The CSS files which can be updated is https://github.com/deveerei/OhSteem/blob/master/css/style.css. I am not going to show you more as there are developers working on it. But just that I wanted to write this for @deveerie so that if there is any urgent work he can actually look into it.

As you can see in the below picture that a thin line of separation between the clouds. It feels like someone is watching us through the sky. It was the time of sunset as well as it was cloudy, just a picture perfect moment. ### Original Photo  ### By Zooming In  Camera : Nokia 6

Fixing issue #74 in Utopian - Projects showing on different profile ### Analyzing the Bug Sometimes it is not enough to send only the status 404 as a response because frontend expects some message along with it. If the message is not supplied, frontend waits for the response for some time and then finally at the time out it says "No Message Supplied". In that waiting period, if you have come from any other's projects section, the projects of that person will be shown in your profile because front end still waits for the server to get appropriate message. ### Fixing the Bug Fixing Bug is relatively simple, it is just that we need to add a JSON message along with the status as shown below ###### For 404 Status ``` res.status(404).json({ message: 'Cannot find project for this account' }); ``` ###### For 403 Status ``` res.status(403).json({ message: 'Server refuses to give details of the account' }) ``` Commit : https://github.com/utopian-io/api.utopian.io/pull/28/commits/d05cfc53c7234ce864daf1677f8a0956d7440752 Pull request : https://github.com/utopian-io/api.utopian.io/pull/28 Validation 

# How to Learn Programming - A Beginner's Guide  In the last week, I have actively joined the [Utopian.io Open Source Movement](https://utopian.io), and learned that a lot of people are seeking to join the Open Source world via Utopian.io. Among those Utopian enthusiasts, both experienced and complete beginner programmers co-exist. For a beginner programmer, it can be utterly daunting to research where to begin with Open Source programming. There is just so much information online: so many programming languages, so much terminology, frameworks, libraries, sub-communities... Where to start if you are an aspiring Open Source beginner-programmer? Do you recognize this? **Then this article is for you!** Look at this post as your guide on becoming a true Open Source developer, by saving you hundreds of hours on trying to find your way. You won't learn how to program by just reading this article of course, but it will get you on the right track and up-to-speed in no time! I wish you a lot of success and fun learning how to become "An Open Source Programmer"! ## The basics ### Learning disclaimer Please understand that learning how to program can be both fun and tough. Within about 10 hours you become familiar with programming concepts, at 100 hours invested you get proficient, after 1,000 hours you might be considered 'good' in programming, and after 10,000 hours you might be considered an 'expert' even. How good you like to become on your programming journey is therefore largely dependent on how much time you are willing to invest. Learning how to program is like learning any skill, there are no "short-cuts" _(as of yet, who knows what AI will bring to the table within 25 years from now?)_. ### Basic set-up To begin coding, you of course need a code editor. Lots of code editors exist, but I recommend using either the [Atom editor](https://atom.io/), or the [Microsoft Visual Studio Code editor](https://code.visualstudio.com/), or the [Sublime Text editor](https://www.sublimetext.com/). Depending on your type of computer Operating System (Windows, Mac OS, or Linux), different code editors exist, but the ones I just recommended have all kinds of nice tools embedded (such as [syntax highlighting](https://en.wikipedia.org/wiki/Syntax_highlighting) ), and are extendable via [plugins / extensions](https://en.wikipedia.org/wiki/Plug-in_(computing)) to suit your very needs! I advise beginner programmers to start their programming journey with web development, because the underlying techniques are widely applicable. Therefore, you also need to install a modern web browser such as [Google Chrome](https://www.google.com/chrome/browser/desktop/index.html), or [FireFox Developer Edition](https://www.mozilla.org/nl/firefox/developer/) or Safari (by default installed on a Mac). This way, what you code inside your editor, you can look at within your browser! Your code doesn't even have to be online, it can run from just your own computer to begin with!  ## Step 1: Learn HTML5 and CSS3 **HTML** (short for _Hypertext Markup Language_) is the standard markup language for building web pages and web applications. And HTML5 is the fifth (and current) major version of HTML. HTML was first created / proposed by [Tim Berners-Lee](https://en.wikipedia.org/wiki/Tim_Berners-Lee) and therefore Tim Berners-Lee is regarded as the inventor of the web as we know it today. HTML is used both for _structuring_ a web page and to _hold the page content_. Originally (HTML1) HTML was used to stylize a web page as well, but nowadays people use **CSS** as a complimenting language for styling a web page (choosing colors, fonts and all kind of lay-out settings). CSS is short for _Cascading Style Sheets_, and CSS3 is the third (and current) CSS version. ## Why HTML and CSS first? Why do I strongly advise you to begin with HTML5 and CSS3? The answer is twofold: **-A-** mastering HTML and CSS is relatively easy to accomplish and gives you an opportunity to get a job as a front-end developer all around the world, being surrounded by other developers to learn from for your programming journey, and **-B-** HTML and CSS both lack _control flow__ which can be handled via more advanced programming languages discussed in the following steps (you can combine your HTML and CSS skills with new skills in languages such as JavaScript and PHP). ## How to begin studying HTML and CSS? There are two approaches to begin learning HTML and CSS. The first is to just experiment _from scratch_ on your own computer: create a new folder on your computer Desktop and call it "website", and inside that "website"-folder you add one new folder ("images") and two files ("index.html" and "style.css"). Just open the entire "website"-folder inside your **code editor**. And then go to [W3schools](https://www.w3schools.com/) to learn the basics! Just try to create web page stuff using your "index.html" and "style.css" files! The second approach is to enter a (free) online course on HTML and CSS. You could try [CodeCademy](https://www.codecademy.com/) for free as an introductory course. There are numerous other online courses but I find [CodeCademy](https://www.codecademy.com/) very beginner-friendly.  ## Step 2: Learn jQuery (the most famous JavaScript library) If you've succeeded in "Step 1", your next programming goal would be learning jQuery. In short, both jQuery and JavaScript are used to manipulate the _behaviour_ of your web pages. For example you can program a nice animation via jQuery / JavaScript when somebody clicks on a button, or a _visual slider_ or it can load new data when available without needing to reload the page, or ... etc. etc. etc. ### Why learn jQuery so soon? Many advanced JavaScript developers seem to "frown upon" using jQuery, but I disagree: I even suggest learning jQuery **before** learning JavaScript, although jQuery is "just" a JavaScript library written in JavaScript itself. What I think is so cool about jQuery, is -1- its _selector engine_ and -2- its abilities for _DOM traversal & manipulation_ and its _event handling_. This is probably new terminology for you, but it will all make sense when you start working with jQuery. Via the jQuery _selector engine_ you can easily target which _HTML elements_ you want to manipulate: it works just like you learned about how CSS works!!! ### Where to begin studying jQuery? You could study the jQuery documentation over at [https://jquery.com/](https://jquery.com/), or take a jQuery beginner course over at [CodeCademy](https://www.codecademy.com/), or learn via [W3Schools](https://www.w3schools.com/), or use other resources. Just begin your jQuery journey and try to achieve something simple (like changing the backgroundColor of a button after clicking it); do **not worry** about whether or not your code is useful because while learning you will get better and better along the way. Baby steps...  ## Step 3: Experiment with (local) Wordpress development If you've been working your way through steps 1 and 2, you've learned a lot already! But until now we've only talked about _client side software development_. Next up on your programming journey is a bit of _server side programming_, and for that, I recommend beginning with downloading and installing [Wordpress](https://wordpress.org/). Wordpress currently is the most-used open source web content management engine (~25% of all websites in the world today were built using Wordpress). ### WAMP / LAMP / MAMP In order to install Wordpress on your local computer, you first need to locally install a _webserver environment_. Because Wordpress uses the language **PHP** on the _server side_, you need a running webserver and an instance of [MySQL](https://www.mysql.com/) on your local computer. If your on Windows you can install [WAMP](https://sourceforge.net/projects/wampserver/), if you're on Linux try LAMP, and on a Mac you can use [MAMP](https://www.mamp.info/en/). ### Wordpress Theme development Once you have everything installed, you're ready to begin adding _server side_ functionality to your test-website project! The HTML / CSS / jQuery document can now evolve into a Wordpress _template_ and via combining multiple templates you end up having built your own _Wordpress Theme_. You can learn a lot about how Wordpress functions by studying various Wordpress Themes found online, furthermore you could install some [Wordpress Plugins](https://wordpress.org/plugins/) and study their code, and of course do study the [Wordpress Codex](https://codex.wordpress.org/) containing all kinds of Wordpress technical documentation. ### MySQL database Without actually studying the MySQL API, by developing your own Wordpress Theme, you have in fact been interacting with the MySQL database! In this database, your website (test-) contents are now stored as _Posts_. You can observe and _query_ this database using a tool like, for example, [phpMyAdmin](https://www.phpmyadmin.net/). There's a lot to learn about how to query MySQL, which is a _Relational Database Management System_!  ## Step 4: Learn some more PHP PHP is not just used by Wordpress, but it is a programming language on its own! PHP's most recent iteration is PHP7. PHP was originally created by [Rasmus Lerdorf](https://en.wikipedia.org/wiki/Rasmus_Lerdorf) to quickly develop dynamic HTML. PHP may be regarded as _a framework of itself_. You can write PHP in multiple ways: it supports procedural programming and object-oriented programming for example (and imperative, functional, reflective). PHP is kind of like a huge toolbox with lots of different tools. **Nota bene**: How much time you should spend at learning PHP is dependent of your programming goals. PHP became very popular around the year 2000 and onwards, yet it's (mostly) used for server side web development alone. If you plan on programming other types of Open Source software, learning PHP might not be the most future-proof language to dwell upon.  ## Step 5: Study client-side JavaScript (JS) In "Step 2" we've talked about jQuery somewhat, and I mentioned jQuery was just a JavaScript library (lib) with some handy-dandy tools embedded. But we haven't talked about _vanilla JavaScript_ development yet! The cool thing about JavaScript, which was first created by [Brendan Eich](https://en.wikipedia.org/wiki/Brendan_Eich), who by the way also co-founded [Mozilla](https://www.mozilla.org/), is that it runs in your web browser! There is so much to say about JavaScript, it would be impossible to include it all in this blog post. At its core, you could just begin understanding JavaScript thinking about it as an _interpreted language_ used to make web pages interactive. ### Popular JavaScript libraries and frameworks We talked about jQuery as being a beginner-friendly JavaScript library before, but in the last few years, especially after Google released its [V8 engine](https://developers.google.com/v8/), things began to really evolve very quickly in the JavaScript world. Lots of libraries and frameworks were developed on top of JavaScript, such as [jQuery](https://jquery.com/), [ReactJS](https://reactjs.org/), [AngularJS](https://angularjs.org/), [VueJS](https://vuejs.org/)... I could go on for ages just mentioning everything, it's mind-blowing actually how much is out there. And if you're a JS beginner, where to start? Please understand, if you've come this far, you will have also gathered enough insights which libraries and frameworks might suit your needs best. Some of it is also just a matter of preference. ### GSAP - GreenSock Animation Platform I want to dedicate a special bit of extra attention to [GSAP - GreenSock Animation Platform](https://greensock.com/gsap). Although other tools exit for website animations, GSAP is relatively unknown yet in a league of their own. If you want your programming journey to lean towards designing and developing animations, GSAP is **the tool** for you!  ## Step 6: Study server-side JavaScript (nodeJS) Learning JavaScript is not just interesting for _front-end developers_, but since a couple of years also for _back-end developers_, or both: _full stack developers_. Because now, ever since Ryan Dahl created [NodeJS](https://nodejs.org/en/), it's possible to not just use JavaScript as a client-side programming language, but on the server as well! NodeJS was also built on the [V8 engine](https://developers.google.com/v8/) and uses a _non-blocking_ and _event-driven_ I/O model. It's "just" JavaScript, but using _asynchronous_ code via _callbacks_, although using _Promises_ and _[async/await](https://ponyfoo.com/articles/understanding-javascript-async-await) a smart JS programmer can avoid "callback hell". ### NPM NodeJS features [NPM](https://www.npmjs.com/) which is a package manager / ecosystem containing all sorts of NodeJS Open Source libraries. What's in there, if you were unaware, is also mind-blowing. Tools like [browserify](http://browserify.org/), [Grunt](https://gruntjs.com/), [Gulp](https://gulpjs.com/), [Cordova](https://github.com/apache/cordova-js)... the list just goes on and on and on! **Nota bene**: to conclude on both client-side and server-side JS development, there is a lot of momentum regarding JavaScript. If you are (relatively) new to programming, then _mastering_ JavaScript seems to be a good choice!  ## Step 7: Register at, and start using Github.com If you want to be an Open Source web developer, you need to know and use [GitHub](https://github.com/). It's seen best as both a development platform and a software code hosting environment, where almost all Open Source Software code can be found. You can just use the code found on GitHub, but as an aspiring Open Source Software developer of course you also like to contribute! And now - since @elear founded [Utopian.io](https://utopian.io) - you can even get rewarded for contributing to GitHub (= collaborating on Open Source projects together with other developers) and letting the Utopians know about it! ### How does GitHub work? To test things out, you can first create a repository, which is used to organize one single project. You might want to add a README file, with information about the project. Next create a Branch. Branching is a way to work on multiple versions of a code repository. The default is called a "master branch". If you changed / upgrade your code, you need to _commit_ changes, and add a short description explaining what the change is about. Then, open a _Pull request_: you’re proposing your changes and requesting that someone reviews and pulls your contribution, and merges your contribution into their branch. (While just testing, you can merge your own pull request of course.) Did you do something useful on GitHub by successfully adding a contribution? **Wowzers! Then you just made yourself a real Open Source Dev!!!**. ## Step 8: Deploy your Open Source project online If you've created a very promising new Open Source project, you of course want it to succeed! You need your own website for that as well (which of course by then is just **no problemo** for you to create!), and you could host your Open Source project website at numerous hosts. One hosting platform I'd like to mention here is [Heroku](https://www.heroku.com). Heroku is a cloud platform using _managed containers_ (Docker?) for deploying modern web applications. You as the project developer deploy your application, which then runs inside a container called a _Dyno_ and you can manage and upscale your hosting environment as needed over time! So (almost) for free to begin hosting your app, and upscalable once it becomes popular.  ## Further programming journey steps You can go any type of route at programming. I just tried to _guide_ aspiring Open Source developers on a safe path used by many, many experienced Open Source developers around the globe. I haven't in-depth covered other modern interesting programming languages, such as [GoLang](https://golang.org/), [Elixir](http://elixir-lang.github.io/), [Python](https://www.python.org/), but rest-assured: those are well-woth checking out as well! In due time though: baby steps.... ### Did you like this blog post? Would you like me to continue these lengthy posts (because they take me quite some time to write actually!). What are you planning on developing first using your new Programming SuperPowers? Let me know, via the comments, or over at steemit.chat, or of course over at the Utopian Discord Chatserver! I'm @scipio over there as well! Cheers and see you! :-)

Fixing Issue #75 - Projects list displays private projects by @inertia ### Analyzing the Bug When we search for the user repository it gives all the information about the repo along with the information that it is a private repo or public repo. It actually has a boolean field (true and false). If it is true that means it is a private repo whereas if it is false it means it is a public repo. So we need to show only public repository in the user profile and not private repo.  ### Fixing the Bug To fix the bug we need to check if the repository is not private using flag `(private === false)`. So in the below code at first we are checking if the repo owner id is the github account id and also if the repo is private or not. `res.json(repos.filter(repo => repo.owner.login === user.github.account && repo.private === false));` Commit : https://github.com/utopian-io/api.utopian.io/pull/23/commits/ad0911f03fd1c5e5b6db47e80a0d2df433271556 Pull request : https://github.com/utopian-io/api.utopian.io/pull/23 

Utopiian-io scam in steemit.chat asking for money THIS IS NOT UTOPIAN.IO!!!!!!!!!!!!! Do not give this person money! Please resteem and upvote, I will give all liquid rewards to the REAL utopian.io

Fixing Issue #67 of Utopian-io - there was a bug posted by myself that Github Repository is going out of the area.  ### Analysing the Bug There is nothing much to analyze the bug because I know that we are not doing the word-wrap for the repository name. ### Fixing the Bug To fix the bug we need to add `word-wrap: break-word;` inside the 'a' tag as shown below ``` a { color: #444; word-wrap: break-word; } ``` ### Result Once done you can see that the extra characters are coming in the next line.  Commit : https://github.com/utopian-io/utopian.io/pull/81/commits/1253af13e99d6de66c830b8f4834ed626e5f2a41 Pull Request : https://github.com/utopian-io/utopian.io/pull/81

So I along with @sirrius was working on improving the search of the current Utopian.io main site. @sirrius has already shared most of the details on his post [Added text search ordered by relevance score for Utopian](https://utopian.io/utopian-io/@sirrius/added-text-search-ordered-by-weights-for-utopian). So here I will at first show what exactly I have done to create a local environment of Utopian.io. To run Utopian.io in your local you actually have to create 3 servers as shown below 1. Utopian Front End Server 2. Utopian Back End Server for Fetching the Data 3. Mongo Db Server ### Setting Utopian Front End Server This one I have already shared in my [previous post](https://utopian.io/utopian-io/@codingdefined/fixing-forked-project-bug-in-utopian-io), just copying it from there. >The very first thing I have to do it to fork the original project and run it on my local server. Next, I pulled the master branch from my forked repository using command git pull repository_name master where repository_name is my forked repository full path. >After pulling, I need to install all the node_modules which are used in the Utopian project for that I have ran npm install in the same repository where my code resides. >It will take some time if you are doing it for the first time. Once done, its time to run the code. For that you need to run npm run dev-server. If it runs successfully you will get a message as shown below. >When you navigate to the http://localhost:3000/ you can see the utopian running on your local server. But after doing this you will see that you are actually not getting any data. So for that at first we need to set up the Back End Server for Fetching the Data and MongoDB Server. ### Setting Mongo Db Server We need to set up MongoDb Server before setting up the Back End server. For this, you need to install MongoDB in your local. Once done you need to run the command `mongod --dbpath c:\mongodb\db`, where my db resides in C:\mongodb\db. Once done you can see that MongoDB has been started in port 27017. ### Setting Utopian Back End Server Similar to the Front End server we need to fork the original project (https://github.com/utopian-io/api.utopian.io). After pulling, you need to install all the node_modules using `npm install` in the same repository where my code resides. Before running it on the local server you need to comment some code. Comment out below code from config.js ``` UTOPIAN_GITHUB_SECRET: Joi.string().required(), UTOPIAN_GITHUB_CLIENT_ID: Joi.string().required(), UTOPIAN_GITHUB_REDIRECT_URL: Joi.string().required(), UTOPIAN_STEEMCONNECT_SECRET: Joi.string().required(), ``` Also, change some code in the utopian-bot.js. ``` const botAccount = process.env.BOT; const refreshToken = process.env.REFRESH_TOKEN; const secret = process.env.CLIENT_SECRET; const forced = process.env.FORCED === 'true' || false; ``` to ``` const botAccount = "utopian-io"; const refreshToken = ""; const secret = ""; const forced = true; ``` Once done you can run `npm run dev-server`. If it runs successfully you will get a message as shown below.  Thus now you can see the Utopian running on your server and also with all the data. Now coming back to the search, as of current environment you will see that we are doing an exact match of the words and not full text search. Full-text search mens that we are searching the whole database against the search criteria specified by the user. For example, if you say "forked project in github repository", we will search whole database of Utopian to get the results where these matching terms are there. Lets say if we get whole matching terms than that result will be shown as a top one whereas we will also get the result where some or the other keywords from the search is not present but their relevancy will be less so that will be shown below.  It is almost similar to what we search in Google where Google displays relevant result first and then all the result based on the rankings. To do this type of search at first we need to create Indexes on our existing database as shown below. Where we are creating the text search on the title and body of the post. `db.posts.createIndex({"title":"text","body":"text"})` Now next part is to search the whole database with the exact phrase. So for that we need to find that phrase in our database and then sort it on the score (i.e. relevancy score). `db.posts.find({$text: {$search: "forked project in github repository"}}, {score: {$meta: "text Score"}}).sort({score:{$meta:"text Score"}})` Now this was the basics of the text search and how we have moved forward. If you want to know what exactly we have done the change then you can see the pull request from @sirrius here https://github.com/utopian-io/api.utopian.io/pull/18. We thought of creating only one pull request and we both were working on finding the best possible way to show result.