Tag: CSS

Categories
Client Projects

Peak HVAC

Hey Everyone, 

Today I’m going to be showing a custom WordPress built website for Peak HVAC in Chicago. This is a fully customizable CMS website we built that is just basically from scratch, it’s just custom. I’m going to jump in and just quickly go through the website and then I will go through the CMS and show you how everything can be changed. 

I just want to point out that if you have a lot of content, CMS’s are fantastic for that especially if it’s static content. So it’s not very interactive as far as the data doesn’t change very much. It’s not a web app, you can have 50 pages and 5 templates and 10 pages per template, and it keeps crossed down and at scale, it works really well. The wanted a CMS website and that’s what they’ve gotten. 

Let’s just jump into it. 

(clicks on Water Heater)

This is the home page. We have some pop-ups here. 

(starts clicking randomly on buttons)

This is all customizable content. I think it’s pretty cool that you can see what brands this company offers and it does change based on the choice. I haven’t heard of some of these like Reem and Goodman, but they are probably great brands.

(scrolls to the bottom of page)

So if we keep scrolling down. You can see, this is the homepage. There’s a nice little review slider here and you can click and push though and the height also adjusts dynamically there. 

(clicks on the About page)

If we go to the about page. You can see there is a lot of content that gets reused. Which is pretty standard for websites like this. 

(clicks over to Contact form)

There’s a contact form. What service do you need? What do you need serviced. Your message and what brand they want. 

(demonstrates scrolling)

You also have a bit of scrolling there so you can see that this scrolls when you click on that. It’s really for mobile but we leave it on there regardless. 

(stops on Financing)

They also do financing through a company called FTL Finance. So you click on this and there is a tracking link which they get a referral commission, of course. 

It goes through that and then there’s a scheduled service. You know, there’s a lot of form for contact and that’s so no one gets confused and they can just real easily get it out there. 

(adjusts screen for mobile)

So cool, let’s check out the mobile site here. If I jump over and go here and refresh. So this is like an Iphone 7 here. 

(starts to scroll)

Now watch as I scroll down. As soon as I get past, you’ll notice…you see that service button, as soon as that gets hidden, BAM we have a footer pop-up, call to action, you actually can just press the phone number and it will call it on your phone, or you can press the scheduled service. 

(clicks on Water Heater)

The modal pop-ups naturally are full width right there and there’s a mobile menu. It’s pretty nice. I really like the look of this mobile menu. We go down and you can see that things are basically stacking and collapsing and then here’s the bottom with the footer. So this is basically the flow for the mobile look here. You can just see how it collapses.

(modifies browser address for admin panel)

 Let’s just jump over to the Admin panel so we can check that out, just so I can just show you very quickly the advantages of…

(fumbling over password)

Ahh password! I have so many passwords, it needs to use a retina scan or something. 

(navigates through left sidebar menu to About)

So if we go to Pages, and we go to All Pages, then you can see in the About, for example, if we go to the about page it will be completely editable and these are like blocks essentially is what they are called in WordPress. So we code these blocks up and create custom fields which are these things, and then it’s totally customizable so you can see that you can just put in your title, you can put in the background color, the text color, the image….

(switches to Home page)

Let’s go over to the Homepage actually and let’s just see that. 

(shows background images for slider)

So yeah, this one here, for example, you can that these background images are for the slider. When it slides through if you just put one, it won’t do the sliding. Then you have the phone and all the extra texts there. 

(clicks to another screen)

These ones you can see you have your image and then these are the logos on the pop-up and it takes these pop-up texts, you can see it’s labeled very simply here. Overall the whole website is built like that. Which is really great for customization and so many things.

(switches over to Contact form)

Let’s check out the Contact form. We have Contact form 7. It’s a plugin. I recommend that one for WordPress it’s pretty easy to do. 

(scrolls inside window)

Then here’s the text and the options in here, which is kind of like HTML and then they have these little shortcodes and these brackets that are actually plugin related. 

(clicks on mail tab)

Then if we go to the mail, here’s the template that you would receive and where it goes. Right here, and you use no-reply at this website because if you use say like, Yahoo.com they don’t allow that so actually it wouldn’t get sent. Different email companies have different privacy and security concerns with that. So I know Yahoo and AOL won’t work so that’s why you use No-reply. 

(goes back to Home page)

Anyways though, I hope you guys enjoyed the site and this could be your website, this could be your company and offering this could help grow your business. It can help increase your SEO. You can get alot of content onto just a few template pages and really have a lot of control over that thought a CMS. 

So yeah, if you need some custom WordPress development from scratch, I always enjoy doing it from the bare-bones in the beginning, because if you do use a template, there are times to use a template, is all I’m saying and there can be a lot of overhead when you use a template, because they just throw everything and I guess the kitchen sink into it or I guess in this case, an appliance. It just loads a long long time. This is a pretty fast load because it’s just everything you need, and that’s it. So if you have the budget, I do recommend just building it custom from scratch. 

So let me know. Reach out to us, and thank you for watching.

Categories
Client Projects

Enye

Hey Guys,

Today I’m going to be demoing a template-based WordPress site here. So let’s check it out. 

(refreshes page, numbers roll and eventually stop, highlights Engineering and Founders programs)

This is a 501C3 nonprofit. It’s an international tech charity. They have two main aspects here. It’s the Engineering program and the Founders program. 

(scrolls down to the bottom of page, shows it is an 8-week course)

So what they do is they train engineers in Africa, specifically Nigeria during an eight-week course, and during that eight-week course. They learn a bunch of skills related to programming, deliver a bunch of features in an entrepreneur’s web application. So essentially it pairs them together and then by the end of it there should be an MVP app. 

(goes towards the bottom of page, highlights interactivity and animations)

As you can see there is a lot of pre-built interactivity that comes up, a lot of animations and templates are a really great value for a business owner or someone who wants to get an 80% done website and just load in some content. 

(scrolling up and down, comes upon a picture of self)

There’s a lot that you can do with it, they are pre-built out. The one downside is they can be kind of heavy as far as load times because there is so much included in them, but if we check out this site a bit more, we can see surprise surprise! I actually helped start this charity, but I just want to go through and show some pages and things like that. Let’s check it out. 

(screen changes to page with cards and photos of team members)

So I have these cards that are in here and then you have these hover-links that you can go through. This card style is something that is throughout the template. These are essentially components, WordPress components, and you can see that throughout.

(selects Partners, continues explaining as he pages around)

Let’s find another one, Say Partners for example. You can see that it’s a good look I think. I think it works. But I just wanted to demo this guys, because there is a lot of potential for business owners here to be successful using just a template-based website. It allows for a lower budget overall. I think it’s good to start with the templates a lot of the time and then go from there because building out from scratch takes so long unless you have a really custom build on the foundation, it makes sense to use a template as a base and just change things up, optimize it, things like that. 

(hovers over web address)

So just check it out. If you want to see this website it’s enye.tech. Also if you want to hire any of these remote engineers, they have very good rates, naturally, being in Nigeria. So if you are into international workforces, kind of like, off-shore international. This may be a good option if you are able to provide oversight and management and allow them to grow on your team. 

(brings back to the main page)

So cool! Alright, guys that’s pretty much it and all I have to say is check out some template-based websites because they are a fantastic value for the dollar amount. For anyone starting a business, that is needed. Just hire a web developer, get a template in, get them to do some customizations. 

And what is Chris saying? Ahh, I don’t know but I think we were having a funny conversation about something. Close that out. Alright guys, have a good one. Bye.

Categories
Client Projects Featured

Legal Shield

Hi everyone,
Today I am going to be talking about a client of ours named LegalShield. We are currently working on the automation of several of their applications. This is the initial application and it is essentially a marketing blitz. Most people who are in business completely understand the importance of marketing. Increasing the efficiency of a solid marketing program really helps to improve and contribute to the overall growth of a company. You can do outstanding work and really help people but unless they know who and what you are, they most likely will not use your services. 

( Screen Change – LegalShield Business Solutions Screen ) 

So let me explain what LegalShield is for context purposes. This is their main website here and the banner headline is “Affordable Legal Help for All”. That’s something I really like because I know many people in the world and specifically many Americans here cannot afford legal coverage. It is important and very helpful to have a company that can offer affordable legal services to the community. I feel good working with LegalShield, suffice it to say. So, I will now explain some of the areas of improvement of their software applications. 

( Screen Change – Logging into Admin Dashboard Screen ) 

This is the Marketing Blitz here and I am going to log into the Admin panel first to set the Blitz and then show what it looks like for users. By the way, you can see the LegalShield building in the screen background. 

( Screen Change Upcoming Scheduled Blitz Sessions ) 

We have three options that are available when a blitz is not currently active. These are the Blitz Scheduler, Managing Admins and also statistics. I will connect with the Scheduling part last. 

( Screen Change – Current Blitz Admins ) 

Please check out the Admin Panel. I am logged in as an Admin under my backend developer account. You have different columns here which include Master Admins which has the highest level of privileges and can delete other Admins or create new Admins. You can also create a new Admin via this handy pop-up menu. You can filter, use a variety of pop-ups, delete, create a master and of course edit. Those are the main options available which as you can see are all pop-ups. 

( Screen Change – Current Blitz Statistics ) 

Blitz Statistics is an important feature because it can be used to increase and optimize efficiency by using the available metrics. Previously, the metrics were not automated in this fashion and this is really a step up for LegalShield. We can implement this type of strategy and functionality for many businesses. We do custom development and most things you can conceive of – we can do. So there is deletion – this is a test blitz and let’s just delete it. 

( Screen Change – Prospecting Blitz ) 

We have sorting capability on the columns. Let’s click thru one so you can see everyone’s names here. I will have to blur the names out because of privacy rules. You can sort the columns based on appointments and the entire header row. Pretty useful tool considering they give prizes to the top performers. 

( Screen Change – Upcoming Scheduled Blitz Sessions ) 

Let’s check out the Scheduler and make a test blitz. So we go in here and insert Test Blitz and add the date which is Friday. Happy Friday everyone! It is almost 3:30 so let’s do it for two as it is already active and then lets keep this to the end. It is in 24 hour time notation just to avoid confusion. It’s a little bit extra math but I am sure everyone can handle it. So there it is and you can see 2:55 PM to 3:55 PM. 

( Screen Change – Login – Test Blitz is Active ) 

So, if we go into the login and refresh this and say we are a user, you now have the name of the blitz which is active and ending in 26 minutes. All of the time functionality is adjusted for everyone’s time zones for storing and showing the data which is a very important function that can actually be more complex than people would assume. So, let me join the blitz. As you can see, this is my personal data that can be automatically populated. How did we do that? We take the IP and store the user’s prior logged in details and automatically send that to the front end and pre-populate it. We have this drop down menu which is a State and Province supporting candidate as well and you can see it is actually a search drop down menu where you can search and see how that works. 

( Screen Change – Welcome to Group Prospecting Blitz ) 

So, let’s join the Blitz as this is what it is all about right here. As you can see it is a Marketing Blitz. So, imagine a big leaderboard here and you have a moderator that can put in comments which includes the time that it is ending. Please note that all of this works and is fully supported on mobile devices. So, nothing can go below zero which really improves efficiency. There is also a gamification aspect to this and I think this will also improve the overall experience for the marketing staff. Previously they would work from home making calls and just writing down what they did. This on the other hand, is more of an interesting event which has a bit of excitement and challenge to it. I know if I was doing marketing, I would prefer this versus the standard alternative.

( Screen Change – Test Blitz is Active, Ending in… ) 

( Logging as Admin – Upcoming Scheduled Blitz Sessions ) 

( Moderator Comments ) 

So let’s check out comments. Let’s say I am logging in as an Admin after the blitz has started. At the same time the managed users and managed comments function is enabled. So, let’s start with comments and show you comment one, comment two and comment three. Please note that Josh is my backend developer and for ease of operation we have the Admin Account in his name. 

( Screen Change – Welcome to Group Prospecting Blitz – User Facing Side ) 

If we go to the user facing side, we have comments one, two and three and you can see that Josh is also added. The way we worked this out, is similar to a giant room essentially via Socket IO so the Admins are connected to the room and its OK if they are in the Leaderboard as it shows everyone that they are present, despite not working on calls or appointments. This is an intended function. As you can see comments one, two and three and let’s say we delete comment two. You can see only comments one and three appear on the screen. 

( Screen Change – Current Blitz Users ) 

Also, here is an interesting and fun function. As you can see, the screen shows the people who are active in the Blitz right now and this is my account which is located on the user-facing side. I do not want to block by email or IP address because I do have to work on these items as well as others but let’s say we want to delete the user. Now deleting a user will essentially delete the user from the database and remove them from the Blitz. So watch what happens on the screen when I execute that action. If I click and delete the user is gone. Now it is a white screen because I have been deleted or kicked out of the Blitz. No Blitz for me today! So, that would be what would happen should someone be banned or permanently blocked – they would be seeing only a white screen. 

( Screen Change Affordable Legal Help for All ) 

In summary, as you can see, this is the marketing software we do for LegalShield. We also have other software we are planning to develop with them and look toward partnering with LegalShield as a long term client to help improve their overall business, bottom line and essentially the value that they bring to the lower income option in this aspect. In other words a more affordable or economical option for people so they can receive helpful, high quality and affordable legal advice. So, feel free to visit www.legalshield.com if you need any type of coverage or legal plan that is available from their website. 

Thank you everyone and please contact us should you require high quality and timely custom web development. Thank you for your time.

Categories
Client Projects

Zaam

This was a project I did for a  company called Zaam, as a freelance contractor with my business. Zaam does business onboarding forms. They are a SaSS company. Fantastic product if you are a large company or if you have a lot of regulation for your clients, a lot of forms, automatic PDF’s filling out agreements use Zaam, Zaam.io, fantastic. 

So this was the main product that I helped build for one of their clients. 

(clicks on yes)

This is a pre-filter that puts you on a list or allows you onto the next form. If I click “no”, I’ll basically get blocked and I cannot continue, but let’s say yes. 

So, here we are, this is the main step forms here. 

(tries to click ahead)

I cannot click ahead. I have to do it sequentially. We thought that made the most sense. 

(clicks on the plug-in to the top right, starts to click on fields to reveal roll down menus)

I also have a handy plug-in here, that allows the browser to fill in fields with dummy data. On some forms that I built for this company, we have live SSN checking and what-not, a sync validation in it, but this is just synchronous validation for this. So you can see that we continue. 

This is still in development, but it’s more or less there.

(hovers over circles to the left)

 So on production these circles are the right size and things are more or less good, so you can see that now that we have the second form. 

(clicks on first circle)

If we want to go back, we can go back. 

(tries to change something)

If I change something, and I try to continue…oooh, that’s actually optional. You can see that we cannot continue. That was funny there, guys. 

(resets page)

So let’s continue, that basically re-saves it. I’ll show you here after I upload some more things. 

(chooses from citizenship field)

Citizenship, let’s say it’s not American, there’s some logic, 

(fills in number for passport)

has to be a National I.D., passport number, and you have to upload your passport.  

(scrolls down to photo upload area)

Let’s upload some cute dog photos, bam! 

(continues scrolling through the fields)

They’re uploaded, they go to the server, there’s an EUID, there’s an S3 bucket that host’s them, but let’s say that the country they actually reside in is different. So U.S. country?  They

Dropdown. Non-U.S. country? Date or Province textbox. Makes sense, right? 

(hits continue)

So I could continue on that. There is some logic for these, right? Let’s click on through all that. 

(starts filling in answers. Clicks other owners)

Are there other owners? You can add these dynamically. One, two, got it? 

(fills out one field)

But for the sake of time, let’s just do one. 

(quickly selects options in fields)

Let outright quick, let’s say they are Albanian, and we need a different photo. Let’s use Patch pup. He’s a great one. And the country, let’s say they are actually in the U.S. now. A little logic on the continue. We save that and let’s fill this out. And of course, these have to match, so Lucy Rosalles, alright. All this data goes to a CRM that Zaam has built for the client. This is essentially a pre-submit that stays in the date base, 

(clicks on authorization)

and you have your typical authorization. Click-throughs, if you click this link it goes to a pdf generated by the back end. I didn’t build that, so I’m not going to demo it.

(clicks submit)

You have a final submit. Submit application. Bam! There you go! Right? The cool thing about this is if I go back…

(pop-up window opens with something about motorcycles)

oops! I ride motorcycles. Let’s load that out. 

(goes back to data just entered)

Okay, you can see that you can go back to all this data and it has been saved. You can see these images, see these owners, it’s all there. So really great software, like I said it’s still in development, so we’re still putting in more logic and integrating this to be more complete, but for demonstration purposes and an example of what my business can offer your company, I think this stands to be a very good example. So I hope you enjoyed it, and take care. 

Categories
Featured Our Software

3D Earthquake Visualizer

Hey guys,

Today I’m going to be talking about 3D data visualizations using Three.js, React, data feeds from the USGS and progressive web applications. I think progressive web applications are a huge thing potentially for businesses that want to have a high return on an initial investment because you can deploy it to the web and also playstores. I’m going to show you that right now actually.

(clicks on another window)

So, firstly let’s check out the data feed. Here it is. This is the USGS (United States Geological Service).

(moves cursor to the bottom right column, clicks through to data)

They have data feeds on the side here…we click through, this is the maximum, all the earthquakes in the past 30 days. You can see how long that took. It’s a massive amount of data actually that comes through the scroll bar, so…so small there.

(power scrolls)

You can even see that in scrolling on my screen, if I scroll fast enough down, I don’t know, it kind of janks up sometimes.

(switches back to prior screen)

The interesting thing about this was, in doing this I actually noticed a bug in the USGS’s API, when the 30 Days, All Earthquakes count grew to be too great, I believe it was when it was over 15,000 or 20,000, something like that. When the data set was too long it actually would just error out. The whole API for that went down. I had to contact the USGS myself and have them fix that. So they just raised the limit for my request. So if you end up using these API’s and you specifically need the All Earthquakes, for the 30 Days, and it gets really high one month…you’re welcome. Haha! Thanks, also to the USGS for providing these fantastic data sets and fixing that.

(clicks on another window)

Let’s jump over to the Google playstore. As you can see, this is a progressive web app. Which means that I’ve gone and built it on a website. Right, it’s web-code, it’s HTML, CSS, Javascript, Frameworks, of course, React, Three.js. But the cool thing about this is you can build it in one language and deploy it across multiple platforms. Very great for business return on investment, fantastic for MVPing. Very great for early-stage startups and testing things out, because you only really need one set of developers. Good luck finding someone who knows how to write Native, Objective C, and Java, and Javascript. It gets a little intense having to manage all these people. So it’s a great way to start out.

(switches back to app)

So, let’s jump over to the app. I want to talk about some of the technical implementations I’ve put in here, that were essentially non-standard, I wasn’t expecting. So, this is built with Three.js. The data sets are so large that if you put this on the client-side, like on a phone for example it’s going to crash the browser in the phone. It’s just going to take it down. It doesn’t matter if you are on an old phone, a new phone, an iphone…it doesn’t matter. It’s just too much data, it’s difficult to do. So in doing the UI, I really wanted to keep it simple, I didn’t want to put in React components, I wanted simple HTML, and that’s what we got here, because the actual visualization and the data is so intense that I wanted to keep everything else really simple.

I put in a custom API for estimating download times. I take that GeoJSON set in the back end, I run some cron jobs and I convert it into Three.js, JSON on the server-side, which is not very often done. So, I’m one of the few people who have done that because I had to go through a bunch of…I had to surmount many problems in doing that because It’s not a typical use case. But we’ve gone and done that here, and it’s a fantastic experience.

So let’s check out the 30 days and jump in here. I built this project originally because I had met, now a good friend of mine in Thailand, from Nepal. His name was Mukti. There was a huge Nepali earthquake at the time. He brought people in from his village and housed them. Quite a lot of people in fact. I was so inspired that I really wanted to build this.

This is the application here.

(moves cursor over the left side bar, scrolls)

So, we have on the left side bar, all the earthquakes for the past month. There’s the location search. There’s list virtualization here. If you had that many in the list it would jank up, it would be a terrible experience. But what it does is it only render this 15 or 20 out of the entire set, dynamically and removes them when they are out of view. Which is great.

(selects physical globe from right sidebar)

So let’s check out some of the different textures I have here. I have a physical globe. That removes the cloud layer. I got these images from NASA and compressed them a bit.

(selects Political Globe from right sidebar)

If I go into the political globe it switches over, and you have a very bright white outline of the borders, and you can really see the coloring. The way the coloring demonstrates visually the intensity of the earthquake is if it is green and small, it is a short earthquake. If it’s a long, lengthy point, like this one over here, Woooh! That’s a big one.

(selects Tectonic Globe)

Alright, let’s check out the tectonic globe, which is a really cool globe texture I made in Photoshop, and then mapped to this 3D sphere. It’s great for education to show people that a lot of these earthquakes happen right along the tectonic plates. Super cool, great visualization I think.

(selects Physical Globe, clicks on Auto-rotation)

So let’s bump it back to the physical globe. You can see there is auto-rotation. Very calm auto-rotation, you can pop it on and off.

(hovers cursor over data sets on right sidebar)

And then there are the different data sets here. So once you download the 30-day data set, you get access to all the smaller data sets. If you just downloaded in the past hour, these are essentially grayed out and inaccessible.

This entire UI works on a phone, so the way it works is these selections are on the bottom, you are able to click and this will drop down from the top. It will replace the entire view, you click on this and then it will hide it and it will rotate to the location. You can zoom in and pan on the phone as well. I’m just doing the desktop because the video would be too long if I did it otherwise. Feel free to check it out. Specifically tested this in Chrome in an Android browser. There were some issues on Mac and Safari with the texture loader, I may have gone and fixed that, but I primarily develop on Windows or Linux.

(selects Past Hour on right sidebar, then Past 24, finally Past Week)

So let’s check this out. In the past hour only eight. So small, these earthquakes. In the past 24 hours, 280. Pat week, almost 2,500. Very cool stuff here, guys.

(Chooses 30 Days, then enters California in the search field)

Let’s check out the 30 Days, and let’s test out the search functionality. So if we type in California here, and do the search, it pops over, and this overlay comes out of nowhere on the left, and replaces it. Now let’s click on this.

(chooses specific location from the list)

So BOOM, you have zooming and panning to the location. You have this small sphere.

(switches to the Political Globe)

Let’s go over to the political globe, you can see it a little better. You see that there? You can. In the larger earthquakes, it’s a larger sphere. But it was a fun project that I enjoyed doing. There was some learning involved with mapping coordinates to a 3D globe, so I actually learned about Cartesian systems, and coordinate systems and maps in general. It was a great experience.

So if your business is needing some Three.js and React work, or just a progressive web app where you can deploy this into a play store or a Google app store for a relatively lower amount of initial investment than hiring a separate code team for four different platforms. I hope this video helps demonstrate the value in that. If you want to talk more about this, about how this type of approach can benefit your business, please contact me. I really look forward to talking about how we can generate more revenue and better experiences for your customers.

Thank you and have a good one. Bye.

Categories
Client Projects

Holy Kitchen

Holy Kitchen

Hey Guys,

Today I’m going to be demoing this screencap of a custom PHP website with an admin panel for a restaurant called Holy Kitchen. Most people think it is an Indian restaurant, but the owner is actually Nepali. It’s in my local neighborhood. They’ve changed their name to Bon Apeteka, because I believe they are trying to be a little bit more secular in this day and age, but the food is still traditional and fantastic.

(background video starts)

So let’s check out the website right here.

(starts scrolling down)

So, I started with their logo. I got this great copyright-free video for the background. As you scroll down you just have the menu there, that you can add to the cart. You have a nice little full-width banner there. Just some Indian/Hindu flare.

(highlights menu items)

If you add to the cart, it will pop up on the right there. You can keep adding, and of course, the math is done. You go through the different sections on the left.

This is all mobile responsive as well.

(starts adding and subtracting menu items from the cart)

In this screencap, I don’t have it recorded for that, but if you can just imagine the menu going above and just everything stacking more or less. So as you can see, when you empty out the cart it just vanishes there.

(switches back to the main page)

On the top left, you click through to the logo, and it goes to the admin panel for the restaurant owner. You log in and it’s pretty straight forward here.

(starts scrolling down)

So we have all the corresponding categories for the items that they sell, and you simply edit/remove, and then if you want to add you just click on the plus.

(clicks on the plus, a window pops up)

So I think the icons are really straight forward there. The overall UI here is pretty simple. You know it’s a back end here, so on this one, we don’t have to be super aesthetic about it. This didn’t use a component framework. It’s pretty much just raw HTML, CSS, and PHP. Sometimes we just like to keep it really simple and light when there are not too many pages on a website.

(moves cursor to the right)

So if you want to log out, you just got to the right there.

(clicks on log out)

Hit Log Out, and then you’re back to the admin panel. Let’s just finish up on the video here and close this video out. Thanks for watching. If you guys need a custom PHP website or an admin panel for a restaurant like this. Feel free, we can build that for you. Just drop us a line anytime.

Thank you.

Categories
Our Software

Wordza

Wordza was a web application I built with Vue.js + Vuex after having traveled around Ukraine for over a month. I’ve always had an interest in the Russian language since I was a child. I found the Cyrillic alphabet fascinating with it’s classic communistic block typeface and similar looking characters to the Latin alphabet. In my travels I realized that if I knew English, Spanish, and Russian that I would be able to speak to someone almost anywhere in the world.

With that ideal in mind, I began searching for language learning software! I soon found out that if you know the 1,000 most commonly used words in a language you can roughly understand the gist of 60% of what is said. This was a powerful concept in my mind. I would seek to learn the top 1,000 most commonly used words followed by grammar and natural conversation practice.

I was unable to find flashcard software that suited my three basic criteria:

  1. Allow for my own custom submitted word lists in addition to containing the top 1,000 most commonly spoken words.
  2. Automatic speech of the word or phrase by a native language sounding speaker via text to speech (TTS).
  3. Speech recognition of my spoken word and matching of my pronunciation with that of the text to speech.

With that discovery, Wordza: Language Flashcards was born!

I was pleasantly surprised to learn that some browsers, at the time of writing Chrome and Android browser, supported text to speech and speech recognition in the Web Speech API.

Text to speech functionality plays off this…

[code]
playTTS() {
let utterance = new SpeechSynthesisUtterance(this.$store.getters.currentWord);
utterance.lang = this.$store.getters.currentLang;
utterance.voice = speechSynthesis.getVoices()[18]; // Russian Voice
speechSynthesis.speak(utterance);
},
[/code]

While speech recognition is like this…

[code]
recordAudio() {
// Reset Match Status
this.recording = true;
this.speechMatch = null;
this.speechWord = “…”;

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

this.recognition = new SpeechRecognition();
this.recognition.lang = this.$store.getters.currentLang;
this.recognition.interimResults = false;
this.recognition.maxAlternatives = 1;
this.recognition.start();

this.recognition.onresult = (event) => {
const word = event.results[0][0].transcript;
this.speechWord = word;
this.recording = false;

if (word === that.$store.getters.currentWord) {
this.speechMatch = true;
this.playCorrectBeep();
} else {
this.speechMatch = false;
this.playIncorrectBeep();
}
}
},
[/code]

Post in progress come back later!

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.