Ang <address></address> ang ginagamit para i-mark up ang contact information ng isang tao o organisasyon. <address> Francis Rubio<br> <a href="mailto:devFrancisRubio@gmail.com">✉️ Email</a><br> <a href="tel:+13115552368">📞 (311) 555-2368</a> </address> Details Nire-represent ng address element ang contact information para sa isang article element o para sa body element. Kapag nasa loob ito ng body element pero wala ito sa loob ng isang article element, nire-represent nito ang contact information para sa buong webpage. Puwedeng gumamit ng kahit na anong format ang content sa loob ng address element. Puwede itong magkaroon ng kahit anong contact information gaya ng address ng bahay o opisina, email address, mobile o telephone number, usernames sa mga social media networks, geographic coordinates, at iba pa. Siguruhin lang na kasama sa loob ng address element ang pangalan ng tao, grupo, o organisasyon na tinutukoy ng address element. Halimbawa: paglalagay ng geographic coordinates sa loob ng address element. <address>Lola the cat is at Latitude: 51.413126 Longtitude: -0.298219 </address> Halimbawa: paglalagay ng address, telephone, at fax numbers sa loob ng address element. <address> UNIVERSITY INTERSCHOLASTIC LEAGUE<br> 1701 Manor Road, Austin, TX 78722<br> Tel: (512) 471-5883 | Fax: (512) 471-5908 </address> Puwedeng gamitin ang address element sa maraming contexts, gaya ng contact information ng isang negosyo na nakalagay sa header ng webpage. Example: markup para sa footer ng isang website. May laman itong contact information at copyright notice. <footer> <address> For more details, contact <a href="mailto:js@example.com">John Smith</a>. </address> <p><small>© copyright 2038 Example Corp.</small></p> </footer> Puwede rin itong gamitin para i-mark up ang pangalan ng author kung ilalagay ang address element sa loob ng article element. Note: puwede ring gamitin ang a element para i-mark up ang pangalan ng author kung lalagyan ito ng `rel="author"` attribute. Siguruhin lang na may kasama rin itong URL sa href kung saan makikita ang mas detalyadong information tungkol sa author. <article> <header> … <p> Written by: <a href="/author/francis-rubio" rel="author"> Francis Rubio </a> </p> </header> … </article> Hindi dapat gamitin ang address para i-mark up ang mga contact information na wala namang kinalaman sa buong webpage o article element. Halimbawa, hindi ginagamit ang address para i-represent ang office address ng isang taong na-mention lang sa article. Para sa ganitong kaso, puwedeng gamitin ang p element. Halimbawa: Mali ito! <p> In-interview namin sila. Bago kami nagpunta sa kanilang opisina, nagpadala muna kami ng sulat sa kanilang postal address <address>3102 Highway 98 Mexico Beach, FL</address>. </p> Hindi dapat magkaroon ng ibang laman ang address element maliban sa pangalan at contact information ng tao, grupo, o organisasyon. Kung ginagamit mo ito para i-mark up ang author ng article, huwag isama rito ang publication date ng article. Mas akmang gamitin ang <time></time> element para sa publication date at iba pang petsa. Halimbawa: Mali ito! <p> Isinulat ni: <address> Francis Rubio (May 21, 2020) </address> </p> Halimbawa: Mas tama ito <p> Isinulat ni: <address> Francis Rubio </address> (<time datetime="2020-05-21">May 21, 2020</time>) </p> By default, pare-parehas ang styling ng <i>, <em>, at <address>. Pero tandaan na meaning ang dapat nating tingnan kapag pumipili ng HTML tags na gagamitin. Gamitin ang i para sa mga text na iba kumpara sa context nito. Gamitin ang em para lagyan ng emphasis ang isang salita, phrase, o pangungusap kapag binabasa ito. Gamitin ang address para i-mark up ang contact information ng tao, grupo, o organisasyong may-ari ng webpage o sumulat ng article. References <address>: The Contact Address element The <address> HTML element indicates that the enclosed HTML provides contact information for a person or people, or for an organization. MDN Web Docs Wed, Jul 7, 2021 HTML Standard 4.3.10 The address element HTML Living Standard HTML 5.2: 4.4. Grouping Content 4.4.2. The address element HTML 5.2 W3C Recommendation Thu, Jan 28, 2021 Mga Selector Bukod sa HTML tags, puwede tayong gumamit ng patterns, o selectors, para sabihin sa CSS kung sa aling HTML elements lang mag-a-apply ang styling natin. Ginagamit ang selectors para sabihin sa browser kung aling HTML elements ang lalagyan nito ng styling. Sa nakaraang lesson, ginamit natin ang type selectors para i-select ang HTML elements gamit ang tag nila. Sa lesson na ito titingin pa tayo ng maraming selectors. Mga Basic Selector Type selectors Ito ang ginamit natin last lesson. Ginagamit natin ito para ma-select ang HTML elements gamit ang HTML tag nila. Para gamitin ito, inilalagay lang natin sa selector ang tag name ng HTML element (ang part na nasa pagitan ng angle brackets). Halimbawa, gusto nating i-select ang lahat ng paragraph sa HTML, gagamitin natin ang p bilang selector natin: p {...} Universal selector Ginagamit natin ang unversal selectors kapag gusto nating i-select ang lahat ng elements. Gumagamit tayo ng asterisk (*) para sabihin sa browser na gusto nating i-style lahat ng elements. Sa example na ito, dahil universal selector ang ginamit natin, magiging kulay pula ang kulay ng text ng lahat ng HTML elements. See the Pen Universal Selectors by Francis Rubio (@maniczirconium) on CodePen. Class selector Sa lahat ng selectors, ito ang pinakamadalas mong gagamitin. Sine-select nito ang HTML elements gamit ang value na nasa class="" attribute nito. Halimbawa, para ma-select ang HTML element na ito: <p class="align-to-right">This is a paragraph that is aligned to the right side of the screen.</p> …gagamitin natin ang selector na ito: .align-to-right {...} Ikaw din ang magse-specify ng value ng class="" attribute. Madalas mo itong magagamit dahil gamit ito, puwede mong baguhin ang design ng buong webpage nang hindi naka-depende sa structure ng HTML code. Siyempre, puwede mo pa ring gamitin lahat ng iba pang CSS selectors, pero ito ang malamang na pinakamadalas mong gagamitin. See the Pen Class Selectors by Francis Rubio (@maniczirconium) on CodePen. Sa CSS, nilalagyan natin ng tuldok (.) ang simula ng bawat class selectors. Sa example na ito, makikita na mayroon tayong dalawang magkaibang class, ang align-to-right at red-text. Pero puwede rin natin silang gamitin nang sabay sa iisang HTML tag, gaya ng ginawa natin sa pangatlong paragraph: <p class="align-to-right red-text">In 1995, Menzel auditioned for Rent, which became her first professional theatre job and her Broadway debut. Rent opened Off-Broadway at the New York Theatre Workshop on January 26, 1996, but it moved to Broadway's Nederlander Theatre due to its popularity. For her performance as Maureen Johnson in the original cast of the musical, Menzel received a Tony nomination as Best Featured Actress in a Musical losing to Ann Duquesnay for Bring in 'da Noise, Bring in 'da Funk. Her final performance in the musical was on July 1, 1997.</p> Kung gusto nating gumamit ng isa o higit pang class sa iisang HTML element, naglalagay lang tayo ng isang space sa pagitan nila. ID selectors Sine-select ng ID selectors ang mga HTML element base sa value ng id="" attribute nila. Di-gaya ng class="" attributes, iisa lang ang puwedeng value ng id="" attribute. Bukod pa riyan, hindi ito puwedeng magkaroon ng kaparehong ID sa isang webpage. See the Pen ID Selectors by Francis Rubio (@maniczirconium) on CodePen. Sa CSS, ini-specify natin ang ID selectors kapag naglalagay tayo ng pound sign o hashtag sa simula ng selector. Attribute selector Sine-select naman ng attribute selectors ang HTML elements base sa value ng iba’t iba nilang attributes. Dito, puwede mong i-select ang HTML elements gamit ang kahit na anong attribute nila, hindi lang ang class="" o id="". See the Pen Attribute Selectors by Francis Rubio (@maniczirconium) on CodePen. Sa example na ito, ginawa nating dodgerblue ang kulay ng text ng link na _blank ang value ng target attribute. Kapag wala namang laman ang target attribute, magiging kulay pula ang text nito. Pero kapag wala itong target attribute, hindi ito apektado ng kahit alin sa dalawang CSS rules natin. Paggugrupo ng mga selector May mga time na may mga HTML elements tayo na magkaparehas ng styling pero magkaiba ng HTML tag, class, id, o attribute. Sa mga ganitong kaso, napakauseful na pagsamahin sila sa iisang CSS rule, gaya nito: .red-text, #red-din-ako { color: red; } Makikita natin sa code na ito na pinagsama natin ang .red-text at #red-din-ako sa iisang rule. Magiging kulay red na ang text ng dalawang element na ito: See the Pen Selector Grouping by Francis Rubio (@maniczirconium) on CodePen. Combinators Ang combinators ay mga pattern ng selectors na nagse-select ng HTML elements base sa structure nila sa Document Object Model. Descendant combinator Gamit ang space ( ), ini-indicate natin sa browser na ise-select natin ang mga elements na nasa loob ng isang HTML element (na kung tawagin ay descendant). Halimbawa, sa HTML na ito, makikita na sa loob ng <p></p>, mayroon tayong <em></em> at <strong></strong>. At sa labas naman ng <p></p> tags, mayroon din tayo ng dalawang tags na iyon: <p>Following the <em>success</em> of Rent, Menzel released her first solo album entitled Still I Can't Be Still on Hollywood Records, Menzel also originated the role of Dorothy in Summer of '42 at Goodspeed Opera House in Connecticut, starred as Sheila in the New York City Center Encores! production of Hair and appeared on Broadway as Amneris in Aida. <strong>Menzel earned a Drama Desk Award nomination</strong> for her performance as Kate in the Manhattan Theatre Club's 2000 Off-Broadway production of Andrew Lippa's The Wild Party. Her other Off-Broadway credits include the pre-Broadway run of Rent and The Vagina Monologues.</p> <em>This is an emphasis.</em> <strong>This is a strong emphasis.</strong> Tingnan naman ang sumusunod na CSS rule. Dito, ginamit ang p em para i-indicate na ang magiging kulay pula lang ay ang text ng <em> na nasa loob ng <p>. Dahil dito, walang nagbago sa kulay ng <em> nasa labas ng <p>. See the Pen Descendant Combinator by Francis Rubio (@maniczirconium) on CodePen. Child Selector Kagaya naman ng descendant selector ang child selector. Ise-select din nito ang element na nasa loob ng isa pang element. Pero hindi ito magse-select ng element na nasa loob din ng element na iyon. Halimbawa, sa HTML na ito, mayroon tayong <ul> sa loob ng isang <li>: <ol> <li>List Subitem 1</li> <li> List Item 2 <ul> <li>List Subitem 1</li> <li>List Subitem 2</li> <li>List Subitem 3</li> </ul> </li> <li>List Subitem 3</li> </ol> Gamit ang descendant selector, malalagyan natin ng border ang lahat ng li na nasa loob ng ol: See the Pen Child Combinator by Francis Rubio (@maniczirconium) on CodePen. Pero gamit ang child selector, ang unang mga li lang ang magkakaroon ng borders. Hindi maapektuhan ang mga li sa loob nila: See the Pen Child Combinator by Francis Rubio (@maniczirconium) on CodePen. General Sibling Combinator Sine-select ng general sibling combinator ang mga kapatid ng isang element, o ang mga element na nasa kaparehong lebel nito. Halimbawa, sa isang <ul>, magkakapatid ang mga <li> sa loob nito dahil nasa iisang lebel lang sila. Sa susunod na HTML example, may class na red-text ang ikalawang li. <ul> <li>List item 1</li> <li class="red-text">List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ul> Sa CSS na ito, gagamitin natin ang general sibling combinator para gawing kulay red ang .red-text, at green naman ang lahat ng kapatid na li nito na kasunod niya. Pansinin na dahil nauna sa structure ng DOM ang List item 1, hindi ito kasali sa mase-select ng general sibling combinator. See the Pen gOrzdZj by Francis Rubio (@maniczirconium) on CodePen. Adjacent Sibling Selector Gaya ng general sibling selector, nagse-select din ng mga kapatid na element ang adjacent sibling combinator. Pero ang sine-select lang nito ay ang element na adjacent dito, ang unang katabi nito. Kunin natin ang nakaraang example natin, pero this time, gamitin natin ang adjacent sibling combinator: <ul> <li>List item 1</li> <li class="red-text">List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ul> See the Pen Adjacent Sibling Selector by Francis Rubio (@maniczirconium) on CodePen. Sa general sibling combinator, naging green ang lahat ng items na kasunod ng .red-text, ang List item 3 hanggang List item 5. Pero sa adjacent sibling combinator, List item 3 na lang ang naging green dahil ito ang unang kasunod ng .red-text. Summary Ginagamit natin ang selectors para sabihin sa browser kung sa aling HTML elements lang mag-a-apply ang style rules natin sa CSS. Puwede rin nating i-group ang iba’t ibang selectors sa iisang rule kung magkakaparehas lang sila ng styles. Ginagamit naman natin ang combinators para mag-select ng elements depende sa structure nila sa DOM o Document Object Model. Ang cascade ay isang algorithm na ginagamit ng browser para malaman kung paano pagsasama-samahin ang mga style rule mula sa iba’t ibang locations. Ito ang mismong core ng CSS, kaya ito tinawag na Cascading Style Sheets. Habang gumagawa ka ng websites, mapapansin mo na may ilang kaso kung saan hindi gumagana ang mga style rules na ginawa mo. Kadalasan na, nangyayari ito dahil may dalawa ka o higit pang style rules na potentially ay puwedeng mag-apply sa element, at dahil dito, nagko-conflict sila. Ginagamit ng browsers ang cascade at ang specificity (isa pang concept na kalapit din ng cascade) para malaman kung aling style rules ang ia-apply nito sa mga element kapag nagkaroon ng conflict. At mahalaga na maintindihan mo kung paano ito gumagana para malaman mo kung bakit minsan ay hindi nangyayari ang gusto mong gawin sa CSS. Isa pang konsepto na dapat mong malaman ay ang inheritance. Nangyayari ito kapag nai-inherit o namamana ng isang element ang CSS styles na nasa parent element nito. Puwede rin itong maging dahilan ng unexpected na styles sa design mo. Ang cascade Sa madaling sabi, dahil sa cascade, mahalaga na pag-isipan natin ang pagkakasunod-sunod ng ating mga style rules. Kapag gumawa ka ng dalawang style rules na may magkaparehong selectors, halimbawa, ia-apply ng browser ang pinakahuling style na inilagay mo sa CSS dahil sa cascade. Tingnan ang halimbawang ito. See the Pen Cascade with same specificity by Francis Rubio (@maniczirconium) on CodePen. Dahil parehong h1 ang selector ng dalawang style rules na ito, magkakaroon dapat ng conflict sa styles. Pero dahil sa cascade, pinipili ng browser ang huling style rule. Ang specificity Ang specificity ay ang sukat kung gaano ka-specific ang selector ng isang style rule. Ginagamit din ito ng browser para malaman kung aling style ang dapat nitong gamitin kapag nagkaroon conflict. Tingnan natin ang susunod na example: See the Pen Specificity by Francis Rubio (@maniczirconium) on CodePen. Sa example na ito, parehas lang na tumutukoy sa iisang element ang .my-heading at h1 selector. Kung susundin ang cascade, magiging blue sana ang color ng text dahil iyon ang huling nakalagay sa code. Pero ayon sa specificity rules natin, mas specific ang class selector kaysa sa type selector. Bakit?1 May order o ranking ang browser para malaman kung aling mga selectors ang mas specific kaysa sa iba. Sa ranking na ito, nasa top 1 ang mga declaration sa style="" attribute, kaya ito ang madalas na mag-a-apply sa element kapag may conflict. Styles sa loob ng style="" attribute (pinaka-specific) ID selectors (e.g. #my-id) Class selectors (e.g. .my-class), attribute selectors (e.g. [type=radio]), at pseudo-classes (e.g. :hover, :focus) Type selectors (e.g. h1, p) (least specific), at pseudo-elements (e.g. ::before, ::after) Ang !important Sa ilang cases, naglalagay tayo ng declaration sa style="" attribute ng HTML tag natin, pero gusto nating i-override iyon sa CSS. Isang way para magawa ito ay ang paggamit ng !important declaration. Tingnan ang halimbawang ito. See the Pen Overriding inline styles with !important by Francis Rubio (@maniczirconium) on CodePen. Sa example na ito, nag-set tayo ng color sa style attribute ng h1: <h1 style="color: red;">This is a red headline</h1> Sa unang rule na inilagay natin sa CSS, sinubukan nating baguhin ang kulay ng text at gawin itong blue: h1 { color: blue; } Pero hindi ito gumagana dahil, ayon sa rules natin ng specificity, mas specific ang mga declaration na nasa loob ng styles="" attribute. Kaya para ma-override iyon, gumamit tayo ng !important declaration sa pangalawa nating rule: h1 { color: green !important; } Ngayon, makikita na natin sa browser na in-override nito ang kulay ng text. Naging green na ito, mula sa red na naka-set sa style="" attribute. Warning: Iwasang gamitin ang !important. Binabago nito ang normal na proseso ng cascade, kaya kapag mas marami kang !important sa CSS mo, mas mahihirapan kang gumawa ng styles. Gamitin lang ito kung talagang kinakailangan. Inheritance May mga CSS declarations naman na naipapasa sa mga descendant ng isang element. Halimbawa, pansinin ang example na ito: See the Pen Inheritance by Francis Rubio (@maniczirconium) on CodePen. Sa HTML, mapapansin na sa p lang naka-set ang kulay na crimson, pero apektado rin ang strong sa loob ng p. Ito ang tinatawag na inheritance. Hindi ito nangyayari sa lahat ng CSS properties, pero may mga declarations na naipapasa o namamana ng isang element galing sa parent element niya. Summary Ang cascade, inheritance, at specificity ay mga techniques na ginagamit ng browser para malaman kung aling mga styles ang mag-a-apply sa bawat element. Dahil sa cascade, ina-apply ng browser ang styling na pinakahuling na-declare sa CSS kapag may mga conflict. Dahil sa specificity, ina-apply ng browser ang stylng na may pinaka specific na selector. Dahil dito, nagkakaroon tayo ng way para ma-override ang mga styles kung kailangan. Dahil naman sa inheritance, nakukuha ng mga element ang ilang CSS properties galing sa parent element nila. May mas detalyadong paliwanag sa MDN Docs. Tingnan ang article na Cascade and Inheritance. ↩ Isa sa mga fundamental concepts ng CSS na dapat nating tandaan ay ang box model: lahat sa CSS ay box. Anuman ang hitsura ng isang element visually, box pa rin ito para sa CSS. Kahit may border-radius ang dalawang div elements na ito, itinuturing pa rin silang box ng CSS Mahalaga na tandaan ang konseptong ito sa CSS. Pero mas mahalagang maintindihan kung paano kino-compute ng browser ang magiging size ng mga box na ito at kung paano sila nakikipag-interact sa isa’t isa. previous slide Enlarge image Enlarge image Enlarge image next slide Ang content-box By default sa box model, kapag sinet mo ang height at width ng isang element, mag-a-apply lang ito sa mismong content ng element. Pagkatapos, kung may naka-set ka ring padding at border, saka ito idadagdag sa overall width at height ng element. Ito ang box-sizing: content-box;. Dahil sa default na box-sizing: content-box, iba ang actual na width at height kaysa sa naka-set na width at height sa stylesheet. Puwedeng magkaroon ng unexpected effects ang ganitong behavior. Pansinin ang susunod na example. Isa ito sa mga madalas nating gamitin sa layout ng webpages. Madalas tayong mag-set ng width: 100%; sa mga elements para sakupin nila ang available space sa loob ng parent nila. .child { width: 100%; border: solid #5B6DCD 10px; padding: 25px; } See the Pen Box-sizing: Content-box by Francis Rubio (@maniczirconium) on CodePen. Gaya ng mapapansin ninyo, dahil sa content box sizing, lumalampas sa width ng parent container ang actual width ng child container. Ang actual width na kasi ng child element ay (100% ng parent width + 25px padding-left + 25px padding-right + 10px border-left + 10px border-right). border-box to the rescue! Para ma-solve ito, kailangan lang nating i-set ang box-sizing ng element into border-box. Kapag naka-border-box ang box-sizing ng isang element, magbabago ang way kung paano kino-compute ng browser ang width. Ngayon, kasama na sa width at height ang padding at border ng element. Kahit gaano pa kalaki ang padding at border mo, hindi nito maapektuhan ang width at height na sinet mo dahil automatic na ina-adjust ng browser ang width ng content. .child { width: 100%; border: solid #5B6DCD 10px; padding: 25px; box-sizing: border-box; } See the Pen Box-sizing: Content-box by Francis Rubio (@maniczirconium) on CodePen. Sa example na ito, dahil sa box-sizing: border-box, gumagana na as expected ang layout natin. Sa halip kasi na sa box ng content i-apply ng browser ang width at height, ina-apply na ito sa box ng border (kaya siya tinawag na border-box). Ito actually ang makikita sa maraming reset stylesheets1 gaya ng Normalize. Sa halip na hayaan ang default styling (box-sizing: content-box), nire-reset ng mga stylesheet na ito ang box-sizing at ginagawa itong border-box. Kaya naman makikita natin ang code na ito sa maraming stylesheets: *, *::before, *::after { box-sizing: border-box; } Bakit hindi border-box ang default? Kung mas maganda ang border-box, bakit hindi na lang ito ang ginawang default? Para diyan, kailangan nating bumalik sa taông 1996 kung kailan unang nilabas ang CSS pati na ang box model nito. Originally, ayon sa first CSS specification, ang sine-set ng width property ay ang width ng content box (hindi kasama ang padding at border). Tinawag nila ito before na W3C box model. The size of the box is the sum of the element width (i.e. formatted text or image) and the padding, the border and the margin areas. Cascading Stylesheets, level 1 specification Ayon sa W3C spec, overall width = width + padding + border Pero during implementation, nagkaroon ng mga problema. Dati kasi, hindi lahat ng browser ay sumusunod sa W3C box model. Para sa dalawang sikát na browsers noon, ang Netscape at Internet Explorer, ang kasama sa width ng element ang size ng border at padding. Ibig sabihin, hindi madaragdagan ang overall width ng isang element kahit may naka-set na padding at border dito. Ito ang tinawag nila na Internet Explorer box model. Naging cause ito ng maraming problema. Maraming websites ang dumepende sa IE box model. Bukod pa riyan, maraming web developers at graphic designers noon ang nagsabi na mas maganda ngang gamitin ang IE box model. Kaya naman isinama na ng W3C ang box-sizing property kalaunan. Ang default property nito ay content-box (W3C box model) at ang isa pang value nito ay border-box (IE box model). Pero siyempre, hindi puwedeng palitan ang default nito at gawing border-box dahil masisira ang mga lumang website na ginawa para sa Internet Explorer. Tandaan na mahalagang property ng Web ang backwards compatibility. Further reading box-sizing The box-sizing CSS property sets how the total width and height of an element is calculated. MDN Web Docs Sat, Feb 20, 2021 Box Sizing | CSS-Tricks The box-sizing property can make building CSS layouts easier and a lot more intuitive. It's such a boon for developers that here at CSS-Tricks we observe Marie Mosley Wed, May 6, 2015 Internet Explorer and the CSS box model | 456 Berea Street Various methods of dealing with the incorrect CSS box model used by older versions of Internet Explorer for Windows. Roger Johansson Thu, Dec 21, 2006 Cascading Style Sheets, level 1 Various methods of dealing with the incorrect CSS box model used by older versions of Internet Explorer for Windows. Håkon Wium Lie, Bert Bos Tue, Dec 17, 1996 A reset stylesheet (or CSS reset) is a collection of CSS rules used to clear the formatting of HTML elements.—Wikipedia, Reset style sheet ↩ Ang WCAG o Web Content Accessibility Guidelines ay isang set ng guidelines para sa mga website. Kapag sinusunod ito ng isang website, nagiging mas accessible ito para sa lahat, lalo na sa mga may disabilities, kasama na ang mga bulag, malabo ang mata, bingi o mahina ang pandinig, mga may learning disabilities, cognitive limitations, mga nahihirapang igalaw ang ilang bahagi ng katawan nila, mga may speech disability, photosensitivity o mga sensitive sa ilang kulay o maliliwanag na ilaw, at iba pa. Sa WCAG 2.0 3.1.5, binanggit ang guideline tungkol sa Reading Level: When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available. (Level AAA) Pansinin na Level AAA ito. Ibig sabihin, nire-recommend ng WCAG na sundin ang guideline na ito, pero hindi ito magiging required sa lahat ng uri ng content. Hindi kasi applicable ang rule na ito sa ilang uri content, gaya ng mga technical document, research papers, at iba pa na nagre-require ng mas mataas na level ng reading comprehension. Pero kahit hindi ito required na gawin sa lahat ng website, magandang practice na i-apply natin ito kahit sa pinakamaliit na parts ng site natin. Tandaan na hindi lang tumutukoy ang salitang text sa mga text na nasa isang blog, news article, at iba pa. Kasama rin dito ang text na nasa mga button, links, at iba pang interactive elements gaya ng Submit, Continue, Add to cart at iba pa. Ang totoo, mas mahalaga na subukan nating i-apply ang guideline na ito sa mga interactive element dahil kailangang naiintindihan ng users natin kung ano ang mangyayari kapag nakipag-interact sila sa mga element na iyon. Sa post na Standards for Writing Accessibly mula sa A List Apart1, nagbigay ng ilang tips sina Michael J. Metts at Andy Welfle tungkol sa pagsulat ng text para masunod ang accessibility guideline na ito. Screen readers Ang mga screen reader ay mga software na ginagamit ng mga may disability sa paningin para malaman nila kung ano ang nasa screen. Binabasa sa kanila ng screen readers kung ano ang nasa screen, gaya ng buttons, description ng mga image (alt text), at iba pa. At ayon kina Metts at Welfle, trabaho natin bilang developers ng mga user interface na bigyan ng context ang mga interactive elements ng website o web app natin. Ito ang ilan sa mga tips na ibinigay nila: Huwag matakot na pahabain ang mga sentence o phrase kung ito ang kailangan para maging mas malinaw ang content. Ayon kina Metts at Welfle, 2 - 5 words per second ang average reading speed ng mga taong may maayos na paningin. Samantala, umaabot sa 35 syllables per second ang naiinntindihan ng mga taong gumagamit ng screen readers. Mas mabilis ito kumpara sa pagbabasa ng mga may paningin. Kung kinakailangang mas mahaba ang text para maintindihan ito ng users mo, huwag matakot na gawin ito. Gumamit ng headings. Kung isang malaking bloke ng text ang isinulat mo, lalaktawan ito ng mga mambabasa, kapuwa mga may paningin at mga gumagamit ng screen readers. Kaya napakahalaga na gumamit ng mga heading para bigyan ng structure ang articles o posts mo. Magsulat ayon sa pagkakasunod-sunod, hindi ayon sa posisyon Bilang web developers, malamang na pamilyar kayo sa responsive web design. Dahil dito, puwedeng iba-iba ang maging layout ng user interface depende sa device at browser na ginagamit ng user. Dahil dito, puwedeng mapunta sa taas ng screen sa mobile layout ang mga button na nasa baba ng screen sa desktop layout. Pero hindi ganito ang siste ng mga screen reader. Dahil hindi umaasa ang screen readers sa visual layout ng isang user interface, binabasa nito ang content mo ayon sa pagkakasunod-sunod sa structure nito sa HTML. Kaya sa halip na sabihing: Click the OK button below to continue. (Sa isang link na magdadala sa iyo sa taas ng page): Go to top Mas magandang sabihing: Next, select OK to continue Go to beginning Sundan ang writing mode Ang writing mode ay ang direksyon ng pagsulat. Sa Filipino at English, ito ay left-to-right, top-to-bottom. Kapag gumagawa ka ng user interfaces, mahalagang isaisip na para sa karamihan ng screen readers, ang order ng information ay left-to-right, top-to-bottom. Halimbawa, pansinin ang sumusunod na mock-up ng isang password input. Para sa mga users na may maayos na paningin, effective ang pagkakalagay ng hints sa password na ito. At ito na ang pattern na madalas nating makita sa mga websites; palaging nasa baba ng password input ang mga hint para maging valid ang password. Pero isipin natin kung ano ang maririnig ng isang user na gumagamit ng screen reader. Dahil top-to-bottom ang parsing na ginagawa ng screen readers, mauuna nilang ma-encounter ang password input bago ang hints. Kung magiging invalid ang password kapag hindi nasunod ang lahat ng conditions sa hint, baka malito ang user ng screen reader dahil hindi pa naman niya alam na may mga conditions pala. Kaya ano ang mas magandang gawin? Ayon kina Metts at Wefle, mas maganda kung ilalagay ang hints bago ang password input para malaman kaagad ng user ang tungkol sa hints. Tandaan na kailangan lang ito sa HTML markup, kaya kung kinakailangang nasa baba ito ng password input para sa visual layout mo, puwede mong baguhin ang visual layout nito gamit ang CSS grid.2 Huwag umasa sa kulay at icons Tandaan na pantulong lang ang mga kulay at icons. Hindi tayo dapat umasa rito para i-convey ang meaning ng mga actions para sa users. Halimbawa, kapag nakakita ka ng warning sa isang user interface na nakapula, maiintindihan mo agad na delikado o danger ang ibig sabihin nito. Pero gaya siguro ng alam n’yo na, iba ang kahulugan ng kulay pula3 sa ibang cultures. Isa pa, tandaan na may mga taong color blind. Para sa kanila, hindi reliable ang kulay bilang indicator ng meaning dahil may mga kulay silang hindi nakikita. At hindi rin lahat ng tao ay pamilyar sa mga icon na ginagamit natin sa mga user interface element natin. Naaalala pa ba ninyo ang panahon bago ang iPhone? Wala pang gumagamit ng hamburger menu icon noon, kaya nang nauso ang responsive web design, naging problema para sa mga mobile user ang malaman kung nasaan ang ibang menu options dahil nakatago ito sa likod ng isang icon na hindi pa nila nae-encounter before. Ngayon, pamilyar na ang karamihan sa iba’t ibang icons na ginagamit natin para sa mga menu. Pero kumusta ang ibang icons? Tandaan na may mga users na hindi maiintindihan ang iba sa mga icons na ginagamit natin. Kaya mahalaga na magbigay ng context at higit pang detalye sa mga user interface natin. Mula sa hamburger menu icon, nagkaroon na rin tayo ng iba't ibang uri ng menu icons. Alam mo bang ito ang tawag sa kanilang lahat? Hindi? Kumusta ang users ng website mo? Mahalaga na bukod sa kulay at icons, dapat may label din para sa context at details. I-describe ang action, hindi ang behavior Tandaan na iba-iba ang devices na ginagamit ng users para i-access ang websites at web apps natin. Sa halip na gumamit ng mga device-specific na terms gaya ng “Click”, “Tap”, “Press”, o “See” (dahil hindi lahat ng users ay nakakakita), mas maganda kung ide-describe natin ang behavior na kailangang gawin ng user. Kasama rito ang mga salitang gaya ng “Choose”, “Select”, o “View”. Siyempre, may mga exceptions din sa guideline na ito. Halimbawa, hindi puwedeng palitan ang “Pinch to zoom” kahit na puwede lang itong gawin sa mga touchscreen device dahil dito umiikot ang buong functionality ng feature na iyon. Pero generally speaking, magiging mas simple ang text ng site mo kung susundin mo ang guideline na ito. Further reading Standards for Writing Accessibly In this excerpt from Writing Is Designing, Michael J. Metts and Andy Welfle discuss critical accessibility considerations for content authors, including reading order, references to additional cont… Michael J. Metts, Andy Welfle Thu, Jan 23, 2020 How to Meet WCAG (Quickref Reference) World Wide Web Consortium Sun, Feb 21, 2021 Ang post na ito ay excerpt mula sa aklat na Writing is Designing nina Michael J. Metts at Andy Welfle. ↩ Puwede ring gamitin ang Flexbox para dito. Puwede nating gamitin ang order property sa mga flex item para baguhin ang pagkakasunod-sunod nila sa visual layout. Tandaan lang na may mga problema rin sa approach na ito. ↩ Sa kulturang chinese, suwerte ang kulay pula. Sa ilang mga bansa sa eastern Europe, kakabit ng kulay pula ang Komunismo. Sa India naman, kinakatawan ng kulay pula ang purity. ↩ Gamit ang mga page layout techniques sa CSS, puwede nating makontrol kung paano naka-arrange ang mga elements sa isang webpage. Kasama sa mga tatalakayin natin sa artikulong ito, at sa mga kasunod pa, ang mga techniques na ito: Normal flow o flow layout Ang display property Flexbox Grid Floats Positioning Table layout Multicolumn Layout Kung may experience ka na sa ilan sa mga ito, malamang na may idea ka na kung alin ang gagamiting technique para sa karamihan ng use cases. Pero may ilan, na gaya ng floats, na hindi na natin gaanong ginagamit. Sa article series na ito, tingnan natin kung paano gagamitin ang bawat isa sa kanila, at kung kailan sila dapat gamitin. Flow layout Flow layout ang default na layout ng isang web page kapag wala kang ginawang kahit ano sa layout nito. Tingnan natin ang isang example: <h1>This is a headline</h1> <p>This is a paragraph</p> <ul> <li>List item #1</li> <li>List item #2</li> <li>List item #3</li> <li>List item #4</li> </ul> By default, ito ang ipapakita ng browser: Naka-display rito ang mga elements batay sa pagkakasunod-sunod nila sa source code. Naka-arrange din sila mula top to bottom. Block elements ang tawag sa mga element na naka-display on top of one another sa vertical axis. Inline elements naman ang tawag sa mga element na nagdi-display nang magkatabi sa horizontal axis, gaya ng mga salita sa isang paragraph. Note: Nagbabago ang direction ng layout ng block at inline elements depende sa paraan ng pagsulat o writing mode. Halimbawa, sa Filipino at English, left to write (horizontal) ang inline direction dahil nagsusulat tayo mula kanan pakaliwa, at top to bottom (vertical) naman ang block direction dahil mula taas pababa ang bawat line ng sinusulat natin. Pero sa ilang wika gaya ng Hebrew, Arabic, Chinese, Japanese, Korean, at iba pa na hindi gumagamit ng latin alphabet, nagbabago ang direksyon ng pagsulat. Ang block at inline level elements Karaniwan na, normal flow lang ang kailangan para sa karamihan ng layout na gagawin mo. Pero para sa mga mas komplikadong layout, kakailanganin mong baguhin ang layout gamit ang ilang tools sa CSS. Tandaan na mahalagang magsimula sa isang HTML document na may maayos na structure. Nile-layout ng browsers ang lahat ng element gamit ang box model ng CSS By default, sasakupin ng isang block level element ang 100% ng width ng parent nito, at mag-a-adjust namane ang height nito depende sa dami ng content. Sa inline level elements naman, nag-a-adjust both ang width at height depende sa dami ng content nito. Hindi puwedeng i-set ang width at height ng isang inline level element. Kung gusto mong kontrolin ang size ng isang inline element, kailangan mo itong gawing block gamit ang display: block;. Puwede mo ring gamitin ang display: inline-block; na pagsasamahin ang behaviors ng inline at block level elements. Gaya ng nabanggit na, ile-layout ng browser ang block level elements sa block direction ng writing mode o paraan ng pagsulat. Sa Filipino at English, top to bottom ang block direction dahil sinusulat natin ang bawat line ng text mula sa itaas pababa, kaya naman nakalagay ang bawat element sa ilalim ng element na nauna rito. Iba naman ang behavior ng mga inline element. Hindi sila nile-layout individually sa magkakahiwalay na lines. Sa halip, magkakatabi sila sa iisang line, ang inline direction ng writing mode. Sa Filipino at English, left to right ang inline direction dahil sinusulat natin ang bawat salita mula sa kanan pakaliwa. Magtatabi-tabi ang mga inline element as long as may space pa sa isang line. Kapag wala nang space para sa susunod na element (o kapag may nakaharang na floated element, na tatalakayin natin sa susunod na mga articles), bababa na sa susunod na line ang inline element. Margin collapsing Kapag may margin ang dalawang magkatabing element, at magkatabi rin ang mga margin nila, mawawala ang mas maliit na margin. Ito ang tinatawag natin na margin collapsing. Tingnan natin ang isang halimbawa nito. Sa margin collapsing, naglalaho ang mas maliit na margin kapag may nakatabi itong isa pang element na may mas malaking margin sa flow layout. Hindi naging maganda ang 2020 para sa ating lahat. Patuluyan tayong pininsala ng COVID-19 pandemic, mga malalakas na bagyo, lansakang pagpatay ng mga pulis at pagsasawalang-bahala sa due process, at marami pang iba. Dahil dito, ipinapaabot ng Antares Programming ang pakikiramay sa mga naapektuhan ng mga kalamidad na ito. Kasabay nito, kaisa ninyo ang Antares Programming sa pagsigaw at paghingi ng katarungan at pagbabago para sa mga biktima ng impunity sa gobyerno ng Pilipinas. Kaya nga nakaka-guilty na magbalik-tanaw sa mga tagumpay na nakuha natin sa nakaraang taon. Sa kabila ng maraming masasamang bagay na nangyari last year, nagkaroon ng pagkakataon ang Antares Programming na mag-thrive. Balikan natin ang bawat isa sa kanila. Ang Courses by Antares Program­ming Noong September 30, 2020, nagbukas ang Courses by Antares Program­ming. Nagbigay ito ng mga tutorial articles para sa mga nagnanais na matuto ng web develop­ment. Nang magbukas ito, naging available ang unang tatlong tutorial articles para sa HTML Essentials course at tatlong tutorial articles din para sa CSS Essentials course. Sinubukan din nating magkaroon ng videos para sa bawat isang article na ito. Ngayong taon, goal nating matapos ang lahat ng content para sa courses na ito, kasama na ang JavaScript Essentials course na magbubukas sa March 30, 2021. Goal din nating makapag-produce ng videos para sa mga ito overtime, at magkaroon ng pondo para i-host ang mga ito para libre ninyo itong ma-download at mapanood offline. Kasama rin sa goals natin ang mga PDF version ng bawat isang lesson sa courses, at eventually, ang ebook version ng buong course. Gusto rin nating mai-host na ang lahat ng sample code sa Github, kahit na may mga sample code na tayo sa Codepen. Speaking Engagements Noong October 5, 2020 naman, inanyayahan ng Developer Student Club ng AMA Computer College Caloocan City ang Antares Programming na magbigay ng presentation tungkol sa JavaScript para sa mga beginner. Dinaluhan ng maraming mga mag-aaral mula sa iba’t ibang paaralan at unibersidad ang virtual event na ito, at marami ang nakinabang bilang resulta. Sa 2021, mananatiling bukas ang Antares Programming sa mga ganitong speaking engagement, virtual event man o in person kapag puwede na ang mass gatherings. Kung isa kang organizer ng developer event at gusto mong imbitahin ang Antares Programming para magsalita sa event ninyo, puwede ninyo kaming padalhan ng message sa official Facebook page namin, o ng email sa creator ng Antares Program­ming. Followers Naging malaki rin ang taong 2020 para sa Antares Program­ming Facebook page. Sa ngayon, umabot na tayo sa mahigit 3,200 followers sa Facebook, kumpara sa 2019 kung kailan mayroon tayong around 1,500 followers. Patunay ito na nagiging successful ang lahat ng ginagawa ng Antares Programming na maghatid ng practical information sa mga web developer at mga estudyanteng nag-aaral ng web develop­ment. Sa 2021, inaasahan nating darami pa ang makakaalam ng tungkol sa amin. Hindi tayo magse-set ng goal na number ng followers dahil para sa amin, hindi iyon ganoon kahalaga. Pero malaking tulong bilang metric ang follower count para malaman namin kung nae-enjoy pa rin ng mga tao ang content namin at kung nakakatulong pa rin ito sa inyo. Kaya huwag kayong mahiyang mag-comment sa mga post namin sa Facebook, lalo na sa mga slideset. Puwede rin kayong mag-request kung ano pa ang gusto ninyong matutuhan. AlgoFilipino Nang simulan natin ang Antares Programming noong 2018, goal na nating makatulong sa pagtuturo ng web develop­ment gamit ang wikang Filipino. Kinikilala ng Antares Programming ang malaking papel ng mother tongue ng isang tao sa pagkatuto nila, gaya ng ipinapakita sa mga pag-aaral.1 2 Kaya naman natutuwa ako bilang creator ng Antares Programming na makitang hindi lang ako ang naniniwala sa konseptong ito. Nitong December 16, 2020, pinasinayaan ang AlgoFilipino3. Ayon sa kanila, sila ay isang non-profit na organisasyon na naglalayong mapalago o mapayaman ang wikang Filipino sa larangan ng teknolohiya. Ito ay naniniwala sa pagpapahalaga at pag-iingat sa sariling wika upang hindi ito tuluyang mamatay o mawala. Kamakailan lang, noong December 30, 2020, matagumpay nilang nilunsad ang Paham: Mga Bayani ng Teknolohiya, isang webinar at workshop. Patuloy na susuportahan ng Antares Programming ang AlgoFilipino, pati na ang iba pang effort na gaya nito. Naniniwala ako na magiging malaking tulong sa lahat kung gagamitin natin ang Filipino pati na ang iba pang mga wika sa Pilipinas, bilang medium of instruction sa teknolohiya. Bukod sa dahil ito ang nakasanayan at sa ibang bansa nagsimula ang pag-unlad ng teknolohiya, wala akong iba pang nakikitang dahilan kung bakit hindi dapat gamitin ang mga wika ng Pilipinas sa mga learning materials para sa teknolohiya. Kaya magiging malaking tulong ang AlgoFilipino at iba pang mga organisasyong katulad nito para mapadali sa marami ang pag-aaral ng programming at teknolohiya. Kung interesado kayo sa kanila, puwede ninyong tingnan ang Facebook page ng AlgoFilipino. Mga bagong paraan para suportahan ang Antares Programming Nito ring nakaraang taon, nakapagbukas tayo ng iba’t ibang paraan para suportahan ang Antares Programming. Libre ang lahat ng gawain ng Antares Programming, pero magiging malaking tulong kung may mga taong magdo-donate ng kahit magkano para maipagpatuloy ito. Dahil diyan, nagbukas tayo ng account sa Patreon. Sa Patreon, puwede kayong maging member at magbigay ng ₱240.00 ($5.00) o ₱480.00 ($10.00) bawat buwan. Sa bawat kontribusyon ninyo, makakakuha kayo early access sa lahat ng content ng Antares Programming, at discount para sa mga merch at ebook na ilalabas namin in the future (kung magkakaroon). Puwede rin kayong maging member namin sa BuyMeACoffee. Katulad din ito ng Patreon, pero puwede kayong magbigay ng one-time contributions o donations. Kung hindi naman kayo komportable sa paggawa ng account sa Patreo o BuyMeACoffee, puwede pa rin kayong magbigay ng donations sa PayPal account namin, o magpadala sa amin via GCash. Mag-donate sa amin via GCash Sa GCash app, piliin ang Send Money › Express Send. Ilagay ang number na ito, at ang amount ng gusto mong i-donate. GCash Number Copy Maraming salamat! Nang simulan ko ang Antares Programming noong 2018, hindi ko inisip na ginagawa ko ito para makita ng maraming tao. Never kong naging goal na dumami ang followers ng project na ito. Naka-focus ang Antares Programming sa paggawa ng mga paraan para makatulong sa mga estudyanteng kasabayan ko noon. Ngayong ikatlong taon ng Antares Programming, gusto kong ipaabot sa inyong lahat ang buong puso kong pasasalamat para sa suporta ninyo. Kapag nababasa ko ang mga comment at message ninyo sa Facebook page namin, sobra akong natutuwa. Malaking bagay ang marinig mula sa inyo na nakakatulong ako kahit sa maliit na paraan. Asahan ninyong ipagpapatuloy ko ang gawaing ito para mapaabutan ang mas marami pang mga tao. Salamat sa inyo! Impact of Mother Tongue on Children’s Learning Abilities in Early Childhood Classroom ↩ Benefits of Mother Tongue As Medium of Instruction ↩ Hindi konektado ang Antares Programming sa AlgoFilipino. Masaya lang akong suportahan ang effort nila. ↩ Two years ago, inilabas ng W3C ang CSS Scrollbars specification. Idinagdag nito ang bagong CSS properties na magagamit natin para ma-customize ang styling ng mga scrollbar. Sa ngayon, Firefox pa lang ang browser na nag-i-implement ng specification na ito dahil nasa working draft stage pa lang ang CSS Scrollbars specification. Pero hindi ibig sabihin nito na hindi na natin mako-customize ang mga scrollbars natin gamit ang CSS. Bago pa dumating ang CSS Scrollbars spec, may paraan na para ma-customize ang look ng mga scrollbars. Sa article na ito, titingnan natin kung paano natin ito magagawa. CSS Scrollbars Una nating gagamitin ang CSS scrollbars. Dahil ito ang nakalagay sa official specs, darating ang panahon na gagana rin ito sa lahat ng browsers. Pagdating ng time na iyon, wala na tayong ibang kailangang gawin sa code natin1 dahil ngayon pa lang, na-implement na natin ang code natin according to the specifications. Ayon sa specifications na ito, puwede nating gamitin ang scrollbar-width at scrollbar-color para ma-customize ang mga scrollbars natin. Gamitin natin iyan sa isang sample na webpage. Sa example na ito, may scrollbar ang article element natin. Tandaan, sa Firefox pa lang ito gagana. article { scrollbar-width: auto; scrollbar-color: #000a dodgerblue; } scrollbar-width Sini-set ng scrollbar-width kung gaano kakapal ang scrollbar. Ayon sa specifications, may tatlo itong values: auto Ito ang default na value. thin Mas manipis ang scrollbar kaysa sa default. Bago ito gamitin, i-consider ang magiging experience ng mga user mo. May mga user na hirap gumamit ng mouse. Mas magbe-benefit sila kung medyo makapal ang scrollbar. none Walang scrollbar na magdi-display sa screen. Puwede pa ring mag-scroll ang user, pero walang scrollbar na makikita. Siguruhin na may sapat na visual cue para malaman ng user na puwedeng mag-scroll sa content mo. Puwede mong lagyan ng naka-inset na box-shadow ang content mo para malaman ng user na puwedeng mag-scroll. Puwede mo ring gamitin ang :hover pseudo-class para i-set ang scrollbar-width pabalik sa auto o thin kapag tinutok ng user ang mouse pointer niya sa scrollable na content. May tatlo pang ibang values na puwedeng ilagay sa scrollbar-width ayon sa specifications, pero wala pang browser currently na nakakapag-implement ng mga iyon. Kung mai-implement ito ng browsers, in the future, puwede na nating i-set kung gaano kakapal ang scrollbar gamit ang mga length values gaya ng px at rem. Puwede rin nating ipaubaya sa operating system ang magiging hitsura ng scrollbar depende kung dark o light ang gusto nating theme ng scrollbar. Pero hindi pa natin iyon magagawa ngayon. scrollbar-color Sini-set naman ng scrollbar-color kung ano ang magiging kulay ng scrollbars. May dalawang parts ang scrollbars: ang track at thumb. Thumb ang tawag sa part ng scrollbar na gumagalaw kapag nag-i-scroll ang user. Track naman ang tawag sa background ng scrollbar. Gaya sa example, puwede nating i-set ang kulay ng dalawang parts na ito gamit ang syntax na ito: scrollbar-color: <kulay ng thumb> <kulay ng track>; Sa example natin, ginamit natin ang syntax na ito para i-set sa dodgerblue ang track, at #0003 naman ang sinet natin para sa thumb. Dahil dito, magiging transparent black ang scrollbar thumb. scrollbar-color: #0003 dodgerblue; Kung nasa Firefox ka, makikita mo na gagana ang custom scrollbar natin sa example na ito: See the Pen CSS Scrollbars by Francis Rubio (@maniczirconium) on CodePen. Figure 1: Ang output ng example code, sa Firefox Custom scrollbar para sa ibang browsers Kahit sa Firefox pa lang gumagana ang CSS Scrollbars, puwede pa rin nating i-customize scrollbars para sa ibang browsers. Bago pa nagsimula ang W3C sa pag-draft ng CSS Scrollbars, may way na para ma-customize ang scrollbars sa mga browsers na naka-base sa Webkit (Safari) at Blink (Chrome, Opera, etc.). Ginawa ang CSS Scrollbars specification mainly para i-standardize at magkaroon ng official way sa CSS kung paano isa-style ang mga scrollbar. Dahil dito, puwede tayong gumawa ng tinatawag na progressive enhancement. Isa itong technique kung saan ibibigay natin sa users ang pinaka-basic na features na gagana sa lahat ng browsers, at saka natin ilalagay ang mga mas advanced na features sa mga browser na may support para dito. Sa Webkit at Blink browsers, meron tayong pseudo-element selectors sa halip na mga property. Puwede nating gamitin ang ::-webkit-scrollbar selector para i-set ang mga styles para sa buong scrollbar, gaya ng width o kapal ng scrollbar. Puwede naman nating gamitin ang ::-webkit-scrollbar-thumb at ::webkit-scrollbar-track para lagyan ng styling ang thumb at track ng scrollbars. Pansinin na dahil selectors ang ginagamit natin, mas marami tayong puwedeng gawing styling dito kumpara sa CSS Scrollbars specification. 2 article::-webkit-scrollbar { width: 12px; } article::-webkit-scrollbar-track { background: dodgerblue; border-radius: 0.5em; } article::-webkit-scrollbar-thumb { background-color: #000a; border-radius: 0.5em; } See the Pen CSS Scrollbars (Progressively Enhanced) by Francis Rubio (@maniczirconium) on CodePen. Figure 2: Ang output ng example code, sa Chrome Pansinin na dahil nga selectors ang gamit natin, puwede nating i-set ang border-radius ng scrollbar natin. Huwag ding mag-alala regarding sa conflicts ng styling. Dahil hindi kilala ng Firefox ang ::-webkit-scrollbar selector at mga kasama nito, hindi niya ito papansinin. Sa halip, ia-apply lang ng Firefox ang nilagay nating scrollbar-width at scrollbar-color properties. At dahil hindi pa supported ang CSS Scrollbars sa Chrome at iba pang Blink at Webkit browsers, hindi nila ito papansinin. Ia-apply lang nila ang mga styles na nasa mga ::-webkit-scrollbar selectors natin. At kapag dumating ang time na supported na ng lahat ng browsers ang CSS Scrollbars, wala na tayong kailangang baguhin sa code natin dahil hindi na iyon papansinin ng latest browsers. Custom scrollbars gamit ang JavaScript Puwede rin tayong gumamit ng JavaScript libraries para i-customize ang mga scrollbar natin para sa ilang cases kung saan hindi gumagana ang lahat ng suggestion dito para sa ilang browsers. Puwede tayong magkaroon ng mas maraming styling options gamit ang mga JavaScript libraries na ito, gaya ng transition at animation. Pero tandaan na may impact sa performance ang mga JavaScript libraries na ito, kaya pag-isipan muna kung sulit bang i-sacrifice ang performance para lang mapaganda ang scrollbars mo. Heto ang ilan sa mga JavaScript libraries na puwede mong gamitin para ma-customize pa lalo ang scrollbars sa site mo: simplebar simple-scrollbar May tutorial ding isinulat si Das Surma kung paano iko-customize ang scrollbars nang hindi gumagamit ng JavaScript libraries, although kailangan nito ng kaunting JS code para sa setup. Warning, medyo komplikado ang way na ito. CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom Scrollbar Technically, wala na tayong kailangang baguhin sa code natin kapag nasa lahat na ng browsers ang CSS Scrollbars. Pero dahil nasa working draft stage pa ang CSS Scrollbars specification, puwede pang magkaroon ng pagbabago. Ia-update ko ang post na ito in the future para i-reflect ang changes na iyon. ↩ Dahil nasa working draft stage pa lang ang CSS Scrollbars, marami pang features na puwedeng maidagdag dito, kaya puwedeng dumating ang time kung kailan magkakaroon tayo ng mas maraming styling options para sa scrollbars. For now, scrollbar-width at scrollbar-color pa lang ang official na nasa drafts. ↩ Goal ng Antares Programming na magbigay ng educational resources tungkol sa Web development para sa mga nagsasalita ng Filipino. Sa nakalipas na dalawang taon, ginagawa ito ng Antares Programming sa pamamagitan ng paggawa ng mga infographic at blog posts. Sumubok din tayo ng videos sa Youtube, originally sa channel ko. Nakagawa tayo ng ilang screencasts at vlogs tungkol sa CSS. Pero kailangan na nating dalhin ito sa susunod na steps. Kaya ito ang official announcement: ang Courses by Antares Programming magiging available na sa September 30, 2020. Ang Courses by Antares Programming Isa itong series ng mga articles na nagtuturo ng basics ng Web development. May mga kasama rin itong videos at code samples. At kapag natapos na ang bawat isang course, magkakaroon ng libreng PDF file ng buong course na puwede ninyong ma-download. At siyempre, kagaya ng dati, lahat ito ay sa Filipino/Tagalog. Sa ngayon, mayroong tatlong course na magiging available. Ang Essentials of HTML at Essentials of CSS ay magiging available simula September 30, 2020, at magiging available naman ang Basics of Web Programming with JavaScript sa January 30, 2020. Kasabay ng launch ng Courses ang announcement ng Antares Programming Youtube channel. Sa channel na ito ia-upload ang mga course video na gagamitin sa Courses. Kapag nagsimula ang mga course, hindi pa kumpleto ang content nito. Unti-unti rin itong madaragdagan every one or two weeks. Hindi rin ito magkakaroon ng certificate sa dulo. At bilang paalala, libre ang lahat ng ito, hindi mo kailangang magbayad ng kahit na ano. Ang goal Goal ng Courses ang maihatid ang pag-aaral ng Web development sa mga taong gustong matuto pero may limitadong access sa Internet. Ginawa ko ang Courses by Antares Programming base na rin sa journey ko sa pagiging developer. Isa akong tipikal na Pilipinong gustong matutong mag-program. Pero dahil sa ilang limitasyon financially, hindi naging madali iyon. Umasa ako sa mga educational resources na puwedeng ma-download offline. Wala akong laptop o smartphone noong unang dalawang taon ko sa college. Kaya nagpupunta ako sa mga computer shop o pisonet dala ang USB flashdrive ko para mag-download ng mga tutorial video sa Youtube. Nagpupunta rin ako sa mga documentation ng mga technology na inaaral ko para i-copy at i-paste sa isang .txt file ang mga article. Pagkatapos isasaksak ko ang flashdrive ko sa portable DVD player na mayroon kami, at doon ako magbabasa. Nagpo-program din ako gamit ang papel at ballpen, at pagkatapos ita-type ko iyon sa pisonet (pakiramdam ko para akong si Ada Lovelace kapag nagpo-program ako sa papel). Kaya ang target audience ng Courses ay ang mga taong gaya ko rin. Karamihan sa mga features ng Courses ay puwedeng ma-download. Open source din ang code ng website na ito, kaya puwedeng i-download ang Markdown files ng mga course, na puwede namang ma-view ng kahit na anong device na may USB port. Support Libre ang Courses by Antares Programming. Pero hindi rin biro ang paggawa nito. Malaking trabaho ito. Kung gusto mong suportahan ang Antares Programming, puwede kang mag-donate dito via GCash. Tinatanggap namin kahit magkano. Sa hinaharap, magkakaroon din ang Antares Programming ng Patreon account. Puwede kang mag-donate sa aming GCash: 0906 313 7462 Bisitahin ang Courses by Antares Programming ngayon. Mananatiling libre ang lahat ng content ng Antares Programming. Kasama rito ang lahat ng blog articles, videos, at infographics. Pero siyempre welcome na welcome ang tulong ninyo, kung gusto ninyo. Sa post na ito, babanggitin ko ang ilan sa mga plano para makapag-raise ng pondo para sa Antares Programming. Wala pa sa mga ito ang final, gusto ko lang i-share ang mga naiisip ko. Kung may ideas kayo, puwede ninyo itong i-share sa Facebook page, at puwede n’yo rin kaming i-mention sa tweets ninyo (@antaresphdev). Mga types ng donation Patreon May Patreon account nang naka-setup ang Antares Programming, pero hindi ko muna ise-share sa inyo. Pinag-iisipan ko pa kasi kung itutuloy ko ito dahil medyo malaking commitment ito para sa mga magiging supporters. May tatlong tiers ito: $1.00 (₱50.00), $5.00 (₱250.00), at $10.00 (₱490.00). Isa sa mga problemang tinitingnan ko sa ganitong setup ay ang tax. May binabanggit kasi sa Patreon tungkol sa tax. Kung may idea kayo tungkol sa taxes ng Patreon supporters, puwede n’yo akong i-message. Direct donations Siyempre, pinakamadali ang direct donations. Actually puwede na kayong mag-donate kung gusto ninyo. Sa ngayon, puwede kayong mag-donate via GCash. Mas maganda kung mag-iiwan kayo ng note na may pangalan ninyo para ma-mention ko kayo bilang pasasalamat, pero puwede rin naman kung gusto ninyong manatiling anonymous. Puwede ninyong ipadala ang donations ninyo sa number na ito: 0906 313 7462 Magse-setup din ako ng iba pang way ng pagdo-donate kung gusto ninyo. As always, open ang Facebook page at ang Twitter account ng Antares Programming. Ibang types ng donation Puwede rin kayong mag-donate ng mga bagay na hindi pera. Puwede kayong mag-donate ng libro na hindi n’yo na ginagamit, mga lumang devices, at iba pa na sa tingin ninyo puwedeng makatulong sa project na ito. Kung gusto n’yong magpadala ng ganitong mga device, puwede kayong mag-send ng message sa Facebook page o sa Twitter account namin. Merch Sa tingin ko masyado pang maaga para sa merch, at wala pang demand para dito. Pero isa ito sa mga kino-consider ko seriously. Kasama sa mga merch na ito ang mga stickers, t-shirt, at tumblers. Pinag-iisipan ko rin kung magkakaroon tayo ng printed copies ng mga e-book na ire-release ng Antares Programming in the future. Again, wala pang final sa mga ito, puwede kayong mag-suggest ng ideas. Ang Courses Napag-isipan ko ring gawin ang ginagawa ng elementary OS na tinatawag nilang pay-what-you-want. Bago mo i-download ang ISO file ng elementary OS, kailangan mo munang i-specify kung magkano ang gusto mong ibayad para sa operating system. Siyempre, puwede kang maglagay ng $0 dahil libre lang naman ito. Pero nae-encourage ang mga users na magbayad para sa service kung kaya nila, at makakapag-download pa rin ang mga users kahit wala silang pambayad. Pinag-iisipan ko rin kung maglalagay ako ng ganitong feature sa Courses. Mananatili itong libre, pero puwede kayong magbigay ng kahit magkano para dito kung nakatulong ito sa inyo. Saan gagamitin ang maiipong donations? Karamihan sa pondong ito ay gagamitin para ma-improve ang videos ng Antares Programming. Gagamitin ito para makabili ng equipment, makahanap ng venue kung saan puwedeng mag-film, makapag-hire ng editor, etc. Gagamitin din ito para sa pagbabayad ng internet connection para sa pagda-download ng assets at pag-a-upload ng videos sa Youtube. Gagamitin din ito para sa hosting ng files na puwedeng i-download for offline use. Isa ito sa mga problema ngayon ng Courses dahil hindi kayang i-host ng Github ang malalaking videos kaya hindi ito mada-download for offline access. Magiging malaking tulong ang donations para makapagbayad sa hosting ng videos. Kailangan ang tulong mo Siyempre, malaking tulong pa rin ang exposure. Sa taong 2020, goal natin na umabot ng 1,500 ang fans ng Antares Programming sa Facebook. Ang goal natin ay maabot ang pinakamaraming tao as much as possible. Kaya ’wag mag-alala kung hindi mo kayang mag-donate ng kahit ano; makatutulong ka pa rin sa pagse-share ng tungkol sa project na ito sa mga kakilala mo. Salamat nang marami! Pamilyar tayo sa common values ng display property. Nandiyan ang inline, block, at inline-block. Recently, nakita rin natin na nadagdag sa mga ito ang flex at grid. Pero karamihan sa atin, hindi alam na may 28 values1 pala na puwedeng ilagay sa display property! Pero alam n’yo ba na may bagong syntax ang display property? Sa CSS Display Module Level 3, binanggit ang bagong syntax na ito ng display. Tingnan natin ang details nito. Ang basics ng display property Pag-usapan muna natin ang inline at block elements. Kapag sinabi nating inline, ibig sabihin, nakadepende ito sa writing mode ng isang language. Sa Filipino, ang writing mode natin ay left-to-right dahil nagsusulat tayo mula kaliwa pakanan. Ang block naman ay ang direction na pupuntahan ng text kapag napuno na ang inline. Sa Filipino, kapag napuno na ang isang line, magra-wrap ang susunod na mga salita sa susunod na line, kaya ang block direction natin ay top-to-bottom. Ganito ang nangyayari sa mga elements natin na may inline at block display. Kapag inline ang isang element, ile-layout ito ng browser from left to right. Kapag block naman ito, ile-layout ito from top to bottom. See the Pen Inline and Block by Francis Rubio (@maniczirconium) on CodePen. Inner at outer values ng display Kapag ginawa nating inline o block ang display ng isang element, alam natin kung ano ang nangyayari sa element. Pero ano ang mangyayari kapag ginawa natin itong display: grid? Halimbawa, gumamit tayo ng <span> element, na by default ay inline, at gawin natin itong isang grid. See the Pen Inline to Grid by Francis Rubio (@maniczirconium) on CodePen. Naging block ang span sa halip na inline no’ng ginawa natin itong grid. Sinakop nito ang space ng isang buong line. Pero hindi naman natin iyon ini-specify, paano nangyari iyon? Sa CSS Display Module Level 3, binanggit na dalawa ang value ng display property, ang outer at inner value: display: <outer> <inner> Dine-define ng outer display ang magiging behavior ng element in connection to its parent element. Dine-define naman ng inner display ang magiging layout ng direct children nito. Ibig sabihin nito, kapag nilagay natin ang display: grid, ang nakikita talaga ng browser ay display: block grid, meaning block element ito in relation to its parent element, pero ile-layout nito ang children nito sa isang grid. Magiging block container ang element na may display: grid. Ganito rin ang mangyayari sa isang element na may display: flex; para sa browser, ito ay magiging display: block flex. Malaking tulong ito dahil ine-explain nito agad ang gusto nating mangyari sa layout natin. Kapag nilagay natin ang display: inline grid, ang aasahan natin ay magiging inline ito para sa parent element nito, pero magiging grid ang elements sa loob nito. Further reading Digging Into The Display Property: The Two Values Of DisplayRachel Andrew, Smashing Magazine displayMDN Web Docs CSS Display Module Level 3W3C Candidate Recommendation Spec Tingnan ang display property sa MDN Docs ↩ Ngayong araw, nakita ko ang tweet na ito: Sam Davidson @sdwaco who is this sign for View on Twitter → Aug 7, 2020 Ni-retweet ito ni Jen Simmons: Jen Simmons @jensimmons This is what is feels like to me when a web team is like “we don’t support [foobar] browser”. Ya don’t? Well, the people using that browser are coming to your site anyway… View on Twitter → Aug 8, 2020 At may point siya. Kahit i-assume mo na hindi gagamitin ng persons with disability ang website mo, hindi mo sila mapipigilang i-access ang site mo. At may pakialam ka man o wala sa accessibility ng site mo, walang pakialam diyan ang users mo. Kapag nahirapan silang gamitin ang site mo, hindi magiging maganda ang image at brand mo. In the end, hindi mo namamalayan na nawawalan ka na ng customers. At minsan, may nilalabag ka palang batas.1 2 Ano ba iyang accessibility na iyan? Ang accessibility ay isang practice na ginagawa para magamit ng lahat ang isang bagay kahit na may kapansanan sila, o baka limitado ang kaya nilang gawin dahil sa ibang dahilan. Ang Web accessibility ay ang accessibility sa mga webpages. Lahat tayo ay disabled Totoo, siguro wala kang kapansanan, malinaw ang mata mo, kumpleto ang lahat ng mga parts ng katawan mo. Pero disabled ka sa ilang kaso. Halimbawa, kapag nanonood ka ng video sa isang lugar na maingay at wala kang earphones, makakatulong nang malaki sa iyo ang subtitles, na isang effort para sa web accessibility. Mahalaga rin para sa users na may sirang mouse o touchpad (at sa iba, wala talaga) na magamit nila ang isang website gamit lang ang keyboard. Sa interview ni Jen Simmons para sa A11y Rules Podcast, sinabi niya na ang disability ay isang gradient sa halip na isang yes-or-no na characteristic. Sa halip na disabled o normal, ang mga tao ay normal, may kaunting disability, may mas maraming disability, etc. At bukod pa riyan, kahit normal ang isang tao, may mga araw na magkakaroon siya ng disability: malabong paningin, sakit ng ulo, hirap sa paggalaw ng kamay, etc. At lahat tayo, puwedeng magkaroon ng ganitong limitasyon. Pero Francis, hindi naman iyan disability, baka sabihin mo. Totoo, hindi sila actual na disability, pero dahil sa mga iyan nalilimitahan ang kayang gawin ng users. At trabaho natin bilang developers at designers na padaliin ang trabaho ng ibang tao. Iyan mismo ang dahilan kung bakit may technology: para padaliin ang trabaho ng mga tao. Kung wala tayong gagawin para maging accessible ang website natin, balewala ang problemang sino-solve ng website natin. Walang assumptions Kapag gumagawa tayo ng website, madalas tayong mag-assume nang hindi natin napapansin. Ina-assume natin na gagamitin ang site natin or application gamit ang dalawang kamay. Ina-assume natin na right-handed ang user natin. Ina-assume din natin na may maayos silang screen, speaker, keyboard, at iba pa. Sa madaling sabi, ina-assume natin na kapareho natin ng kalagayan ang mga gagamit ng product natin. Accessibility is about the recognition that every human isn’t identical to every other human. Jen Simmons Pero gaya ng sabi ni Jen Simmons sa interview ding nabanggit kanina, para maging accessible ang isang website, kailangan munang isaisip ng developer o ng team nila na hindi pare-pareho ang katawan ng tao. May mga taong kaliwete, malabo ang paningin, mahina ang pandinig, nanginginig ang kamay, nakatira sa maingay na environment, at iba pa. Hindi mahirap ang Web accessibility Hindi mahirap isama sa site development ang accessibility. Sa katunayan, kung responsive ang website mo, nagawa mo na ang isang step para sa isang accessible na website dahil tinanggal mo na ang assumption na iisa lang ang size ng screen ng users. Ie-extend mo na lang ang thinking na iyan: puwede kang magsimulang tanggalin din ang assumption na gumagamit ng screen ang users. May mga device na tinatranslate ang content sa Braille 3. May mga users na gumagamit ng screen readers para pakinggan ang nakasulat sa screen. Saan ako magsisimula? Maraming guides na madaling sundin para gawing accessible ang site mo 4. Pero heto ang ilan sa mga ginawa ko para maging accessible ang mga website na ginagawa ko. Gumamit ng semantic HTML Sa HTML5, may inilabas na bagong semantic tags na may actual na meaning. Sa halip na gumamit ng <div> at <span> sa lahat ng oras, gamitin ang mga tags na gaya ng <nav>, <article>, at <section>. Dahil sa mga semantic HTML, mababasa nang tama ng screen readers ang content mo. Marami kang matututuhan sa MDN Web Docs. Itinuturo din sa libreng course na ito sa LinkedIn Learning ang HTML at kung paano ito gagawing semantic. Magkakaroon din ang Courses by Antares Programming ng course tungkol sa paggamit ng HTML at accessibility. Gamitin ang developer tools May accessibility tools ang Google Chrome at Mozilla Firefox. Malaking tulong ito para ayusin ang website mo at maging accessible. Mula sa mga tools na ito, makakakuha ka ng tips tungkol sa font size at color contrast ng web site mo, bukod pa sa ibang mga bagay. 13 Days of Accessibility Nakatulong sa akin ang 13 Days of Accessibility. For 13 days, gagawa ka ng improvements sa accessibility ng site mo. May kasama itong calendar ng schedule ng focus mo. Halimbawa, sa unang araw, ayon sa calendar, aayusin mo ang text alternatives sa lahat image, audio, at video na nasa site mo. Itutuloy mo lang ito hanggang sa matapos mo ang 13 days. At kung lumaki ang project mo at sa tingin mo kailangan mong i-examine ulit ang accessibility ng website mo, puwede mo itong ulitin. Conclusion Hindi lang persons with disability ang nakikinabang kapag accessible ang isang website. Kaya sana gawin nating lahat ang kahit kaunting effort lang na gawing accessible ang website natin. Pasasalamatan kayo ng users ninyo. At siyempre maa-appreciate ko rin kapag napunta ako sa website ninyo. 😉 Last year, may dininig ang kasong Domino’s Pizza v. Robles pagkatapos idemanda ng isang visually impaired ang Domino’s Pizza, isang pizza chain sa USA, dahil hindi accessible ang website nila. ↩ Ayon sa Philippine Web Accessibility Group, puwede kang makasuhan o mademanda kung hindi accessible ang website mo. ↩ isang alphabet na ginagamit ng mga bulag sa pagbabasa. Isa itong sistema ng mga butas at umbok na kinakapâ ng mga bulag para malaman kung anong letra ang nakasulat. ↩ Ang official document na sinusunod para sa Web accessiblity ay ang Web Content Accessibility Guidelines. ↩ Ang problema Sa banners ng Courses by Antares Programming, makikita ang ganitong design: Sa ilalim ng banner title (Courses by Antares Programming), may makikitang underline na gawa sa stripes na iba’t iba ang kulay. Pero hindi iyan underline gamit ang text-decoration. Gawa iyan sa linear-gradient() function ng CSS. Ang Linear Gradients Tumatanggap ang background-image ng CSS ng url() function, na puwede nating bigyan ng URL papunta sa isang image na gagawing background sa isang element. Pero bukod diyan, puwede rin nating ilagay ang iba’t ibang functions para sa mga gradient na gaya ng linear-gradient() at radial-gradient(). Ang linear-gradient() ay isang function na maglalagay sa background natin ng mga kulay na nagbe-blend sa isa’t isa sa iisang direction. Hindi ito gaya ng radial-gradient() na naglalagay at nagbe-blend ng colors mula sa gitna ng element papaplabas. Tumatanggap ito ng mga arguments: <direction> Ini-specify nito ang direction ng gradient. Puwede tayong maglagay rito ng mga values na gaya ng to bottom, to top, to top left, to bottom right, etc. Puwede rin tayong maglagay ng angle gamit ang deg unit, gaya ng 45deg, 90deg, 180deg, etc. <color> ang mga kulay na ilalagay sa gradient. Puwede kahit maraming kulay na ipasa. Pansinin ang example na ito: background-image: linear-gradient(orange, yellow); Ito ang magiging hitsura niyan: Puwede nating baguhin ang direction ng linear-gradient. Kapag naglagay tayo ng to right, magsisimula ang mga colors sa top left, kaya makikita ang orange sa taas, at magtatapos ang yellow sa right. Ito ang code para riyan: background-image: linear-gradient(to right, orange, yellow); Ito naman ang magiging hitsura niyan: Puwede rin nating i-adjust ang position ng bawat isang kulay. Para mas madaling mabasa ito, ilalagay ko sa individual lines ang bawat isang kulay. Pansinin na puwede tayong gumamit ng kahit na anong unit na ginagamit natin sa width at height. background-image: linear-gradient( to right, red 20px, green 30%, yellow ); Heto ang itsura niyan: Kagaya ng makikita, hindi magbe-blend sa iba pang kulay ang red red for 20 pixels. Mula sa pang-21 na pixel onwards, magbe-blend na ito sa ibang mga kulay. Magiging mas obvious ito sa video sa baba, kung saan makikita na nagbabago ang width ng kulay kapag binago ang position: Hindi kayang i-play ng browser mo ang video na ito. Puwede mo itong i-download at panoorin sa isang video player application. Sa dulo ng video, makikita natin na kapag lumampas na sa position ng kasunod na kulay, hindi na sila magbe-blend together, at magkakaroon ng solid na distinction sa pagitan ng dalawang kulay. Sa video, makikita ito kapag lumampas na ang red sa position ng green na 30%, magmumukha na silang dalawang magkatabing div na may magkaibang kulay: Puwede nating gamitin ang principle na iyan sa paggawa ng striped design. Stripe design gamit ang linear-gradient Para magkaroon ng stripes, kailangan na ang position ng isang color at ng kasunod nito ay magkapareho. Kaya ang gagawin natin, sa bawat isang kulay, magkakaroon tayo ng dalawang version, isa na may position na kaparehas sa naunang kulay at isa pa na may position na nag-i-indicate kung gaano kahaba ang kulay. Subukan natin iyan sa nakaraang gradient. Pansinin na para mag-resize din ito kasabay ng element, percent ang gagamitin natin sa halip na pixels. background-image: linear-gradient( to right, red 30%, green 30%, green 50%, yellow 50%, yellow 70%, blue 70%, blue 100% ); Now, puwede natin itong gamitin sa isang element na may text, gaya sa example natin. Puwede natin iyang gamitin, halimbawa, sa isang h2 element: <style> h2 { background-image: linear-gradient( to right, red 30%, green 30%, green 50%, yellow 50%, yellow 70%, blue 70%, blue 100% ); } </style> <h2>This is an example element</h2> Kung gusto naman nating gawin iyan na mas maliit at mukhang underline, puwede nating gamitin ang background-size, background-repeat, at background-position. background-size: Puwede tayong mag-set ng width at height sa background lang background-repeat: kailangan natin itong i-set sa no-repeat. By default kasi, ita-tile ng browser ang background-image kapag mas maliit ito sa element, at hindi natin maa-achieve ang underline appearance na gusto nating makuha. background-position: magagamit natin ito para ilagay sa ilalim ng text ang underline. Sa current code natin para sa h2 element, puwede nating idagdag ang mga ito: background-size: 100% 5px; background-repeat: no-repeat; background-position: bottom; Para sa background-size property, ang unang value na nilagay natin (100%) ay para sa width, at ang ikalawa naman (5px) ay para sa height. Ito ang magiging hitsura niyan ngayon: Gusto ko lang i-post ito dahil puwede ninyo ring magamit ito sa mga designs ninyo in the future. Thanks! Habang kino-code ang bagong Web site ng Antares Programming, specifically ang part para sa courses, nagkaroon ako ng maliit na problema. Sa lessons page, may dalawa akong link na nakalagay: isang link pabalik sa course page, at isang link papunta sa susunod na lesson. Para sa link na Bumalik sa course page, wala akong way para makuha ang link ng course ng lesson na tinitingnan ngayon ng user. Naghanap ako online ng function o Liquid HTML na puwede kong gamitin, pero wala akong nahanap. Literal na inabot ako ng more or less 30 minutes bago ko na-realize, Puwede ko palang gmitin ‘yong dalawang tuldok!’ Relative URLs May dalawang types ng URL, ang absolute at relative. Ang absolute URLs ay mga exact na addresses at file paths gaya ng https://antaresprogramming.github.io/ o kaya naman ay https://github.com/antaresprogramming/antaresprogramming.github.io. Ang mga relative URLs naman ay mga URL na nakadepende sa path ng file na gumagamit nito. Halimbawa nito ang /home/maniczirconium/Documents. Relative URL ito dahil nakadepende ito sa location ng root directory (/). Relative URL din ang ./file.png dahil nakaangkla ang buong URL sa path ng kasalukuyang file o directory. Sa problema ko, kailangan kong bumalik sa course page. At naalala ko ang structure ng URLs ng Web site na ito: https://antaresprogramming.github.io/courses/<COURSE>/<LESSON>/ Sa pattern na ito, puwede kong makuha ang link ng course page gamit ang up one directory operator1. For example, kunwari may ganito tayong folder structure: antaresprogramming.github.io/ | + blog + courses | + html-essentials | + 01-hypertext-markup-language + 02-html-syntax Kung nasa page na 01-html-syntax ang reader, paano siya makakabalik sa course page (html-essentials)? Simple lang. Magdadagdag tayo ng dalawang tuldok sa dulo ng URL: /courses/html-essentials/02-html-syntax/.. Dahil sa dalawang tuldok na iyan, lalabas ng isang directory ang browser, kaya mula sa 02-html-syntax, babalik siya sa html-essentials. Napakasimpleng bagay nito, at madalas ko rin itong gamitin sa command-line gamit ang cd .. para lumabas sa directory. Pero inabot ako ng kalahating oras bago ko na-realize. Talagang kahit gaano ka na katagal nagpo-program, may mga instances pa rin na lutang ka. 😂 ^ Hindi ako sigurado kung operator ba talaga dapat ang itawag dito. For the purposes of this write-up, tawagin natin siyang operator. Gaya siguro ng alam n’yo na, ako lang ang mag-isang nagha-handle ng Antares Programming. Masaya akong gawin ito, pero napakamatrabaho nito. Kailangang gumawa ng mga infographics, videos, articles, at research—lahat ito, isang tao lang ang gumagawa. Sa nakalipas na mga buwan, naging busy ako sa trabaho ko bilang teacher sa isang private school sa Navotas City. Nag-focus muna ako sa pag-train sa sarili ko kung paano magturo sa harap ng klase. Nakaasa sa akin ang mga batang hawak ko, at ayokong maging isa sa mga teachers na makakalimutan nila pagkatapos ng isang taon dahil wala silang natutuhan. Dahil sa busy ng schedule, nawalan ako ng oras para sa Antares Programming. Pero ang nature ng trabaho ko bilang teacher ang malaking dahilan kung bakit mas dapat akong maglaan ng atensyon at oras para rito. Tutal, gumagawa na rin naman ako ng learning materials para sa mga estudyante ko, bakit hindi ko na lang ito i-share na rin sa iba nang libre? Mahirap ang sitwasyon ngayon dahil sa pandemic ng COVID-19, pero binigyan ako nito ng maraming time para maayos na maplano kung saan ko gustong dalhin ang buong project na ito. At sobrang dami kong gustong i-share sa inyong lahat. At nakakatuwa kasi kahit walang bagong content ang Antares Programming, laging may nadaragdag sa mga fans ng Antares Programming Facebook page. At the time of this writing, may 1,076 na na nag-like sa Facebook Page. Salamat sa support ninyo! Malaking bagay ang kahit pagsubaybay n’yo lang sa content na nilalabas ko sa Antares Programming, pero malaking pressure din iyan sa akin para maglabas ng quality content. Ano ba talaga ang mission? Sa dalawang taon mahigit na nakalipas pagkatapos kong gawin ang Antares Programming, nagbabago-bago ang sagot ko sa tanong na Ano ang Antares Programming? As it turns out, kaya gano’n kasi hindi ko tiyak mismo kung ano ang Antares Programming. Na-realize ko na kailangan ko ng tiyak na mission statement. So ano talaga ang Antares Programming? Simula noong nakaraang buwan, ito ang sagot ko: Ang Antares Programming ay isang project na may goal na mag-provide ng high quality at accessible na learning materials tungkol sa Web development sa wikang Tagalog/Filipino. Para sa higit pang detalye, tingnan ang About page. Ang future ng Antares Programming Kahapon, nagkaroon kami ng internal meeting, at napag-alaman ko na dahil sa pandemic, kinailangang bigyan ako ng dagdag na loads sa klase. Dahil dito, magkakaroon ako ng mas kaunting oras para sa Antares Programming. Pero dahil sa modalities na gagamitin sa education ngayong taon, kakailanganin ko pa ring gumawa ng digital content para sa pagtuturo. Kasama riyan ang written content, mga visual aids, at explainer videos para sa bawat lesson. Mas kaunti ang time ko para sa Antares Programming, pero sa tingin ko mas maraming content ang paparating. Sa mga susunod na buwan, may ilalabas akong mga videos sa official Antares Programming Youtube Channel. Kung napansin ninyo, bago na naman ang design ng blog site. Sa tingin ko magtatagal na ito. At bukod sa design, mapapansin ninyo na bago na rin ang account na ginagamit ko sa Github Pages. Preparation kasi ito para sa goal natin na maka-avail ng sariling domain name para maging mas maikli ang mga URLs at mas madaling tandaan. Dahil libre naman ang Github Pages, hindi tayo magkakaroon ng problema sa hosting. Sa Setyembre ng taong ito rin, gaya siguro ng nakita ninyo sa isang Facebook post ko, may paparating na bagong project ang Antares Programming. Ito ay ang Courses. Nilahad ko na rin ang details niyan sa isang post. Basically, isa itong feature sa site na ito. Magkakaroon ng courses na may mga lesson. Puwedeng i-download ang videos, code na ginamit, at mga written content. Ang focus nito ay turuan ang mga mambabasa tungkol sa mga development at programming topics pero sa Tagalog/Filipino, para mabawasan ang friction gawa ng technical terms at jargons. Courses by Antares Programming May bagong feature ang Antares Programming Web site: ang Courses. Francis Rubio Web developer, web designer, and educator from the Philippines Tue, Jun 30, 2020 · 3 min read Kung paano ka makakatulog Hindi na rin sikreto na malaki rin ang gastos sa pagme-maintain ng Antares Programming. Pero maluwag sa kalooban ko na maglabas ng pera; tutal, ito ang passion ko. Pero magiging malaking tulong ang support ninyo financially. Sa hinaharap, magkakaroon ng Patreon page ang Antares Programming. Pero saka na, kapag natiyak ko na na gusto ninyo ang mga content na nilalabas ko. Karamihan din sa inyo, hindi alam na tumatanggap ako ng guest posts! Oo! May alam ka ba tungkol sa programming? Puwede kang tumulong na magdagdag ng content sa Antares Programming blog. Open sourced ang code ng Web site na ito sa Github. Inaayos ko pa ang mga details ng code ngayon, kaya wala pang instructions kung paano makakapag-contribute ng articles. Kaya pansamantala, puwede kang mag-send ng message sa Facebook page ng Antares Programming kung gusto mong mag-contribute ng content. Conclusion Malaking trabaho ito, pero dahil sa support ninyo, at sa dumaraming supporters kahit sa time na walang content ang Antares Programming, naniniwala ako na nagugustuhan ninyo kung saan papunta ang project na ito. Salamat sa support ninyo! Sana suportahan n’yo pa rin ako sa natitirang mga buwan ng 2020, at siyempre sa mga susunod na taon din. Protect yourselves, keep safe, and wear your masks! Sobrang excited ako na i-announce sa inyong lahat ang bagong part ng Antares Programming project: ang Courses by Antares Programming. Basically isa itong ongoing series na may videos, code samples, at written articles na libre para sa lahat. Sa ngayon, tungkol muna ito sa HTML, na susundan in the near future ng CSS at JavaScript. Pero magkakaroon din dito ng series tungkol sa iba’t ibang topics gaya ng accessibility, Web typography, at ibang programming languages tulad ng Java at C#. Una sa lahat, bakit? Matagal nang nakaplano ang project na ito. Actually, simula noong 2018, ang taon kung kailan nagsimula ang Antares Programming, kasama na ‘to sa mga planned projects ko. Sadyang hindi lang ako nagkaroon ng oras at financial resources para magawa ito. Naisip ko kasing ito ang pinakamagandang way para maabot ang goal ng Antares Programming na high-quality educational resources for Web development. Nagsimula akong magplano last year, around November 2019. Dahil nga sa karanasan ko bilang teacher ng Web development at programming, mas naging confident na akong gumawa at maglabas ng content. Bukod pa riyan, dahil may trabaho na ako, kaya ko nang pondohan, kahit paano, ang buong Antares Programming project at ang equipment na gagamitin, na sa ngayon ay isang smartphone lang na may magandang camera (Samsung A30s). Ang lalabas sa Courses by Antares Programming At the time of this writing, hindi pa tapos ang Courses, pero gusto kong i-share sa inyo ang mga plano kong mangyari sa project na ito. Video course Alam kong karamihan sa inyo, mas natututo sa videos instead na sa written content. At dahil nga sa panahon ng pandemic, kailangan ko talagang gumawa ng digital content para sa mga estudyante ko sa highschool. Kaya ia-upload ko sa official YouTube channel ng Antares Programming ang mga videos para sa Courses. Karaniwan nang magiging maikli ang mga video na ito, mga 5 to 10 minutes bawat isa. Code samples Magkakaroon din kayo ng access sa mga code samples na gagamitin sa video. Ia-upload ko iyon sa official Github account ng Antares Programming. Written articles At siyempre may mga tao ring kagaya ko na hindi mahilig manood ng video tutorials. Para sa inyo, may mga written articles na kasama ang videos. Basically, mga transcript ito ng videos para puwede ninyong basahin na lang kung ayaw ninyong panoorin ang videos. Downloadables Magiging accessible din offline ang lahat ng resources na ito. Kapag natapos ko nang gawin ang bawat isang course, gagawin ko silang e-book para ma-download ninyo for free. Magkakaroon din ng kasamang cheatsheets ang mga e-book na ito para maging guide ninyo kapag may nakalimutan kayo. Bukod pa riyan, gagawa rin tayo ng way para ma-download ninyo nang libre ang mga video sa bawat course, para puwede ninyong i-download ang mga video sa computer shop o sa pisonet, halimbawa, at pagkatapos panoorin ninyo kahit wala kayong Internet. Walang certificates na ibibigay Hindi pa authorized na educational institution sa ngayon ang Antares Programming (alhtough sana one day maging gano’n tayo), kaya hindi pa muna magkakaroon ng certificates kapag natapos ninyo ang mga course. Early access ngayon Puwede mo nang ma-access ang Courses ngayon. Pero dahil under construction pa ito, puwede pa kayong makakita ng sirang layout, maling information, atbp. Sa ngayon, makikita ninyo na may lessons na ang course para sa HTML, samantalang wala pang laman ang sa CSS at JavaScript. Official na magsisimula ang Courses sa September 30, 2020. Okay, sorry clickbait talaga iyan. ‘Wag ka magda-drop sa school. Anyway, hindi lang 10 ang Web sites dito, at hindi lang Web sites ang mayr’on. Let’s dive right in! Web Sites Since kaunti lang ang mga technical na sites sa Filipino, lahat dito ay nasa English. Pero sobrang dami mong matututuhan sa kanila. Disclaimer: blogs ang mga ito kaya more on text ang content. Kung mas sanay ka sa videos, may section din para doon. A List Apart A List Apart (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on web standards and best practices. CSS Tricks CSS-Tricks is really about building websites and all that entails, mostly from a front-end perspective. We have staff writers (see below) and loads of guest authors, so the content you find here will be as diverse as they are. CSS In Real Life CSS In Real Life is a blog covering CSS topics and useful snippets on the web’s most beautiful language. Published by Michelle Barker, front end developer at Ordoo and CSS superfan. HTML5 Doctor We will publish articles relating to HTML5, its semantics, and how to use it right now. We also invite questions via Ask the Doctor. We’ll post answers in future articles so that everyone can benefit. Videos Jen Simmons on Thinking With Grids at SmashingConf SF 2019 Sa video, panoorin kung paano mag-isip ang Mozilla developer advocate na si Jen Simmons habang nire-recreate niya ang isang magazine layout gamit ang CSS Grid nang hindi niya pinaghahandaan beforehand. Layout Land Alamin kung ano na ang posible ngayon sa graphic design sa Web—layout, CSS Grid, at iba pa. Isa itong serye para sa mga designers at Web developers. Nilikha ni Jen Simmons, Mozilla Designer at Developer Advocate. Wes Bos Kilala bilang "King of JavaScript Challenges" dahil sa isa niyang segment na JavaScript30. Fun Fun Function Youtube channel ni Mattias Peter Johansson, kilala bilang mpj. Tinatalakay sa mga video ang mas advanced na concepts ng JavaScript at mga libraries at frameworks nito. Google Chrome Developers Mga videos tungkol sa progressive Web apps, bagong features ng Google Chrome para sa mga developers, videos ng mga conferences at seminars, best practices, mga development tips, user experience at accessibility, at iba pang interesanteng videos mula sa Google Developers team. Coding Tech Mga videos ng mga talk at conferences tungkol sa software at Web development. The Futur Welcome to the Futur! The Futur of what? The Futur of education, design, business, learning... The Futur You! This is the future of online education for creative entrepreneurs. Podcasts Kung gusto mo namang may mapakinggan tungkol sa Web development kahit may ginagawa ka, tingnan ang mga podcast na ito: Syntax.FM A Tasty Treats Podcast for Web Developers. The Web Ahead Jen Simmons speaks with world experts on changing technologies and the future of the web. People Sa table naman na ito, nakalagay ang ilan sa mga taong dapat mong i-stalk para mas matuto lalo. Karamihan sa kanila ay mga Web developers. CSS Working Group Official Twitter account ng CSS Working Group, ang group na gumagawa ng mga standards para sa mga bagong features ng CSS. Val Head Author ng aklat na Designing Interface Animation. Design advocate sa Adobe. Rachel Andrew Web Developer at member ng CSS Working Group. Isa sa mga sumulat ng standards para sa CSS Grid, Flexbox, at kasalukuyang gumagawa ng bagong standards para sa CSS Multi-column Layout. Chris Coyier Co-founder ng CodePen. Isa sa mga pangunahing writers ng CSS Tricks Brad Frost Web designer, speaker, writer, at consultant. Author ng aklat na Atomic Design. Steve Schoger Author ng Refactoring UI. Sa mga tweet niya, matututo ka ng best practices sa user interface design, lalo na kung hindi ka marunong mag-design. Tim Berners-Lee Director ng W3C at ang nag-imbento ng World Wide Web. Jen Simmons Design advocate ng Mozilla, member ng CSS Working Group. Pangunahin niyang tinatalakay kung paano binabago ng CSS Grid ang graphics design sa Web. Siya rin ang nag-imbento ng katawagang Intrinsic Web Design. Wes Bos Fullstack developer, at binansagang King of Javascript Challengesdahil sa course na ginawa niya (Javascript30).