CSS Tidbit

The Task

• override styles that are designated !important

My Tools

This was something that was driving me crazy. The author of the Wordpress Theme that I'm using for a client's project allows you to change the main colors of the theme using a built Theme Options plugin. This is done by including a php file that allows you to programmatically use the colors selected. The problem with this php file is that many of the styles are designated as !important. This designation means that if this is the last included style it will take over and be applied. Previous styles that are designated as !important will be ignored.

In order to override !important all you need to do is make a style with a selector that is more specific than the selector of the style you want to override. You can do with by adding the element or more specific classes and IDs.

Ex:
Instead of...
.navigation {...}
use...
div.navigation {...}

Angularjs Form Submission

The Task

• Create a form
• Add a submit button
• Form must submit on press of enter
• Cancel button exits form without save
• after submit the user returns to the page they were on prior to the form

My Tools

• PLENTY of other JS libraries that need not be mentioned here

Originally tried to have ng-submit on form with a submit button of type="submit" and a generic cancel button that called a cancel function from the scope. This is where I realized that the function called ng-submit is called even when the cancel button is pressed. So now the submit function needs to be aware that there is a button somewhere in the form that halts the form submission despite valid/invalid values in the form fields.

This prompted a googling binge that eventually led me to creating a custom submit directive. Using this Gist as a guide I implemented just that. This directive will catch the submission of a form event and take over. It removes pristine and adds the dirty class to preserve what would happen by default in a normal submission. Then the directive checks that the form is invalid. If it is then a notification describing what needs to be changed is displayed to the user. Then the directive evaluates the function that was passed in to the directive. All of this takes place in the directives link function so at the end scope.$apply() must be called to ensure we are in sync across any views.

Hey Good People,

I Wanted to Open the blog with an explanation of what I'm planning to post here. I'm a Computer Engineer by training and Software Engineer by profession but, I'm trying to move more into Web Development. Previous positions involved more back-end development which was fulfilling to a certain extent however, Front End development gives more of a sense of instant gratification that gets me through the work day. You guys will get a glimpse of what I'm working on day to day through the posts about libraries, code snippets, useful services, new developments in software development.

I'm also very interested in graphic design however that is something that's very new to me. It's also outside of my box as a developer. So you will also see graphic design freebies that I've downloaded to play with or tutorials about techniques used for graphic design.

Last, I have the unique situation of also starting Monarch which is a web development company that also creates apps. Our company is young <2 years old.



So I will also be posting about the journey to being a successful company.