Mistakes and Progress

Improve by 1% or Worse by 1% it's on you

No matter how many mistakes you make or how slow you progress, you are still way ahead of everyone who isn’t trying….

 

Code can always be better, perfection is a myth, be self-critical of your code, learn from your mistakes, code something up several ways and evaluate the merits of each design.

 

Take initiative. Your hands will shake. Your throat will go dry. Your eyes would water up but the feeling you get after taking the initiative will be worth it all.

 

It compares where you end up if you improves by 1% every day for a year instead of going worse by 1% every day for a year.

Flexbox Froggy Hindi Translation

Flexbox Froggy in Hindi

Wants to learn Flexbox layout, just give a try to “Flexbox Froggy” the game created by Mr Thomas Park. I have learnt a lot about flexbox properties by playing this game.

When I found this game on the Internet I was at home. I was playing this game and guessing the next property that will align the frogs to their Lily pads, and then suddenly my mom, who is watching me since I have started the game, said :

” इसमें justify-content और align-items दोनों  सेंटर में होगा तो मेंढक वहां बीच में आ जायेगा “

( By justify-content and align-items, Frogs will come to the center.)

friends scared shocked
I was Like…

After that I played the along with my mom. And Now I can say that my mom also knows some CSS 😉 .

So if my mom can understand the layout and properties why can’t you. Play the Game and be the master.

For those who don’t know what the flexbox is, This property is introduced in new CSS3 for replacing the old table layouts. It is a redefined way of creating layouts and fitting the items in the container.

Everyone encountered with the problem of “Aligning a div in center!” or “Aligning a div in vertical center!”. So, if you ever came across of such type of aligning problems, Just Give it a try!

How to align a to the middle (horizontally/width) of the page
Question asked 7 years ago and last active 6 days ago 😉

And the best part is It is also available in our Hindi language.

Translated by my mom and Me. If you find any heavy words across the game they are contributed by my mom. If you come up with the better translation, just make an issue in the GitHub(if you are familiar with it) or you can shoot me an E-mail.

Love You Mom! ? And Congrats for your first Open-Source Contribution!

Tweets about the game :

and many more…

Useful Links about flexbox:

Games based on Flexbox :

Integrating Travis CI with WordPress Theme

Travis CI

A tool for automating tests for your Open Source projects. Travis CI is used to build and test the software projects at GitHub. Its written on Ruby and freely available under MIT Licence. Which means we can use the Software without the Restrictions.

So, Here the question is “What we can do with this?. Is it really can be helpful in developing any kind of Software/Application?”.

Yesterday, In a discussion about Open Source with Yathartha, he told about his Open Source Contribution to a Python Module. When he contributed his first code in the repository he got an error of “Failure: Travis CI build Failed”.  So then he read about the “Travis CI” that is a kind of Bot that can help you making cool thing faster and better with testing.

The owner of the Repository can set the rules for pushing the code or can create a set of rules. In every commit/push the code is tested with that particular data set.

In the discussion i was thinking of adding the Travis CI to the WordPress Theme Creation. There is a lot of rules for writing the good code in WordPress. There is a GitHub Repository dedicated for WordPress Coding Standards :P. So, Now the Integration part comes.

Integration with WordPress

There is a lot of documentation and tutorial/examples are available in their website on integrating with each language. Lots of languages are supported by Travis CI. Tutorials are available for each of the supported languages eg. PHP integration.

Creating a rule set that check the code with all the coding standards is not an easy task. So I looked over the themes that were created by the WordPress.org itself. So I have looked over the theme “Twenty Seventeen”. I have also looked over the WordPress starter theme “_S”. The YAML file is just like a bouncer. I have no idea what is written in the file. But after a lot of struggle I deciphered all the content 😉 .

The YAML file is more like a script. You have to add the details of your tests. Here are some values we have to add in the YAML file:

  • language :  Declaring the Project Language
  • php : Declaring the php version to use (if language is PHP)
  • before_script : All the dependencies or requirements for the tests are listed in this section, It is more like the “Making a Web Development Environment” .
  • script : This section is for the tests commands. If any test return with code 0(zero) then it is passed the test otherwise the Build will show Failure.

[new_field name=”my_gist”]

It take me total of 9 commits to get my build successful pass after adding the .travis.yml file to my project. Means I have not following many rules from the WordPress Coding Standards. BTW the all checks failed were all about adding the function definition comment and the spaces before and after the parentheses 😉 .

Travis Build History
Travis Build History

Tips for adding into WordPress : 

  • Don’t forgot to add a codesniffer.ruleset.xml . It’s all about the rules while sniffing the project.
  • Use JSCS linter for checking the JavaScript Code Styling. Don’t forgot to add a .jscsrc file in your project for the exceptions.
  • Use JSHint for detecting the errors in JS. Also with a file .jshintignore if you want to ignore some files while checking (eg. bootstrap.js will give error if checked by the JSHint).

[new_field name=”my_gist_2″]

Build Passing Badge
Build Passing Badge

So, Now I can add a badge to my github repository Readme for the last commit. It made me happy today the Badge 🙂 .

 

“Stop stressing. Press publish.”

Interactive Resume and Phaser platform

When I first saw the website created by Prateek Narang for his Resume Purpose. I just got an expression like:

WOW, What a good way of describing your résumé if you are a Web Developer”.

As usual I am surfing Internet and one of my friend Nitin came to my room and just opened a new tab in Chrome and opened the Website. Nitin is like just see what I am going to show you, you’ll be inspired. The website site title is “Interactive Resume of Prateek Narang”. And then an animation shown up in the browser of Prateek with a parachute.

The content get loaded and hence the game started. The Mario got changed with Prateek’s Cartoon and i started playing the game. At that time I don’t know who is that guy. But after playing the Game I know about Prateek, his achievements, awards etc.

So after seeing that Resume I get inspired to make an assets like this in my portfolio. So I researched about it. And I found his github link. There in his profile I have found the repo. for his Interactive Resume in website. From where I got to know about the Phaser.

Phaser is an open source game framework for making desktop and mobile browser HTML5 compatible games. It is based on JavaScript. There is a lot of Documentation and Examples available in their Website as well as in the github repo.

Till Now I have just tweaked a game that is in the tutorial. I have added a baddie and Diamonds with health and Medicine. But still

There are miles to go before I sleep, And miles to go before I sleep.

[new_field name=”game”]

Open Source and WordPress Theme

In earlier three-four months me and my friends were trying to work in Open Source and contribute on Open Source Projects. We have researched lots of projects like Chromium, Apache, Atom etc but these are way above our understanding for coding. The High level libraries of C++ and Python etc are too heavy for us.

Meanwhile I am also working on WordPress Themes. I usually never think about the good practices for what I am doing. But I wanted to create a Theme that follow all the Good Practices and Standards for WordPress Theme. I have done a 2 weeks long research on this “How to create Best WordPress Themes” 😛 . And if I will create a theme which looks Professional and easily Customizable then how will I reach the ones who needs the Theme.

So now I mixed both of the things together. I have decided that I will Create my theme for uploading in the WordPress.org. WordPress needs all the uploaded theme should have the GPL Licence means literally Open Sourcing your theme.

I know, Simply saying that I will upload it into WordPress is not an easy task. There is a full procedure of Do’s and Don’ts on creating and uploading themes. There is a team who reviews all themes before going live for Millions of Peoples. And as all the theme reviewers are volunteers they also have their own work so normally a theme have to wait for around 5 Months(On average) before getting assigned a Reviewer. If your theme is having more than 5 errors then maybe your assigned ticket will be closed just after Assigning the volunteer.

Now if I want my theme get listed on the WordPress I’ll have to use the Best Practices and all the Theme Standards before Uploading. So from today my new journey is started with my New WordPress Theme. Wish me All the Best 😉

Themes in WordPress.org, like WordPress, is licensed under the GPL.
Use WordPress to make something cool, have fun, and share what you’ve learned with others.

Note to My self

List for all the tasks:

  1. WordPress Theme basics
  2. Create a theme from ground up
  3. Create a theme that is uploaded to the WordPress.org
  4. Reading at least 10 books in each semester
  5. Books : be it coding, romance, pulp etc. but read the book.
  6. Understand the coding basics so that your Software be work on its long run
  7. Focus
  8. Take part in academic things
  9. Actively part in program presentation and class talks
  10. Class talks means group discussions teacher questions
  11. Create new hobbies based on ‘sex’ and ‘cash’ theory
  12. Read as much as you can
  13. Discipline
  14. Scheduling
  15. Blogging
  16. Smart Work
  17. Be Creative
  18. Priority Chart
  19. It’s Now or Never
  20. Coding
  21. 33-33-33 %

Do not try to perfect things, let the time make it perfect for you.

Short Notes :

Being productive is comes from inside. You can make time for your work but if you start to say NO to the things that takes your time unnecessary. Be it Counter strike, Be it gossiping.

If you find any time that you are free work on your Blogging, Academics things or start reading a new book. For academics I want to say that don’t work on the last day of submission you have lot of time don’t spend it on the internet shitty things. I know many things are important as well going out with friends or going for a walk to primary school etc.

Just maintain the Red Line in between them. And The most important thing is to don’t habitual of any wrong shitty things you were in the past. Make your future a more interesting then yesterday.

If you are working on a new technology first try to find out any book related to it and read from the book. If you stuck anywhere then take help of the internet.

The focus in this semester for languages will be in WordPress and the one w’ll have on the Syllabus.

I love coding but i am separated right now. I am not in my coding pants. I have to add it up to my life in Weekends, and work solely on it.

Schedule the work that don’t do more on WordPress that it will become the sole thing and work on the other things too. But in between there is a red line that says to “Go away it’s time to Work on my C++ thing.”

For any thing that you are developing first create a Document on it and do all the trivia there.

I am not a direct write on screen person you can write all the points on the hard copy then do it on the screen.

=========================== LOL ============================

Advanced Custom Fields : Plugin

Advanced Custom Fields

Hi there, This post is about a plugin I’ve used for extending the functionalities of the WordPress. The Plugin name is Advanced Custom Fields. This plugin provides many features to extend the power of WordPress. There is also an inbuilt functionality in WordPress for adding custom fields for any post but it offer a little power to customize the WordPress.

This Plugin can make content of a website fully dynamic. From Basic field types i.e. Text, Email, Number etc to a jQuery Color/Date Picker it can be useful for many things. There is a lot of Documentation available for the plugin in their Official Website.

It’s admin panel is same as a Post type with a heading Field Groups from where we can create groups of Fields and set up rules for the specific Field Group. You can add many field type eg. Basic, Content, Choice, Relational etc.

The most interesting field types I like is the category jQuery. You can add a Date Picker, Color Picker and a Google Map without any extra coding. In a project I have to add an icon and a color to the categories for the Blog Posts. There are many plugins out there who can add icon functionality to the Categories, but for adding colors for a category there is no plugin. So by the help of this plugin i have added a custom icon and custom color feature to the Categories Section.

Another Feature I like is Relationships. If you use this field you will have a nice post picker. You can set if you want to return the Post ID, Post Obj or for images it can be Post Link.

You can set rules for the location you want to add the Custom Field. In Image you can view the set of rules for a particular set of field types. We can set rules in Logical Way (Add/Or).

Location Feature in ACF
Location Feature in Advanced Custom Fields

We can also select items to hide them from the edit screen. I have created a Settings page in my theme where i just want the title only in the page and the Custom Fields I have added so i have selected all the options to hide on the edit screen.

 

Options tab in ACF
Options tab in Advanced Custom Fields

 

Settings Page
Settings Page

Adding Code to Theme: As in the Custom Fields they will not show up on the Front end, For showing Values added by Advanced Custom Fields to the Front End we have to  add some code in the Theme. For getting values added for Post types is very easy, We just have to use get_field(‘field_name’) or the_field(‘field_name’). But for other setting like for categories we have to change parameters of get_field eg. category type followed by tag id and field name ex. get_field(‘category_type_tag_id’, ‘field_name’).

There is an another feature available for separating the fields from one another. Like if we want our website to be more dynamic and having many custom fields for updating values we can end up with a nasty edit screen. So for making a good UX we can add tabs layout for making it easily manageable.

Let say I want to use three custom fields with every post eg. Resources, Related Post and Other Contributors. So Resources may be the Simple text with links, Related posts are the Relationships of the Posts and the Contributors are the array of the users. We can create a Single Field Group. And By adding Tabs in between It can be more Attractive.

Custom Post Options
Custom Post Options

Exporting: This feature is the best feature i liked in this plugin. You can either export it in XML or in PHP. First I didn’t understand why Export to PHP option is there but when I used it I liked it.

Let say in a project for a client we are using lots of Advanced Custom Fields. And we don’t want that user may have the power to change or add the extra custom fields. In that case we can include Advanced Custom Fields to the theme itself and hide its UI from the Client. By this the Custom Fields UI will not appear in the Admin Panel, so that the clients can’t alter the Fields we have created for them. We just have to go to the Export to PHP option page and we will have all the instructions to how can we include Advanced Custom Fields and the Field Groups in theme itself.

I have used Advanced Custom Fields in this theme also. For adding Upcoming Articles and Related Posts with any post. You can Find them in the Sidebar.