General Archives - Page 3 of 25 - {5} Setfive

Okay, so it’s your first time making a website and you are not sure which CMS to use, you may not even know what “CMS” means. Don’t worry, you are not alone, because it’s my first time creating a website too! With zero previous website development, nor design experience, I found that looking up different systems and softwares can be overwhelming and confusing. I came across numerous compare-contrast charts and pro-con lists, but these responses meant virtually nothing to me since I did not know which functions and services I would need.

More specifically, after finding lists of which features were included on each CMS, I did not understand each features function nor its relative importance. So, I have constructed a little breakdown of my research, in attempts to assist those of you who are looking into making a website for the first time. Hopefully, by the end of this article, you will be able to better understand how to start thinking about creating a website, which factors differentiate each CSM, and what those differences will mean for you as a website creator.

What is CMS – Wix, wordpress, Squarespace

So what is a “CMS?” CMS is an abbreviation for “Content Management System,” and a CMS does exactly that, it manages the creation of digital content. The two specific CMS’s I will be discussing are: WordPress and Squarespace. I selected these softwares because a majority of the research I found published these CMS’s as two of the most “universal” website creation platforms ie. can be used to create pretty much any type of website. Also, according to five different sources, Squarespace and WordPress are listed as two of the top three most frequently used website creation platforms. (builtWith.com, W3tech.com, SimilarTech, Google Trends, and websitesetup.org.) As the most popular CMS in the world, WordPress powers almost ⅓ of the world’s websites. With over 22 million active sites, WordPress has over 12.5 times more active sites than the next most popular CSM. Ranking a close third, is Squarespace. While considered universal- in the type of websites these softwares can make- WordPress and Squarespace act as systems that service solely for website creation.

With identical purposes, many of the functions on WordPress and Squarespace are uniform. Some of the major functions that are looked for in website creation include: content import/export, drag & drop, landing pages/web forms, online booking tools, online store builder, pre-built templates, SEO Management. Both WordPress and Squarespace (as well as many other CSM’s) possess the functions previously listed. In addition, WordPress has Auto Update and Survey Builder, where Squarespace does not. However, one feature on Squarespace that WordPress does not include is real time editing. On Squarespace you also have the ability for social media sharing, where on wordpress you can upload the links to social media sites, but you cannot upload the social media channel itself. Unless you are looking for one of those four differentiating functions between these two CMS’s, the bigger distinguishing factors between WordPress and Squarespace are the ease of initial use and the customization abilities.

Starting to Build

The difficulty of learning how to use Squarespace can be understood through the analogy of learning how to read. There is a learning curve at first, but once you start to sound out letters and can read at a moderate level, that is pretty much it. Essentially, reading can be tricky at first, but once you are proficient in the skill, there is not more to learn or develop. You have the ability, and you can use it, just like you are right now. Reading is similar to Squarespace because, like piecing together letters, learning all the aspects and tools of the Squarespace software can be a bit tricky at first. The tools are broken into sections, and it is not clear how to start building. Before using Squarespace, it is recommending to watch some tutorials on how to use the platform.

However, a majority of Squarespace’s users state that it only takes a few days fully comprehend, and learn, the full layout. On the contrary, WordPress can be understood with the analogy of learning math. WordPress has straightforward tools and it is very basic and simple to start. Any beginner can instantly start a site build, however, it is nearly impossible to master all of the features and capabilities of WordPress. Specialists in building websites on WordPress claimed that they still do not know all the functions of this CMS even after using it for years. So, whether it be reading or math, Squarespace or WordPress, the initial phases of site building, and learning how to use the CMS, each vary by platform.

The Look

Whether you are creating a website for something visually appealing, like photography, or something more textual, like a law firm, my guess is that you want your website to look good. The ascetics of website are often considered the highest importance, and can often be a major fact in drawing clients towards your business. Somewhat obviously, the first thing that happens when we look at a website is that we see it. So visuals and layout are important.

With a high emphasis on the physical appearance on the sight, Squarespace can be tough to beat. Squarespace has- what are almost unanimously considered- the most aesthetically pleasing templates. The designs on Squarespace are also uniform and great quality. What this means is that if you switch templates within Squarespace, you can use the same designs and their quality will not change. WordPress, on the contrary, doesn’t ship with the most visually appealing templates. Despite the ascetics of the templates, the customizability between the two CSM’s is very different, which is where WordPress gains a lot of it’s users.

Customization

While the Squarespace templates may look nicer, there is a lot less that you can do to individualize your template. With these templates, what you see is what you get. Apart from adjusting font size and color, another website that uses the same Squarespace template will look almost exactly the same. Squarespace also does have the ability to cross share templates, so you cannot pick and choose which designs you like the most on each template. On the other hand, WordPress has the widest range of customizability. On WordPress you can customize every single feature and design, which allows you to create an entirely unique sight.

With WordPress you can build everything from scratch, where Squarespace templates are already formatted and pre-made. One visual feature that WordPress offers that some people prefer is the ability to upload a background. Again, another feature that can make your website more unique looking. Due to the major differences between ascetics and customization, Squarespace is a good fit for people that want to take a more simplistic approach to building their website. Since Squarespace requires no backend or coding experience, it is great for non-technical people. In opposition, those that are more tech-savvy, and interested in creating a complex site, may benefit more from WordPress.

Hosting

The customization abilities of these sites not only differentiates them aesthetically and functionally, but also financially. With Squarespace offering minimal customization, the price is a relatively fixed rate. The initial rate is higher than WordPress because you are paying for not only a premade template, but also for Squarespace to host your website. There are many advantages to not hosting your own website. Squarespace is acknowledged for having a very responsive and supportive customer service team. Their team can be contacted via e-mail and Twitter 24/7 and via their site chat during standard working hours. Squarespace does not provide customer support through phone calls, but with an active team they are responsive and secure, and have great reviews.

If there is a bug or flaw with your site, the host is automatically responsible to fix the error. If you host your own site, you are responsible to repair any damages or issues with your site. Typically, this becomes expensive because you often need to hire someone directly to fix this. Contrarily, if you have backend coding experience, this can be a great way to save money, since you may be able solve the problem yourself. That being said, if there are any changes made to Squarespace ie. updates, changes, pricing, etc.. that is not something that a user can prevent since they are not hosting their own site. Without a support team, individuals hosting their own site also facilitate more security issues.

Pricing

With your own hosting and customization options on WordPress, you also have more control over your pricing. WordPress itself is free, but hosting the site costs a small fee. This fee is less than the monthly fee for Squarespace. However, the more features and designs you add to your WordPress site, the more you pay. Thus, with increased customization options comes an increase in payment. The maximum that you can pay on Squarespace is lower than the maximum you could pay on WordPress, but, since you have to outsource your site to use Squarespace, you have no control over the rates the software changes its pricing. Squarespace’s current fees are listed below:

Pricing (Squarespace)

Personal plan – $12/month billed annually (or $16 month-to-month)
Business plan – $18/month billed annually (or $26 month-to-month)
Basic online store – $26/month billed annually (or $30 month-to-month)
Advanced online store – $40/month billed annually (or $46 month-to-month)

On Squarespace, your domain is only free for the first year. On wordpress, a domain name typically costs $14.99 / year, and web hosting normally costs $7.99 / month. Depending on your needs, your cost to start a WordPress website can range from $100 to even as high as $30,000 or more. I hope this article was helpful trying to understand some fundamental differences between Squarespace and WordPress. Another site with helpful insight one CSM’s is Capterra.

Final Thoughts

My conclusion is that Squarespace may be more suitable for entrepreneurs, small size businesses, startups or anyone who is less experienced in website building, or wants a more simplified site creation that they can outsource. Due to the ascetics of the Squarespace templates, this CSM can be extremely beneficial for visual people (photographers, artists, etc..) and ideal for portfolios and blogging. WordPress may be more fitting for freelancer, non-profit organization, even bloggers looking to craft a detailed and customized website for little to no initial costs associated. Specifically WordPress can be a great selection for this with technical or design experience that know how to host their own website. Happy choosing, and happy website creation!

If I went back in time 5 years and told myself that I would eventually work toward a bachelor’s degree in math, I never would have believed it. All throughout high school and even my freshman year of college, I had the same thought in every math class I took: “When would I ever use this in real life?” It was not until my first course in differential equations that I realized how useful and applicable mathematics can be to solve real life problems. However, these problems mainly involved physics and finance, neither of which are of interest to me. I enjoyed all my computer science classes but with a BS in computer science I was not going to graduate on time after transferring my freshman year. Choosing a concentration in computing allowed me to take a class on scientific computing — a class teaching you how to utilize computer science to write efficient programs that solve complicated systems of linear equations as well as estimate differential equations that cannot be solved exactly by any known methods.

A system of linear equations is a set of two or more multivariable equations, involving the same variables. For example: 2x + 2y = 4, 3x – y = 2, where x represents the same value in both equations as does y. A system of two linear equations, both involving only two variables can be solved simply by solving one for y, and plugging that y value into the other equation:

2x + 2y = 4 → 2y = 4 - 2x → y = (2 - x) …. 
3x - y = 2 → 3x - (2 - x) = 2 → 3x - 2 + x = 2 → 4x = 4 → x = 1 …. 
y = 2 - x → y = 2- (1) = 1 ….

The solution is therefore x=1, y=1.

When you have many more equations as well as more variables than 2, solving by hand becomes less practical and can be virtually impossible in a system of 200 equations involve 200 variables.

To combat this, you can use represent the system of equations in a matrix, and solve through a process called Gaussian elimination. In Gaussian elimination, you can manipulate and reduce a matrix to a form where only the diagonal and everything above consist of numbers while everything below is 0. From there, the system is easy to solve. This can be simple for 3 x 3 matrices, but when you increase the dimensions it becomes impractical. The solution is to implement Gaussian elimination in a coding language. The course I took on scientific computing utilized MATLAB because MATLAB is built for numerical computations through matrices. As a challenge, I worked on implementing Gaussian elimination in Typescript. Using the math.js library to create and manipulate matrices as well as some help from Martin Thoma’s website at https://martin-thoma.com/solving-linear-equations-with-gaussian-elimination/, I was able to create a working program that can solve a system of equations of the form:

1x - 3y + 1z = 4
2x - 8y + 8z = -2
-6x + 3y -15z = 9

The above gives the exact solution x = 3, y = -1, and z = -2.

Implementing this in typescript was challenging at first, as matrix manipulation through the math.js library is much more complex than my experience in MATLAB. However, it was interesting to apply something I learned in a university course to a real world work situation. Since I am looking toward a career somewhere in the computer science field, a lot of the math courses I take are not fully relevant to what I will do later in life — though they really help when it comes to problem solving and thinking outside the box. Utilizing topics I have learned in class to make programs such as these makes the difficulty of majoring in mathematics well worth it!

Check out the code at https://github.com/Setfive/ts-base/blob/master/src/GaussElim.ts and a live demo below!

Learning to learn to use Linux can be challenging, as everything from its reputation to general look can be intimidating. Having never used it before, instead using Windows both at home and for school I always saw Linux as something that was in the realm of true veteran software engineers and computer programmers.

During my first few weeks at Setfive I’ve had the chance to begin learning Linux and I have found it to be a useful and powerful tool. After learning some common and not so common commands I’ve really started to appreciate the flexibility and ease of use of the command line.

Here are 10 easy Linux “one liners” that allow us to accomplish some everyday tasks in a simple and efficient manner.

1. Sort a file

$ sort myfile.txt

This will sort the given file in numerical and alphabetical order:

Here a file, num, is being sorted alphanumerically, resulting in a sorted list.

2. Delete duplicate lines within a file

$ sort myfile.txt | uniq

This small addition to the sort command will not only sort the file but will remove any duplicates found within the file:

Here we can see the same num file being sorted, however this time the duplicates are being removed leaving us only with 1 of each entry.

3. Convert .mp3 and .wav files

$ ffmpeg -i input.mp3 output.wav

With this example we convert an .mp3 file to a .wav file, and it can be done the other way as well converting .wav to .mp3.

$ ffmpeg -i input.wav output.mp3

4. Recursively creating a directory structure

$ mkdir -p new/directory/structure/example

Using mkdir we are able to create subdirectories, however with the -p option we can tell it to create the subdirectories but also any parent directories that don’t already exist. Allowing an entire directory tree to be created with one line:

Here we can see an entire directory tree “/new/directory/example/setfive” being created.

5. Extract specific pages from a PDF

$ pdfjam pdf1.pdf 2-4 -o 2.pdf

Using the pdfjam command we are able to take pages 2, 3 and 4 from the pdf pdf1.pdf and save them in a separate file, here called 2.pdf.

6. Create a thumbnail image for a PDF

$ convert -thumbnail x80 file.pdf[0] thumb.png

Here we are using convert to create a thumbnail for a pdf, with the [0] indicating that the thumbnail will be made using the first page of the PDF file.

7. Make all file names lowercase

(Assuming you have a bash like shell)

$ for i in *; do mv "$i" "${i,,}"; done

This command will loop through the directory and use the built in case modification extension that comes with Bash to change all the file names to be lowercase.

8. Create an animated gif

$ convert -delay 20 -loop 0 *.jpg myimage.gif

This can be accomplished using the imagemagick package, which can be installed with “sudo apt-get install imagemagick”. This allows for full image manipulation including conversion and editing.

9. Create a file with some text

$ echo "a new string" >> file

It appends the string into the file, followed by a newline, if the newline is wanted then by adding the -n flag after echo will append the string without the following newline.

10. Split up a file

$ split -b 50MB verylargemovie.mp4

Split will break up a large file automatically to whatever sizes you need. Here we’re breaking up our big movie file into 50MB chunks.

Bonus: Rerun the last command, replacing part of the command

This allows for an easy method to rerun a command with the swapped string which can be useful with long commands where finding and altering a single string by hand would be tedious.

Using the convert example from above:

$ convert -delay 20 -loop 0 *.jpg myimage.gif
$ ^myimage^newimage
convert -delay 20 -loop 0 *.png newimage.gif

Will re-run the command and create an image named “newimage.gif”

Note: This post originally appeared on Codeburst.io

One of the biggest differences between Angular 1.5+ and 2 is the latter’s approach to dependency injection. Back on Angular 1.5 there were a couple of ways to configure dependency injection but they relied on naming things consistently. If you needed the “$http” service you had to specify that by specifying a configuration explicitly mentioning “$http”. And unfortunately, it was also possible to do this with implicit annotations which would cause minification to break your code.

Angular2 with TypeScript dramatically improves on this by introducing a type based DI system where you just correctly specify the type of an injectable you want and Angular will handle the rest. But since TypeScript compiles to JavaScript and in doing so wipes any type information how can this DI system work? It’s not magic so lets take a look!

TypeScript Decorators

The first piece of the puzzle is the @Injectable TypeScript decorator which marks a class as available for DI. TypeScript decorators are a language feature which enables developers to use annotations to modify the behavior of classes, methods, and properties at run time. Within Angular, the @Injectable annotation is “class annotation” which Angular uses to register information about the target class with the framework. The relevant framework code is in the packages/core/src/di namespace with the most interesting files being:

Reading through the code is a bit challenging but the overall idea is that the framework keeps track of classes that have been annotated with @Injectable and then has a “get” method to correctly construct instances of those classes. OK but what about that type information?

reflect-metadata

The second piece of the DI puzzle is the reflect-metadata package and TypeScript’s “emitDecoratorMetadata” option. When used together they will cause the TypeScript compiler to output metadata for classes that have been annotated with a class decorator. And most importantly this metadata is accessible at runtime by userland JavaScript.

Concretely, the Angular DI system uses this metadata to introspect the arguments that the constructor a class marked @Injectable requires. And then naturally using that information the DI framework can automatically construct a class on demand for you.

An example DI system

Finally what we’ve all been waiting for, some sample code! In order to compile, you’ll need to enable the experimentalDecorators and emitDecoratorMetadata compiler flags, install the reflect-metadata package, and also use a recent version of TypeScript.

If you compile and run it you should get the following output:

Car { ex: [ Engine { maker: ‘Tesla’, displacement: 500 } ] }

So as expected we retrieved a Car without manually constructing an Engine and the Engine constructor was correctly invoked since the class properties were set.

Couple of things of note:

I created the “Newable” type alias to represent a constructor
The Inject decorator calls the Injector class in order to create some encapsulation
On line 10, the Reflect.getOwnMetadata(“design:paramtypes”, originalConstructor); call retrieves constructor information for the class that the decorator has been applied to.
Line 18 uses bind() to modify the class constructor to use the Injector to retrieve instances of the required classes

And that’s about it. After creating this example it’s clear that TypeScript’s decorators and the reflect-metadata are both powerful tools and I’m excited to explore what else they could enable.

Interested in adopting Angular or TypeScript at your organization? We’d love to chat.

(Note: This originally appeared on Codeburst)

As of 2017 TypeScript has emerged as one of the most popular languages which can be “compiled down” to JavaScript for both browser and nodejs development. Compared to alternatives like Facebook’s Flow or CoffeeScript one of TypeScript’s most unique features is its expressive type system. Although TypeScript’s type system is technically dynamic, if you fully embrace it you’ll be able to leverage several features of the TypeScript compiler.

So what are a couple of these features? We’ll be looking at code from Setfive’s CloudWatch Autowatch an AWS cloud monitoring tool written in TypeScript. Since TypeScript is evolving so quickly it’s worth noting that these examples were run on version 2.4.2. Anyway, enough talk lets code!

Non-nullable types

If you have any experience with Java you’ve probably encountered the dreaded NullPointerException when you tried to deference a variable holding a “null” value. It’s certainly a pain and has been derided as a “billion dollar mistake” by its creator. To tackle NullPointerException bugs TypeScript 2.0 introduced the concept of non-nullable types. It’s “opt-in” via the “strictNullChecks” compiler flag which you can set your tsconfig.json

Consider this simple sample:

By default, the TypeScript compiler will compile that code since “null” is assignable to string[] but you’ll get an error about half the time you run it. Now, if we set “strictNullChecks: true” and run the compiler we’ll get an error:

partyguests.ts(5,9): error TS2322: Type ‘null’ is not assignable to type ‘string[]’.

Since the compiler can infer that at least one code path in the function produces a null which is now incompatible with an array. An example of this in the Autowatch code are the checks to ensure that PutMetricAlarmInput instances aren’t created with null dimensions. At line 462 for example.

Exhaustive type matching

Most programming languages with a Hindley–Milner type system have some functionality to perform a “pattern match” over a type. In practice, that allows a developer to make decisions about what to do with a set of objects based on the concrete type vs. their abstract signatures. For example, in Scala:

At face value it appears as if you can replicate this ES2015 JavaScript with something like:

That misses an important piece from the Scala example, the compiler guarantees an exhaustive match. If you added a new subclass of “Notification” like BulkSMS the Scala compiler would error because showNotification is missing that case. The JavaScript example wouldn’t be able to provide this and you’d end up getting a runtime error.

However, with TypeScript’s “never” type it’s possible to have the compiler guarantee an exhaustive match for us. We could do something like the following:

The important part is the call to “assertNever” which the compiler will error on if it detects is a reachable code path. We can confirm this if we add “BulkMessage” to the “MyNotification” type but not the if:

If you run the TypeScript compiler against that you’ll get an error highlighting that your if isn’t exhaustive since it’s hitting the “never”:

match2.ts(19,24): error TS2345: Argument of type ‘BulkMessage’ is not assignable to parameter of type ‘never’.

It’s certainly not as elegant as the Scala example but it does the job. You can see a real example in Autowatch starting at line 168 where we used it to guarantee exhaustive matching on the available AWS services.

Read-only class properties

Marking a class property “readonly” signals to the compiler that code shouldn’t be able to modify the value after initialization. Although “readonly” may sound similar to marking a property as “private” it actually enhances the type system in important ways. First, “readonly” properties make it possible to more faithfully represent immutable data. For example, a HTTP Request has a “url” which will never change after the request has started. And by marking properties as “readonly” as opposed to private you’re still able to return literal objects with matching properties.

Let’s look at an example:

If you run that through the TypeScript compiler you’ll get an error advising that the property is readonly:

readonly.ts(6,5): error TS2540: Cannot assign to ‘url’ because it is a constant or a read-only property.

Now, if you try and mark the url property as private and create a literal HttpRequest you’ll notice you’ll get an error:

But if you switch it back to “readonly” it’ll work as expected.

You can see real world usage of this in Autowatch, where we marked properties in our Config class as readonly since they should never change once the object has been constructed.

That’s a wrap

Well that’s three pretty cool features of the TypeScript type system that should help you be more productive and write better code. If you found these interesting, there’s several other interesting type related features that landed in 2.3+ versions of TypeScript that are worth checking out.

Category: General

Websites 101: Website for Dummies