neilliner

[neilliner]

Group work has good side and bad side. If you got an active team member, you’re lucky. But if you got some member that can’t communicate in an acceptable level, or doesn’t have capability to implement the project, it’s simply painful. So far, as a team leader, I tried to assign everyone including me to work in similar portion. But I still need to mentor someone more that I suppose to do. However, at this point, I’m still proud that I could get it through. Even it doesn’t look perfect. I learned something.

[neilliner]

SVG is great. It makes things crisp and scalable. However, I got some problems in my project whit these SVGs. The positions seem wrong when we change the window size, It’s not because it’s SVG. But It’s because I’m using absolute position in bootstrap grid.

[neilliner]

Mustache Template is a surprise for me. It populates data from json file into the page and that makes life much easier when you make several pages with same layout but different data.

[neilliner]

I tried to understand git but it’s still confusing. Here are the screen captures from the class note. I just want to keep it in case I need in the future,

[neilliner]

Advanced Web Design - Midterm

There was no lecture in module 6 since we did a workshop in class. I solved some problems about centering “video” element and JavaScript “scroll to” stuff(just measure the element height not view height).

I worked on making my site responsive in smaller screens and some very larger screens. I found that it might work well if I resize the browser’s width but not working in real mobile devices(for example, the video tag). I fixed lot of bugs and it turns out a lot better. 

[neilliner]

Setting up grid.

[neilliner]

The difference between mixin and function is the return value. Mixin won’t return any value while function does.

[neilliner]

These are examples of sass loops including for loop and for each loop.

From line 33 shows how to define a mixin with an argument.

[neilliner]

Keep in mind that before we do anything SASS, don’t forget to “sass -- watch .” in the Terminal.

[neilliner]

To use mixins, just put “@include” followed by its name anywhere in css.

[neilliner]

Mixin is the concept of using a code snippet anywhere in css. so it looks cleaner than copy and paste. We declare this chunk of code by “@mixin”.

[neilliner]

Here is how we organize the files. Note that there is _ in every partial file. 

[neilliner]

In SASS, we separate files to make it easier and cleaner to work on. The we use “@import” to combine these files together.

[neilliner]

[neilliner]

Midterm Project Ideas - Module 02

Microsite supporting thesis project - BandIT, an match maker/band finder for musicians(see details in pictures).

Sciences documentary website for a specific topic such as some kind of deep sea creatures or astronomy.

[neilliner]

Advanced Web Design - Module 01

Things I loved in the first week class were

I learned how to use Sublime Text in more efficient way. This includes Emmet and shortcuts.

I love the way Hamilton(instructor) convinces students to be a good programmer not just a designer who knows how basic programming.

Things I hated?

So far I haven’t hated anything in class. I love to code.

Expectation I’d like to learn more tools/technologies that is being used in the industry. This includes some back-end stuffs like Angular.js, NoSQL or a cross-platform tool such as React. I do agree that sass and git are fundamentals but it might not necessary to spend the whole semester to learn just 2 things.

[neilliner]

Emmet strings look weird. But it would help in developing much faster if we get familiar. Example: html:5

header>h1

header>h1+p

nav>ul>li*5>a[href=link$.html]>{Link $}

div.container>(article#article$>h2{Article $}+div.article-paragraphs>p*3>lorem)*3 Also, some interesting css tips that I learned from the first module were: box-sizing:border-box; background-size: cover; And the best version of clear fix is like: .clearfix:after{     clear: both;     content: '';     display: table; }