Professional developers who have worked hard over loops and attributes day in and out have an unparalleled experience that can be used to learn certain hacks in web development and develop great websites and apps. Below we share a few tips and tricks from an accumulated century of hard-won experience that can benefit you in your web development journey:
Clear lists: Clearing floating elements is part of the grind for most web developers. To clear floated list elements without setting a height, you can just add the following two CSS properties to any list container with floated list elements:
display: block; overflow: hidden;
This helps calculate the height attribute automatically and that fixes the issue.
Sandbox: To develop techniques, CSS effects or new kinds of transition, do it as a sandbox project. Keeping experimentation uncluttered by outside influences makes the code much easier to debug if something is not working as expected.
Web inspectors: Developers differ on which web inspector is best, but they all agree that it was a struggle before the browsers had them incorporated. You can now preview CSS changes live in Chrome or Safari by right-clicking on an element and choosing ‘Inspect Element’. All the applied CSS will be shown in the right inspection pane. You can edit or add new elements here, to see the effects of your changes.
The web inspector isn’t accessible by default in Safari on the Mac. You need to enable it by going to Preferences >Advanced>Show Develop menu in the menu bar.
Firebug and beyond: Chrome and Safari have a web inspector built-in, but the Firefox Developers Toolbar makes it much easier to detect those little CSS problems when testing your site in multiple screen sizes. Firebug has just added the ability to display multiple screen sizes in one browser tab, which means you do not need to change your browser’s width to test your site again.
One thing at a time: The Single Responsibility Principle implies that every object in your code should have one function, even with CSS. It is not suggested to put all styles onto a .button class. Split it into .button-structure and .button-face and so on. This is because if this is not done and something breaks, it is really tough to trace back through your code, finding which object is the problem and whether the bug is inherited from higher in the DOM.
Coding capabilities: Falling back on frameworks and libraries isn’t always the best answer. You may find it easier to use a simple language for a project and include the same functionalities instead of falling into all directions of code.
Use GitLab: While working on big projects, you need a robust versioning system. One can use GitHub, but it affects privacy as your code is hosted on GitHub’s servers and publicly available. Instead, GitLab is completely open-source and free to set up on your own servers. The best set-up for GitLab is to use NGINX with Unicorn to improve performance and speed. Apache with Passenger will work as well. The biggest advantage of this arrangement is that all your code is backed up each time you commit, with a really useful viewer to see what has been changed on each commitment.
Commented code: Team members need to understand your code, use your resources and work through your files. It is a good idea to always comment your code, name your layers and organize your PSDs and FLAs. The more organized your files are, the easier it is for you or others to jump in and understand where things are and how they work.
Site security: Before you go live with a website, be sure to run it through ASafaWeb.com. This site scans ASP.NET websites for a range of common security issues and helps resolve any problems indicated by a failed test.
Automate: Automate deployments and unit tests to reduce time wastage in these repetitive procedures. Time spent getting to grips with NAnt or MSBuild is time well spent as it will decrease the number of hoops you need to jump through when a deadline is approaching. These tips above are just a few of the many tricks that one can learn to make it easier to create, troubleshoot and manage their sites. You can get more insights in the company of well-experienced developers.