Although experience is the best, there are many shortcuts. We talked to experienced developers, people who work tirelessly on loops and manage attributes every day. These tips are straight from the code-face.
A googolplex is a collection of knowledge that has overflowed like a poorly specified buffer. We have filtered it to bring you 8 great features, tricks, and tips. Developers often keep their mouths shut about open-source services like mobile programming hacks or responsive development tips. Although we had heard some of these amazing secrets before, many were new to us. We are certain that you will find many more to your toolbox.
1. Clear lists
Most web developers have to clear floating elements as part of their daily work. However, we can still be caught. How do you clear floated elements from a list without setting a height? “The solution to this small dilemma is really very simple,” Rhys Little, Plug and Play says. “Just add these CSS properties to any list container that has floated list items.” You can now check the list container with any DOM inspector and see that the height attribute is automatically calculated. This fixes the problem.
2. Sand
You can use a sandbox to test new techniques, CSS effects, or other types of transition. “Keeping the code clean and free from outside influences makes it easier to troubleshoot if something doesn’t work as expected,” states Creative Director Shane S. Mielke.
3. Web inspectors
Although developers may disagree on the best web inspector, they all agree that it was difficult before our favorite browsers had them. New context’s Paul Wilson explains that you can view CSS changes in Chrome and Safari. Wilson says that you can right-click on any element and select ‘Inspect Element.’ All the applied CSS will appear in the right inspection panel. To see the results of your changes, you can edit and add new elements. Safari on Mac doesn’t automatically show the web inspector. You can enable it by going into Preferences >Advanced>Show develop menu in the menu bar.
4. Firebug and Beyond
Chrome and Safari both have web inspectors built in. Mike Ballan is a Digital Designer at Jellyfish but he stands behind the original Firefox Developers Toolbar. Mike says that it’s the best way to spot small CSS issues when testing your site on multiple screen sizes. “Firebug just added the ability for multiple screen sizes to one browser tab – this means that you won’t need to adjust your browser width again to test your site.”
5. Take one thing at a given time
Ben Howdle is the developer of Didlr at Wapple.net. He cannot emphasize enough the importance of the Single Responsibility Principle. “Every object in your source code should have one function. Even CSS. You shouldn’t try to put all styles on a. button-class. You can split it into. button structure and. button face
6. Can you code it?
Ben believes that relying on libraries and frameworks is not always the best option. If you are coding small projects and include jQuery every time, consider “Can I do this in Vanilla JS?” You might be surprised to find that JavaScript is faster and more efficient than jQuery.
7. Git
A robust versioning system is essential for large projects. Although GitHub is highly recommended by developers, there are some drawbacks to using it if you have a private project. Your code is available for public viewing on GitHub’s servers. Plug and Play recommend GitLab. Rhys Little says that GitLab is similar to GitHub, but it is open-source and can be set up on your own servers. To improve performance and speed, GitLab should use Unicorn and NGINX . However, Apache with Passenger can also be used. The best thing about this arrangement is the fact that your code is automatically backed-up every time you commit. You also have a diff viewer to see which commits were changed.
8. Commented code
Particularly for team workers, remember that others need to understand your code. Use your resources and go through your files. Shane S. Mielke says, “Don’t Be Lazy.” Comment your code and name your layers. Then organize your PSDs. It is easier for others and you to understand what files are where and how they work if your files are well-organized.