Posts

Web 3.0: Component driven responsive design

Image
Responsive web design is now a mature method to create layouts for desktop and smaller width screens.  We rely on media queries that detect the screen width to adjust the layout and widths of our pages and their components. The issues we face with responsive web design is that we can’t always easily move a section of a page onto a new page without work to recreate its responsive behaviour within the context of the new page container. This is where a new method called responsive component design helps to address this specific problem.    Responsive components are self contained parts of a page that are completely portable. You can move them to new pages of your site and they will adjust their layout and size based on the neighbouring components on the page.  Responsive design, by contrast adjusts the widths of components based solely on the page width.  As of Q4 2021 responsive components are currently rendered using JavaScript.  I expect based on the technical community focus on this a
Post a Comment
Read more

The Linux Filesystem

  / - The Root Directory System root /bin - User Binaries In single user mode this is where user apps such as firefox etc are stored /sbin is similar in that is is where administration binaries are stored. /boot - Static Boot Files GRUB, linux kernels are stored here, needed to be able to boot the system. Config for boot is stored in /etc /dev - Device Files Devices are exposed as files. Eg /dev/sda represents the first SATA drive. It also contains psuedo-devices. For example: /dev/random produces random numbers. /dev/null returns no output and discards all input. /etc - Configuration Files Contains systems wide configuration files. User specific config files live in each users /home/{user} folder /home - Home Folders User specific files and user specific configuration. /lib - Shared Libraries Contains essential libraries consumed by binaries in /bin and /sbin. /usr/lib contains libraries consumed by binaries in /usr/bin /lost+found Recovered Files On system crash, recovered files ar
Post a Comment
Read more

Rant: Don't name your mobile app with a pronoun prefix

Image
Dear companies and organisation that create mobile apps, I have noticed some of you use a poor naming convention for your mobile apps such as 'My _insert company name__'; or even more criminal, not including your name in the app name. Here I'm going to name and shame the guilty offenders of this usability crime that I can see on my own Android device: Odeon app is inventively named myODEON Talkmobile app is creatively named My Talkmobile Huawei app is slyly named My HUAWEI Ladbrokes Poker app is cleverly named  Poker (this is far worse - omitting the company name entirely) Sainsburys banking app is succinctly named Bank (this is the worst one) Im sure there are many many more...and its definitely a pet hate of mine, to go to so much effort make a dedicated app and then cock-up the usability by poor naming is unforgivable!
Post a Comment
Read more

Docker introduction

Image
  Docker Image and Container concepts An image is typically a layered operating system file, such as Alpine Linux, which is a commonly used OS used with Docker. Images are downloaded. A container is a build of the image with a defined configuration. Containers are run. Docker Compose allows multiple containers to run. Dockerfile Dockerfile defines image to build, operating system, configuration. Note capital D. docker-compose.yml can orchestrate containers Dockertoolbox is legacy Getting started Install Docker Preferably on a Linux based system.  Ive had success on Debian, Windows WSL2 subsystem (Ubuntu), and Mac OS (Intel CPU).  Running natively on Windows I can't recommend.  Ive read that there is now support for M1 Macs too. Define the image to build Dockerfile example, pulls in another Dockerfile from hub.docker.com as a starting point, copies the source code from local into the VM, and opens port 80. # Use existing image from hub.docker.com as starting point # OS and stack
Post a Comment
Read more

Why you should use rem instead of px in webdesign

Image
Ive always used px sizes in my font styles. It's an out of date practice and there is a more modern way. Rem is the modern equivalent with some benefits. There is a font-size set as default in all browsers as a default style.  If you do not specify any font size on an HTML page, it will typically render 16px font size text to the page.  This can be overridden in the browser settings.  When you use px based font sizes in your font styles, you are overriding the users defauly size prefernce.  A better way is to specify your font size using rem units. Example of a font size specified in pixels (px): font-size: 16px; Example of a font-size specified in rem: font-size: 1rem; In the above example, if the browser preferences are set to default this will typically be 16 px.  So this will mean that 1 rem is equivalent to 16px.  If the user overrides that setting, then 1rem will be equivalent to the new font size in px set in the browser settings. By using rem instead of px for you font-size
Post a Comment
Read more

Gzip Tar untar and multispan archives

Image
TAR AND GZip Tar and GunZip allows you to package up and compress folders and files in Linux based systems. The common commands you will need are below. Create a tar.gz tar -czvf archive.tar.gz /path/to/directoryorfile Extract a tar.gz to current directory tar -xzvf archive.tar.gz Extract a tar.gz to a specific directory tar -xzvf archive.tar.gz -C /tmp Split Tar file tar -cz directoryorfile split -b 1M splitarchive.tar.gz "parts-prefix" -b 1000M Rejoin Tar.gz file cat splitarchive.tgz.* | tar -xz Photo by  Leroy Evans  on  Unsplash
Post a Comment
Read more

Git initialise new repository with existing source

Image
If you have an existing folder with code you want to push (commit) into a new fresh git repository you need to first create the repository in GitHub or Bitbucket. You also need to have git installed on your local machine. To start off in the directory you have your existing code project git init Connect to a remote repository git remote add origin git@bitbucket.org:username/reponame.git Add files to the commit git add . Set the commit message git commit -m 'Initialise repo' Push files to the repo git push origin master Now the codebase is pushed into master branch in the git repo. Photo credit:  @synkevych
Post a Comment
Read more