Pepsized

Embedded CodePens and React – what may happen and how to fix it

PeHaa — Wed, 05 Feb 2020 16:03:08 +0000

We’re currently working on moving pepsized.com to JAMstack. This website has run and still does as a “classic” WordPress. We may still change our minds about the technology, but right now we are considering a static website generated by GatsbyJS with WordPress as a headless CMS.

There are a few challenges, in particular, our demos and custom meta fields, like those managing our freebies. There are also some content-related issues. For example, our CodePen embeds are no longer working on Gatsby

In this article, we’ll see what actually happens to our pens and how we can deal with that.

The problem

Let’s abstract from WordPress and Gatsby. We have our post content as a string and need to display it within a React component.

On PEPSized, we’ve always used the HTML (recommended) method of embedding pens so the content string contains this kind of markup:


const content = `

`

And we may try to do something link that:


import React from 'react'

const PostContent = ({ content }) => {
  return (
    
  )
}

or, using the html-react-parser:


import React from 'react'
import HTMLReactParser from 'html-react-parser'

const PostContent = ({ content }) => {
  return (
    {HTMLReactParser(content)}
  )
}

See the Pen Embed pen with React and dangerouslySetInnerHTML by Paulina Hetman (@pehaa) on CodePen.

As you can see in the pen above, none of those methods work. If you use browser tools to check the HTML outcome, you can see that the





That’s how we implement it for Gatsby




import React from 'react'
import HTMLReactParser from 'html-react-parser'

const PostContent = ({ content }) => {
  /* check if it happens in the browser or on the server  */
  const isSSR = typeof document === 'undefined'
  /* we need to append the CodePen script only once  */
  let codePenScriptIsAppended = false
  const options = {
    replace: (node) => {
      if (
        node.name === 'script' &&
        node.attribs &&
        node.attribs.src === 'https://static.codepen.io/assets/embed/ei.js'
      ) {
        if (isSSR) {
          return
        }
        if (!codePenScriptIsAppended) {
          const script = document.createElement('script')
          script.src = node.attribs.src
          script.setAttribute('async', "")
          document.head.appendChild(script)
          codePenScriptIsAppended = true
        }
        return 
      }
    }
  }
  return (
    {HTMLReactParser(content, options)}
  )
}





By the way, we use html-react-parser for a bunch of different things as well (and find it very cool! ).



On How I Approach Teaching CSS, CodePen Quizzes and Playing Cards
PeHaa — Wed, 22 May 2019 09:32:58 +0000
It’s been two years since I started to teach web development. Most of my classes target beginners and not necessarily future web devs.

One of the typical syllabi includes WordPress and some basis of HTML and CSS. My students learn how to build WordPress sites with the WordPress interface. They use CSS to customize their pages beyond the limits of the theme options.
What is my teaching material built of? Mostly exercises and playgrounds! I usually base my short “theoretical” intros on the resources that exist already. Very quickly, we skip to exercises. I challenge myself to actually “design” exercises. I like these moments when students are working on some real projects and making references to our past exercises helps them to progress.
How do I build and share the exercises? I make pens. I use CodePen right from the very beginning of my teaching adventure. Having a Pro account lets me juggle private and public pens, upload assets, etc.
CSS Quizzes on CodePen
In this article, I’d like to share with you a series of three quizzes that I built around the CSS selectors. This subject is particularly important when teaching CSS for WordPress. That’s because, very often, you need to override the existing styles, and you don’t have control over the HTML structure. Choosing the right selector and understanding the cascade, inheritance, and specificity is crucial.
The quizzes are as follows (and I’d recommend this order):


QUIZ: Well aimed? How well do you know CSS selectors?
In this quiz, your task is to decide whether the selector targets exactly the highlighted element. It contains 25 ‘yes or no’ questions.
See the Pen 

CSS Quiz – Specificity Wars by Paulina Hetman (@pehaa)

on CodePen.


QUIZ: Can You Count Specificity?
In this quiz, you need to calculate the specificity value of 15 different selectors.
See the Pen 

CSS Quiz – Specificity Wars by Paulina Hetman (@pehaa)

on CodePen.


Specificity Wars
In the third quiz, you have to decide which color is to the highlighted element – that is which css declaration wins.
See the Pen 

CSS Quiz – Specificity Wars by Paulina Hetman (@pehaa)

on CodePen.


If you are a teacher, you can fork any of these pens and adapt its difficulty level. All of the quizzes are built with vue.js. Don’t hesitate to contact me if you need advice on their customization.
Follow me on CodePen
Playing Cards?
When working with a group of students, I use hand-crafted cards to help them memorize the rules of counting the css specificity.
Let me explain. Have you ever played a card game called War?
The rules are simple. The deck is divided evenly among the players, giving each a down stack. In unison, each player reveals the top card of their deck—this is a “battle”—and the player with the higher card takes all cards played.
If there are two winning players, then there is a “war.” Both players place the next card of their pile face down and then another card face-up. The owner of the higher face-up card wins the “war” and adds all the cards on the table to the bottom of their deck. The objective is to win all of the cards.
Now, instead of using a standard playing card deck, we use cards with selectors of different specificities. Just like for the standard card deck, there are always 4 cards that have the same specificity value.

I use the set of cards as in the pen below, hand-drawn with markers on some rigid paper.
See the Pen 

specificity war by Paulina Hetman (@pehaa)

on CodePen.
				
				
					
				
					
						
					
													

														
										
				
						
					
													

														
										
								
			
		
In each round students calculate the specificity values of their cards. In case of doubt, I encourage them to check their scores with the online specificity calculator.
I must say that the feedback is always positive, and my students love this activity. If you are a teacher – feel free to try it with your class.
I’m also definitely going to build more CodePen quizzes (at least because I love it), so you might consider following me to stay tuned. Your feedback is more than welcome. Thanks!
Follow me on CodePenFollow me on Twitter




You can also join my online class Build and Customize a Modern WordPress Front Page in One Hour

The following link will give you two months of free access to my class and all other premium videos on Skillshare.
 Join My Class






Discover Gutenberg and play with Custom CSS in this video course
PeHaa — Sat, 30 Mar 2019 14:46:51 +0000
It’s been a while since I started giving regular WordPress classes and workshops. Recently, I was approached by the Skillshare platform who encouraged me to build an online course around WordPress. Saying yes was definitely not an easy decision, but I finally decided to give it a try.

Build and Customize a Modern WordPress Front Page in One Hour – is a 48 minutes course that suits beginners and more advanced users.

The beginners will be guided step by step. I show how to set up a WordPress site with one of the popular hostings. How to access the WordPress dashboard, configure WordPress, install a theme and plugins. Next, we dive into editing content with Gutenberg.

Finally, I explain how HTML and CSS work and we add some personal touch to our website with custom css code. These two parts can be interesting and challenging also for more advanced users.

If you follow along, after one our,  you end up with a simple modern portfolio-type front page and a few new skills in your toolbox.




The following link will give you two months of free access to my class and all other premium videos on Skillshare.

 Join My Class





 


Beer Slider Responsive & Accessible Before-After Slider
PeHaa — Tue, 11 Sep 2018 05:00:21 +0000
Recently, I was working on a project where we needed an efficient solution to demonstrate some Lightroom presets applied to the photos. A before-after slider seemed to be a good solution here. Finally, I decided to code such a slider myself. That’s how Beer Slider was born. It’s written in vanilla JavaScript, but it can be easily implemented by those of you who are more comfortable with jQuery or Zepto.

It’s keyboard accessible, responsive and open-source.

First of all, check the demo page for a few examples and the usage instructions.
PS. You will find some great (and free) Lightroom presets on altphotos.com – some of them were used in our examples.

Further Examples on Codepen:
Basic + source code: SCSS and JS (Babel):
See the Pen BeerSlider – before-after reveal slider – code source, basic demo by Paulina Hetman (@pehaa) on CodePen.

Usage with jQuery or Zepto:
See the Pen BeerSlider – use with jQuery and various start parameters by Paulina Hetman (@pehaa) on CodePen.

Usage with background images
The Beer Slider is not only for comparing images, try it for backgrounds.
See the Pen Background Comparison by Paulina Hetman (@pehaa) on CodePen.

Fitting images into container with svg
Sometimes you may need that your images cover the slider’s area. For example – you want to have a slider that fills the whole screen, or you want it to be a square. With Beer Slider you can use the svg approach proposed by Sara Soueidan.
See the Pen Full width full height before-after slider by Paulina Hetman (@pehaa) on CodePen.
See the Pen Circle before-after slider by Paulina Hetman (@pehaa) on CodePen.
Thank you! We hope that some of you will find it useful. See you soon!
Fork it on Github


Simple Solution for Page Notifications
PeHaa — Sun, 26 Aug 2018 14:27:10 +0000
In this article, we’d like to share with you a small JavaScript library that we developed for one of the projects that we’ve been working on recently.

In our latest project we needed a simple and lightweight solution for the page notifications. Within the project we have notifications of several types – success or error notifications, warnings or purely informative ones.

We wanted to have two possible behaviors: some notifications should self close, ie. disappear spontaneously. On the other hand we need to have notifications that require user’s action – we want to be sure that the user actually noticed them before closing.

Within the project we do not use any external JavaScript library, so we wanted to have it in vanilla JavaScript.

You can see the code I ended up with the solution as you can see in this demo on Codepen. The notification may either be on the page when it loads or can be added at any other moment.

As for the IE support, it works in IE10+.
See the Pen Simple Notifications Solution – source code and demo by Paulina Hetman (@pehaa) on CodePen.


The demo uses the Bulma CSS framework, but it’s not necessary, you can style your notifications by scratch or use something else then BULMA.

In the pen above you’ll find the source code that I wrote for the library. If you want to use this small library directly in your project – you can check our github repo for more details. I also published the code to the npm registry and the production-ready minified script is available as https://unpkg.com/simple-notifications-solution/dist/Notifications.js, and the minified css file – https://unpkg.com/simple-notifications-solution/dist/Notifications.css.

  ...




 


  Self-closing notification
  
    This one needs user's action.
    
  
  
   
   

You can check how it works in one of these pens, or, again, check the github repo for more details.
Examples
Default Settings
See the Pen Simple Notifications Solution – default by Paulina Hetman (@pehaa) on CodePen.

Custom ‘out’ animations
See the Pen Simple Notifications Solution, custom out animations by Paulina Hetman (@pehaa) on CodePen.

Custom ‘in’ animation
See the Pen Simple Notifications Solution, custom in animation by Paulina Hetman (@pehaa) on CodePen.
Hope some of you find it useful. Please share and enjoy! :)


10 Free Color Swatches For Your Inspiration
Joe Vains — Thu, 05 Jan 2017 08:53:29 +0000
Today, I propose you to download 10 free swatches for your creations. You can use them in your favorite applications. The files are in ASE format LESS and SCSS. (All definitions are based on Wikipedia).
Hanami
Hanami (花見^?, lit. “flower viewing”) is the Japanese traditional custom of enjoying the transient beauty of flowers, flowers (“hana”) in this case almost always referring to those of the cherry (“sakura“) or, less frequently, plum (“ume”) trees. From the end of March to early May, sakura bloom all over Japan, and around the first of February on the island of Okinawa.
#F4F2F5
#F1D5D2
#C0A7AD
#A78E7B
#8B3E60
 Download .ASE .LESS & .SCSS files
Vintage
Generally speaking, clothing which was produced before the 1920s is referred to as antique clothing and clothing from the 1920s to 20 years before the present day is considered vintage.^[1] Retro, short for retrospective, or “vintage style” usually refers to clothing that imitates the style of a previous era. Reproduction, or repro, clothing is a newly made copy of an older garment. Clothing produced more recently is usually called modern or contemporary fashion.
#1B363E
#3C5754
#EFF3DA
#D8D8BC
#BD8D5E
 Download .ASE .LESS & .SCSS files
Hiking
Hiking refers to long, vigorous walks, usually on trails and footpaths in the countryside, as opposed to walking – a term used for shorter walks, particularly  in urban areas.
#033A40
#98CCD9
#D69365
#A75C2C
#592E1A
 Download .ASE .LESS & .SCSS files
Morning Mist
Mist is a phenomenon caused by small droplets of water suspended in air. It is most commonly seen where warm, moist air meets sudden cooling, such as in exhaled air in the winter, or when throwing water onto the hot stove of a sauna. It can be created artificially or occur naturally, when humid air cools rapidly, for example when the air comes into contact with surfaces that are much cooler than the air.
#D8AB7D
#8D7758
#59513F
#71471C
#260E00
 Download .ASE .LESS & .SCSS files
Green Arch
An arch is a curved structure that spans a space and may or may not support weight above it. Arch may be synonymous with vault but vault may be distinguished as a continuous arch forming a roof.
#575A40
#848D58
#BDC19D
#EEF1DF
#8F8988
 Download .ASE .LESS & .SCSS files
Twilight
Twilight is the illumination of the Earth’s lower atmosphere when the Sun itself is not directly visible because it is below the horizon. Twilight is produced by sunlight scattering in the upper atmosphere, illuminating the lower atmosphere so that the surface of the Earth is neither completely lit nor completely dark. The word “twilight” is also used to denote the periods of time when this illumination occurs.^[1]
#322F40
#4C678F
#F5D2BF
#F1AA8B
#A38686
 Download .ASE .LESS & .SCSS files
Serenity
The state of being serene; calmness; peacefulness.
#5C6C73
#9EA5A5
#F2EFE8
#393F33
#27271D
 Download .ASE .LESS & .SCSS files
Solitude
Short-term solitude is often valued as a time when one may work, think or rest without being disturbed. It may be desired for the sake of privacy.
#5A4841
#725A42
#A68C7D
#F4F0F1
#A6B9C0
 Download .ASE .LESS & .SCSS files
Aurora Borealis
An aurora, sometimes referred to as a polar light, is a natural light display in the sky, predominantly seen in the high latitude (Arctic and Antarctic) regions. Auroras are produced when the magnetosphere is sufficiently disturbed by the solar wind that the trajectories of charged particles in both solar wind and magnetospheric plasma, mainly in the form of electrons and protons, precipitate them into the upper atmosphere (thermosphere/exosphere), where their energy is lost. The resulting ionization and excitation of atmospheric constituents emits light of varying colour and complexity.
#0D0C10
#3D385A
#505B75
#D69788
#F4B596
 Download .ASE .LESS & .SCSS files
Pilotis
Pilotis, or piers, are supports such as columns, pillars, or stilts that lift a building above ground or water. They are traditionally found in stilt and pole dwellings such as fishermen’s huts in Asia and Scandinavia^[1] using wood and in elevated houses such as Old Queenslanders in Australia’s tropical Northern state, though they are in this case classified as “stumps”.
#191929
#4B4A5A
#F0D7C0
#A58B79
#8C603F
 Download .ASE .LESS & .SCSS files
WHERE we are…

					
					
					
						
							
							
							
						
					

						
							
							
							
						
					
				
What We are Proud of…
			
We proudly present Build and Customize a Modern WordPress FrontPage in One Hour. It's our first video course - built both for beginners and more advanced users who want to go further with the Gutenberg and custom CSS.

		
We talk about…
css · seamless · PayPal · card · scrolling effect · buttons · flower · paper · ornament · map · flat design · web design · osx · google maps · brushes · svg · wallpapers · photo · grunge · responsive layout · winter · Wordpress · codepen · textures · snowflake · christmas · ui design · javascript · css transitions · social · background · pattern · social icons · illustrator · free · html · css3 · vector · demo · tutorial · icons · photoshop · png · psd · freebies



Customize your Google Map Markers
PeHaa — Mon, 18 Jan 2016 14:53:18 +0000
Hello everybody! In his previous post JoeVains shared with you a pack of location icons. Initially they were designed for the PeHaa THEMES recent premium WordPress theme (YaGa) where they are used as custom Google Maps markers. We decided to extend the Yaga Theme pack and share it with you (free for both personal and commercial use).

This post is for those who do not have much experience with customizing Google maps with Google Maps Javascript API.

I’ll show you how to generate a map and add markers using our location icons (or your own location icons if you prefer). We’ll discuss improving user experience and browsers inconsistencies. Don’t hesitate to download the .zip folder to have a complete version of the code.
Generating a map
Our main reference is developers.google.com/maps/documentation/javascript/tutorial
If you are just experimenting you do not necessarily need to generate an  API key. If you put your map online you may need to control if the requests quota is not exceeded and be able to increase it. With an API key you can also set which web domains are allowed to access your maps – this will protect you from any unauthorized usage. To get it visit this link.
We will start with a slightly modified example code that you can find in the Google Maps Api tutorial. We will center our map in Place de Vosges, Paris, France – our coordinates are {lat: 48.855510, lng: 2.365505}.


  


  
  
  


We zoom in 18 times and we also modify the map styles. Our style modification is one of the simplest possible – basic desaturation.
If you want to play with map styles you should visit snazzymaps.com – a community built around creating great looking styles for Google Maps. Using the styles from snazzymaps in your website is as easy as copying a bit of code (JSON) and passing it to the map options of your map, ie. replace the [{"stylers": [{ "saturation": -100 }]}].


Please note that you have to determine the map dimensions, here we set height:100% together with the body and html heights set to 100%. Otherwise the map will not display.
Adding Markers
We will add two markers, they coordinates are: {lat: 48.856259, lng: 2.365043} and {lat: 48.85484, lng: 2.366427}.
We will use two different svg icons from the JoeVains pack. We choose svg because of their vector format assuring flexibility in sizes and a crisp look on retina screens. Using .pngs icons would always work, we will discuss it later.

Let’s add the location of PEPSized Coffee to the map (unfortunately, it does not exists in the real life…). We will use the the Coffee_3.svg and display it 64px wide and 64px height.
var marker = new google.maps.Marker({
	position: {lat: 48.856259, lng: 2.365043},
	map: map,
	title: 'PEPSized Coffee',
	icon: {
		url: "images/markers/svg/Coffee_3.svg",
		scaledSize: new google.maps.Size(64, 64)
	}
});
Now you can replicate this code to add more markers, varying icons, titles and sizes.

We’ll organise the code a little bit:
var locations = [
	{
		title: 'PEPSized Coffee',
		position: {lat: 48.856259, lng: 2.365043},
		icon: {
			url: "images/markers/svg/Coffee_3.svg",
			scaledSize: new google.maps.Size(64, 64)
		}

	},
	{
		title: 'PEPSized Office',
		position: {lat: 48.85484, lng: 2.366427},
		icon: {
			url: "images/markers/svg/Arrow_1.svg",
			scaledSize: new google.maps.Size(96, 96)
		}
	}					
];
and add the markers with the forEach loop:
locations.forEach( function( element ) {
	var marker = new google.maps.Marker({
			position: element.position,
			map: map,
			title: element.title,
			icon: element.icon,
		});
	});	
}

Using SVG sprites
The icon object has a few more attributes that we haven’t used so far. They are particularly useful if we use a svg sprite. In our example we use two icons, we could use a sprite as in the image below:



The attributes we will need to properly scale and position each icon are: size, scaledSize and origin. The size attribute corresponds to the size of the marker that will be displayed on the map, scaledSize the size of the image we use and origin – from which point the image should be displayed, (0,0) being the top left corner.


var locations = [
	{
		title: 'PEPSized Coffee',
		position: {lat: 48.856259, lng: 2.365043},
		icon: {
			url: "images/markers/svg/Arrows.svg",
			size: new google.maps.Size(64, 64),
			scaledSize: new google.maps.Size(128, 64)
		}
	},
	{
		title: 'PEPSized Office',
		position: {lat: 48.85484, lng: 2.366427},
		icon: {
			url: "images/markers/svg/Arrows.svg",
			origin: new google.maps.Point(96, 0),
			size: new google.maps.Size(96, 96),
			scaledSize: new google.maps.Size(192, 96)
		}
	}
];

An icon object has also an anchor attribute that we are not using in our example but that can be very important. The anchor attribute defines where the icon’s hotspot should be located (based on the scaledSize and origin value). You can see what happens when playing with anchor values in the image below. The red default Google Maps marker indicates the referenced coordinates. The default value of anchor (top left image) is the point in the middle of the icon’s bottom. For our 96px 96px icon it is:
anchor: new google.maps.Point(48,96)
The (0,0) anchor would mean that the referenced coordinates are indicated by the top left corner of the icon etc.


Improving User Experience
It may be very annoying when you want to quickly scroll down a page and instead you keep interacting with a map. That’s why we decided to disable the scrolling and dragging behaviour on small screens where the map takes full width. We will also set the initial map zoom parameter depending on the screen width. We will use a small custom modernizr build. We will use the Modernizr.mq option – that allows to check if the current browser window state matches a media query. We will also detect the hidden scrollbars – overlay scrollbars (when scrollbars on overflowed blocks are visible), common on mobile and OS X.

We include it within the page HEAD element:

	PEPSized Places in Paris
	
	
	
	

And we modify the piece of code where the map is generated
var map,
	desktopScreen = Modernizr.mq( "only screen and (min-width:1024px)" ),
	zoom = desktopScreen ? 18 : 17,
	scrollable = draggable = !Modernizr.hiddenscroll || desktopScreen;

function initMap() {
	var myLatLng = {lat: 48.855510, lng: 2.365505};
	map = new google.maps.Map(document.getElementById('map'), {
		zoom: zoom,
		center: myLatLng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scrollwheel: scrollable,
		draggable: draggable,
		styles: [{"stylers": [{ "saturation": -100 }]}],
	});
...
Using .png icons
You could use the .png icons instead the .svg – the difference would appear on retina screens. If you have your custom .png icon (for example my_icon_48.png) that you want to use as a marker, make sure to have it double sized (for example my_icon_96.png):
icon: {
	url: window.devicePixelRatio > 1 ? "my_icon96png" : "my_icon48.png",
	scaledSize: new google.maps.Size(48, 48)
}
Troubleshooting
The main problem with the svg approach is that it does not work in IE11 (it does in IE10 and Edge although).

Here is our workaround – we detect the IE11 browser with javascript and use a png icon instead of a svg.
var isIE11 = !!(navigator.userAgent.match(/Trident/) && navigator.userAgent.match(/rv[ :]11/));
var locations = [
	{
		title: 'PEPSized Coffee',
		position: {lat: 48.856259, lng: 2.365043},
		icon: {
			url: isIE11 ? "images/markers/png/Coffee_3.png" : "images/markers/svg/Coffee_3.svg",
			scaledSize: new google.maps.Size(64, 64)
		}

	},
	{
		title: 'PEPSized Office',
		position: {lat: 48.85484, lng: 2.366427},
		icon: {
			url: isIE11 ? "images/markers/png/Arrow_1.png" : "images/markers/svg/Arrow_1.svg",
			scaledSize: new google.maps.Size(96, 96)
		}
	}					
];
The Demo Layout
For those who might be interested, a few words about our demo layout. This is our markup:


	
		
			
			
			PEPSized Coffee
			13 Place de PEPS
			Opening Hours:
			Opened daily:
			9am - 8pm
		
	
	
		
			
			
			PEPSized Office
			1 Place de PEPS
			Opening Hours:
			Tuesday - Saturday
			9am - 8pm
		
	

We use background images for the location divs and an :after pseudo-element to add a semi-transparent overlay:
.location {
	background-size:cover;
	background-position:center center;
	position:relative;
	color:white;
}
.location-1 {
	background-color:#554738;
	background-image:url( 'images/coffee_bg.jpg');
}
.location-2 {
	background-color:#383838;
	background-image:url( 'images/office_bg.jpg');
}

.location::after {
	content:"";
	background-color:inherit;
	opacity:.65;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
}
.location--inner {
	position:relative;
	z-index:1;
}
We set the width of the map to 75% and float it left. We also use the flexbox property to vertically center the .location–inner divs:
@media screen and (min-width: 1024px) {	
	.map, .map-legend {
		height:100%;
	}
	.desk-three-forth {
		float: left;
		width:75%;
	}
	.desk-one-forth {
		width:25%;
	}
	.map-legend, .location {
		display:flex;
		flex-direction:column;
	}
	.location {
		min-height:50%;
		justify-content:center;
		align-items:center	
	}
}

Displaying the icons within the location–inner divs seemed absolutely straightforward but… we discovered some strange behavior in Safari. If we modify the dimensions of the svg icon (the same .svg file as being used in a marker), the new dimensions interfere with the icon object size attributes. It happens both for and img element or if background-image is used. The workaround it to use transform:scale instead of modifying the dimensions directly, that’s why we have:
.location img {
	display:inline-block;
	-webkit-transform:scale(2);
	transform:scale(2);	
}
or if using sprites:
.marker-icon {
	background-image:url("images/markers/svg/Arrows.svg");
	display:inline-block;
	width:48px;
	height:48px;
	-webkit-transform:scale(2);
	transform:scale(2);
}
.marker-office {
	background-position:48px 0;
}

That’s all. We hope you got inspired! Thank you very much!
 Tweet this!
Terms of use :
You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.


Free PNG And SVG Location Icons Collection
Joe Vains — Sun, 17 Jan 2016 17:16:05 +0000
Finally something new on PEPSized.com. Today we are proud to present you a set of icons specially designed for Yaga, the new Pehaa’s wordpress theme available here. And, there is a .sketch file included in the .zip ! You will notice that this is the theme that we now use on this site.
“Built with love and care for best coding practices…”
With Yaga Theme and its page builder you can easily, in a few clicks, add google maps with custom markers, just like the one you can see below. You can see more examples of this feature in use if you visit the demo page.
For those who want to write some code and customize maps themeselves, PeHaa made a tutorial on Google maps customization with the Javascript API v3. In this tutorial you will learn how to add a google map with your locations using custom svg markers.

Below I listed the available icons. Feel free to add them to your maps or use them in any other purpose. Enjoy!

Information
Coffee-shop
Home
Shopping
Work
Flag
Metro
Arrow
Restaurant
Bar
WTF
Crown
Artist/Gallery
Space
Shop
Bank
Flowers
Wi-Fi
Burger
Official
Basket
Train
Asian-food
Science
Hair-dressing
Medics
Health
Knowledge/School
Motel

You can create your own icon with the .sketch template included in the Zip file.
 Download
 Tweet this!
Terms of use :
This resource file is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.
You are not allowed to just copy and sell the resource files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.

If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.
WHERE we are…

					
					
					
						
							
							
							
						
					

						
							
							
							
						
					
				
What We are Proud of…
			
We proudly present Build and Customize a Modern WordPress FrontPage in One Hour. It's our first video course - built both for beginners and more advanced users who want to go further with the Gutenberg and custom CSS.

		
We talk about…
css · seamless · PayPal · card · scrolling effect · buttons · flower · paper · ornament · map · flat design · web design · osx · google maps · brushes · svg · wallpapers · photo · grunge · responsive layout · winter · Wordpress · codepen · textures · snowflake · christmas · ui design · javascript · css transitions · social · background · pattern · social icons · illustrator · free · html · css3 · vector · demo · tutorial · icons · photoshop · png · psd · freebies



46 OSX Yosemite Folders Icons + Free PSD Template
Joe Vains — Sat, 18 Oct 2014 20:15:33 +0000
Apple has just released OS X Yosemite with a new design. So here is a pack with 46 custom folders icons and the PSD file so you can create your own folders. Each file is available in 18 sizes (@2x and @3x included). You can downoad the ZIP file by clicking the download button above. I hope you like it! :)



 Tweet this!
Terms of use :
This resource file is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell the resource files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.


96 Free Drive Icons + PSD Template
Joe Vains — Sat, 30 Aug 2014 11:50:09 +0000
Hi there!

Today, I’m very proud to offer this pack of 96 icons that can be used to customize your hard drives. You will also find icons for your USB, FireWire, ThunderBolt or Time Machine drives and online storage services such as Dropbox, Bitcasa, Box … Unfortunately, I can not include all cloud services in the pack, but I have good news for you: you can create your own with the PSD file  included in the ZIP file.

Each icon is available in png format in 21 different sizes, from 16×16 px to 512×512.

I hope you like this pack of icons and you will find it useful to customize your desktop.




Terms of use :
This resource file is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell the resource files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.