Categories
Client Projects Featured

Squirrel Hill

squirrel-hill

Hey guys,

In today’s video, I’m going to go over the Squirrel Hill project here.

This was a website build-out with Bootstrap, HTML, CSS, and PHP.

(moves cursor to the header, footer, and the Contact Us area of the page)

The PHP came in handy here for creating templates for the header and the footer, as well as this Contact Us, and you’ll see in a moment all the action that looks similar to this but is slightly different.

(starts to use arrows to move slide show, clicks on About Us, shows the header template)

So let’s just check out a little bit of the functionality here. This was based on Photoshop placeholder images, and if we go through to a couple of different pages, and see that there is also this type of header template on these pages…and so, that is one of the things that you have to take into account in designs, right?

So if you go and hire a designer, here’s the component I was talking about. If you go and hire a designer, okay…and there’s not a lot of reusable components or templates rather in your websites or your web application, it may behoove you to just sit down and think about, you know, is there functionality that can be kind of joined and then reproduced? Because it will make the budget a lot more affordable in many ways because they can just reuse these templates instead of having to create a custom page every single time. Right?

(scrolling up and down, highlights subcategories)

So yeah, this was essentially just a bit of a PHP buildout. If they wanted this customizable we would throw this into WordPress. A lot of these things are WordPress pages essentially, right, you have your WordPress custom menu and you have your pages right here and these would end up in their own categories, and there would be Contact Form 7, perhaps here for the email subscription. But then let’s check out a few more pages here.

(highlights the watermark)

Yeah, you can see a bit of the watermark, right, because this was a sub-contract here, so they wanted me to actually build this in an incredibly quick amount of time. Actually, the deliverable for this was one day. That was a rush job. So, I really don’t like doing that because I have a certain amount of quality that I really enjoy delivering, and to deliver that in such a short amount of time actually stresses me out.

(clicks on Gallery, clicks on random pictures in Gallery)

So, if we check on some of these things here, in that rush delivery there is no scrolling through these, sliding though, there’s just an X. So that’s some of the nuances you would miss when you have to build something as fast as possible.

(back to home, switches to mobile responsive size window)

Overall, for the deadline and for the quality here, I think I did a really good job. All things considered because it is also mobile responsive. Right? So if we put this down here, you can see, stacks up, right?

(highlights large print navigation for elderly)

We have this, and I made sure this was really big, because people in their elder years really have a hard time navigating websites, and not everyone has a younger person or a guardian to do this for them, so there are some older folks that have to figure this out for themselves.

(hovers the cursor over features as he explains why he likes the website)

So this is the website right, and there’s your mobile responsiveness. Overall, it was pretty fun, aside from the really rushed deadline. It was cool to just do a PHP website that wasn’t a WordPress website, and I really enjoyed the design aesthetic that the designer had built out here because I tend to like cool colors, and that’s exactly what this palate is, and has this great gradient they put on just to match these square boxes. I like how they have broken these down. I believe I have actually absolutely positioned these. This isn’t one giant photo, and the other thing in this project that took a little bit of time was I had to open up these Photoshop files and actually export all the assets, and then you have to do that in three different versions, right, because of file sizes.

You have your large, high-quality desktop version, and then you have your small mobile phone version. So that would have sped up delivery if I didn’t have to actually do a bit of designer type of exporting on that. But overall, I think this is a good example of a fairly solid web buildout here, effective, budget-friendly, and a good delivery.

So if you need any custom websites built out, this is not a WordPress one, but if you need a WordPress website, or even a fairly complex non-CMS website, custom work, we can do basic work.

In general, we don’t really like working with templates too much, unless it’s a WordPress template, because that just saves a lot of time. I don’t really like working with them. Some folks have HTML templates or websites, and I’m not talking component frameworks here, I’m just talking like an actual HTML template for a website. You get a lot of bloat on that. It’s like unless you stick really close to it, you have to clean it up and I just recommend a clean initial build.

So yeah, feel free to get at me, to contact me via my website or my Facebook page, and let’s talk about how we can take your business to the next level. Alright, thanks everybody. Bye.

Categories
Client Projects Featured

Radiesse Ads

radiesse-logo

Hey Everyone,

Today I’m going to be talking about how I as a programmer made the world’s hands a little bit more beautiful, in working with a company called Radiesse. They do dermal fillers, specifically for lower face and hands. I think it’s pretty obvious that most people when they get older, aside from their face, their neck, and their hands end up getting pretty aged.

A lot of people don’t think about putting sunscreen on the top of their hands, but you might want to do that, or else you might be getting some of this action.

(switches to images of banner ads)

The build-out for Radiesse was a set of banner ads. So these are HTML5 banner ads. Images edited in Photoshop put together. This slideshow, going through. You can click on it. There’s a link. Then you have the fine print, the drug safety of these dermal fillers, very important for compliance. You actually cannot be doing these things without that.

So with this, the specs were, it cannot be over 150 kilobytes, because advertising platforms won’t allow you to submit your banner ads if they are that large.

(scrolling up and down)

So, it was a really great experience in doing that. I had actually not done the scrolling aspect in an advertisement before this, but now that I have it was really great to do that.

(scrolls within the banner ad)

This was the first set of ads. They actually asked for a second set, which was different images and some updated text, because in this there are specific numbers for the drug product itself. You’d have to go through it all, but we might have actually added that in the second version there. I think we did.

It was a great experience working with them. I think this type of banner ad can be very useful for generating revenue for someone’s business, and it’s very important that you have a knowledgeable expert that can deliver quality results. Otherwise, you are just wasting your time, in my opinion. So if you or you know someone who needs these done, we can come on and deliver that and a fantastic experience for you. Looking forward to hearing from you.

Thanks, Bye!

Categories
Client Projects

Moojis

moojis_logo

Hi Guys,

Today I’m going to talk about Landing Pages. This is an example of one I built here. I think it’s very fitting because a lot of times people invest a lot of resources into building a very fleshed out website when a lot of times a simple landing page can offer the business just as much value.

For myself, I know that with my past business really just having a simple website was just as effective as having a very complex one. Granted it depends on your specific situation, but this for example is a really good one, because here the main product that is built it really an application.

What it is is um this mobile application that is in the play store/app store. Of course, all you do is take a photo of yourself and then you are able to pick some pre-illustrated images to go over on top of it. This essentially uses its own algorithm to convert you into an illustration.

I tested this out. It wasn’t 100% perfect. You had to take a photo of yourself a couple of times to have it work perfectly, but if you are a bit patient, it’s pretty cool. Once you have it, it’s saved and you can send it out to everyone.

(scrolls up and down page)

This was Mooji’s. It was the #1 in the play store in Tel Aviv. This is Schlomi Ben here, and he’s a good guy. Pretty simple, the requirements for this just went through some illustrations, screenshots rater, of the actual application, you have your integrations here that it can be used in, and there’s just a little blurb about it. Links, download links, yadda yadda.

(clicks on Legal Notice)

Then a legal notice, you need that because you need a link actually to put it in these play stores for your privacy policy. That has to be available or else you’ll get denied.

You can see, Bam! Panimood, Israel.

(back to main screen)

So, yeah it was pretty cool to learn it was #1 in the play store in Tel Aviv. That was a bit noteworthy. So for everyone looking to build apps, this was arguably a successful one. I think the main build-out was just this animation and then making it responsive.

Really there are only a few certain, screen sizes you need to make this perfectly responsive.

(switches to another screen size)

So if we go through this here, there you are.

(makes window smaller, then larger)

Very rarely are you going to be going through the entirety of different sizes here. There are certain presets essentially. So that checked all the boxes for the specific requirements. Shlomi checked it out and he was happy with it.

Of course, I could make it responsive all the way. It’s just like, for the budget, that’s what was able to be delivered there. It’s good to keep your expenditures small when your main expense is actually the product and this is really just a marketing budget, but important none-the-less.

Specifically, with landing pages, there are some good things for marketing, specifically A/B testing, so you have one design and a second design and then it will just randomly, but equal distribution show different types of the design -the A or the B version to visitors on the web application or the landing page rather. And you’ll be able to get statistics about conversions and such and that’s why landing pages specifically are pretty worthwhile, if you take the time to get some market analytics on it.

So pretty simple here. I just wanted to do a little demo and talk about landing pages specifically. I hope that’s helpful just potentially giving you some ideas about what you can do with your own business. Thanks for stopping by.

Categories
Our Freeware

Precious Metals RSVP

Precious Metals RSVP

Hey guys,

Today I wanted to show a bit of freeware I’m going to release. Upload this into a code repo and put the link into the description of the video. This was one of the final projects at the Academy of Art when I was there in 2018.

It gave me the opportunity to play around with Three.js, and some PHP. The requirement was to have a PHP database. So you’ll see as I go through here,

(starts animation)

I’ll just play this really quickly, that there’s a populated table with some fake data here that is off an API.

(flipping through the features)

The UI could be improved for sure. If I put in a bit of component framework, it would be a lot nicer, but this was just a bit of a more back end specific PHP project here. You know, form submission and updating and whatnot, but I really made this out because I wanted to do the Three.js on the side here.

(points to the graphic on the left side of the screen)

What I’ve done on the side is, this is sphere geometry and these are all vertices, and I just took the geometry, and I created spheres for every index in that array, and I just map over this array of vertices, and I place a new sphere at the location of that old vertex.

So in that you can do some really cool effects where you create a larger shape from some smaller shapes, and that’s actually a design principle. If you look here, we have three spheres here, going. We have the largest sphere, we have the smaller spheres, and then we have the actual background sphere. When it comes to design, repeating shapes is a bit of a design principle there, but I thought it was cool because you have 3D depth, and then you have 2D right here. That’s pretty sweet.

(moves cursor back to the information at the right, highlights the different features)

Anyway, the functionality is when you sign up and you do that form, you are able to go to this About page, and then this bottom part shows up, which is an iframe and then, thank you for registering and then they tell you when it’s at.

So yeah, going to release this. It was just a little bit of a project at University, I did way back in the day. So I want to allow people to play around with the Three.js parts, and then you’ll have to look into the PHP, because it was tied to a database, so likely those users are not going to exist, but there’s going to be an API call where you are going to be able to hit that and then populate that database. I think I even made a UI where you are going to be able to click a button and then you will be able to see it getting populated.

So just go through the PHP files and check out the repo a little bit, and it’s just a good starting off point so you don’t have to do a bunch of work to create a bit of a landing page thing, with 3D elements, database functionality and PHP.

So cool guys, check that out. Alright. Bye now.

Categories
Our Freeware

Space Sound Continuum

music-visualizer-logo

Hey Guys,

Today I want to demo the second product that I ever made in Three.js.

This was a more in-depth project that was just about learning and just having some fun. This was way back in the day. I learned a lot about shaders. I call it the Space-Sound Continuum.

What  I have is a few songs, and I have Javascript using the web-audio API to analyze frequency. Let’s see if I can jump over really quickly for this code… if it will open the right folder here, yeah…

(highlights directory on left)

So this is the directory for the game and we have a lot of shaders here on the side, a stereo effect for virtual reality. It creates a left frame and a right frame and then using the two it creates depth in kind of an illusionary perception.

(chooses script from the directory)

So let’s see here for the script and look really quickly at this. I have five different frequency counts and they are averaged out and interpolated in real-time. That was pretty cool at the time.

(chooses skyboxes)

And then about skyboxes, I don’t know if you know about them very much, but essentially you have an original image. See, this is basically wrapped up into a cube and it’s seamless. So it looks like it goes on into infinity. That’s how they make video game spaces in the background.

I’ve done some work in my earthquake visualizer, the skybox in that is not actually perfect. I don’t really mind that so much. Maybe one day I’ll go back and edit it, but these are just personal projects to show you some cool stuff that you can do with Javascript.

(switches to Home screen)

So let’s jump over to the game. I hope that it works well with the screen recording software, (inaudible) but I know without it it’s very smooth. There was originally going to be an upload song functionality, but I got busy, so this doesn’t actually work here.

(selects first track)

But let’s just jump over to this, and you see you have your virtual reality option and you have your standard desktop/laptop with a keyboard. Let’s try it out.

(demo)

So you can see that…let me drop the sound quick here…you can see that the actual properties of the game are mapped in real-time to audio of different frequencies. So we have lots of shaders doing fluorescence and anastrophic filtering and glow passes and all sorts of things here, and I use an octree for collision detection.

These little white spheres are actually health. So when you hit one of these spikey balls that use some custom shaders that I wrote, you end up getting knocked and your health goes down. Your health is actually illustrated through the light, so the more you get hit, the darker it gets and at a certain point if it’s too dark, you basically are Game Over and you get redirected, bounced back out to the Home page there, which is the song selector.

So let’s just play this for a little bit. You can always fast-forward in the video and check back in.

(plays game)

Ooof, ooof! So with the (inaudible) recording software, it actually kind-of ah, is a bit slower because there is a lot going on on this computer for that. But ah, as you can see there’s a bit of a flash, if I can snag…oh, so close!

There we go. Got one. That’s a little health. Bring it back. BOOM! Sounded, (inaudible) it back here. Hold-on! BOOM! Oh, I got this! I think I can beat this right now, actually.

(game running, music playing)

Boom! Alright, and now I’m just going to lose here, so you can see what happens. Ah, boom! I have really low health right now, look at this. Let me go out of this tunnel to show you how I do this. So you have your skybox, you have your tunnel, and then there’s some alpha mapping going on to do the transparencies. And then I just insert these balls at one end, and then when they get to a certain coordinate at the end, I just remove them from the scene.

So let’s go back in and kinda lose the game so you can see how it bounces back. GAME OVER guys. Game over.

(back to Home screen)

So I hope that was really cool. I’m going to make this public for freeware. So people can just have some fun with Three.js and learn a little bit about shaders and how you can do collision detection and things like that. I know that when you first start out it takes a long time to learn these things, but then once you have a couple of personal projects under your belt or just professional projects as well, the mastery really steps it up.

So I will likely have to edit these songs, unfortunately, guys. I’ll probably have to use some sort of copyright-free music. It may not be that great. It’ll take me some time to change that out and find that because I can’t actually release this with the songs included for copyright issues. I’ll be doing that and then putting a link to this. Later on, I’ll go back to the Facebook video and add in a link.

So enjoy guys! Bye.

Categories
Our Freeware

Collision Detection

Collision Detection Engine P5.js

Hi Everyone, 

Today I am introducing p5.js. 

For those Javascript developers who don’t know p5.js, it’s basically an abstraction library for Canvas. 

(starts drawing lines on grey space.)

If you do any basic 2D Canvas interactions, p5.js makes it very simple. 

(points at script, then scribbles on grey space.)

Look at this here, it’s like, ten lines or so, and you have drawing going on. Doing this in a normal canvas without this abstraction is not fun. It just takes a long time. 

(selects Particle System, a starburst pattern repeats itself)

So let’s just check out a couple of examples really quickly. Let’s check out this particle system here. Cool! That’s cool. 

I learned about p5.js because it is based on processing. Processing is originally in Java, and it allows you to play around with Java essentially. It incorporates a really easy visualization layer. I learned about it back in the day at the Academy of Art, when we had a section on generative art. 

If I ever retire completely, I will probably become some sort of generative artist using code. 

(selects Multiple Particle Systems, the Particle System pattern repeats itself)

So let’s see here. Multiple Particle Systems! So that’s kind of neat. There is a lot of different things you can do. Imagine you put a background image off of say, your webcam in here and then you can add things and then you click a button and it saves it out. Or something like that, you know. There are a lot of possibilities. 

(selects the Mandelbrot Set, a basic fractal appears)

Pretty cool. Pretty cool.

(selects Snowflakes, a red background appears with white cascading snowflake pattern)

 We have snowflakes? Like, that’s awesome. That’s really great. I really enjoy the artistic aspect of coding. You know, it’s really nice when you can just create without having to worry about certain specs or the budget. 

(switches back to directory page, then brings up code for Collision detection in another window.)

Anyways, to get you started with p5.js, a long time ago I built a collision detection library here. Just basic ball bouncing. You know there’s the Hello World for most coding programs when you are learning. This ball bouncing is basically to me the Hello World of animation. 

So, a hundred lines, it’s es5. It’s old, but you’ll learn it. 

(plays Ball Bounce Script)

And in it, if we go over here for the ball bounce script…Let’s check it out. This p5.js has fantastic FPS. I actually tried to import this over to C++, so I could end up learning web assembly and I found out I really enjoy Javascript more so than C++, because in doing so I really hit less performance. 

I think it was either using vectors in C++ under the hood or just not performing in the way that I was trying to convert it, or the actual 2D rendering library was not optimized. There was actually a bug in that, in Github, issues we fixed. 

So yeah, this is the script. You can check it out. If you just want to learn a bit about p5.js, it’s a good little intro, and I have a two-step, two-stage on this, so I originally learned this and I thought alright, let me take up the complexity a little bit, and I will demo that video next video after this.

So check it out, p5.js. Generative art. Have a good day everybody. Bye.

Categories
Our Freeware

Connection Structure

Connection Structure Engine p5.js

Alright, This is my second stage video here, about p5.js. Originally, I had shown a video that was a simple ball bouncing script. You know, that’s kind of the Hello World of animation, as far as I’m concerned. If you missed video you can check it out on the company Facebook page or the website. This is about  p5.js here, so p5.js.org a 2D animation canvas library does some cool things makes it a lot faster for some simple canvas animations.

Now this was like I said, the second stage. I built this when I was working as the only developer for a company called Correlation One. Way back in the day I was working for Asham and Rasheed, both of them were just starting the company over there in New York and now it’s actually backed by Soft Bank and they’re changing the world.

So really amazing stuff.  I was inspired by the data science bit about it all. So I thought wow, it would be cool to create something where I could just take a screenshot with a plug-in and have a perfect background that’s generative. You know generative art here, data science style.

So in it, there are some different things you can do. If you hold down on the arrow key you reduce the overall count. So look, now there’s a lot less. If I go up I can really max it out. The interesting thing about this that I actually thought was clever in the implementation of this…this is 2D, but it looks a bit 3D because I’ve gone and done a bit of illusion work here with size and transparency. So if you see….

(unwanted window opens, he closes it out)

wow, hold on guys. Alright, so if you see it’s smaller, more transparent in the background you have the larger ones, and they only connect to the ones on the same plane, which is really an array.

So you have three different arrays, foreground, middle ground, background, typical art-style, but you can also change…

(changes color)

the color. So there are a couple of different presets that allow people to edit thighs differently in say Photoshop or Illustrator.

(cycling through effects)

So you take this as the base and you are able to use some cool effects later on. You can also remove the fill by going on the left arrow. The right arrow cycles through, the left arrow will cycle through in reverse but without fill. So you can see the triangles are not filled at all.

I had a really great time in doing this. It was really cool seeing the performance of p5.js., and this repo is available.

(changes screen to view code)

So if you want to check it out, you totally can. I would say, look at the ball bounce first. I had a lot of repos, but only a few are public. Very few are actually public, so you will be able to see both.

This is just a building off of the original one, it’s a good way to get creative in p5.js.

(highlights array)

You can see a little more things that I did with key code pressing and updating multi-dimensional arrays, a depth layer, and then then I, and this is drawing other layers, it’s broken out into a different function clause. This is ES5, this is a while ago, but it’s fairly straight forward and pretty clean to understand, I believe.

So check it out if you like p5.js and I hope this was helpful for you.

(switches to Stack Overflow website)

I’ve also answered some questions on stack overflow about p5.js, so you many in poking around online find me on there as well.

(switches back to generative art page)

I hope this was helpful guys, and once again, if you have any very cool animation projects or just Javascript orientated work I would love to come onto the project and see how I could help deliver those fantastic results for you.

Take care and be well. Bye.

Categories
Client Projects

The First Website

Michael Paccione here, and it’s throwback Thursday during coronavirus pandemic season, so I thought I would just show the very first website I ever got paid to build from scratch. 

I made this in 2016. It was the very first one. I am very proud of it, because everything on here aside from this google map (it’s a 404 now)…

Mike Finklestein, who is a dog walker here, it was his service area for his dog walking business. 

So you were able to see actually, what zones he catered to. So imagine a google map and then a radius, slightly opaque. I actually went out with him, here in San Francisco to Fort Funston. I went on a walk with him and I took all these photos. I also created this background. Everything here, I made. I was really proud of it. I think I actually did a good job. I believe he paid me $300 for this. Given it was my first website, with the amount of time and effort I put into it…I think that was pretty fair there. 

I actually still think this is a fantastic website. I really like the design. It really goes with the Viking Dog Hiking bit. And even way back then in 2016, I knew about mobile responsiveness. 

(adjusts window size as window changes with it)

So if we drop this down, you can see…bring this back up here. You can see that it changes a bit. Look at that action there. Boom! 

(shows phone size screen)

That’s a phone.

(scrolls to the bottom)

You get a little menu at the bottom.

(hits About menu item at the bottom)

I believe this pops it up. Right? Pretty good for my first website, four years ago.

Mike’s a friend of mine there, and he’s still walking dogs. I started my own business for walking dogs for many years there. So, I thought I would just do a little retro action there, because nowadays I create complex user interfaces using the latest architecture and tools for handling reactive data, and this was just the good old days.

Well I hope everyone’s doing well during coronavirus. If you need any compex websites, with wordpress or web application development, please reach out and I will get back to you as soon as I can.

Thank you