If you like DNray Forum, you can support it by - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 and more...

 

Ways to make the development of a layout designer in a web studio easier

Started by lirik, Apr 10, 2023, 06:41 AM

Previous topic - Next topic

lirikTopic starter

As the only full-time layout designer and frontend developer in the studio with a variety of projects, including landing pages and online stores, I am required to produce quick results.
However, this often results in poor code quality and messy markup. To meet the project requirements, I frequently have to implement features like calculators, timers, form validators, sliders, and animations using bxslider and CSS transitions.

I am currently using less, coffeescript, emmet and learning Git, however, the design constraints make it difficult to use ready-made grids which affects the speed of my work. It takes several days to create main pages and up to a week for a complete project.
Do you have any recommendations on how to optimize my workflow and speed up my work process? Additionally, which layout methodology should I adopt - BEM, CSS or any other?
  •  


halley_pham

It suggests using BEM as a CSS implementation of Shadow DOM before full-fledged web components appear. The author prefers their own modification of BEM and recommends using SASS/LESS for this.
For layout, the author suggests using Jade (JS) or Slim (Ruby) to reuse code and accumulate options for solving each problem. It is important to study more serious projects, such as Angular or Amber, to learn the latest trends in UI development. As you grow in your career, it becomes more important to organize your work and take breaks, and changing programming languages can help find new solutions to problems.

Additionally, paying attention to design patterns and writing code on paper can help avoid artistic searching and make code subordinate to logic. The author is currently working on a product for UI developers and is interested in hearing about difficulties or routine tasks in the field to improve their work.
  •  

kompany

1. Implement small sections of code.
2. Utilize the integrated development environment (WebStorm) and its functionalities.
3. Take breaks to refresh your mind, which will aid in resolving issues more efficiently.
4. Utilize gitflow alongside git to automate commands.
5. Learn from Developer tools by enrolling in a course.
6. Engage in stimulating tasks.
7. Analyze how other programmers solve comparable problems.
8. Employ Live edit.
9. Consider using a second monitor if it benefits you.
  •  

Mritunjay

To my understanding, your effort to complete the task with unique projects is unnecessary.
In case of a standardized process, some of the code can be reused across multiple projects, whereas in your case everything has to be built from scratch.
  •  

carl_mathew

Here are some recommendations to optimize your workflow and speed up your work process:

1. Modularize Your Code: Consider adopting a modular approach to your frontend development by using a methodology like BEM (Block Element Modifier) or other modular CSS frameworks. This can help you write more maintainable and reusable code, which can ultimately speed up your development process.

2. Use Ready-Made Components: Instead of reinventing the wheel for every project, consider using ready-made UI components and libraries for common features like calculators, timers, form validators, sliders, and animations. This can save you time and improve the consistency and quality of your code.

3. Implement a CSS Grid System: Instead of creating custom grid layouts for every project, consider implementing a CSS grid system like Bootstrap or Foundation. This can help you create responsive layouts more efficiently and consistently.

4. Automation and Build Tools: Utilize task runners like Gulp or Grunt to automate repetitive tasks such as minification, compilation, and optimization of your code. This can save you time and streamline your development process.

5. Code Review and Refactoring: Set aside time for code review and refactoring to improve the quality of your code. This can ultimately save you time in the long run by reducing technical debt and making your codebase more maintainable.

6. Prioritize Code Quality: While speed is important, prioritizing code quality can save you time and effort in the long term. Investing time in writing clean, maintainable code can lead to fewer bugs, easier maintenance, and ultimately faster development.

In terms of layout methodology, BEM is a popular choice for its modularity and scalability. However, the right methodology for you will depend on your specific project requirements and team collaboration. Consider experimenting with different methodologies and choosing one that best fits your workflow and project needs.
  •  


If you like DNray forum, you can support it by - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 and more...