Optimize/Reduce File Size #10

Open
KingPixil opened this Issue Jun 30, 2016 · 11 comments

Projects

None yet

3 participants

@KingPixil
Owner

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

@iamrudra

@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.

@KingPixil
Owner

@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.

@iamrudra

@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.

@KingPixil
Owner

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?

@iamrudra

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. 😆

@KingPixil
Owner

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

Let's see where this goes...

@Margaret2
Contributor
Margaret2 commented Sep 2, 2016 edited

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
Contributor

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

@KingPixil
Owner

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
Contributor

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. :)

@KingPixil
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment