dutch flag

Webdesignpuntnl Blog

Through this blog i write about web developement. You can think about stuff like: Figma, NPM, Node, Webpack and off course much more.

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

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

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

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

: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