Optimize/Reduce File Size

[kbrsh]

To make room for more styling, there needs to be optimizations made. For example, if there are rules that look like this:

h1 {
   font-size: 2rem;
}

h1 {
    font-family: 'Quicksand';
}

Combine them into this:

h1 {
    font-size: 2rem;
    font-family: 'Quicksand';
}

This helps to add new features, such as new input elements in #8

If you would like to submit a PR, please refer to CONTRIBUTING.md

[viditmaniyar]

@kingpixil - I took a rough look at the files within the src directory and all the files seem to be "optimized". I would like to contribute and so if you can help clarify this a little more, that'd be great.

[kbrsh]

@iamridra Awesome! I'm glad you want to contribute. By optimizing files, I mean making them smaller, so Wing can become more lightweight than it already is.

[viditmaniyar]

@kingpixil - Sure! I get the the objective here.

But the example you've show with the h1 tag, I can't seem to find anything similar in any of the files under the src directory.

[kbrsh]

Yes, but there should be other ways we can optimize, but this is not a big issue, just an ongoing issue to keep things light.

Hopefully there are other ways to optimize, if not, should I close this?

[viditmaniyar]

I cant seem to find anything significant, honestly. Let's keep this open and add the discussions label, if somebody else has some idea?

If we go anywhere from the discussion, I'd try taking it on.

........or we can simply close it. 😆

[kbrsh]

Yeah, I'll just add the discussion label and keep it open for now.

Let's see where this goes...

[Margaret2]

Hi, here are a few tiny suggestions 😃

Combine the input:focus and text-area:focus classes in forms.css, since they both have:

 {
    border: 1px solid #99b3ff;
    border-radius: 4px;
}

In typography.css, h1, h2, and h3 all have the same letter spacing. So we could combine them like this:

h1, h2, h3 {
  letter-spacing: -.1rem;
}

[Margaret2]

Let me know if I should make a pull request...

[kbrsh]

Whoops @Margaret2

Extremely sorry for the late response, didn't notice your comment.

No need for a PR, I will check this out. But as far as I know, removing

/* input focus */
border: 1px solid #99b3ff;
border-radius: 4px;
/* textarea focus */
border: 1px solid #99b3ff;
border-radius: 4px;

That is 4 lines, and 90 bytes.

Adding

input:focus, textarea:focus {
    border: 1px solid #99b3ff;
    border-radius: 4px;
}

That is also 4 lines, and 74 bytes.

Do you think I should add that? Just to save a couple bytes? I don't know, make a PR and run the build, then we'll see the difference between file sizes. 👊

Thanks for the help @Margaret2.

[Margaret2]

Hi @kingpixil,
Yes, I realize they are very small changes and maybe not worth it right now. But anyway I made the pull requests, so just see what you think I guess. Also I hope I did that right, I am pretty new to Github. :)

[kbrsh]

Hey @Margaret2,

Thanks for the PR! One thing, please refer to CONTRIBUTING.md for information on submitting PR's.

You did a pretty good job, but you didn't run the build. Running the build will generate the pretty and minified version of Wing in the dist/ (distributions) directory. If it is a bug fix, it will also be released in a new version to npm and bower.

In this case, it is an improvement, so the next release will be after the next bug fix.

To run the build, after installing the dependencies, simply run gulp.

You will get some colorful messages, saying the new file sizes, and if any errors occurred. Then submit the PR. Travis CI will then run a couple tests to let me know if it is a valid PR, and it will be merged!

Thanks again @Margaret2

[kbrsh]

I think the file size is pretty small, and this can be closed, let me know if you think otherwise.