Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

My version of the “Weather Finder App”, from this tutorial, can be used here.

I wanted to share the React app that I’ve created. I’ve found that going through tutorials is a good way to learn a framework but I feel that when you don’t revisit, or review, what you’ve coded then you don’t truly understand what you’ve built.

1 month later after coding this…

I’ve given myself a long break from this piece and come back to it today. I’ve actually broken down some of the tutorial in a previous post already.

Down to the details

What this app actually does is…

On Component Did Mount (a React lifecycle method) it checks if it can use the browser’s location data:

If it can it use the location data then it’ll go ahead and make a call to Open Weather Map’s API and populate the state with the relative weather information. getBrowserLatLon()

getBrowserLatLon()

If it can’t (on error) have access to the browser’ location data it’ll show a form asking for the user’s City and Country. When this form’s been submitted it’ll go ahead and make the API call and then populate the state with the relative weather information. getWeather()

getWeather()

Issues

I noticed a couple of issues with the App once I had finished the tutorial:

  1. If you misspelt a City/Country then the app would fail and a user is presented with no error message(s)
  2. If you were to submit empty fields then the App would show a generic error message

The fix

I’ve added the following code to handle the error when a misspelt City or Country is submitted:

Original code:

My fix:

There’s not much different here. I’ve wrapped the await with a try incase we get any error messages. I’ve got a small function below to show error messages on the front-end:

Not too sure what else I can break down here. I’ve got a link to my repo here for you to clone and try it out yourself 👍🏽

I’ve been learning React for the past year and have found many projects, and tutorials, that use class components when a stateless/functional component would be ideal.

I decided I wanted to update my very, very, outdated blog with what I’m currently currently working on, and what better way to do it than brain dump some new learnings.

The difference between the two, to me, is simple.

A Class component is used when we’re dealing with the state of a component and a stateless component, is well, used when we don’t need to deal with the state of the App. I know there’s more to it than that but if you keep that in mind when building a new component to your app then it’ll help you write a cleaner, leaner, and simpler component.

Does the component have any sort of state involved? If not, it’s a functional, a dumb, component that’s pretty much just going to display the data that’s been passed to it through props.

An example, taken from a “Find what the weather is” tutorial I followed recently:

A classic React, class, component:

The example above has no state management and has a a prop of getWeather being passed down from App.js. This prop is a function that’s used to make an API call to https://www.openweathermap.org.

The above can easily be changed to a functional React component. See below:

We don’t need to import the Component from React here as we won’t be making use of the methods it supplies, such as ComponentDidMount() or ComponentWillUpdate().

Turning this in to a functional component, using ES6, also gives us some nice little features. We use an arrow function and pass in props :  Const Forms = props =>(). This allows us to drop the word “ this” from the component. All annoying quirks with JavasScripts this word are avoided. Making larger components easier to navigate. See the onSubmit

We can also drop the bind keyword! 🙏🏽

What I really like about this is that it means these components become presentational components where we focus purely on displaying data to the user. The data being passed through is handled by a higher-level component, or by flux/redux.

Other benefits are that it’s’ much easier to test and you get a performance increase. We no longer need to worry bout lifecycles or state and we know what data to expect and what should be rendered on the page.

 

I’ll be adding more to this post if I find I’ve missed out any other key pieces of information

I’ve mainly used this effect for highlighting navigation links when a page is currently being used, or when another navigation link is being hovered over.

You can see it in action here:

Small #animations added to the new #digitalClipboard site that adds that little 'magic' when using a #website. #sass #css #html #scriptedpixels

A video posted by Kam Banwait (@scriptedpixels) on

The CSS behind this is pretty straightforwards but the trick is to ensure that you have a border, with no height, set to begin with to ensure the animation is shown when hovering on and off the link. Without this 0px border in place the effect will jump to the hovered state.

I’ve used a bottom border in the example code below:

The Sass mixin creates vendor prefixes for the CSS output as well as taking care of all other transitions used at a later date with different values.

You should be able to see that it’s a pretty simple and straightforward effect to created. The key is to have the 0px border already set to ensure the animation works.

See it in action on CodePen here:

See the Pen Animate underline by Scripted Pixels Ltd (@kambanwait) on CodePen.

 

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

Using SVG’s is awesome. When they break, which isn’t that often, they can be a pain.

To ensure I don’t get ‘stung’ when using SVG’s as background images in Sass/CSS, I created the following Sass mixin:

This is pretty self explanatory but what it does is ensure that there’s a ‘.png’ image for older browsers, and devices, that don’t yet support svg’s.

To use it, you include the following when setting a ‘background-image:;’ :

The name of the image is passed within the brackets. I’ve chosen not to include the extension as it’s already set in the sass mixin. This can be changed to anything that you wish to use.

The CSS that gets rendered is pretty clean, I think:

 

I use the above mainly for icons and logo’s, to be honest. I’ll be posting more about SVG and images tomorrow. You may have noticed that I’ve not written a blog post for some time; I’m looking to change that, dramatically, from now on.

I’ll also be replying to a lot of questions asked in previous blog posts, better late than never…

 

Whilst working at my current contract, at LuxDeco, I was tasked with creating a, mobile optimised, Magento theme where the design featured two slide-out/in info panels. These were to act similar to the slide out/in panels featured in the new Facebook mobile-app where the user is able to view a hidden panel that’s hidden off the left and right hand side of the main content page.

Here’s a sketch of what I was looking to create:
image

And here’s the final version:
Screen Shot 2013-10-15 at 14.06.25

Annnd here’s a working demo.

Before I even started to figure out how it was going to work I thought I’d start looking for a plugin, or tutorials, as this design is seen on a fair few websites now, especially as more and more sites are being optimised for smaller screens. I looked for plugins/tutorials that offered near-similar functionality. I assumed it would be a short search but what I found was a bunch of ‘plugins/tutorials’ that had ‘issues’. These were issues that I found after implementing them and wasted an hour or so on each plugin/tutorial.

The main issue I had was that some of the menu’s didn’t think of what would happen if a menu was slightly longer than the main content/page. The menu’s would then get cut off at the bottom. There was no way of seeing the rest of the menu with either scrolling or zooming out. This brought me on to the next big issue!. I found they had disabled the users ability to ‘pinch-to-zoom’!

This is a big NO NO for mobile sites; why takeaway a, now everyone knows how to do it, natural gesture from the user? It’s not a nice user experience and if this was going to be used on a e-commerce store, like I was planning to use it, I didn’t want visitors to not have the ability to zoom in to product images.

After all the searching and testing I did come across one very useful resource, this is what I’ve based my version on, from Smashing Magazine. Their final demo sold it for me, I knew I could manipulate it in to how I wanted it to function with ease 🙂

Now, the bit you’re looking for; the code!

THE HTML:

Pretty straightforward here; you’ve got wrapping DIV’s that hold the content together with some hidden over flows. This hidden overflow helps hide the slide out/in navigation panels for us. It looks a little more complicated as I’ve got the #phone wrapper on this example.

THE CSS:

I’m hoping the comments in the CSS file are self explanatory here. I’ll aim to comment my CSS a little more later tonight and update the post…

THE JAVASCRIPT:

There’s a lot there to go through and as much as I wish to talk through it all I think the comments you’ll find in the code are pretty straight forwards.

One important ‘thing’ to point out is that this is pure JavaScript. Not jQuery. I’ve added & modified the JavaScript to introduce the second navigation and added to & modified the CSS to match.

To achieve the smooth animation of the sliding effect you’ll need to add the following jQuery library called Fastclick, available here. As well as a custom version of Modernizr.

Add the modernizr library in the of the document and then the following before the closing tag.

With all the above copied or downloaded, images included, you’ll have a working double slide-out/in navigation enabled, mobile optimised, website!

DEMO

p.s: I’ve added some Media queries for you too so it’ll appear different on mobile and desktop 🙂

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

After being asked many times, via this tutorial and emails, how I created the LuxDeco Discover page I decided to finally create my own version of the Grid for you to download.

I’ll aim to keep this short because most people just want the answer and I don’t have too much time on my hands at the moment, hence the lack of posts.

I’ve got a working example here. You can also download the code from this link.

To show you what the structure of the new mini-gallery I drew at the image below. It may not be as clear as it could be but I think it’s a good rough outline.

IMG_0302

THE GRID MODIFICATIONS:

I started off with editing a few bits of the Grid JavaScript first. I’ve included comments in the ‘grid.js’ file and I’ve pasted some key parts below. The changes start from line 341 in Grid.js:

What I’ve basically done it set up all elements and then appended them to the relative wrapping containers. I’ve then appended the wrapping containers to the large container. It’s written backwards as I need to ensure I’ve declared the to-be-appended items before appending them to any other elements.

The next step is to get all the data from the clicked image. This clicked image contains A LOT of data. It has our title, copy, href’s and our image paths.

At the end of the ‘update’ function we make a call to our Preview initiator function this.PreviewGallery();. This brings in our image gallery jQuery code. We have to call this in at this, last, point of the ‘update’ function to let jQuery find the DOM elements and bind our ‘onclick’ function.

THE HTML STRUCTURE FOR EACH GRID ITEM:

For each grid item I’ve had to include some extra data-attributes. These hold the thumbnail paths as well as our URL’s.

Once you’ve edited the grid elements as needed you’ll need to fire it all up within the DOC READY function:

You can see it all in action here. You can also download the code from this link too!

Hope it’s of some use to you all! Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

A quick post showing a concept I had in mind about a HTML/CSS button that controls the opening and closing of a accordion element. I wanted to make this with pure HTML/CSS to eliminate the use of images or sprites for buttons. This was purely just for fun and I’ve not tested on IE, we know what may happen!

The Demo:

HTML:

CSS:

JavaScript:

I think it’s quite clear to see what’s happening here. When the #button is clicked a class called “open” is added to the #button and a DIV called with the ID of “content”.

When this class is added to the DOM elements the CSS style, above, is applied. This is where the magic happens. When they get given the class ‘open’ they’re also taking on the new heights and rotation values. These are accompanied with the “transition” property that allows the animation to occur. The good thing with this is that if a browser doesn’t support the animation then it’ll just ‘jump open’ instead of smoothly animating open.

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

[ 20/11/2013 UPDATE: This is now responsive and available here ]

This is a short tutorial on how I created the mini gallery, seen after clicking the large image, on LuxDeco’s Discover page. I’ve been asked to write up how I created the gallery as part of another tutorial found here. I recommend reading through the tutorial on how to get the whole grid setup before continuing with this article, just so you’re up to speed and don’t get lost with code examples I use.

To start with I’ll create a demo of the actual gallery and thumbnails to show you how it works. I’ll then show you where I used the code. This way you’ll have the demo and will be able to take it across to your site line by line and implement how you need it.

Here’s the demo:

The code can be easily taken the JSFiddle above or from below:

THE HTML

THE JAVASCRIPT

THE CSS

Now to transfer this in to the tympanus tutorial I pretty much took the HTML line by line in to the tutorial and swapped out the image. It was very simple to insert the new code. You’ll notice there really wasn’t much to do except wrap the current HTML with the new HTML.

The previous code:

My new code:

That should pretty much do the trick for you. You’ll need to ensure that you’ve got jQuery pulled in as per normal.

I created the LuxDeco Discover page with this tutorial too. It was built with Magento providing the content for each preview. Initially this was a little to pull off but it fell in to place in the end with the use of jQuery and a lot of appends and data-attributes.

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

[ 20/11/2013 UPDATE: This is now responsive and available here ]

I decided to do a little sketching on my iPad mini on the way in to work one day…after getting frustrated with not being able to get some code to function.

This is what I drew:
IMG_4981This was drawn on a train in to London, please excuse the scruffiness

What is this all about?
I wanted to get my mind off the other work so I looked at creating a minimal preloader, using only CSS, HTML and little jQuery. I started with taking on the traditional “straight line” preloader and playing with the thickness of lines and their opacity. This was looking great, but I wanted to create something a little more exciting for the visitor – who wants to wait to view a site anyway? I wanted to make that wait a little more bearable.

I looked at creating a circular pre-loader, yes this is traditional again, but making this in CSS-only would prove to be a challenge and something that I know that could be re-used in an upcoming project.

Screen Shot 2013-09-05 at 08.58.37

Screen Shot 2013-09-05 at 08.58.37The final design made in Photoshop after importing the image from the iPad so I could get that red/orange background color

Lets get started, shall we:

All credit goes to this website which I used to make all of the animation.

The html

The circle is split in to four squares, I’m not totally sure why but I’m guessing it’s to do with the math and transformations occurring in the background when the jQuery rotates the inner, loading, circle – I’m experimenting with this and getting some very funky shapes!

The CSS

WOW – where do I even start with this lot. I understand all of this but explaining it here is going to be difficult!

The jQuery

Here it is in action via instagram:


#webdev #html #css #jquery Circular loading animation. Started from an iPad idea. by @scriptedpixels

and via JSFiddle:

Just to get this out the door I’m going to end this post here. I’ll figure out a way to annotate all the code in a nice legible and logical way as I’d like to highlight what I’ve done.

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

I made this a little while back and have since used it in all my new website builds.

Here it is in action:


A video of my very own #responsive #framework #html #css3 #mediaqueries #DIY #grid #webdev #scriptedpixels #MobileDev by @scriptedpixels

DEMO
I’ve finally added a direct link to the Demo here

WHY?
I was working a late night on a project and decided to investigate some general frameworks and twitter bootstrap was appearing on all the blogs, plus I had heard a lot, good and bad, about it. With the majority of reviews being good; I decided to download it and give it a try.

The steps I took after were pretty much:

Downloaded -> unzipped -> pulled in to Sublime 2 -> a few minutes spent looking at all the classes in the .CSS -> confused -> not much documentation -> tried a small integration test -> deleted.

Why did such a greatly talked about framework documented so little…and full of bloat CSS?!

I was confused and annoyed. The website was pretty poor to navigate (it may have changed since I last used it) and finding basic documentation was painful…it was a late night after all!

bootstrapCss
The standard css for bootstrap. 1080 lines of CSS, most of which won’t be used!

The small integration test I did concluded my efforts with this “framework”. I was possibly just impatient with the whole process but there was one thing that I knew I would be doing if I had continued to use it: overwriting CSS.

I could’ve spent hours overwriting CSS ensuring current CSS wasn’t being overwritten by bootstrap’s and vice versa. When it comes to coding; I find it tedious having to repeat tasks like that, tasks that shouldn’t be this difficult or long winded.

If it’s something that’s being repeated over and over then there’s got to be an efficient way of doing it once.

HOW?
I started off building my own framework by going back to the basics and getting some ‘resets’ in place.

Kudos to: Eric Meyer for his CSS reset, it’s used everywhere!, Responsive.gs for the basic structure, to the TutPlus.com network for their amazing article on A basic responsive Grid and finally thanks to: www.snook.ca

You’ll notice my version is nearly the same as all three links and I can admit that at first I did copy all their code, which I then manipulated and made my own

My slightly modified reset.css file contains the following:

I added a fonts.css to setup my custom fonts and a global font size. Ensuring that I don’t need repeat CSS setting a font-family multiple times in multiple places in the project. This works the same for setting the font-size too – reducing the tedious task of ensuring all font sizes are the same throughout the projects files.

What is REM?
CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

I’m defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)

What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

HOW TO MAKE IT WORK?
My main style sheet, named styles.css, contains the CSS for the main site when viewed on smaller screens – I choose, as recommended by many now on the web, to work from the smaller screen sizes up – ensuring that our mobile users aren’t downloading the whole desktop version of the site with elements hidden. This would waste our visitors time as well as resources (data-limits on network tariff’s is a biggie).

A file called “mediaqueries.css” plays the main role here for me. It controls the layout for any given screen resolution chosen. This file works from the smallest screen size up. The initial media query sets the breakpoint to optimise the layout for a screen that has a max-width of 480px. This is usually associate with mobiles in landscape. You can enhance these media-queries further by accessing the orientation as well as detecting high resolution (retina) screens to really make sure you’ve provided the best user experience. My standard code is as follows:

A file called “responsivegrid.css” holds all the magic of the grid. It’s created by Denis Leblanc and provides the classes that control the width of the columns. Unlike twitter bootstrap’s version my file is only 64 lines of code – without comments.

.row
Add this class to any element that spans the entire width of your container to clear any floating child elements. Also allows you to define spacing between rows.

.col
Add this class to child elements of a row to float left and add the default gutter width. This class must be used in conjuction with one of the span classes below.

.span_1, .span_2, .span_3, .span_4, .span_5, .span_6, .span_7, .span_8, .span_9, .span_10, .span_11, .span_12
Add one of these classes to a each col element to set it’s fluid width. On smaller screen sizes these elements will default to stack vertically.

.row, .col, .clr, .group
Add either of these classes to an element to clear it’s floating children. Uses the ‘clearfix’ method.

Things to remember
.col:first-child
The last col element gets the right margin removed with the col:first-child pseudo selector in order to fit within it’s parent element along with it’s siblings. The browser support for this goes as far back as IE7 so if you’re one of those innocent bastards still having to support IE6 then you’ll need to add an additional last class to your markup and CSS to remove the right margins.

To ensure the columns only apply their widths when needed I wrap the width’s for each span in a media query

This current example, and one that I hardly change, “activates” the column layout when the screen width is at a minimum width of 768 pixels. Originally, this was the set transitional width for when viewports would transition from landscape to tablet.

There’s now better ways to check for what device your visitors are using but you’re currently just looking to use this media query to enable a column layout and only when your content needs it.

By using media-queries/breakpoints and the “responsivegrid.css” rules I can create multiple layouts, as per any grid/framework.

Some small notes about this custom grid:

  1. Set the widths of images to be max-width:100%; so they don’t scale larger than their original dimensions
  2. Set the width of the outer most wrapper, normally a DIV or section called “wrapper or container” to 100% so it’s always filling the whole width of the page.
  3. Removed any margins from the 1st column to ensure all columns fit in, something that is sometimes overlooked

WRAP IT UP!
I feel that this could go on for a while, I think I’ve covered everything I needed…and more. I hope this is of some use to someone out there. I’m updating the grid as I continue to work with it, so I decided to add it to GitHub for people to keep track of changes and updates.

I’m currently working on a WordPress version too so trying to include some extra basic elements in to the current version.

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

from the blog


    Warning: Use of undefined constant DESC - assumed 'DESC' (this will throw an Error in a future version of PHP) in /srv/data/web/vhosts/scriptedpixels.co.uk/htdocs/wp-content/themes/ScriptedPixelsLtd/index.php on line 58
  1. Weather finder React App

  2. Stateless, functional, components in React

  3. Simple animated underline

  4. SVG image Fallback

  5. Double off-canvas, sliding, navigation

  6. Thumbnail grid with expanding preview and mini gallery

  7. A two in one open and close button

work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd