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.)
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!
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!
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.
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 😉 .
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 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).
So, Now I can add a badge to my github repository Readme for the last commit. It made me happy today the Badge 🙂 .
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.
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.
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.
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.
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).
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.
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.
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.