Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Tuesday, January 17, 2017

Suffix Rotation - a test case tells the truth

January 17, 2017

Introduction
Julia had some study on Leetcode 17 - a phone number algorithm, one of studies is on stack/ queue implementation of the algorithm in May 2016. After more than 6 months, in January 2017, she worked on suffix rotation algorithm in the contest, she made a mistake to choose using queue instead of stack.

So, after the week code 28 contest, in 1 - 2 day, she studied suffix rotation's test case provided by hackerrank: a string "lcatqjejhpgkrkhnxsfyqlulncefeytykwnqbfmqaduldwhgwruwkdvojexefcmfrlfuzzcurjgnnbkskbzw", the code has issues related to out-of-memory, queue size is over 11,387,997, 10 millions, stop after processing first 12 chars "aaabbbbbccc", over one minute at least.
code with bugs is here.
Suffix Rotation C# practice, with a bug running out of memory.
working code is here.

Problem Solving 

Thank you, a small test case helps me to understand the issue again. Queue vs Stack, for phone number less than 7 digits, queue is still ok - not causing out-of-memory issue. But with string with length over 20, the problem quickly comes out easily.

lcatqjejhpgkrkhnxsfyqlulncefeytykwnqbfmqaduldwhgwruwkdvojexefcmfrlfuzzcurjgnnbkskbzw

Remember this test case, as a programmer, Julia has to work on a test case more often; build a good habit to figure out issues in the design with help of test cases, specially in any hackerrank contest. Kind of boring talk, let us talk about a song.

The solid Rock, corner stone or sinking sand

Julia has a favorite song she likes to sing along a lot of times, specially a lot of years ago (2000 - 2010) in Boca Raton

Related to being a hackerrank contest player, Julia has some hope, the test case can be her solid rock if she has weakness in the design, and flaws in thinking process.

The test case is the solid Rock, I stand;
All other ground is sinking sand, 
All other ground is sinking sand.

Code review study

Julia chooses to study more on phone number related algorithms.

1. Code review: Phone number.
2. Very good Dynamic programming explanation, read the phone number's code review by Google engineer.
3. Phone number code review - group of 3 digits with no lone digits.


At last, review algorithm code review made by a google engineer, click here.



CSS style sheet guidelines - study

January 17, 2017

Introduction
It is time to learn more about CSS at the beginning of 2017. Julia still remembered that a few years ago (maybe in 2012) she had to answer the question - what CSS stands for, actually she did not answer correctly. In 2013, she decided to spend 2 months to read "Head first html and CSS", and fell in love with solving the puzzles at the end of chapters, she spent over 20 hours to learn rule, specificity, box model, and then she studied all CSS selectors, and then she started to read CSS code like other language she likes. Learning a language takes some determination

Always Julia learns one term a time, write down, practice, talk about or use it, and then come back to review them. This blog she will learn something about CSS and SOLID principles. 

Study
Design for real life - click here.
Css style guidelines - a summary on CSS - tricks.
Read the article:
http://cssguidelin.es/

Great time to read single responsibility principle, how to apply .css class design. Read Open/close principle, how to apply to css class design. Read Writing DRYer vanilla CSS

Wednesday, July 20, 2016

CSS in-depth - pluralsight.com

July 20, 2016

Plan to find 6 hours to work on this course: 30 minutes a time, one by one. 

CSS in-depth  6 hour course
http://app.pluralsight.com/author/estelle-weyl

1. Go over the slides on the website: (plan to take 1 hour first)
http://lanyrd.com/profile/estellevw/slides/

2. Julia's favorite - great input for Julia to build great mobile website! 

http://estelle.github.io/mobilecss/#slide4

3. Get to know a new tool: YSlow
http://yslow.org/

Read 34 rules of web performance best practices and rules:
Yahoo!'s Exceptional Performance team has identified 34 rules that affect web page performance. YSlow's web page analysis is based on the 23 of these 34 rules that are testable. Click each performance rule below to see the details.
  1. Minimize HTTP Requests
  2. Use a Content Delivery Network
  3. Avoid empty src or href
  4. Add an Expires or a Cache-Control Header
  5. Gzip Components
  6. Put StyleSheets at the Top
  7. Put Scripts at the Bottom
  8. Avoid CSS Expressions
  9. Make JavaScript and CSS External
  10. Reduce DNS Lookups
  11. Minify JavaScript and CSS
  12. Avoid Redirects
  13. Remove Duplicate Scripts
  14. Configure ETags
  15. Make AJAX Cacheable
  16. Use GET for AJAX Requests
  17. Reduce the Number of DOM Elements
  18. No 404s
  19. Reduce Cookie Size
  20. Use Cookie-Free Domains for Components
  21. Avoid Filters
  22. Do Not Scale Images in HTML
  23. Make favicon.ico Small and Cacheable
4. Julia loves the CSS Filter Effects

http://html5-demos.appspot.com/static/css/filters/index.html

(memorize 10 keywords: b b c d g h i o s s)
blur
brightness
contrast
drop-shadow
grayscale
hue-rotate
invert
opacity
saturate
sepia

5.
http://static.lukew.com/TouchGestureGuide.pdf

Core gestures:
Tap,
double tap,
Drag,
Flick,
Pinch,
Spread,
Press,
Press and tap,
Press and drag,
Rotate

6. Google page speed tools
- Analyze your site performance -

https://developers.google.com/speed/pagespeed/?csw=1


6B. Page Speed - Go over each main point for 5 minute study:
1. leverage browser caching

Leveraging Browsing caching for images, CSS and JS
https://www.siteground.com/kb/leverage-browser-caching/

http://stackoverflow.com/questions/23923039/wordpress-leverage-browser-caching

2. Enable compression
3. Defer parsing of JavaScript
4. Minimize request size
5. Specify a cache validator
6. Optimize images
7. Minify JavaScript
8. Minify HTML
9. specify image dimensions
10. Specify a character set
11. Specify a Vary: Accept Encoding Header
12. Avoid long-running scripts
13. Avoid CSS @import
14. Avoid bad requests
15. Enable Keep-Alive
16. Make landing page redirects cacheable
17. Minify CSS
18. Minimize redirects
19. Optimize the order of styles and scripts
20. Put CSS in the document head
21. Remove query strings from static resources

7. Sprites - reduce requests -

8. ImageAlpha

Reduce image file size - lossy compression

9. https://pngmini.com/

10. Responsive design - RDS

http://estelle.github.io/rwdpanacea/#slide12


11. Debugging tools for mobile website:

1. Charles proxy

https://www.charlesproxy.com/


2. fiddler

3. browser stack
www.browserstack.com

4. device anywhere
www,keynotedeviceanywhere.com

Julia's comment:
1. Great teaching, first CSS expert Julia knows - love the course - CSS in-depth - pluralsight.com
2. web performance best practices and rules - how many Julia breaks?




Sunday, July 10, 2016

CSS learning / forgetting - a better cycle

July 10, 2016

  A few days ago, Julia could not recall CSS text_decoration text-decoration rule. She likes to find underline a word using a CSS property.

  So, she tried to fail better next time when she forgets CSS - how she can do that?

  Answer: Try the following

  1. Use her memory - push herself to memorize a CSS cheat sheet in a 2 weeks/ 30 minutes a day, and then, she will read more about CSS properties as a daily routine.

2. More cheat sheet about CSS and Regular Express:
https://codingsec.net/2016/04/complete-cheatsheet-csscascading-style-sheet/

3. https://www.cheatography.com/davechild/cheat-sheets/css2/

4. Read document 30 minutes a time:
https://developer.mozilla.org/en-US/docs/Web/CSS
https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors
CSS Selectors
   Basic Selectors
        Type selectors
        Class selectors
        ID  selectors
        Universal selectors
        Attribute selectors  (July 14, 2016 30 minutes - go over ~, |, ^, $, *, i)
            ~,              |,               ^,      $,      *,        i
            one of which, value or value-, prefix, suffix, contains, case insensitive,

        Combinators
           Adjacent sibling selectors
           General sibling selectors
           Child selectors
           Descendant selectors

        Pseudo-classes  (36)
           :active
           :checked
           :default
           :disabled
           :emtpy  

           :enabled
           :first
           :first-child
           :first-of-type
           :focus

           :hover
           :indeterminate
           :in-range
           :invalid
           :lang

           :last-child
           :last-of-type
           :left
          :link
           :not()

           :nth-child
           :nth-last-child
           :nth-last-of-type
           :nth-of-type
           :only-child

          :only-of-type
           :optional
           :out-of-range
           :read-only
           :read-write

          :required
           :right
           :root
           :target
           :valid

    :valid
Julia had hard time to memorize 36 pseudo classes, get some reading:
Pseudo classes:

    https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/

     https://css-tricks.com/pseudo-class-selectors/

5. CSS courses on pluralsight.com
CSS position
Introduction website layout
http://app.pluralsight.com/author/susan-simkins

CSS in-depth  6 hour course
(July25, 30mins/ Specificity 10m)
http://app.pluralsight.com/author/estelle-weyl

-- Past Experience --
  In 2013,
  Her favorite book: Head first Html with CSS & Xhtml
  Her favorite CSS learning starting from 2013: She found out that she could not read CSS code without knowing CSS selectors.

  In 2013, Julia tried to memorize all selectors - she worked on the drills to memorize all of them, write on papers etc. Show the paper writing to celebrate over 36 months - dated on on May 9, 2013 - CSS learning handscript . Post a picture here.

  Her favorite CSS blog about CSS selector.

  http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

-- Motivation talk -
  Share a favorite verse from Julia's favorite professional ATP player:

 http://heavy.com/sports/2015/06/stan-wawrinka-tattoo-say-mean-daughter-wife-french-open/

 https://www.theguardian.com/sport/2014/jun/09/stan-wawrinka-queens-rafael-nadal-novak-djokovic

 Stan Wawrinka is one of the most intense, hard-working players on the ATP Tour; dedicating himself to every point, giving everything in the quest for victory, no matter the cost.


And Wawrinka’s ink, unsurprisingly, reflects his tennis weltanschaung. On the inside of his left arm are the words of poet Samuel Beckett: Ever tried. Ever failed. No matter. Try Again. Fail again. Fail better.


Tuesday, February 16, 2016

Pluralsight: Responsive In-Browser Web Page Design with HTML and CSS

February 16, 2016

So good to come cross this course, and then spend 3 hours to catch up responsive design in CSS. Save me a lot of time to catch up CSS/ responsive design.

Pluralsight:

Responsive In-Browser Web Page Design with HTML and CSS


https://app.pluralsight.com/library/courses/responsive-browser-web-page-design-html-css-2262/table-of-contents

A lot of thing to read:
https://css-tricks.com/scale-svg/  (Feb. 21, 2016)

Friday, January 8, 2016

Sunday, December 27, 2015

Code School: courses study

Dec. 28, 2015

Spent hours (Dec. 23 - 3 hours, Dec. 27 - 3 hours) to watch courses on code school from Dec. 22, 2015 . Website:  https://www.codeschool.com/

Path HTML/CSS

Get Started With HTML and CSS
Course: Front-end Foundations
Course: Front-end Foundations

Intermediate CSS
course: CSS Cross-Country
course: Journey into Mobile
course: Adventures in Web Animations

CSS Preprocessors
course: Assembling Sass
course: Assembling Sass Part 2

CSS Frameworks
course: Blasting Off with Bootstrap

Design
course: Fundamentals of Design


Paths: JavaScript

Client-side Frameworks
course: Shaping up with Angular.js
course: Staying Sharp with Angular.js
course: Warming Up With Ember.js

More review:

Google I/O 2013 - Design Decisions in AngularJS

https://www.youtube.com/watch?v=HCR7i5F5L8c&feature=share&fb_ref=share



Wednesday, August 12, 2015

Julia's reading list of CSS, html, Java Script

CSS/ Jquery/ Html  reading list
Julia read several articles to expand knowledge about CSS, html, Java Script, and here is her reading list compiled on August 12, 2015:
  1. August 28, 2013
Read the article web standards curriculum
  1. May 9, 2013, read the article, and then memorize the selectors.
  1. Visual formatting model (August 26, 2013):
  1. CSS 2.1 primer
  1. Cascading Style Sheets articles and tutorials (August 28, 2013)
  1. Inheritance and cascade (Nov. 18, 2013): (learning specificity calculation in detail)
  1. Basic Structures of a web page (Nov. 27, 2013):
  1. CSS absolute and fixed positioning (Nov. 20, 2013)
  1. Javascript Guide (Mozzila Foundation US)
  1. CSS pocket book: (March 24, 2015)

Tuesday, July 28, 2015

CSS, JavaScript, Jquery learning

July 27, 2015

Basic training code for CSS, html, Jquery, Javascript from books, public internet, and other people's blog. Training basics, know concepts.  

Learning a new language takes time, know syntax, memorize CSS selectors, and then, read "Head first CSS" and understand basic box model, rules, cascading rules, specificity in CSS etc.; she should have stayed more organized.

She tries to learn more about CSS, html, Java Script, practice more code. 







My favorite thing to do is to challenge myself, try to memorize something over 10 times and see if it will help me learn a new language, improve programming performance. 

Java Script cheat sheet from book Pocket Guide To JavaScript is my favorite one to read, and practice to memorize. 
Here is another one: 
http://www.cheatography.com/davechild/cheat-sheets/javascript/