How to test different viewport sizes in Codeply v2

It’s time to clarify responsive design testing with Codeply v2. Recently several users have asked how to change or set the viewport size to test their responsive designs. Codeply v1 had different viewport sizes available in the editor toolbar, and the ability to open the preview window in a new browser tab.

This same functionality exists in Codeply v2, and it’s effectively easier to use. There are 2 ways to change the preview viewport size in Codeply. Both are easier (and more relevant) to demonstrate from Vertical preview orientation.

  1. First, change the editor layout to Vertical. This is done by selecting the Vertical option in the layout menu in the top…

Checkout this Historic Rhode Island Seaport when Traveling to New England

Image for post
Image for post

1 — More Parking, Less Traffic

Bristol, Rhode Island is the charm of Newport without the crowds. Newport is infamously known for its huge crowds, narrow streets and lack of parking. The visitor parking lots are usually packed full during the summer, and the street parking is restricted to residents only. If you’re lucky enough to find metered parking, it’s limited to 2 hours. This means you’ll usually have to resort to a private lot in excess of $20/day to park in Newport.

Finding parking in Bristol is much easier. The town provides a lot of on-street parking that is open to visitors, and most of it is free. There are several public parking lots in the historic downtown area. However, Bristol is not a ghost town. Home to Roger Williams University, Bristol has just the right amount of bustle where you can park, dine and enjoy the local scene without waiting too long or spending too much. …


Create a Vue Dashboard starter using Vuetify

Image for post
Image for post

Lately I’ve been playing with Vue & Vuetify a lot so I decided to share this dashboard starter template. This may be helpful to kick start your next “admin” project, or as a basis for a creating simple collapsing sidebar layout with Vuetify.

Features

- Vue 2.x, Vuetify 2.2.x, Vue Router, Material Design Icons
- Light/Dark Theme Switcher
- Collapsing/Toggleable Sidebar
- Material Design Icons

Vue App and Router
I started with a typical Vue app and router set-up.

const routes = [
{ path:'/', component: Home },
{ path:'/detections', component: Page },
{ path:'/comp', component: Page },
{ path:'/customers', component: Page },
{ path:'/orders', component: Page },
{ path:'/settings', component: Page }…

A simple linter, validator & formatter using Vue.js 2

Image for post
Image for post
Vue JSON Lint

As a developer, one of my favorite go-to tools is jsonlint.com. I like it so much that I decided to make my own JSON Linter using Vue.js.

The Vue App

const app = new Vue ({
el: '#app',
data: {
jsonstr: "",
jsonerror: ""
},
computed: {
prettyFormat: function() {
// reset error
this.jsonerror = "";
let jsonValue = "";
try {
// try to parse
jsonValue = JSON.parse(this.jsonstr);
}
catch(e) {
this.jsonerror = JSON.stringify(e.message)
var textarea = document.getElementById("jsonText");
if (this.jsonerror.indexOf('position')>-1) {
// highlight error position
var positionStr = this.jsonerror.lastIndexOf('position') + 8;
var posi = parseInt(this.jsonerror.substr(positionStr,this.jsonerror.lastIndexOf('"')))
if (posi >= 0) {
textarea.setSelectionRange(posi,posi+1);
}
}
return "";
}
return JSON.stringify(jsonValue, …

Toast notifications, spinners and iOS-style switches

Good ‘ol Bootstrap has been around since 2013, but never before has it offered up some of the new UX features & components in the latest 4.2.1 release. These new components help improve one of the most important aspects of UX: Visual Feedback.

This isn’t the feedback the User provides like a suggestion box. This is the visual and contextual feedback provided by the UI, to keep the User informed.

Image for post
Image for post

Toast Notifications

The Bootstrap Alert component has never quite lived up to expectations. …


How to use Bootstrap 4 with Angular 7

Image for post
Image for post

I’ve recently seen a lot of questions on Stack Overflow with developers trying to figure out how to use the latest Bootstrap 4 with Angular 7. Here’s what to do if you’re facing this challenge.

1. Add Bootstrap to package.json

npm install bootstrap --save

This will add the following lines to the “dependencies” section of the apps’ package.json file…

"dependencies": {
..
"jquery": "^3.3.1",
"bootstrap": "^4.1.3",
"popper.js": "^1.14.3"
}

So the package.json will look something like this…


Image for post
Image for post
How to add Bootstrap to your React project!

How to “install” and use Bootstrap 4 with ReactJs

I’ve recently seen a lot of questions on Stack Overflow with developers trying to figure out how to use the latest Bootstrap 4 with React. Here are a few options for you if you’re facing this challenge. All the options below are based on a simple ReactJs app using create-react-app.

Bootstrap CSS only

Option 1

If you only require the bootstrap.css, the easiest method is to reference Bootstrap on CDN (or a local relative path) on the HEAD section of the create-react-app public/index.html file. This will include Bootstrap CSS globally in your app (on all “pages”) since index.html is the React App container.


Image for post
Image for post

Custom themes for Bootstrap 4 with CSS or SASS

There various reasons to customize Bootstrap. You may want to:

  • Change the existing Bootstrap styles such as colors, fonts, or borders
  • Change the Bootstrap grid layout such as breakpoints or gutter widths
  • Extend Bootstrap classes with new custom classes (ie: btn-custom)

Whatever the reason is, there are 2 ways to customize Bootstrap. I will start with the easier, less robust method using CSS, and then explain the more advanced method using SASS.

1. Simple CSS Overrides

This method works by defining CSS rules that match Bootstrap’s CSS rules which creates a style “override”. …


Image for post
Image for post

Understanding the Flexbox Powered Bootstrap 4 Grid

This is the 2018 follow-up to my original “How the Bootstrap Grid Really Works” article that was based on Bootstrap 3.x, and Part 4 of my complete “How to… Bootstrap” article.

___________________________________________________________________

What is the Bootstrap “Grid”?

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.

The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components. You just need to download and reference the “bootstrap-grid.css” which contains the Grid and Flexbox classes.


Get Started, Learn the Grid, Components, Build Themes, etc…

Image for post
Image for post
Learn Bootstrap 4!

If you are here, you’ve certainly heard about “The world’s most popular front-end component library”___ Bootstrap

I’ve worked with Bootstrap a lot since the 2013 release of Bootstrap 3.0. I’ve contributed to the Bootstrap docs, and rank first for Bootstrap on Stack Overflow. I feel more than prepared to tell you everything you need to know about it. With this article, I hope to demystify Bootstrap in a clear and understandable way.

BUT First, let’s talk about you. I hope that if you’re reading this you have a good understanding of HTML and CSS. If you haven’t built any Websites, don’t know what CSS Specificity is, or don’t know the difference between using #abc and .abc in CSS, this is NOT the article for you. …

About

Carol Skelly

S/W Engineer. Web developer. @Bootply @Codeply

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store