dutch flag

blog

This blog is about everything related to web developement. You can think about stuff like: Figma, NPM, Node, Webpack and off course much more.

accessibilitymeans that every person must be able to participate with everything. Despite race, religion or handicap. Also people in a whealchair want to be able to eat in a restaurant of travel with public transportation. This is also true for computers and the internet. We call this digital accessibility. Since juli 1 2018 the governement is obligated to build accessible websites. Websites have to be accessible for everybody. If this is not the case some people will be shut out from society. As matter of fact all websites have to be accessible. On juli 14 2016 the VN-treaty for the rights of people with a dissability was invoked. In Holland the law of equal treatment on grounds of a handicap or chronical disease was adapted. The law now also applies on digital goods and services for governments and companies. For more information on laws and regulations take a look on digitoegankelijk (in Dutch).On the other hand for companies an accessible website is just good for buissines. If the site of a companie isn't accessible it will cost mmoney.

exmaple of a accessible websiteAn exmaple of how to make a website accessible. The site where this toolbar comes from looks nice for people without a handicap. For people with a handicap it could be a problem. But with this toolbar they have the option to adjust a few items. The font-size can be adapted, the colors, the contrast and it is even possible to let a screenreader read the text out loud. Even though you can build a site wich is suitable for evenrybody these are some very nice features. For an explanation of the rules for an accessible site check out (in Dutch) simple explanation of demands. The technical stuff of the website must also be in good shape. An example. In the HTM-code of an image there is the so called alt-attribute. This peace a code is used to describe the image. A person who has bad sight of is totaly blind uses a screenreader. The screenreader cannot give a description of an image, instead it reads the the text of the alt-tag. So it's very important to always use the alt-attribute. Making you're site accessible is just something you have to think about.Published on oktober 10 2019

focus with JSOne of our customers asked me if it is possible to show and hide text on a click. That's not very hard to do. In this case we are hidding the paragraph with css and give the user the possibillity to show or hide the text by cliking the h2 tag. In the image the words missie, visie and uitganspunten are all h2 tags. This done with Javascript (an h2 is normaly not clickable). In case the Javascript is not working the all the text is shown like normal.

clickable headings wiht focusWith the mouse it works like a charme but not if someone is using the keyboard. A h2 tag is not reachable width the tab key. A h2 tag is not an interactive heading. You can solve this with Javascript.

Javascript code for a keywdown event and tabindexBeside using an eventhandler for the mouseclick we also have to add one for the keydown event. The keydown event is triggert if any key on the keyboard is pressed. In this case if a key is pressed the clickHandler fucntion is executed. The next line adds a attribute to the h2 tag making the h2 focusable with the tab key.

if statement for key and mousecheckInside the function we start with an if-statement to check if the text is hidden or not (if hidden we show the text and vice versa) next we check if the enter key is pressed or if a mouseclick is used. In both cases we show the text or hide it. Published on oktober 04 2019

:focus-within is a little bit of a strange psuedo selector. Strange because with this selector you can select a parent element based on the state of the child element. There are a few usecases for this selector but i mainly use it to improve accessabillity of a dropdownmenu. Most visitor of a website use a mouse to navigate but there are also a lot of people who use a screenreader or the keyboard. With the tabkey it is possible to navigate to each interactive element on a webpage. So links, buttons, forms, formfields etc. A blue box shows the user which element is active. This is standard behaviour. If you want to change this behavior you can use the psuedo selector :focus.

blauwe focus kader van een elementLost of times the blue box is removed because designers think is ugly. Removing it completely is not wise, because of the accessabillity. Styling it differently is an option but could also be confussing for those who are use to navigate with the keyboard.

blauwe focus kader van een elementA dropdownmenu is most of the time and unordered list with inside the listitems another (hidden) list. By hovering over the listitem the CSS triggers and shows the dropdown. How does this work without a mouse? If you use tab you select all the items but there is no hover with tab so the dropdown wont show. Now we use :focu-within to write CSS wich makes the dropdown visible when there is focus on the top link of the menu. So the dropdown is hidden with display: none. With the :hover pseudo selector we put on display: block. We do the same with the :focus-within selector and now the dropdown shows on a mouse hover and if we focus the parent element with the tab key. Published on august 16 2019

Git log --onelineis maybe obvious for people who work a lot with Git but i find out about it just recently when i did a workshop with Fronteers about Git.

git log screendumpWith Git log you can go back in time. At the top there is the most recent commit and more down the older ones. Most of the time the commits are two lines long. A heading and below that some more information about the commit.

git log --online screendumpWith git log --online you can see history but just the first line. This gives a quick look. If you need to see more just use git log. If you want to use a title and a body just commit like this: git commit -m "title" -m "body text". By using -m twice you get a title with a body. This way you're commits are getting much more clear.Published on june 4 2019

git logo

cssscanis a browser extension wich enables you to quickly check the css styles on a page without opening the devtools. Cssscan lets you hover over the page, the styles of the element are shwon in a floating box. With a mouseclick you cab copy them to memory and use them everywhere you need them.

css screenshotOn activation a little menu shows up with a few options. The menu can be postitioned on the top or the bottom of the browser. You can pause or close cssscan with the buttons form the menu. Cssscan can also be used whith keyboard shortcuts. There is a button for feedback and there is a button for some options. You can copy the hoverstyles or nesting for SASS or LESS and you can place a grid over the entire page. I use cssscan for some time now. I i come across something i like it's very easy to quickly check the styles. for now it's not yet common for me to use cssscan during development, but it's very handy if you want to quickly check and copy some styling. Cssscan is availlable as an extension for Chrome and Firefox. Safari comming soon.

Cssscan is not free. The normal price is $29.99. cssscan is often for sale, so check the site for more info.Published on may 24 2019

cssscan logo

Polypaneis a new browser made by Kilian Valkhof. This browser shows a site on different devices and viewports in one screen. Polypane is based on Chromium. Beside the Chrome developer tools Polypane also has a few more nice functions.

More than ever people browse the net on mobile devices. So Developers have to take this into account and have to build apps and websites for different screen sizes. CSS ships with mediaqueries. Each screen gets his own design. On a large screen with a fast internet connection you show a hero‐image, on smaller screens you show just a small image so the user uses less mobile data to load the site.

Polypane screenshotEvery modern browser has the option to show the site on different screen sizes. Either you manually change the size of the browser of in the devtools you can use mobile view. But viewing all the breakpoints at once is not possible in the browser. Polypane solves this. In one view you can see all the different breakpoints. Polypane checks the breakpoints and shows the different designs. You can also choose to view just one breakpoint. You can make a screenshot of what is currently visible. Polypane has synchronised scrolling, all views move simultaniously up dan down. If you change something in the HTML or the CSS all views update. Polypane has the same devtools like the Chrome browser, so it is easy to change or debugg something.

Polypane is availlable for Windows, Mac and Linux. You can choose a monthly or a yearly subscription. For a yearly subscription there is a 20% discount. A 25% discount is availlable for members of Fronteers. Check it out on the Fronteers website. Published on may 17 2019

Polypane logo

FigmaBefore the building of a website (coding with HTML, CSS and Javascript) lots of other stuff has to be done first. Start with talking to the customer, you have to know his vision. Also thinking about the user is very important. Who is using the site, what does he need? How is he going ot find what he needs?

By talking to the customer and the user you get a lot of information, but we all know an image says more than a thousand words. So we have to start designing. First make a sketch, turn this into a wireframe, create a design and last we could build a protoype. All of this is possible with Figma. Figma works in the browser, so you can access it from everywhere, collaborate with others and share the designs.

Figma works with components. You can design a button and turn it into a component. This component is now easilly reussable. If you change the mastercomponent any instance of the master is changed as well. Changing just a single instance is also possible of course.

Figma is free for the most part. For teams there is a starter and a professional package. The starter is limited and free. The professional plan is US$ 12 for one month and one editor. If you want to know more you can take a look on the Figma site. Published on april 9 2019

figma logo