My new Code Formatting

1

Lately, I’ve been formatting my HTML code like this.

I think it’s easier to read. What do you think?

    <!-- google maps -->
    <script 
      async 
      defer 
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0V0yDJBNvnaSVz3XCsm5Pyu91U14s4DcM&callback=initMap">
    </script>
    
    <!-- jquery -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous">
    </script>

    <user-review 
       name="Erin O." 
       photo="/images/face-erin.png" 
       review="I am convenient because I require little markup to use effectively. Lorem ipsum dolor sit amet.">
    </user-review>
2 Likes
2

It looks nice. I’d just be worried about it taking up too much space - having to scroll through ten pages of html instead of just two. But that’s how formatting is, a compromise between readability and compactness.

2 Likes
3

Yes, it does occupy more space/lines.
I only do this for tags that have very long or multiple parameters.

For sections, and divs just requiring classes, I don’t use this formatting.

4

I’m a noob, but this makes it waaayyyyy easier for me to read lol

5

Isn’t this how coding should be like, easy to read?
That is how I’m planning to write my code.
It’s easier to read through 10 pages of code and find what you need clearly, than to hunt for it.

6

I like that you’re using web components. Taking a course on them as we speak.

1 Like
7

I’ve been doing the same since learning Angular and Vue, where HTML tags can get very attribute-heavy. Since we’re not writing code on tiny screens anymore, readability is superior to compactness. Space is virtually unlimited, developers’ time isn’t.

1 Like
8

showing my ignorance here a bit but what is this tag:
<user-review></user-review>
?

9

Is a customized tag to replace or read with Javascript for a specific things.

2 Likes
10

What @dias-joao said…

Specifically, it’s a VueJS component. The code-behind this custom html tag is:

Vue.component('user-review', {
  // declare properties array for this component
  props: ['name','review','photo'],

  template: '<div class="col s12 m6 l4">' + 
              '<div class="card">' + 
                '<div class="card-content ">' + 
                  '<p>{{ review }}</p>' + 
                '</div>' + 
                '<div class="card-action">' + 
                  '<img :src="photo" class="circle photo">{{ name }}' + 
                '</div>' + 
              '</div>' + 
            '</div>'
 
});

Helps cut down on clutter. All the HTML code above are just replaced by a single

    <user-review 
       name="Erin O." 
       photo="/images/face-erin.png" 
       review="I am convenient because I require little markup to use effectively. Lorem ipsum dolor sit amet.">
    </user-review>

with name, review and photo parameters passed on to it.

1 Like
11

Ah, very cool – thanks. Haven’t yet dabbled in frameworks; should remedy that soon.

12

I do not think that that is a good way to format. once you are done writing the code, just Beautify it!

13

@geekysmurf This is the result of the Beautify… using the link you provided

		<!-- google maps -->
		<script 
		      async 
		      defer 
		      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0V0yDJBNvnaSVz3XCsm5Pyu91U14s4DcM&callback=initMap"></script>
		<!-- jquery -->
		<script
		      src="https://code.jquery.com/jquery-3.2.1.min.js"
		      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
		      crossorigin="anonymous"></script>
		<user-review 
		       name="Erin O." 
		       photo="/images/face-erin.png" 
		       review="I am convenient because I require little markup to use effectively. Lorem ipsum dolor sit amet."></user-review>

almost the same as my original.

    <!-- google maps -->
    <script 
      async 
      defer 
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0V0yDJBNvnaSVz3XCsm5Pyu91U14s4DcM&callback=initMap">
    </script>
    
    <!-- jquery -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous">
    </script>

    <user-review 
       name="Erin O." 
       photo="/images/face-erin.png" 
       review="I am convenient because I require little markup to use effectively. Lorem ipsum dolor sit amet.">
    </user-review>