Swift Invites website & app

Posted on February 17, 2018 by bronsond

  • css
  • html5
  • jquery
  • mysql
  • php
  • sass
  • web design
  • web development

Swift Invites is an online web application for creating and sending email invitations to events such as weddings, birthdays, etc.

Once you have created an account, you can then create an event and provide all the details which will be used in your email invitation for your event which includes the following:

• Event name
• Event date
• Event location (Using Google Maps)
• RSVP date for event
• Event image

All the details above can also be changed under the settings section once an event has been created.

Once you have created your event, you can also send a test email invitation to the email that is linked to your account to see what your email invitation and response web page will look like.

The response web page embeds a Google Map of the location for your event making it easy for your guests to find the location of your event.

If you are happy with how your email invitation and response web page looks, you can import your guest list which needs to be a CSV file.

After you have imported your guest list, you will be able to send your email invitation to everyone on your guest list.

When all email invitations have been sent, you can view the reporting section to see how many guests you invited, how many people will be attending your event, how many guests have given a yes and no response and who has not responded yet.

You can also resend to your entire guest list or to selected guests. If their responses change, it will be reflected in the reporting section.

You are also able to remove guests from your guest list and add individual guests to it.

Swift Invites has a free account which is limited to only being able to create one event and subscription accounts with which you can create as many events as you want.

For more information please visit the website.

Screenshots

Swift Invites Screenshots
Swift Invites Screenshots

bronsond

Conflux website template

Posted on February 17, 2018 by bronsond

  • css
  • html5
  • jquery
  • sass
  • web design
  • website template

HTML5, CSS and JQuery template

Template can be setup using CodeKit

https://codekitapp.com/

Preview https://bronsondunbar.github.io/conflux-template/

React Redux version https://github.com/bronsondunbar/conflux-template-react-redux

Screenshots

Conflux Website Template Screenshots

License

MIT License

Copyright (c) 2018 Bronson Dunbar www.bronsondunbar.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bronsond

Boombox website template

Posted on February 17, 2018 by bronsond

  • css
  • html5
  • jquery
  • sass
  • web design
  • website template

HTML5, CSS and JQuery template

Template can be setup using CodeKit

https://codekitapp.com/

Preview https://bronsondunbar.github.io/boombox-template/

React Redux version https://github.com/bronsondunbar/boombox-template-react-redux

Screenshots

Boombox Website Template Screenshots

License

MIT License

Copyright (c) 2018 Bronson Dunbar www.bronsondunbar.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bronsond

Alpha website template

Posted on February 17, 2018 by bronsond

  • css
  • html5
  • jquery
  • sass
  • web design
  • website template

HTML5, CSS and JQuery template

Template can be setup using CodeKit

https://codekitapp.com/

Preview https://bronsondunbar.github.io/alpha-template/

WordPress version https://github.com/bronsondunbar/alpha-wp

React Redux version https://github.com/bronsondunbar/alpha-template-react-redux

Screenshots

Alpha Website Template Screenshots

License

MIT License

Copyright (c) 2018 Bronson Dunbar www.bronsondunbar.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bronsond

Webpack 2 kickstarter [component]

Posted on February 17, 2018 by bronsond

  • webpack
  • webpack kickstarter

Instructions

  • Run npm install
  • Run npm start (Development)
  • Run npm build (Production

bronsond

Using the MailChimp API v3 [component]

Posted on February 17, 2018 by bronsond

  • mailchimp
  • mailchimp api
  • php

This example uses the MailChimp API v3 created by Drew McLellan.

It also includes Google reCAPTCHA to ensure there is no spam subscribes.

I have also added a check that the person agrees to join the mailing list.

Steps

In order for the example below to work you will need to use your own Google reCAPTCHA site & private keys as well as your MailChimp API key and list ID

  1. Go to https://www.google.com/recaptcha/intro/
  2. Click on the Get reCAPTCHA button
  3. After logging in, you will need to register your site in order to get your keys.
  4. Once you have done this, you can select your site and then click on the Keys section
  5. This will give you both your site & private keys
  6. In index.html, you can search for SITE_KEY and replace it with your key
  7. In submit.php, you can search for PRIVATE_KEY and replace it with your key
  8. Next you need to log into your MailChimp account and get your API key and the list you want people to subscribe to.
  9. To get your MailChimp API key you can read this http://kb.mailchimp.com/integrations/api-integrations/about-api-keys
  10. To get your MailChimp list ID you can read this http://kb.mailchimp.com/lists/manage-contacts/find-your-list-id
  11. After you have both your API key and list ID you can replace them in the submit.php by searching for MAILCHIMP_API and LIST_ID
  12. Once this has been done, you can upload the files your site and test. Keep in mind you need to upload the files to the same site you added in Google reCAPTCHA

License

MIT License

Copyright (c) 2018 Bronson Dunbar www.bronsondunbar.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bronsond

Uploading multiple files [component]

Posted on February 17, 2018 by bronsond

  • multiple file uploads
  • php

This example creates a folder using the users name and uploads selected files. It will also send the owner an email notification of all the uploads.

It also includes Google reCAPTCHA to ensure there is no spam content created.

Preview: http://bit.ly/2gwjTRD

Steps

In order for the example below to work you will need to use your own Google reCAPTCHA site & private keys

  1. Go to https://www.google.com/recaptcha/intro/
  2. Click on the Get reCAPTCHA button
  3. After logging in, you will need to register your site in order to get your keys.
  4. Once you have done this, you can select your site and then click on the Keys section
  5. This will give you both your site & private keys
  6. In index.html, you can search for SITE_KEY and replace it with your key
  7. In create.php, you can search for PRIVATE_KEY and replace it with your key
  8. Once this has been done, you can upload the files your site and test. Keep in mind you need to upload the files to the same site you added in Google reCAPTCHA

License

MIT License

Copyright (c) 2018 Bronson Dunbar www.bronsondunbar.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bronsond

User generated content using a form [component]

Posted on February 17, 2018 by bronsond

  • php
  • user generated content

This example creates a folder and page from where it is being hosted using the details from the form.

It also includes Google reCAPTCHA to ensure there is no spam content created.

It also includes an option mail the link of the page created.

Preview: http://bit.ly/2vCsdAR

Steps

In order for the example below to work you will need to use your own Google reCAPTCHA site & private keys

  1. Go to https://www.google.com/recaptcha/intro/
  2. Click on the Get reCAPTCHA button
  3. After logging in, you will need to register your site in order to get your keys.
  4. Once you have done this, you can select your site and then click on the Keys section
  5. This will give you both your site & private keys
  6. In index.html, you can search for SITE_KEY and replace it with your key
  7. In create.php, you can search for PRIVATE_KEY and replace it with your key
  8. Once this has been done, you can upload the files your site and test. Keep in mind you need to upload the files to the same site you added in Google reCAPTCHA

License

MIT License

Copyright (c) 2018 Bronson Dunbar www.bronsondunbar.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bronsond

Generate PDF using a form [component]

Posted on February 17, 2018 by bronsond

  • generate pdf
  • php

This example creates a PDF using the FPDF library with the content from a form.

The content is 64 encoded and stored in a database as well.

It also includes Google reCAPTCHA to ensure there is no spam content created.

The PDF can also be emailed as an attachment.

Preview: http://bit.ly/2iCH8tt

Steps

In order for the example below to work you will need to use your own Google reCAPTCHA site & private keys as well as your MailChimp API key and list ID

  1. Go to https://www.google.com/recaptcha/intro/
  2. Click on the Get reCAPTCHA button
  3. After logging in, you will need to register your site in order to get your keys.
  4. Once you have done this, you can select your site and then click on the Keys section
  5. This will give you both your site & private keys
  6. In index.html, you can search for SITE_KEY and replace it with your key
  7. In create.php, you can search for PRIVATE_KEY and replace it with your key
  8. Once this has been done, you can upload the files your site and test. Keep in mind you need to upload the files to the same site you added in Google reCAPTCHA
  9. You will need to add your own database details in the db.php found in the includes folder in order the content to also be captured there.

License

MIT License

Copyright (c) 2018 Bronson Dunbar www.bronsondunbar.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bronsond

Website SEO 101: How it works in a nutshell [video]

Posted on February 17, 2018 by bronsond

  • seo 101
  • website seo
  • website tips

SEO or Search Engine Optimized is a term that is thrown around a lot when talking about website design, but if you are not familiar with web design it can be really confusing.

If you understand the essentials of SEO you will be able to see the value it adds to your website.

In my previous post I briefly mentioned SEO and why you need it. Before you watch the video, lets do a quick recap.

Search engine optimization helps your website to be found at the search engines when a visitor searchs for something. But, that is only one part.

Depending on the SEO of your website, you can either be on the first page of the search results or the 10th page. If you are on the first 3 pages of the search results you have a higher chance of getting organic traffic, which is one of the most important goals of having a website.

But before I go into too much detail, you can watch the short video below to have a better understanding of SEO.

 

I hope you enjoy the video and if you have any questions or comments, please let me know below.

bronsond