Today's Question:  What does your personal desk look like?        GIVE A SHOUT

 ALL


  CSS Selector for Web Scraping

Creating a web scraper is no easy task. This is because it requires precision to identify the specific data points that we intend to collect for the end goal we are working towards. Whether we are looking to create a marketing content database or analyze market trends, the last thing we need from our scraper is for it to return a lot of unnecessary data that will not help our cause.To avoid the inconvenience of going through huge amounts of data to get what we requested, it is crucial to plan beforehand and include a parser in our web scraper. This is where CSS selectors come in, as they ...

971 0       WEB DESIGN CSS SELECTOR


  A simple tutorial about CSS flex property

CSS Flexbox is a layout module that makes it easier to create flexible and responsive layouts in CSS. It provides a simple and powerful way to align elements within a container and distribute space between them.To use flexbox, you need to set the display property of an element to "flex". You can do this by adding the following rule to your CSS:.container { display: flex;}The flex container will now have two main axes: the main axis and the cross axis. By default, the main axis runs horizontally and the cross axis runs vertically. You can change this by setting the flex-direction property:.con...

1,735 0       CSS FLEX JUSTIFY-CONTENT


  What can CSS :has pseudo class be used for?

CSS's :has is a pseudo-class representing an element if any of the selectors passed as parameters matching at least one element. From the name, it's also easy to understand how it matches elements.The syntax is pretty easy as well::has([some-selector])With this pseudo class, it can do lots of things which previously would be challenging or need tweaking the DOM elements with JavaScript. This post will demonstrate what :has can be used for.IntroductionBelow are a few simple examples on how it works.If wanna select all children with img in element a, can havea:has(> img)If wann...

2,200 1       :HAS :NOT PSEUDO CLASS CSS


  CSS position explained

CSS has two very important properties on determining the position of an element in webpage: display and position. display is used to determine how elements are grouped and displayed on the page. While position is used to determine the exact position of an element on a page. And this post would explain position property in detail.position is used to determine the exact position of an element on a page. It has five possible values.staticrelativeabsolutefixedstickysticky is supported starting from 2017 in browsers and it would be explained more later.staticstatic is the default value of the posit...

11,998 3       CSS CSS3 STICKY


  Sass Style Guide: A Sass Tutorial on How to Write Better CSS Code

Writing consistent and readable CSS that will scale well is a challenging process. Especially when the style sheets are getting larger, more complex, and harder to maintain. One of the tools available to developers to write better CSS are preprocessors. A preprocessor is a program that takes one type of data and converts it to another type of data, and in our case CSS preprocessors are preprocessing languages which are compiled to CSS. There are many CSS preprocessors that front-end developers are recommending and using, but in this article we will focus on Sass. Let’s see what...

2,923 0       TUTORIAL CSS SASS


  How ScrollerJS works

ScrollerJS is a light weight number scroller module to be embedded in web apps. It provides fancy number scrolling animations. ScrollerJS supports both CSS transition and DOM animation to handle the animation needed. If CSS transition is supported in a browser, CSS transition will be the preferred option for animation. If in old browsers where CSS transition is not supported. DOM animation will be chosen automatically.How does the number scrolling actually work? To transition a number from 0 to 1 and then to 2, it will go through the below process:1. Creating a div panel which will contain two...

5,273 0       JAVASCRIPT CSS GITHUB SCROLLERJS


  CSS Overflow Property Utilization

Sometimes when we do CSS on HTML elements. We may want to hide some text when the text in a specified box overflows. Usually, we can use a CSS property overflow:hidden to hide the text so that the format of the whole element will not be affected. But will it always work?I believe some of us may encounter problems when we want to hide some text in a table td cell with specified width. If we use td { overflow:hidden;}, it is supposed to hide the text if the text in a td cell overflows. But the fact is that it will fail to work.The outcome will be the height of the td cell will increase so that t...

10,475 0       CSS OVERFLOW TD CELL HIDDEN


  Use of @font-face

Almost all web browsers(including the dinosaur browser IE6) support the web font property @font-face. Its usage is:@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}Now we are entering the modern web browser age, the WOFF format of font is supported extensively, so now we usually...

3,159 0       CSS @FONT-FACE