I'm Rachel Andrew, as introduced, and I'm going to talk for a little while about the business side of front-end development. And I'm going to be touching on a bunch of things, and I've got a whole set of links and things in my slides, and I'll give you a link at the end that includes all of those, so you don't need to worry about copying things down. So firstly, why am I here to talk about this subject? So I've been working on the web since around 1996 as a web developer of various types. I started my own company in 2001, and that was really a sort of consultancy. We were doing web development for clients, and we mainly work in PHP. And so I've been doing client-based work since that time. And then about six and a half years ago, we launched a product, and that product is Perch. It's a PHP CMS. So now I spend a lot of my time actually working with web designers who are using our software and seeing the things that they struggle with. My background in front-end is that I was part of the web standards project at one point, so I've always been very, very keen on open web standards and pushing that sort of thing forward. But I think as someone who's very keen on standards and keen on good ways of doing things, you can get a little bit detached from what regular folk on the web are doing, and that's the thing I've learned through supporting my customers is actually what regular people are doing. People who don't read specifications and who don't kind of make a hobby of playing with CSS. You know, what are they worrying about and how are they running their businesses and how are they using, you know, front-end development actually in their day-to-day work. And the thing that's really come for me from working with the web standards project and sort of through my history is the fact that I believe that the web is, you know, incredibly accessible. It was accessible to me when I first got into web development. It's not my background. I'm an ex-dancer. I kind of, you know, grew up with the web essentially when I sort of moved over and started working and doing web design. And so that accessibility of the web, the fact that if you put, you know, an HTML document together, that's an accessible document. And so anything that we do as developers takes away from that accessibility. So we get to choose. We get to choose whether we want to protect it or whether we want to break it. But I'm also a businesswoman. As I mentioned, I've got a product and I live in the real world. And so I run a company and I'm just one half of that company. There's two of us. And so I wear an awful lot of hats. And any one day I might be doing, you know, the bookkeeping. I might be writing some docs. I'll be doing some support. I might be developing PHP. I might be doing front-end development for our site or for our product. I might be writing a puppet manifest. I do all of our operations. So I have tons and tons of hats. I can't just spend all day, you know, agonising over which HTML element to use. I'd love everything to be perfect. But often I have to just have things that are just good enough because I've got to ship. I've got to get stuff out of the door.  So today I'm going to talk about, you know, where we've come from as web developers, our history, and where we're going to. And I'm going to think about some of the things that I've seen over that time and some of the things I see people struggling with. So to find out how I'm actually the oldest person in the room, put your hands up if you developed a site that had to work in Netscape 4. I'm almost the oldest person in the room. Keep your hands up if you worked with Netscape 3. Yes, you are my people. So I started building websites when browsers didn't support CSS. And I can remember arguments in things like Dreamweaver news groups, news groups on newsnet, where people were saying, you know, should we use CSS at all? What is this funny-looking thing? Font tags are much easier. So the argument for CSS styling at all was really one, on the fact that you could style things in one document and didn't have to search through your document using whatever terrible text editor you had to replace your font tags. That's why we use CSS. It's great. And I started using CSS for layout really early on. This is a superb piece of code. This is the Netscape resize fix. What this did was Netscape 4 had an excellent bug. Basically, CSS was based on its own JavaScript style sheets implementation. So CSS didn't work unless you had JavaScript turned on. And also all kinds of funny things used to happen. If you resized the browser window of a page that was using CSS for layout, any absolute positioning, basically, all the positioned elements would stack up in the corner. So we had to get around this to reload the page. And so this bit of code was included in Dreamweaver. It was a Netscape resize fix. The thing was we'd find this line around years later, long time after anyone had used Netscape 4, because I mean like who doesn't want to fix Netscape. So our kind of job back then was we were browser bugs experts. That's what we did. We had these dreadful browser bugs. We had limited CSS support. And that was really what we were doing. We were working out how to do modern things, modern at the time, while dealing with these browsers that had very limited implementations of CSS and the implementations they had had absolutely bizarre bugs. As I mentioned, I was part of the web standards project. I was actually brought into the web standards project along with my husband Drew McClellan and we headed up the Dreamweaver task force. We spent quite a bit of time working with Macromedia, who had Dreamweaver back then, and trying to get Dreamweaver to essentially output standard code by default. You know, we wanted it to out of the box develop decent enough code. And that's the archived Wasp site where you can sort of read the original mission. And Wasp eventually closed down because that original mission had kind of been met. The standard things these days are pretty much being implemented in a standard way, which is what we asked for. You know, we wanted browser vendors to look at the spec and implement in the same way as every other browser vendor so that you could build in one browser and it would work in another. I mean, obviously browsers don't always immediately support every new CSS spec that comes out because that's not realistic. And different browsers have got different priorities. When something is a standard, it's being implemented in a standard way. And we're seeing innovation through the standards process. Last week I was at the CSS Working Group meeting in Paris and I was sat there in a room full of browser vendors all deciding how things should work and also bringing their own ideas to the table and the things that are important in their browser. You know, we saw a specification which is CSS rounds display specification which is for CSS on round watches and things. Fantastic early stage specs and this innovation is happening through the CSS Working Group and through the standards process rather than browser saying, we've got this new thing and we're not telling you about it because it's our competitive advantage. So kind of what do we do now? Is developing for the web getting easier? Is our job just easy now because browsers work well? Because we're not browser bug wranglers anymore. And there's certainly a lot of people now piecing together bootstrap templates. They would call themselves a front-end developer maybe but they're really just piecing together other bits of code. So will professional front-end developers find ourselves without a job because anyone can download bootstrap, anyone can just put something together. And I kind of think that this, the growth in the number of tools and processes that we're seeing is somehow a bit of a reaction to that because we want front-end development to be taken seriously. You know, I don't want someone to think, oh well if you're just a front-end developer, you're not really a developer, you're not really a programmer, you're not really an engineer. So we want what we do to be taken seriously. It's still development, we're using OO principles, we're creating frameworks, we're creating tooling. And we're creating an awful lot of complexity along with that. And I think we're in some way taking a bit of a step back from the real languages of the web which are relatively simple. So we're not writing CSS, we're writing SAS because it's cool, it's got variables, it lets us do some cool stuff but maybe we're not looking at the output that it creates and maybe we're not looking at that with a critical eye that we would have done a few years ago. We're using frameworks that sometimes just dictate the markup that we have to use. Whereas a few years ago we might have cared a bit more about that markup. And we're using JavaScript libraries that include vast amounts of code and we just want to do some trivial thing that we could have just written in JavaScript. We're kind of abstracting everything, we're creating abstractions, abstractions on abstractions and we're making things very, very complex a lot of the time. And interestingly, while we're creating abstractions and avoiding working directly with our core languages, those languages are actually getting more useful and more elegant under the hood. I mean HTML5 now lets us move away from wrapping everything in a div element and instead we can mark things up semantically and we don't need plugins for audio and video. You know, HTML5 video is fantastic and it even includes things like closed captioning. You know, we can add timed subtitle tracks using Web VTT to our videos. We've got forms that validate our data with the HTML5 form spec and we can make use of operating system and browser features. You know, use type equals color in a form and with a supporting browser you get a color picker. That's pretty cool. And if we look at CSS, you know, we've got selectors that can accurately target bits of the DOM. And the level 3 selectors spec is pretty much supported in modern browsers. You can use this stuff. And the level 4 spec, which is still in development and things change all the time, I was listening into discussions last week about it. But we've got things like, you know, time dimensional pseudo classes which unfortunately don't involve any time travel. But those Web VTT caption tracks you could style those based on timing so you could fade a caption in and out, for example. Or highlight the line that's been read in a document to the user. There's loads of really cool stuff that you can do there. I've been doing quite a bit of talking recently about layout for the web and I mentioned right at the top of this talk about how layout was really difficult way back when. And layout actually for the web kind of stopped for a long time. We've been doing stuff with floats and things. And recently, of course, we've had some new stuff come into the spec and start to come into browsers. And obviously this is Flexbox, the flexible box layout module, which moves us away from a reliance on source order. Which is something we've always asked for, this being able to separate content from presentation. And I've been doing a lot of work about the upcoming CSS grid layout module. Which is a really exciting module because it gives us a native grid system in CSS for the web. This talk isn't about grid, but I think it highlights an interesting point. So if I've got some markup like this, I can set each element up as a grid area and just give it a name. I then declare a grid on the wrapper element, define the grid of columns and rows, and then place my areas with grid template areas. It's sometimes referred to this Asciart syntax of layout. You're describing your layout actually as the value of that property. So there's no floats, there's no positioning. Because the layout's all in CSS, the grid can be redefined within media queries and where the items sit on the grid. They can also be redefined. So you can move things around depending on the size of the screen. I've got a whole bunch of examples of this. The site's actually on GitHub so you can play with it. Grid layout actually only works in... It's behind a flag at the moment in Chrome. There's an early implementation in IE 10 and 11 which surprises people. Grid actually came from the Microsoft team. Some of the ideas that are in it have been around for a while, the template areas syntax. But grid was really pushed forward initially by Microsoft implementing it in IE 10. And it's now behind a flag in Chrome so you can actually play around with it. And the spec's hopefully going to be finished this year. So we'll be starting to see grid in browsers fairly soon once it gets out in Chrome. It's also been implemented in WebKit. So grid's something that actually is coming very soon. But the point is I've been putting these examples on because the CSS Working Group want feedback on grid. They want feedback on how we might use it. They want feedback on naming. You know, as simple as does this make sense to developers if we call this property this thing, they're asking for feedback and no one is giving feedback. So I put together those examples really to try and prompt feedback for grid because I think it's important that people talk about this stuff early. And I get emails all the time oh well I'll take a look once there's a sas mix in. I'm like why do you need a sas mix in to play with an experimental spec and what point is that? But people have only learned sas. They've not learned CSS and so they actually don't know how to look at grid because they don't understand where that's come from and that to me is quite frightening. Especially because grid removes a lot of the requirement for preprocessing. We're using preprocessing for layout a lot of the time to remove the complexity of figuring out how to do floats and figuring out how to do calculations. And once grid's live I'm sure there are things that preprocessors can do to make our lives easier when we work with it but there's certainly not a requirement to understand it. So at the moment I think using a preprocessor is probably the best way to deal with layout on the web and this is the Susie grid. So this does all the calculations for you to do grid based layouts without needing to add a bunch of classes to your markup. Do you know when you use bootstrap grid or whatever quite a lot of the popular grid systems you have to add these sort of low classes to your markup. Which is one way of doing things. The problem is if you want to have lots and lots and lots of breakpoints how many classes do you have to add to your markup to kind of represent all of those. So Susie let's get away from this, it's pretty cool. And there's a great tutorial here which walks you through creating this very complex grid which is pretty impressive that you can do using current CSS methods and it shows you how to do that with Susie. And you could obviously write the CSS yourself and calculate it at all but that would be hard and time consuming. So you know, great, this is a good use for a pre-processor.  Very very good. But I replicated this using CSS grid layout. And I did that without needing any pre-processor without any really complex calculations. And that's an example of the code but the full code for that is is on mygridbyexample.com website. It's actually very very easy with grid to do these complex grid layouts. And you know, this is the future of what we're doing in CSS for layout. And I think you know designers and developers should be all overspecs like grid. It's in development, it's in browsers you can play with it. All you've got to do is switch a flag in your browser and have a fiddle with some examples. And yet people aren't all over it and people aren't looking at it and then what will happen because I've seen it happen time and time again is it will get into browsers, we'll be able to use it and then people say this syntax sucks. And the CSS working group will say why didn't you say anything? Because people aren't looking at this stuff at the point at which you can get involved and it is easy to get involved. They're interested, they're interested in our involvement these days. So perhaps we're leaning on frameworks to mask the issues that we've got with CSS so we kind of forget that there are issues with CSS. Because if you use a framework, if something sorts out all of the difficulties of using floats then you don't think hang on, why are we doing layout in this terrible way? We're not something better. And so you don't get frustrated enough to try and make things different. It's only by working with the specifications by getting down to the metal of this stuff that we can start to improve them. You have to understand to be able to push the web forward. The web standards movement was totally driven by frustration. We were so fed up of building two websites, one for Netscape one for Internet Explorer. We were so fed up that we were nothing to become experts in browser bugs. Rather than be able to be creative and do interesting things we were spending our days just working out why Netscape was doing this. Working out why Internet Explorer was making half of our content disappear. That frustration led us to petition browser vendors. It led us to produce things like the browser upgrade campaign which kind of was probably a strange choice but at the time we were asking people to basically block the content from people who are using Netscape 4 to try and push people to upgrade their browsers because it really was holding back the web. And there was mass adoption of that by web developers. So we were kind of fed up and we used our skills to push things forward and I think we're in a lot better place for it. There were plenty of things wrong with the web today but we're not having to build two websites. We shouldn't have to be building two websites like that. So my concern with all of these abstractions and frameworks isn't that they can be used to build terrible websites because you can build a terrible website with vanilla HTML and CSS. You can make a terrible mess with JavaScript and sometimes libraries and frameworks prevent people from doing terrible things because they'll deal with security issues and so on. But my biggest fear is that we're not pushing for better solutions because we've got these frameworks and someone from the CSS Working Group said to me a lot of the push for layout hasn't come from web developers. The push for layout has been coming from ebook publishers because ebooks are a lot of them now, developed using HTML and CSS and there are specifications for the CSS for doing print and PDFs and they're pushing for better layout tools because they want to be able to do magazine like layouts and things using CSS and it's not possible. So it's interesting that as a community the working group aren't thinking oh you know web developers are asking for this and if you start to look at the discussions that the working groups have they talk about are there signals from the community? Are the community asking for stuff? If the community aren't asking for it then maybe no one needs it and so we don't get a better web. So my second concern is that by taking a step back from our core languages we're kind of passing the book where certain elements of our work is concerned so that might be in terms of creativity you know we're not solving problems we're just tweaking bootstrap and it might be in terms of technical decisions we might be saying well I'm using this framework and it means I have to do this it means I have to put this stuff in my markup it means I have to structure my markup a certain way so we're making these technical decisions not based on what the core languages can do not based on what our browsers can do and those things are getting better all the time but based on what potentially an arbitrary choice of framework can do and I'm not saying that compromise is wrong there's always compromises to make to say we don't live in a perfect world we all have to ship stuff we often have to do things under all kinds of constraints but I don't think the compromises should be the same for every single project and they will become the same for every project if you use the same framework for every project and there's a lot of sense in standardising on certain tools that's good business sense learning something and using it well and build up good knowledge in your agency or whatever how to use it that's cool but I think you need to always take that check and say am I just using this because we always use it or is it really the best tool for the job and using these things should not be at the expense of learning the core tools of the web it shouldn't be at the expense of knowing HTML well of knowing CSS well of knowing javascript you know you should be able to sit down with a tech senator like we did in the old days and build a simple site and I know that people can't I know that people who are professional front end developers and they would not be able to sit down and build a simple site and that is really worrying because if they can't do that they can't understand what these frameworks are doing and it's the same as people learning jQuery instead of using javascript you're learning SAS instead of CSS learning Bootstrap's grid system instead of the fundamentals of layout there's a huge difference between the person who knows HTML, CSS and javascript well and then pick a tool because it saves them time or whatever else or it makes a certain project easier and the person who uses the tool because they couldn't build it themselves there is a huge difference in those two people these single tool experts get really angry on Twitter when someone says oh I don't think that tool is doing that in a really good way and they have to defend it because essentially their job is tied up in using that tool and it's the same with programming languages I was a pearl developer and I've worked in classic ASP I now write PHP and people like to have a go up PHP I go up PHP's terrible language and I'm like it works for what we're doing it's not supposed to CMS it's written in PHP because that's what's on the hosting but if PHP were to disappear tomorrow I'd just learn something else because I know how to write code I understand the fundamentals and understanding the fundamentals of what you do is hugely empowering it makes people worry that there's this pace of change there's a new thing that appears every day a new framework and how are we going to learn all this stuff and in the rest of this conference you're going to hear probably new things things you haven't seen, should I be learning this should I be learning grunt or gulp or what should I learn next if you know your core tools if you know HMA, you know CSS you know JavaScript it all looks far less scary because if a tool comes along you can assess it against that knowledge will this help my workflow I'll give it a go maybe not at the moment I didn't learn SAS for ages because I didn't actually need it and then a project came along I was working with some other people and I thought this could be quite useful to help us structure our workflow and so then I learned it you don't need to learn every new thing if you've got the core knowledge downright because you can always build a website at the end of the day these things are creating HTML, CSS and JavaScript and that's all you need to know when you develop for the web the rest of it is just workflow and it's just whether that works well for you and your team these fundamental languages are timeless it's not so different what I'm doing now to what I was doing back when we first started learning CSS when we first started using CSS it's not worlds apart we've got a whole lot more stuff we can do some really cool stuff but I'm still building websites so know those core skills well pick them up and put them down as you need to and you'll not find yourself scrambling to relearn your entire skills and your entire stack just because some tool falls out of favour I've got one bit of advice for newer and younger developers today it don't become an expert in one tool to the exclusion of everything else learn those timeless skills and then choose which bits you want to specialise in it's a good understanding of these core languages is that the heart of us has been able to make sensible decisions about what to use for our projects and what else do we need to consider as well as the tool that we like to use and the processes we want to work with and part of this problem are people becoming very evangelical about the tools they use because they're very wedded to them means there's an awful lot of noise isn't there if you ask you know which is the best framework to use which is the best CMS which is the best pre-processor you're going to get a bunch of stuff you're going to get a lot of noise you're going to get a lot of people saying well this is the best and this is the best and having an argument with each other and it's really hard to ascertain what should I be using and whichever you pick someone is going to tell you you are wrong and you should have used this other thing so having those core skills lets you just make better judgement it lets you step back and say well if I was going to build this totally by hand this is what I'd want to end up with you know which of the tools gets me to that point and with these decisions I think something that isn't often talked about is the differences in terms of how projects are developed and maintained so everyone's talking about a certain tool they're talking about a certain library or a framework but you don't know if those noisy people are developing projects that are like yours you know are they working in a great big team are they just a solo developer it's very difficult to know and I think that's not talked about enough because the things that work well if you are a team of 50 people working on a big product those are very different things to if you are just one or two people perhaps you know working on a project where only you ever touch the CSS or perhaps you're working on a project where you need to hand that over to a company perhaps you're working on a project where you need to hand that over to a client and they're going to have to maintain it that's very different from building something in-house so this is a poll from Chris Coyer's CSS tricks site I'm just asking you know how many people touch the CSS in your current main project there's quite a spread there of different ways that people are working so a freelance web designer might design and create a site completely on her own and then she might maintain it but she might not I mean we used to build an awful lot of stuff where we would build it and we would just hand it over to an internal team and they'd be looking after it so how responsible is it to use the latest trendy framework or the latest preprocessor or whatever on something which you're going to hand over you should certainly at least be having that discussion with whoever you're handing it to and making sure they're going to be able to cope with it it's a lot of the reason why we stayed with PHP when we were doing client work is that we found that that was the easiest thing to hand over because the client could find themselves an inexpensive PHP developer whereas if they had to find a Ruby developer they were typically and certainly at the time were a lot more expensive and harder to find so it's that responsibility that you have as a developer if you're handing something over and you use something which is brand new will it even be maintained in a year's time will the client be able to find a developer who can take the work on and sites developed by huge teams they've got completely different issues you need process if you've got 20 people touching the CSS you need process because CSS is not great when multiple people work on it it's not really been designed for that so you need at least some process and things like few processes and so on really really handy because you can concatenate together everything later people can have separate things to work on there's a lot of stuff you can do and decisions can be made differently in big teams especially if you're keeping the thing in house you're going to be working on it you can make decisions that just suit that project because you don't need to worry about handing it over to another team you're going to be working on it so you might want to use something that's really cutting edge because it really works for that project and that's fine you could potentially maybe fork that open source project and develop your own fork of it if you needed to because it's just yours you're building if it's an internal audience you're building a dashboard you're building an intranet type of thing you can often make very different decisions there than if it's going out onto the web it might be that you know that everyone using the application that you're building is going to be doing that on a tablet out in the field they're going to be using an iPad you can make very different decisions there than you would for something that's just going out onto the web it's really important to keep an eye on this the web and what we can do is changing so quickly flexbox for example you can pretty much use as long as you don't have really old browsers coming to your site modern browsers have got great support for flexbox and it solves an awful lot of tricky problems if you know that your site is visited by really pretty much modern browsers you can use it the site for my product is visited by web designers they all have modern browsers I think we've got 97% of visitors or a browser which is capable of using modern flexbox it's not the case for the actual product itself because the product admin is used by end clients editing their websites and so some of them might have internet explorer 8 so we can't use it there really important to look at what has come into the site so you can choose the technology well but also what time have we got available can we carefully handcraft something you know does that matter or you know do we have to work out how we can really you know use tools to give us a bit more time but when it comes to time who's time are we actually saving I think we're very very keen as developers to optimise our time to make things quick to code to you know sort of optimise our experience as the person developing the site and sometimes that's at the expense of users because we're the wrong thing to optimise if you've got a choice because we write code once and then it's run thousands and thousands and thousands of times in the browsers of our users so if that optimisation that saves you a bit of time causes the site to crawl causes everyone to have a terrible experience causes people on mobile not to be able to download it that's not a good optimisation and so that we need very careful about looking at these tools and saying okay this saves me masses of time, that's great but are we optimising in the right place by using them old standards nerds have good thoughts on this this is Aaron Gustafson he's another web standards veteran and he's as worried as I am about this trend to make developers lives easier rather than those of our users and this increasingly matters with so many people now accessing the web on mobile around the world there's a real business case to be made for making your site very accessible on limited devices and unlimited bandwidth so this is a slide from we are socials compendium of global digital statistics and it's really worth taking a look at if you need to convince anyone in your company why this stuff matters so there are parts of the world where the reality of web use is mobile and when we're talking mobile we're not talking about like our use of mobile which might be the latest iPhone on fast connection we're talking about feature phones on slow connections and very limited data and that's the only way a lot of people are actually accessing the web so this is what it comes down to you know if using that shortcut using the plugin or the framework or application if it's not going to cause huge accessibility problems if it's not going to cause huge downloads on mobile then for me go for your life because it's not causing anyone a problem but if it will if the only way to get the all singing all dancing application that you've sort of got in your head is to make these huge compromises then maybe you need to look at another way of getting to the end result and often try and kind of justify our shortcuts by saying oh this is only temporary you know this site will be replaced you know and I don't know but I did a lot of client work and I built lots of things that I was promised were going to be temporary and you look back five years later and there it is usually still the same content as well but things aren't as temporary as sometimes we think they'll be on the web you know and also sometimes you end up maintaining that temporary thing forever because once it's up there they're like well it's all right it works you know we don't need to update that and so you end up maintaining this dreadful, crufty thing on an out of date framework on an out of date library forever because there's no money to fix it and you know this stuff matters to me I've always chosen to protect the inherently inaccessible nature of the web because I believe the web is for everyone and that's for the person in the country where they're using a feature phone and they've got very very limited internet connectivity and they're using the web to learn and to expand their horizons and to build their business you know from that phone I think that's really really important it's important that we all get to use the web and all of us worldwide I think it's hugely empowering it's been incredibly empowering in my life you know I got into the web when I was next down so I didn't have any other skills and I started teaching myself web development and it's been huge in my life my ability to make a living and I think it can be for so many other people so the best way I know to protect the web is still this term progressive enhancement that's at the heart of these choices it's at the heart of the choices that I make this quote is from the BBC Future Media Standards and Guidelines these state that the core experience of every document should not require javascript or even CSS to function and that's where we start with progressive enhancement we start with structured HTML and I travel quite a lot and I'm always on like terrible hotel wifi and it's when you're on terrible hotel wifi that you realise how terrible the web is and like you load these pages and nothing loads you know I was trying to find the details of the restaurant last night and all I could get was a black web page because it was all images and fonts and none of it loaded whereas if you start with very basic HTML and you make sure that doesn't happen at least I could have got the markup I would have got something I could have found where it was just from reading the plain HTML so we start with well-structured HTML and then we layer on the experience for those users and user agents that can support it I think we think of progressive enhancement as being this thing that happens in the browser we've built a progressively enhanced site and therefore we start with the HTML and we add on all the other bits but I think it's deeper than that it's at the heart of our processes it happens right through the stack and when we're talking about the business of what we do what's the core experience what's the core experience that your site or your app needs to provide there's rarely a business case for kind of bling and for showing off I was talking earlier this week at a business conference the things that build businesses are not flashy websites not at all so that kind of matters less than you think so what is the core experience that you need to deliver through your app on your website instead of looking for a magic tool that gives you an all-seeing or dancing UI but only with one day work we can develop a basic but usable thing first and ship it and then add to it it might not have every possible feature at the start but it works and it's accessible so we ship things and then we iterate and we're iterating on a solid base we're not throwing up something that looks amazing and promises a lot but then just doesn't work and then we're kind of having to fix all the bugs in that because it works poorly on mobile or it looks out-users of assistive technology and then we're kind of backtracking and saying oh yes accessibility is coming accessibility should never be coming that should start that should be at the core and that's kind of how we approach the purchase interface now purchase is downloadable it's like WordPress you download it so actually getting people to upgrade is kind of hard because they've then got it and you have to kind of encourage them to upgrade but we focus a lot of effort on the admin experience because I think that content editors a lot of the time are kind of the forgotten users of websites we worry about the the web pages on the front end and we worry about us as developers and the people editing the content are kind of like yeah we've got this awful CMS to use so we try and get away from that so obviously we care a lot about admin UI so it was very tempting for us to want to create a really snazzy JavaScript UI and do also to clever tricks and we launched purchase six years ago and we've continued to iterate and we do use JavaScript in our UI because some things are enhanced by it like assets management and so on yet the whole experience works without JavaScript because that's what we started with we started with this very plain user interface that just worked it all works without JavaScript and one of the things we love is every now and again we'll have someone drop us a line and they'll say oh you know I delivered this site with Perch to an organization and then they told me they've got a user who needs to use the CMS who uses a screen reader and I was really worried because these things don't normally work with screen readers but they're telling me how great it is now to me that is a win if someone with a screen reader can use our stuff without us we've never tested it with a screen reader I'd love to do full scale accessibility testing on it but we haven't as yet but because we've built it in a progressively enhanced way someone with a screen reader can use our software and we kind of got that for free essentially just by doing things the right way and I love the fact that despite the fact that there's two of us and we're trying to do a million things by working in a good way and I think that's really cool but what about all those third party plugins frameworks and so on so how do they fit in they're not all bad how do we sensibly combine them with our work now I imagine that most people here understand this idea of not invented here syndrome this is the idea that programmers will reject any solution that isn't developed in-house and you get this leveled at you if you build something that's different to what is already out there that there's another way of solving that problem people will say you're reinventing the wheel why are you doing that and sometimes that's true in fact there's a strange thing that goes on whereas the less I know about the subject the more I am likely to write my own terrible code to solve the problem it's like you know we all do it, we all try and reinvent the wheel but I think there's a flip side we can end up so reliant on third party solutions that we stop innovating we stop thinking creatively around our problems we just reach for the nearest plugin we search for something that does more or less what we need and to be honest to me the best thing about this job is the creativity is the creating cool stuff not just you know cobbling together stuff that other people have written so if you find some framework or plugin and it kind of fits the bill and you're really busy and you need to get something shipped you think well we'll use this now and replace it later and that's actually a decent way to work isn't it you can say well let's use this and we know we want to do something better but we can use this for now so what you want to do then is to avoid that plugin becoming a dependency in your project avoid basing great chunks of your workflow on a third party tool because that might change it might change in a way that's not useful for you or you might discover that it has some major problem on mobile or accessibility or whatever so don't base great chunks of your app on some third party tool the dependency inversion principle works really well here the first of these two principles is most relevant to those who are on the front end high level modules should not depend on low level modules both should depend on abstractions and if we go back to the early example of the Susie grid that's a reasonable example of a front end shortcut that doesn't create a dependency because we don't need to add anything to our markup or content if we use Susie we end up with CSS when we use Susie so we could remove the Susie grid or we could remove the SAS part of the tool chain completely and we'd still end up with semantic HTML and CSS so that seems like a really good way to use a tool it's there we've used it it's short cut the difficulty of creating layout on the web but we can pull it out of the workflow and our site still runs it's absolutely fine and I think a progressively enhanced approach is a good example of this dependency inversion in as much as it applies to front end development you might have a javascript implementation that hijacks regular HTML5 video and add some stuff a static map is hijacked by a draggable and zoomable map a form interface that allows you to save and add another and you're using using javascript to really just post to the browser but you could just have you know people would post that would still work without the javascript we can do this stuff we can work in a progressively enhanced way and then if for some reason the javascript doesn't load and ultimately you know everyone is a user without javascript until the javascript's loaded and it might not load it all still works and I know when you're pushed for time it is very very tempting just to get things together the quickest way you know how and you sort of think well if I can't do everything if I can't make this perfect why am I bothering doing anything at all but I think any steps you take towards progressive enhancement are going to be beneficial to someone so do the things that you can do with the time that you've got this is a great post Jason Garber he wrote some really excellent and sensible posts about the practical application of progressive enhancement with this understanding that what we do is on a continuum it's not terrible and perfect it's kind of like you know we're all on different levels of that and the sites that I build are all on different levels of that so to recap learn and importantly teach other people these core skills HTML, CSS and javascript please maintain interest in emerging specifications and make sure you don't end up clinging to outdated abstractions because you've become so reliant upon them there's absolutely a place for the expert front end developer instead of learning how to cope with browser bugs though you know become an expert on performance as web usage goes more and more mobile that's going to become more and more important becoming an expert in making well performing applications is going to be incredibly important in the future when making decisions about these frameworks, plugins and systems ask yourself is the output as good as if you'd written it by hand or how close can you get to that is this tool just speeding things up and if it is, you know what are the compromises and other compromises you're happy to make while there's a ton of great code to draw on out there and I'm sure a lot of you are writing that code and making it public try and avoid sort of inventing the wheel and make sure that doesn't prevent you from creating your own new things the role of this expert front end developer hasn't gone away and I think it's so much more than it was ten years ago we're incredibly fortunate and we have the ability to really change the way people use digital products to how they interact with things and how they interact with each other online and there's so much that we can do and make and there's so much more around the corner so don't stop playing and don't stop experimenting and pushing things forward because we've come so far in the last few years I might be you know I've been doing this since the year dot but I am still really really enthusiastic and interested in front end development as kind of a craft and what we can do I'm excited about the next ten years I'm excited about where we'll go with this but thank you so much for listening I really hope you enjoy the next couple of days there's some great stuff coming up my slides and a load of links are available at that URL and I'm hanging around so I'll be very happy to have a chat with anyone if you'd like to. Thank you


So, good morning and welcome back to NPTEL lecture series on classics in total synthesis. We have been talking about quite a few total synthesis of triquinones and today also we will continue and complete discussion on more total synthesis of triquinones. Today we will start with our home grown total synthesis where we discuss total synthesis of 3 triquinones, actually 2 triquinones and one having a diquinone moiety reported by none other than Prof. Gowadhan Mehta and first let us start with known molecule Hirsuteen and how his group has synthesized this molecule. He has used a unique reaction, now we all know what is metathesis, ring closing metathesis, enamel metathesis, ring opening ring closing metathesis is all. But in 80s, but that to early 80s he is the one who introduced the term thermal metathesis, so where you know it undergoes a retro 2 plus 2 under very high temperature, one can even call it as flash vacuum pyrolysis to get triquinones, so that is a key reaction in many of his total synthesis of triquinones and related natural products. So, let us see how he did a retro synthesis of this Hirsuteen molecule as you know when you have a double bond and the double bond can be obtained from alcohol via oxidation and vitic reaction and this can be obtained from this keto intermediate, this keto intermediate is required which we will come to know when we talk about the synthesis, so you can remove the carbonyl group in 2-3 steps and at the same time after doing that you can remove the mom group to get the hydroxyl and this can be obtained from the diketone, so you can see there are 2 carbonyl groups and one is you know highly sterically hindered position, so one can easily manipulate the other ketone, so that is what you have seen in this retrosynthetic disconnection and this can be obtained from cyclopentadiene, so this is a well known but I will come to that how he has done, so it involves 5 steps to come to the triquinone moiety, first step is 4 plus 2 cycloaddition between cyclopentadiene and 1, 4 benzoquinone to get this tricyclic compound and this tricyclic compound if you redraw like this, now you can see this double bond and this double bond they are close to each other and this upon photochemical reaction can undergo an intramolecular 2 plus 2 photocycloaddition to give this highly strained compound, okay basically if you look at this in 2 steps one can get this highly strained compound, so this was reported by Cookson, so it is called Cookson's Dione but what is important was Metha's group used this Cookson Dione for a very important transformation as I already mentioned called thermal metathesis, this upon flash vacuum pyrolysis if you heat it at 600 degrees this undergoes a retro 2 plus 2, so if you do like this you will get this tricyclic diene diome, tricyclic diene diome, this you can also write for better understanding, better visualization you can write like this, clearly from cyclopentadiene and benzoquinone one can get this linear triquinone, okay linear triquinone core structure basically in 3 steps, so what are the key reactions and what are the key take away from this whole sequence, one as I said so first time the thermal metathesis was used to get this tricyclic compound, two people often talk about atom economy okay this is a buzz word in the last 2 decades, if you look at the whole transformation you started with 5 plus 6, 6 carbons and you can see in the product you have this same 5 plus 6, 11 carbon atoms all the hydrogen atoms, all the oxygen atoms all are retained, so it is a 100% atom economy reaction over 3 steps, so this is a second beauty of this whole sequence which is group exploited in the total synthesis of many natural products, now let us see how this core structure was taken further for the completion of total synthesis of Hirsutine, okay, so that was the key step, so instead of benzoquinone if you use 2, 5, okay 2, 5 dimethylbenzoquinone you will get this tricyclic intermediate, this upon intramolecular 2 plus 2 cycloaddition with under photochemical condition will give you this trained compound, okay, then you do the flash vacuum pyrolysis, you get this tricyclic compound where compared to the triquinone which we discussed in the previous slide, we have 2 methyl groups in addition, one is angular methyl group, other one is attached to an sp2 carbons, okay, so how we took this intermediate to the final compound Hirsutine, okay, so you take this diene-dione and heat it, okay, basically what he wants was these 2 hydrogens should be alpha, okay, so he could do this using thermal condition when you heat it the double bond migrates, okay and further heating it isomerizes to this more stable triquinone because this is what he wants, so by heating it for long time he could convert this into this tricyclic compound, okay, this tricyclic compound he took it and then reduce both the double bonds, okay, you have 2 double bonds and both the double bonds are reduced to get the corresponding di ketone. Next, he wanted to introduce one more methyl group here, if you look at Hirsutine, you have a dimethyl group at that carbon, so he wanted to introduce one more methyl group, obviously if you see there is another ketone and then next to that is CH2, there also one can do the deprotonation, so what he did, he treated with potassium tertiary peroxide, okay, and quench with methyl iodide, so he could introduce the one more methyl to get the gem dimethyl group but he got only 50% yield which is understandable because one can also methylate at this carbon, nevertheless you could successfully isolate 50% of the required product where you have the gem dimethyl group, after having this di ketone next as you know you need to remove this carbonyl group but between these 2 carbonyl groups, this carbonyl group is more reactive because that is less sterically hindered compared to the other ketone, so what one can do, you can protect that, so protection is done through reduction, so first you reduce the carbonyl, the left hand side 5 ombitoring carbonyl to alcohol, then protect that alcohol, as ma-meter using q-nicks base, you get the corresponding ma-meter, now you have to remove the carbonyl group, how do you remove the carbonyl group, there are many methods but he chose a 3 step protocol where you reduce the ketone with LAH to get the alcohol, then that alcohol was converted into zandate, you treat with sodium hydride and conch with carbon disulfide and methyl hydride, you get the corresponding zandate, that zandate you treat with tributyltin hydride AABN, you remove the oxygen, so the right hand side 5 ombitoring is fine, the middle 5 ombitoring is fine, now what he has to do is to remove the protecting group, oxidize the alcohol and do the wittig to complete the total synthesis of Hirsutin, so the mahm group was removed under acidic condition to get the corresponding secondary alcohol, the secondary alcohol was oxidized with PCC to get the ketone, then simple methyl wittig gave that final natural product that is Hirsutin, so if you look at this synthesis, overall the key step was the photothermal metathetic sequence, so this sequence also as I mentioned is one of the earliest 100% atom economy reaction and the starting material of course the tricyclic compound was prepared from cyclopentadiene and 2-5-dimethylparabensoquinone using Diels-Alder cycloaddition reaction, overall this group took 12 longest linear steps to complete the total synthesis of Hirsutin and the yield was about 13%, so 13% yield for this molecule is quite competitive and that is mainly because of the 100% atom economy reaction. So now we will move to another natural product which is not a tricunin but it has a di-cunin substructure plus one 6-ohm-bird ring and another 6-ohm-bird ring having a heteroatom, so this molecule is called deoxy-magalininone, you can see there are 2 5-ohm-bird rings and one 6-ohm-bird ring and another 6-ohm-bird ring which you can call it as n-methylpiperadiene. So since we are talking about tricunins, I just want to extend that method which Professor Mehta has used, I want to discuss the extension of Professor Mehta's methodology to synthesize such molecules. So this was the first total synthesis reported by Professor Mehta and in addition to the standard metathesis, thermal metathesis reaction, he has also used an intramolecular micro addition reaction as the key reaction to construct this 6-ohm-bird ring. Let us see how he has done this, first let us look at the tetrosynthetic analysis. So this molecule as you know you can easily obtain from this diketone. So if you look at the diketone between 5-ohm-bird and 6-ohm-bird, 6-ohm-bird is little bit more reactive, so you can do a vitic on this ketone followed by isomerization, you will get a natural product. And this diketone if you look at carefully it is 1, 2, 3, 4, 5, it is a 1-5 diketone. So whenever you see a 1-5 diketone in a natural product immediately the Michael reaction should come to your mind. So obviously the precursor for this could be the corresponding diketone. So if you remove this and if you have double bond then it can generate anion and it can undergo Michael addition. And the same time the other side 6-ohm-bird ring if you see that is n-methyl piperidine if you osanolize this double bond, if you cleave that double bond and if you get a dialdihyde then one can think about reductive methylation on this dialdihyde or you can reduce that aldihyde to alcohol convert that into leaving group then treatment with methyl amine one can get this compound. And this compound can be obtained from here if you convert this into a methyl ketone normally this is then using Wacker process. So the terminal double bond can be selectively oxidized under Wacker process to get the corresponding methyl ketone and that methyl ketone can undergo intramolecular Michael addition reaction. And this of course can be obtained from this tricyclic compound where you have an enone and one can think about using another Michael addition to introduce this pore carbon unit. And this of course can be obtained from cyclopentadiene and benzoquinone. So that is why I thought I should discuss this if you look at this whole synthesis it also goes through the trikonic point okay. So this compound we already discussed this is obtained from cyclopentadiene, parabenzoquinone 4 plus 2 cycloaddition followed by 2 plus 2 cycloaddition you get this compound. Now you do pyrolysis you will get the tricycline but you if you look at the previous example one side you do not have the ketone so you have to remove one of the carbonyl groups and that is best achieved at this stage. So this is symmetrical diketone so one of the carbonyl groups is protected as ketone then the other carbonyl is reduced to get the corresponding alcohol and basically you have to deoxygenate okay the carbonyl ketone group should be removed. So it went through 3 steps reduction followed by conversion of the hydroxyl group into bromide and that bromide during the conversion of hydroxyl group into bromide under HBR condition not only the hydroxyl group was converted into bromide by using a SN2 reaction the ketol also got cleaned because you are using acidic condition okay. So again he has to protect the ketone as ketol then remove the bromide under reductive condition that is metal ammonia condition to remove the bromide so now you have this remove the ketol to get the ketone then flash vacuum pyrolysis at high temperature you get this compound and if you look at this this is dienone okay normally you get a ketone one more ketone here that ketone was selectively removed using this process. So once you have that then the double bond should be migrated see basically what you need this double bond has to come here. So that was best achieved by reflexing heating in benzyl benzoate at 300 degrees the double bond could be successfully migrated to another alpha beta unsaturated ketone but this time the double bond is tetrasubstituted this double bond if you look at this tetrasubstituted whereas here it is disubstituted. Next step is the key 1, 4 addition so that was done using 4-butanol magnesium bromide and copress bromide dimethyl sulfide complex so that added this 4-carbon unit and as I said this once you do this next step is the conversion of the terminal olefin to methyl ketone which is normally done using Wacker process but before doing that you have to introduce a double bond here then only the Wacker process will give methyl ketone and that methyl ketone can undergo intramolecular Michael reaction. So the double bond was introduced in the following standard protocol first LDA phenyl celluline chloride you introduce as phenyl selenol group at this carbon and then oxidation to phenyl selenol oxide and elimination of phenyl selenol oxide gives that double bond then you carry out the Wacker process to get the corresponding methyl ketone this on treatment with sodium hydride it generates anion and then undergoes Michael reaction to give this tricyclic compound okay. Having got that next this 5-amper ring should be converted into the 6-amper ring with hetero atom that is the hetero atom is nitrogen and in order to do that you need to host analysis or you need to dihydroxylate and then cleave with sodium peroxide. Before that one has to protect these 2 carbonate groups. So that was the first step protect those 2 ketones as ketol then you do host analysis of the double bond to get aldehyde in situ you reduce that aldehyde you get the diol the diol was treated with methyl chloride to get the dimesolate so basically what you are doing is you are converting the hydroxyl group into better leaving group this upon treatment with methyl amine if you reflect with methyl amine it will undergo 2 Sn2 displacement to get okay. So now what is required you have to remove both the ketol you have to remove both the ketol to get the di ketone yes that was done under acidic condition then selectively you have to do vitic reaction on the 6-amper ring in the presence of 5-amper ring yes you can do that and basically the exocyclic double bond has to be isomerized and that was done by treating with para toluene sulfonic acid. So though this is not a trichunane but if you look at the total synthesis it went through trichunane and though that trichunane also was obtained through a thermal metathesis which was developed by Prasad Mehta's group. So this synthesis was reported in 1990 and the starting material as you know is a cyclopentadiene and benzoquinone and the key step is also intramolecular micro addition to get this deoxy majelinole. Overall it took 11 longest linear steps and yield was little lower but considering the complexity of the molecule 2% overall yield is really good and this way he could successfully extend the methodology developed in his laboratory to extend his methodology not only to trichunane but also to other natural products having a diquinane as a substructure okay. The 2 natural products which we discussed reported by Prasad Mehta's group they are recipe. The third synthesis which is about total synthesis of another trichunane is a Kairan approach where he started with the Kairan starting material called limoni and the natural product which he synthesized is ceratopic now okay. This was isolated in 1988 and it has 5 contiguous stereo centers as usual for a typical trichunane framework. So it has cis ante, cis configuration and for him the key step is as I said not like the earlier 2 synthesis where he has used thermal metathesis here it is a Kairan approach and in the Kairan approach he started with limoni as a Kairan starting material and he also used 2 key reactions. One is Johnson's ortho ester glycine rearrangement the other one is acid mediated or catalyzed diaso ketone olefin cyclization to get a cyclopropane followed by opening up the cyclopropane to get the fibromedric okay. Let us see how we did and this natural product first he wanted to introduce a double bond and a carbonyl group here so that he wanted to use as a handle for further disconnection and this molecule can be obtained from acid catalyzed intramolecular fredelcups like cyclization okay. So I will come to that when I talk about this how this reaction took place and this can be obtained from this diol okay. So if you look at this diol one can selectively oxidize the primary alcohol once you oxidize this alcohol will attack and then it will form a lactol that lactol will be oxidized to the corresponding lactol and this can be obtained from the corresponding ketone okay and this is where the first key step that is intramolecular diaso ketone addition to the double bond to get a cyclopropane and opening up cyclopropane gives a fibromedric and this can be obtained from the second key reaction that is Johnson's ortho ester glycine rearrangement that can be obtained from this alcohol which in turn can be obtained from limonium and this process is more okay this process is more. Let us see how he accomplished this before that I just briefly describe the mechanism of Johnson ortho ester glycine rearrangement. So you can take trialkyl ortho acetate so for example if you take primethyl ortho acetate if you treat with acid one of the methoxy group will be protonated and the lone pair on one of the oxygen of methoxy group will push the methanol out. So you generate an axonium ion and the allylic alcohol okay so allylic alcohol normally is required for glycine rearrangement will intermolecularly attack this carbonyl carbon to form this intermediate so this again it will undergo loss of another methanol under acidic condition to give this 1,5 diene and that can be redrawn like this and that will undergo 3,3 sigma tropic rearrangement which is nothing but glycine rearrangement to give this alpha, beta, gamma delta, gamma delta unsaturated ester as you know glycine rearrangement will give gamma delta unsaturated ester, gamma delta unsaturated aldehyde, gamma delta unsaturated carboxylic acid okay so that is the key step and let us see how we prepare the starting material we started with limonene and selective dihydroxylation of this trisubstituted double bond okay so you have 2 double bonds one trisubstituted other one is 1,1 disubstituted so the trisubstituted double bond was epoxidized and then opened with sulfuric acid dilute sulfuric acid to get the corresponding triol and that was cleaved with sodium peroxide to get the keto aldehyde because if you cleave this you get the corresponding keto aldehyde then reduce the double bond so to get isopropyl group and followed by intramolecular aldol reaction will give you the 5 umber ring with aldehyde then simple reduction of the aldehyde with sodium borogate cerium chloride that is called luscious reduction that gives the corresponding allylic alcohol. This allylic alcohol upon glycine rearrangement will give you the corresponding gamma delta unsaturated ester okay this gamma delta unsaturated ester can be hydrolyzed to the corresponding carboxylic acid before that as I said you do not want the double bond here the double bond should go inside so that the diacyl ketone can be added to this double bond so the migration of the double bond to internal double bond was done under acidic condition that is Lewis acidic condition now hydrolyzed the ester to carboxylic acid and that carboxylic acid upon treatment with oxalyl chloride you get the corresponding acid chloride this upon treatment with diacyl methane you get the corresponding diacyl ketone. This diacyl ketone then on treatment with BF3O3 undergoes 3 steps in one part the first step is the formation of cyclopropanation okay it undergoes cyclopropanation okay it undergoes cyclopropanation. Now under this acidic condition the cyclopropane opens so you get this compound okay so in this particular step you can see first the diacyl compound form the cyclopropane and then it opened and in the process your quaternary carbon is fixed stereochemically quaternary carbon is fixed and also formed a 5-unbuttering then this 5-carbon unit was added the bromine lithium exchange was done by treating with lithium and it added to the ketone to get the alcohol now removal of the TBS will give the primary alcohol and the primary alcohol can be oxidized and then cyclized but you do not need this you need a ketone is not it. So do a was analysis you get a ketone then remove the TBS group when you remove the TBS group that for that time one can separate these two okay you can see a beta alcohol and alpha alcohol one can separate these two. Now if you treat with T-POP that is a tetra N-propyl ammonium periutonate NMO NMO is a co-oxidant and you use catalytic amount of T-POP so that will oxidize the primary alcohol to aldehyde and immediately the tertiary alcohol will cyclize to form the lactol and further oxidation gives the corresponding lactone okay. So once you have this lactone this on treatment with methane sulphonic acid and P2O5. So what will happen it will hydrolyze and you will get a corresponding you can see either this double bond or both will undergo intermolecular total gas like cyclization to give these two tricules okay you can the only difference is the location of the carbonyl group okay. Take the required one reduce with sodium boracate methanol so this is enome this is simple cyclopentanone one can reduce the cyclopentanone to get the alcohol and now you treat with lithium and liquid ammonia. So what will happen lithium and liquid ammonia the double bond will be reduced and this carbonyl group also will be reduced. So you get a diol this diol upon treatment with acetic anhydride you get the corresponding diacetate. Then he uses the last key reaction where in one step he removes this acetate completely but hydrolyzes only the acetate to get alcohol. How did he do? He did with sodium in HMP. So this is highly regioselective reductive deacetylation. So the reductive deacetylation takes place here but at the same time this hydrolyzes only the acetate to give the natural product that is serotonin. So to summarize if you look at this total synthesis he started with commercially available R-lemonin a monitor beam and then in few steps you could convert that limonin into 5-hombardering and then he used two key reactions one is aqueous tricenter arrangement then acid catalyzed diacetyl ketone olefin cyclization to form a cyclopropane followed by opening of the cyclopropane to construct the second 5-hombardering and then third 5-hombardering was constructed using acid catalyzed cyclization. Overall he took 14 steps to complete the total synthesis and close to 1% overall yield he could successfully complete the synthesis. So we will have one more lecture on synthesis of trichonin we have already discussed many synthesis of trichonin because if you look at the synthesis of trichonin there are many ways one can make a 5-hombardering. So in the next lecture we will talk about few more methods and then one more total synthesis and complete the total synthesis of trichonin.


Hello, I'm Morgan with the Temple of Ascending Flame, and today we will explore the Spider Goddess, Arachna, Weaver of the Web in the Void. The Spider Goddess has numerous stefic masks throughout human cultures and history, for the Greeks, Arachna, for the Mayans, to Atahua Khan, for some Native American tribes, Grandmother, in West Africa a male mask, Anansi. The Nazca's of ancient Peru depicted spiders in their artwork and created the Nazca lines, one of which was a giant spider, only visible from airborne flight. You can see it in a picture here to the right. The spider is an ancient symbol of mystery and fate, poison and healing, growth and destruction, and thus, transformation. Spider magic generally corresponds to weaving, and depending on the tradition, can include weaving fate, destiny, spells and rituals. In modern times, spider magic also focuses on the manipulation of time and space, the transformation of the cells, the spelling illusion, and the manipulation of reality at its root. The story of Arachna is a tale that comes to us from Ovid, a Roman poet, from book six of his epic poem Metamorphosis. Arachna was a beautiful and talented Greek Weaver, very prideful of her weaving prowess. She challenged the goddess Athena to a weaving contest. Athena will have a tapestry depicting the folly of mortals, comparing themselves to the gods. Arachna will have a tapestry depicting the gods abuse and tricking of human kind. In particular, Zeus tricking and sexually abusing mortal women. Athena was outraged by this, yet could find not a single flaw in Arachna's weave so beautiful and perfect it was. In anger, Athena beat Arachna with her weaving shuttle, humiliated and shattered. Arachna hung herself in despair. Not satisfied with such an easy end, Athena brought Arachna back to life, using the blood of Hakate, turning her into a spider. Thus, Arachna and her children were fated to weave for all time. It is from this Greek word Arachna that we derive words for and related to spiders, such as arachnid and arachnophobia, the fear of spiders. Interestingly, the Babylonians likely dropped a 13th constellation in favor of 12, because 360 degrees divided by 12 comes out to a nice even 30-degree arc. At that time, there was a strong patriarchal push that helped influence the dropping of the 13th constellation, one representing female divinity. Some believe that the 13th dropped constellation was at representing Arachna, the spider goddess. James Woh has made the following interesting suggestion. The rightful place of Arachna, the spider goddess, and thus the missing 13th sign of the zodiac, is between Taurus and Gemini, from May 16 to June 13. It is also very interesting to note that the Native American Hopi tribe speaks of a spider deity and constellation that will dominate the starry sky someday, and whose presence will signal that the end times are at hand. Let's talk about Kenneth Grant in the new Isis Lodge. The lodge was instrumental in contributing to the modern gnosis of the spider goddess and her current. Started by Kenneth Grant in 1954, and after receiving a charter to open an OTO lodge in 1951, and continuing until the early 60s, the lodge was based on the Setian current, which was aligned with the star Sirius, also known to those on the left hand path is the Black Sun, or the Sun behind the Sun. It was during this time channeled information was received by several members of the lodge, producing the Book of the Spider, later published as part of the 9th Arch. Grant believed that this material came down to earth from a planet he identified with the thalamic goddess Nuit, and the entity delivering this information was Akbish, the spider goddess. Akbish is Kaldian for spider. Transmission was received in two parts, and each section comprised 29 verses. The 29th tunnel of Set, Golilephi corresponds to the tarot card, the moon, on the other side of the tree, the sign of Pisces, and the Hebrew letter Kulf, which corresponds to the back of a head, the subconscious mind, and the reptilian brain. We can concatenate 29 to 11, the number of the Klipov, and the number 58, that is, two parts, 29 verses each, concatenates to the power or shakti of 13, the red star of the lunar crescent. The two numbers 58 and 29 added together form 87, the number of the sphere of the moon, and a cup or chalice. For the temple of ascending flame, the power of the spider goddess Arachna is the magical venom that is deadly to mundane consciousness, but essential in the formula of initiation, as it triggers the process of transformation through the inner alchemy of the mind. Through successive injection and absorption of particular venoms, the initiate learns that all matter is illusion, and it can be poisoned, dissolved, molded, shaped, decomposed, and created anew. The world we live in is interconnected on various levels that work and interact with one another, thus weaving the web that forms the veil of illusion. What we perceive as reality is the outer picture of the whole process at a particular moment. We are in the center of this network, like a spider weaving and spreading its web across empty space. We pull strings, create new threads, and link particular points in the network, but it all happens in a random, uncontrolled way, as we can only see the outer picture, as the true structure behind it is hidden from our perception. Arachna's venom dissolves mundane consciousness and opens the way to clear seeing, showing us how to gaze through the veil of illusion and see the web itself, and how to change and manipulate the web at its roots. Her venom is deadly because it dissolves the world. All that makes up reality is revealed as illusion. Behind the outer picture, there is a web of correlations, interactions, mutual relationships between thoughts, emotions, perceptions, hopes, fears, and desires. All of them shape our personal universe, and all of them are interconnected. Most of us live as passive observers, enjoying the whole picture, or suffering from various circumstances of life, but never looking behind the illusion. The web, however, can be altered and molded, if we know the mechanisms that set all these events in motion. This is the core of the arachnian gnosis. Arachna shows us how to gaze straight into the void, behind all that we associate with reality, in its various aspects, both the day side and the night side of the capitalistic universe, into the abyss of non-manifestation, where nothing and everything exists at the same time. Why have a relationship and work with arachna? Arachna exposes us to the unknown, the unfamiliar, and shatters all perceptions of what we consider the safety zone, taking us to the root of all things. By ingesting arachna's venom and coming through painful realizations, we can live through the process changed and stronger. For the initiate whose consciousness has been poisoned with the venom of arachna, the illusion of the whole world falls apart piece by piece, revealing the truth that nothing is stable and nothing lasts. Everything changes and mutates in every single moment of existence. Each event depends on particular correlations between various acting elements. For the initiate, arachna opens the way to clear seeing, showing how to gaze through the veil of illusion and see the web itself, and how to change and manipulate it at its roots. It is not unlike neo appearing into the matrix and seeing the grand illusion of it all, and understanding how to manipulate it at its core. Arachna is the red pill that frees us from the comfortable illusion of our blue pill existence. For additional resources on arachna, or the temple of ascending flame, links are provided. For more information on arachna specifically, I recommend tree of plifoth by the temple of ascending flame. I also recommend the draconian ritual book by asinith mason, as well as her book necronomicon gnosis, which contains a large path working with the spider goddess. The intro track for this video is The Forbidden Elixir by the artist Emma Yaw. Emma Yaw's compositions are perfect for any ritual work, particularly left hand path workings. Please support his work. Check out his website and facebook page at the links provided. His music is available on apple music and Spotify. The background track for this video is Cothonos, book bish, composed by the youtube artist Call Samhara, who has graciously granted permission for use in this presentation. Please support Call Samhara by subscribing to his youtube channel at the link provided. Until next time, ho dracon, ho megas.